Usecase 1: Update the content of page
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Applied Algo">
<meta name="description"
content="Learning , algo based,appliedalgo, innovate and learn,technology,seo services ,website development">
<title>Applied Algo</title>
<link rel="stylesheet" href="/Miscellenious/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/Miscellenious/app.js"></script>
<!-- Optimization block -->
<script>
//prehiding snippet for Adobe Target with asynchronous Launch deployment
(function (g, b, d, f) { (function (a, c, d) { if (a) { var e = b.createElement("style"); e.id = c; e.innerHTML = d; a.appendChild(e) } })(b.getElementsByTagName("head")[0], "at-body-style", d); setTimeout(function () { var a = b.getElementsByTagName("head")[0]; if (a) { var c = b.getElementById("at-body-style"); c && a.removeChild(c) } }, f) })(window, document, "body {opacity: 0 !important}", 1E1);
</script>
<!-- Optimization block ends-->
<script>
digitalData = {
pageInstanceID: "Applied Algo - Dev",
page: {
pageInfo: {
pageID: document.title,
pageName: 'appliedAlgo:' + document.title,
destinationURL: encodeURIComponent(window.location.href)
},
attributes: {
project: "Launch"
}
}
};
</script>
<script>
//prehiding snippet for Adobe Target with asynchronous Launch deployment
(function (g, b, d, f) { (function (a, c, d) { if (a) { var e = b.createElement("style"); e.id = c; e.innerHTML = d; a.appendChild(e) } })(b.getElementsByTagName("head")[0], "at-body-style", d); setTimeout(function () { var a = b.getElementsByTagName("head")[0]; if (a) { var c = b.getElementById("at-body-style"); c && a.removeChild(c) } }, f) })(window, document, "body {opacity: 0 !important}", 3E3);
</script>
<script src="//assets.adobedtm.com/ed8d322a6aaa/f2ac1c55c023/launch-5b58cf1c0815.min.js" async></script>
</head>
<body>
<!-- Header -->
<!-- Header Ends -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>
<span>applied</span>
<span>A</span>
<span>L</span>
<span>G</span>
<Span>O</Span>
</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li> <a href="#hero" data-after="Home">Home</a></li>
<li> <a href="#services" data-after="Service">Services</a></li>
<li> <a href="#about" data-after="About">About Us</a></li>
<li> <a href="#contact" data-after="Contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Hero Section -->
<section id="hero">
<div class="hero container">
<div>
<h1>Welcome<span></span></h1>
<h1>to the world of <span></span></h1>
<h1>APPLIED ALGO <span></span></h1>
<!-- <a href="#" type="button" class="cta">Register Here >></a> -->
</div>
</div>
</div>
</div>
</section>
<!-- Hero section ends -->
<!-- Service section starts -->
<section id="services">
<div class="services container">
<div class="service-top">
<!-- <video src="img/vid_train.mp4"></video> -->
<h1 class="section-title">Servi<span>ces</span> </h1>
<p>
We provide online and offline training services , website development , Search engine optimization.
The training curiculum is career driven and bridging gap between academic education and professional
growth.
Focus on goal oriented learning , mindset development, gain knowledge and just not grades .
Helping indentify your passion and get aligned for a meningful and successful life.
</p>
</div>
<div class="service-bottom">
<div class="service-item">
<div class="icon">
<img src="./img/img_web.jpg" alt="icon-serv.png">
</div>
<h2>Web design & development</h2>
<p>We bring the maximum value to your business by providing web development in a scalable and
performant manner. Our
battle-tested techniques can produce useful & SEO ready sites.
Expand the reach of your business and increase your customer base, by creating your very own
e-commerce platform and
enter the global market. You can now eliminate third party cuts and take charge of your online
sales.
</p>
</div>
<div class="service-item">
<div class="icon">
<img src="./img/img_seo.jpg" alt="icon-serv.png">
</div>
<h2>SEO services</h2>
<p>We perform an in-depth audit of your website, industry niche, competitor websites & their
backlinks. This helps in
crafting a perfect SEO strategy for you by shortlisting the right keywords and identifying high
authority niche websites
for building backlinks.</p>
</div>
<div class="service-item">
<div class="icon">
<img src="./img/img_coach.jpg" alt="icon-serv.png">
</div>
<h2>Coaching</h2>
<p>Find new learning methods and competencies.
Review your curriculum to match your goals and pedagogical approach.
Look for new working methods to support the child’s individual learning process.
</p>
</div>
<div class="service-item">
<div class="icon">
<img src="./img/img_train.jpg" alt="icon-serv.png">
</div>
<h2>Professional Training</h2>
<p>Customized training program for learning, career growth or project work. </p>
</div>
</div>
</div>
</section>
<!-- Service section ends -->
<!-- Project section -->
<!-- <section id="projects">
<div class="projects container">
<div class="project-header">
<h1 class="section-title">Recent <span> Projects</span></h1>
</div>
<div class="all-project">
<div class="project-item">
<div class="project-info">
<h1>Project1</h1>
<h2>Mathematical Research</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor eius repellendus aut, atque sit qui, rerum iste, doloribus dicta maiores consequatur. Quaerat explicabo repellat voluptatem porro aliquam dicta veniam est.Molestiae laboriosam et a incidunt quos perspiciatis explicabo repellendus odio molestias fugiat impedit consectetur cupiditate nesciunt maxime aut itaque sapiente, possimus fugit corporis neque quae magni quis quidem eligendi. Iure?</p>
</div>
<div class="project-img">
<img src="/img/projects.jpg" alt="project-img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project2</h1>
<h2>Mathematical Research</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor eius repellendus aut, atque sit qui, rerum
iste, doloribus dicta maiores consequatur. Quaerat explicabo repellat voluptatem porro aliquam dicta veniam
est.Molestiae laboriosam et a incidunt quos perspiciatis explicabo repellendus odio molestias fugiat impedit
consectetur cupiditate nesciunt maxime aut itaque sapiente, possimus fugit corporis neque quae magni quis
quidem eligendi. Iure?</p>
</div>
<div class="project-img">
<img src="/img/projects.jpg" alt="project-img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project3</h1>
<h2>Mathematical Research</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor eius repellendus aut, atque sit qui, rerum
iste, doloribus dicta maiores consequatur. Quaerat explicabo repellat voluptatem porro aliquam dicta veniam
est.Molestiae laboriosam et a incidunt quos perspiciatis explicabo repellendus odio molestias fugiat impedit
consectetur cupiditate nesciunt maxime aut itaque sapiente, possimus fugit corporis neque quae magni quis
quidem eligendi. Iure?</p>
</div>
<div class="project-img">
<img src="/img/projects.jpg" alt="project-img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project4</h1>
<h2>Mathematical Research</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor eius repellendus aut, atque sit qui, rerum
iste, doloribus dicta maiores consequatur. Quaerat explicabo repellat voluptatem porro aliquam dicta veniam
est.Molestiae laboriosam et a incidunt quos perspiciatis explicabo repellendus odio molestias fugiat impedit
consectetur cupiditate nesciunt maxime aut itaque sapiente, possimus fugit corporis neque quae magni quis
quidem eligendi. Iure?</p>
</div>
<div class="project-img">
<img src="/img/projects.jpg" alt="project-img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project5</h1>
<h2>Mathematical Research</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor eius repellendus aut, atque sit qui, rerum
iste, doloribus dicta maiores consequatur. Quaerat explicabo repellat voluptatem porro aliquam dicta veniam
est.Molestiae laboriosam et a incidunt quos perspiciatis explicabo repellendus odio molestias fugiat impedit
consectetur cupiditate nesciunt maxime aut itaque sapiente, possimus fugit corporis neque quae magni quis
quidem eligendi. Iure?</p>
</div>
<div class="project-img">
<img src="/img/projects.jpg" alt="project-img">
</div>
</div>
</div>
</div>
</section> -->
<!-- Project section ends -->
<!-- About section starts -->
<section>
<div id="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
<img src="/img/aboutus.jpg" alt="">
</div>
</div>
<div class="col-right">
<h1 class="section-title">About <span>Us</span></h1>
<h2>Innovative Educational and website development company</h2>
<p>
a leading tecnology company to make education simplistic, goal oriented,create leaders and
innovators, and generates new
knowledge for society and industry.
</p>
<!-- <a href="#" class="cta">Download</a> -->
</div>
</div>
</div>
</section>
<!-- About section ends -->
<!-- Footer -->
<section id="footer">
<div class="footer container">
<!-- Contact section begins -->
<div class="contact container">
<div>
<h1 class="section-title">Contact <span>Us</span></h1>
</div>
<div class="contact-items">
<div class="contact-item">
<div class="contact-info"></div>
<h1>Email us</h1>
<h2>sales@appliedalgo.com</h2>
</div>
</div>
</div>
<!-- Contact section ends -->
<h2>Innvoate and design</h2>
<p>copyrigtht © 2020 Applied Algo. All right reserved.</p>
</div>
</section>
<!-- Footer ends -->
</body>
</html>
jQuery:
var checkjQueryExist = setInterval(function () {
if (window.jQuery) {
$("#header .nav-list ul a").html("CONTACT");
clearInterval(checkjQueryExist);
}
}, 100);
CSS:
/* courtsey - https://www.youtube.com/watch?v=ZFQkb26UD1Y */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: "Montserrat", sans-serif;
font-weight: 500;
scroll-behavior: smooth;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img{
height: 100%;
width: 100%;
object-fit: cover;
}
p{
font-size: 1.5rem;
color: white;
line-height: 1.9rem;
}
.section-title{
font-size: 4rem;
font-weight: 300;
color:black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
}
.section-title span{
color:crimson;
}
.cta {
display: inline-block;
padding: 10px 30px;
color: white;
background-color: crimson;
border: 2px solid crimson;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
margin-top: 30px;
transition: 0.3s ease;
transition-property: background-color, color;
}
.cta:hover {
color: crimson;
background-color: white;
}
.brand h1{
font-size: 3rem;
text-transform: uppercase;
color: white;
}
.brand a{
text-decoration: none;
}
.brand h1 span{
color: crimson;
}
.brand span:nth-child(1) {
color: blue;
}
/* Header section */
#header{
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: auto;
}
#header .header{
min-height: 8vh;
background-color: rgba(31, 30,30, 0.24);
}
.header .nav-bar{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
max-width: 1300px;
padding: 0 10px;
}
#header .nav-list ul{
list-style: none;
position: absolute;
background-color: rgb(31, 30,30);
width: 100vw;
height: 100vh;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
overflow-x: hidden;
transition: .5s ease left;
}
#header .nav-list ul.active{
left: 100%;
}
#header .nav-list ul a{
font-size: 2.5rem;
font-weight: 500;
letter-spacing: .2rem;
text-decoration: none;
color: white;
text-transform: uppercase;
padding: 20px;
display: block;
}
#header .nav-list ul a::after{
content: attr(data-after);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
color: rgba(240, 248, 255, 0.021);
font-size: 13rem;
letter-spacing: 50px;
z-index: -1;
}
#header .nav-list ul li:hover a::after{
transform: translate(-50%, -50%) scale(1);
letter-spacing: initial;
transition: .3s ease letter-spacing;
}
#header .nav-list ul li:hover a{
color: crimson;
}
#header .hamburger{
height: 6opx;
width: 60px;
display: inline-block;
/* border: 1px solid white;
border-radius: 100%; */
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
cursor: pointer;
transform: scale(.8);
margin-right: 20px;
}
#header .hamburger::after{
position: absolute;
content: '';
height: 100%;
width: 100%;
/* border-radius: 50%;
border:2px solid white ; */
}
#header .hamburger .bar{
height: 2px;
width: 30px;
position: relative;
background-color: white;
z-index: -1;
}
#header .hamburger .bar::after, #header .hamburger .bar::before{
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
background-color: white;
transition: .3s ease;
transition-property: top, bottom;
}
#header .hamburger .bar::after{
top: 8px;
}
#header .hamburger .bar::before{
bottom: 8px;
}
#header .hamburger.active .bar::before {
bottom: 0;
}
#header .hamburger.active .bar::after{
top: 0;
}
/* Header section ends*/
/* Hero Section starts */
#hero {
background-image: url(/img/study-bg-0.jpg);
background-size: cover;
position: relative;
}
#hero::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgb(190, 39, 39);
opacity: 0.7;
z-index: -1;
}
#hero .hero {
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: 50px;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 4rem;
position: relative;
color: transparent;
animation: text_reveal 0.5s ease forwards;
animation-delay: 1.5s;
}
#hero h1:nth-child(1) {
animation-delay: 1.5s;
}
#hero h1:nth-child(2) {
animation-delay: 2.5s;
}
#hero h1:nth-child(3) {
animation: text_reveal_name 0.5s ease forwards;
fill-mode;
animation-delay: 3.5s;
}
#hero h1 span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: 1s;
}
#hero h1:nth-child(1) span {
animation-delay: 1s;
}
#hero h1:nth-child(2) span {
animation-delay: 2s;
}
#hero h1:nth-child(3) span {
animation-delay: 3s;
}
/* Modal Register form */
* {box-sizing: border-box}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: #474e5d;
padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* Style the horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
/* Model Regiserform */
/* Hero Section ends*/
/* service section */
#services{
}
#services .services{
flex-direction: column;
text-align: center;
max-width: 1500px;
margin: 0 auto;
padding: 200px 0;
}
#services .service-top p{
font-size:1.4rem;
line-height: 2.5rem;
margin-top: 5px;
font-weight: 300;
letter-spacing: 0.2rem;
color: black;
}
#services .service-bottm{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}
#services .service-item{
flex-basis: 80%;
display:flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding:30px;
border-radius:10px;
background-image: url(/img/tution.jpg );
background-size: cover;
margin:10px 5%;
position: relative;
z-index: -1;
overflow: hidden;
}
#services .service-item::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgb(148, 126, 126);
opacity: 0.2;
z-index: -1;
}
#services .service-bottm .icon {
height: 50px;
width: 50px;
margin-bottom: 20px;
}
#services .service-item h2{
font-size: 2rem;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
}
#services .service-item p{
color: white;
text-align: left;
}
/* service section ends */
/* Project section starts */
#projects .projects{
flex-direction: column;
max-width: 1200px;
margin:0 auto;
padding: 100px 0;
}
#projects .projects-header{
margin-bottom: 50px;
}
#projects .all-projects{
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#projects .project-item{
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 80%;
margin:20px auto;
overflow: hidden;
border-radius: 10px;
}
#projects .project-info{
padding: 30px;
flex-basis: 50%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(60deg,#29323c 0%, #485563 100%);
color: white;
}
#projects .project-info h1{
font-size: 1.8rem;
font-weight: 500;
margin-top: 10px;
}
#projects .project-img{
flex-basis:50% ;
height: 300px;
overflow: hidden;
position: relative;
}
#projects .project-img::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #29323c 0%, #485563);
opacity: .7;
}
#projects .project-img img{
transition: .3s ease transform;
}
#projects .project-item:hover .project-img img{
transform: scale(1.1); /* hover effect */
}
/* Project section ends */
/* About section start */
#about .about{
flex-direction: column-reverse;
text-align:center ;
max-width: 1200px;
margin:0 auto;
padding: 10px 20px;
}
#about .col-lef{
width: 250px;
height: 360px;
}
#about .col-right{
width: 100%;
}
#about .col-right h2{
font-size: 1/8rem;
font-weight: 500;
letter-spacing:.2 rem ;
margin-bottom: 10px;
}
#about .col-right p{
margin-bottom: 20px;
color: black;
}
#about .col-right .cta{
color: black;
margin-bottom: 50px;
padding: 10px 20px;
font-size: 2rem;
text-decoration: none;
}
/* About section ends */
/* Contact section begins */
#footer .contact{
flex-direction: column;
max-width: 600px;
margin: 0 auto;
}
#footer .contact-items{
width: 90%;
}
#footer .contact-item{
width: 80%;
text-align: center;
border-radius: 10px;
padding: 5px;
margin: 5px;
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* box-shadow: 0px 0px 18px 0 black; */
}
#footer .contact-info h1{
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 5px;
}
#footer .contact-info h2{
font-size: 1.3rem;
line-height: 2rem;
font-weight: 500;
}
/* Contact section ends */
/* Footer section */
#footer{
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
}
#footer .footer {
min-height: 300px;
flex-direction: column;
padding-top: 10px;
padding-bottom: 10px;
}
#footer h2{
color: white;
font-weight: 500;
font-size: 1.8rem;
letter-spacing: .1rem;
margin-top: 10px;
margin-bottom: 10px;
margin-bottom: 10px;
}
#footer .social-icon{
display: flex;
margin-bottom: 30px;
}
#footer .social-item{
height: 50px;
width: 50px;
margin-bottom: 0 10px;
}
#footer .social-item img{
filter: grayscale(1);
transition: .3s ease filter;
}
#footer .social-item:hover img{
filter: greyscale(0);
}
/* Footer section ends */
/* Kyeframes */
@keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0%;
left: 100%;
}
}
@keyframes text_reveal {
100% {
color: white;
}
}
@keyframes text_reveal_name {
100% {
color: crimson;
font-weight: 500px;
}
}
/* Kyeframes ends*/
/* Media query for tablets */
@media only screen and (min-width:768px){
.cta{
font-size: 2.5rem;
padding: 20px 60px;
}
h1 .section-title{
font-size: 6rem;
}
/* Hero */
#hero h1{
font-size: 7rem;
}
/* Hero Ends */
/* Service section*/
#services .service-item{
flex-basis: 45%;
}
/* End Service section*/
}
/* End Media query for tablets */
/* Media query for Desktop */
@media only screen and (min-width: 1200px){
/* header */
#header .hamburger{
display: none;
}
#header .nav-list ul{
position: initial;
display: block;
height: auto;
width: fit-content;
background-color: transparent;
}
#header .nav-list ul li{
display: inline-block;
}
#header .nav-list ul a{
font-size: 1.8rem;
}
#header .nav-list ul a::after{
display: none;
}
/* End header */
#services .service-bottm .service-item{
flex-basis: 22%;
margin: 1.5%;
}
}
/* End Media query for desktop */
No comments:
Post a Comment