If you want to download the source code then click here
In this landing page, I have also added some new functionality like morph animation, background blur animation, menu hover effect, and fadeIn image slider using jquery cycle slider, so you can see its code and example below. and i’m using only html, css and jquery cycle plugin.
First you have to setup html structure after that i will put its code below. You can copy it to your file.
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins&display=swap" rel="stylesheet">
<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- CYCLE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script>Basic structure of HTML But I have attached the necessary links in it like jquery, google fonts, jquery cycle plugin, all these links I have attached.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins&display=swap" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
font-family: 'Playfair Display', serif;
color: #000;
overflow-x: hidden;
}
</style>
</head>
<body>
<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- CYCLE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script>
<script>
// JS WRITE HERE
</script>
</body>
</html>Above I have added the structure of HTML and the link of google fonts, jquery and jquery cycle plugin is also given above. If you copy the HTML structure, then you do not need to add the links because I have already added the HTML structure.
Below I have put a link to more useful videos, which you will get to learn a lot from them, then you guys must watch them and if you like them, then definitely write them.
You also might like this video
- Scroll To Top Button (Back To Top) Using Simple JAVASCRIPT | Click to Scroll Top | CSS Smooth Scroll
- Profile Card UI Design Using HTML & CSS | CSS Flip Hover Effect & Dark Light Mode | Figma UI Design
- Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class
- Menu Hover Effect | Infinite Wavy Border Animation Using Only HTML, CSS ANIMATION
- Testimonial Carousel With Slick Carousel, Review Slider | HTML,CSS & JQUERY TUTORIAL
So now I will add the HTML structure of the layout below, in which I have taken a div named main, inside it I have created the structure of the whole layout. And the div of the class named loader, I have kept it outside the main div because it is not a part of the layout of the website.
<div class="loader"></div>
<main>
<header>
<div class="logo">
<a href="#"><img src="images/logo.png" alt=""></a>
</div>
<div class="menu">
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
</header>
<div class="sec_hero">
<div class="bg_shape">
<div class="shape1"></div>
<div class="shape2"></div>
</div>
<div class="left_text">
<h1>Best in the <span>Beauty</span></h1>
<h6>Question for everyone</h6>
</div>
<div class="hero_img">
<div class="slider">
<div class="item">
<div class="item_img">
<img src="images/img1.jpg" alt="">
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="item_img">
<img src="images/img2.jpg" alt="">
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="item_img">
<img src="images/img3.jpg" alt="">
</div>
<div class="line"></div>
</div>
<div class="item">
<div class="item_img">
<img src="images/img4.jpg" alt="">
</div>
<div class="line"></div>
</div>
</div>
</div>
<div class="right_text">
<h1>Heart, soul, body</h1>
<h6>is it true?</h6>
</div>
</div>
</main>As you can see above code, in this I have taken a div tag named main in root and a div named loader class. After that, all the layout structure is written inside the main div. So you can understand by copying it. Now I am adding the code of the CSS style below, which you can see below.Â
main{
position: relative;
overflow: hidden;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
}
.menu{
width: 60px;
}
.menu a{
display: block;
}
.menu span{
width: 60px;
height: 2px;
background-color: #000;
display: table;
margin: 5px 0;
}
.menu:hover span{
animation: menu 1s ease 0s;
}
.menu:hover span:nth-child(2){
animation-delay: .2s;
}
.menu:hover span:nth-child(3){
animation-delay: .3s;
}
@keyframes menu {
30%{
width: 0;
}
}
.sec_hero{
position: relative;
max-height: 864px; /* you can change height as per your requirement */
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
padding: 90px 100px;
}
.left_text,
.right_text{
max-width: 30%;
}
.hero_img{
max-width: 40%;
position: relative;
margin: 0 auto;
}
.left_text h1,
.right_text h1{
font-size: 96px;
font-weight: 400;
text-transform: uppercase;
}
.left_text h1 span{
color: #daac62;
}
.left_text h6,
.right_text h6{
font-size: 18px;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
}
.hero_img img{
width: 100%;
position: absolute;
top: -8%;
transform: rotate(-30deg) scale(1.2);
}
.hero_img .item:nth-child(2) img{
top: 0;
transform: rotate(0deg) scale(1);
}
.hero_img .item:nth-child(3) img{
top: 0;
transform: rotate(-30deg) scale(1.150);
}
.item{
background-color: transparent !important;
}
.item_img{
width: 530px;
height: 700px;
border-radius: 100%;
overflow: hidden;
transform: rotate(30deg);
animation: morph 15s linear 0s infinite;
}
@keyframes morph {
0%{
border-radius: 45% 55% 62% 38%/53% 51% 49% 47%;
transform: rotate(15deg);
}
20%{
border-radius: 45% 55% 49% 51%/36% 51% 49% 64%;
}
40%{
border-radius: 60% 40% 57% 43%/47% 62% 38% 53%;
}
60%{
border-radius: 60% 40% 32% 68%/38% 36% 64% 62%;;
}
}
.line{
width: 530px;
height: 700px;
border: 2px solid #d8aa5e;
display: inline-block;
border-radius: 100%;
position: absolute;
top: -15px;
left: 0;
animation: morph 12s linear 0s infinite reverse;
}
.shape1{
width: 462px;
height: 462px;
background-color: #dbad63;
filter: blur(200px);
opacity: .4;
position: absolute;
top: -120px;
left: -120px;
z-index: -1;
animation: gradient 12s linear 0s infinite;
}
@keyframes gradient {
30%{
background-color: #faa4d2;
}
60%{
background-color: #fd9c8c;
}
90%{
background-color: #2d2d2d;
opacity: 1;
}
}
.shape2{
width: 462px;
height: 462px;
background-color: #faa4d2;
filter: blur(100px);
opacity: .2;
position: absolute;
right: -120px;
bottom: -120px;
z-index: -1;
animation: gradient 12s linear 0s infinite;
}
.loader{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(0);
transform-origin: center;
background-color: #daac62;
z-index: 1000;
border-radius: 100%;
animation: loader 2s ease 0s;
}
@keyframes loader {
0%, 50%{
transform: scale(2, 3.2);
}
}I have given the above css code, with the help of which the layout is being styled. You can see the property of css hover in it, then you can see the property of CSS keyframe animation. You can also see the property of Transform Rotate. So in this I have given the style of the header first. After that the menu has been styled. Then styled the hero section. After that, the style of the shape of the background is given which animation is happening in the background. Then in the last, add the style of the loader. That is, first the loader will appear, then your layout will appear.Â
Now in the last, I am calling the jquery cycle slider. In which I have called the class of slider, with the help of which the slider of our image will start. If your image slider is not working then you should check the link of jquery and the jquery cycle plugin. Because we have used a jquery plugin.
I hope you enjoyed this tutorial and you must have got to learn something new. So you must share it and subscribe to my LearnDesign youtube channel so that you can get the updates of my upcoming videos. thanks for your time.
