Responsive Yoga Website with Source Code
Today we are going to build a Responsive Yoga Website (Landing Page). In this blog, you as a beginner will learn how to make simple landing page for a Yoga website. It is easy to explore, whether on a desktop, tablet, or mobile phone as it is responsive too. We have used Html to give it as simple structure and CSS for styling the page to make it look aesthetic . We have also added some beginner friendly features/effects too. Automatic image slide and Hover effect have been used as it is good start for web development beginners .Let’s dive right in!
Step-by-Step Guide to Building a Responsive Navigation Bar
1. Setting Up the HTML Structure
First things first, we need to create the basic structure of our Landing page using HTML. Here’s what our HTML looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Codeallready.com -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Welcome Everyone -->
<!-- Lets link our css here -->
<link rel="stylesheet" href="style.css">
<!-- Also lets link Remixicon -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet" />
<title>Simple Landing page : yoga website </title>
</head>
<body>
<div id="main-container">
<div id="left-side">
<div id="lnav">
<i class="ri-arrow-left-line"></i>
<div id="lnavr">
<a href="#">About</a>
<a href="#">Work</a>
<i class="ri-instagram-fill"></i>
</div>
</div>
<!-- out-side of lnav -->
<div id="textcenter">
<h1>Hello, Yoga</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni hic dignissimos ipsa in laudantium tempore quia
recusandae totam incidunt beatae!</p>
<a href="#">Read</a>
</div>
<!-- done -->
</div>
<div id="right-side">
<div id="rtop">
<div id="rtopleft">
<div id="textright-first">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, numquam.</p>
</div>
</div>
<div id="rtopright">
<div id="textright-second">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, numquam.</p>
</div>
</div>
</div>
<div id="rbottom">
</div>
<!-- done -->
</div>
</div>
</body>
</html>Our HTML code sets up a basic structure with ” back ” icon on the top-left corner, navigation links, a Instagram linked icon which does scales up when we hover on it. we have two main links for navigation “About” and “Work”.
So basically here we have a Left side and a Right side . The left side which is 40% of the total screen has a simple navigation bar and a small hero section. The right section which is 60% of the total screen has 3 images.
We have linked with Remixicon CDN for the Icons used in this navigation bar. As it is a beginner friendly Web development we have made a small navigation bar . If you would like to focus on creating a proper responsive navigation bar then check out our blog page.
After Giving it a structure with Html, this is what it will look like without the images. Images will be added in the CSS section-
2. Styling with CSS
Next, we style our navigation bar with CSS to make it visually appealing and responsive. Here’s a breakdown of the key parts of our CSS:
Here in the CSS first we have started by giving a Boilerplate to CSS file. It will be easier for us as we won’t have to give the same CSS property again and again for different ID’s or Classes.
We now start with styling the main container first because first we want to decide what amount of area we want to give it . After that we then style the left side <div> and then the right <div>. We are slowing moving inside the details on the left side . Designing the left side navigation, the links and the icon, giving it a hover effect. The hero-section contains a <H1> tag , paragraph <p> and a link <a> tag which is shaped in a button .
Moving on to the right side , we divide the right section into two parts , right-top and right-bottom .The top part is again divided into two sections left and right. The top left and right section has hover effect on them which blurs the image and shows the text on them. The bottom images is in an animation effect where it changes the images infinitely .
/* Css boilerplate */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: roboto;
}
html,
body {
height: 100%;
width: 100%;
}
#main-container {
width: 100%;
height: 100%;
display: flex;
}
#left-side {
position: relative;
width: 40%;
height: 100%;
background-color: #d9c1d9;
}
#right-side {
width: 60%;
height: 100%;
}
#lnav {
display: flex;
justify-content: space-between;
padding: 20px 30px;
width: 100%;
}
#lnavr {
display: flex;
align-items: center;
}
#lnavr a {
margin-right: 20px;
color: #000;
font-weight: 400;
font-size: 14px;
}
#lnavr i {
color: royalblue;
cursor: pointer;
}
#lnavr i:hover {
scale: 2;
transition: all 0.3s ease;
}
/* menu done */
#left-side #textcenter {
position: absolute;
/* now we need text to be in center but inside the left side so
we need textcenter relative to left side so */
/* now text is staying inside the left side */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* in center now */
}
#textcenter h1 {
font-size: 70px;
font-weight: 800;
color: whitesmoke;
}
#textcenter p {
opacity: 0.7;
font-size: 12px;
line-height: 25px;
margin-top: 5px;
margin-bottom: 40px;
}
#textcenter a {
color: #000;
border-bottom: 1px solid #000;
padding-bottom: 2px;
font-size: 13px;
opacity: 0.8;
background-color: violet;
padding: 10px 20px;
border-radius: 10px;
outline: none;
border: none;
}
#textcenter a:hover {
background-color: bisque;
color: #000;
transition: all 0.3s ease-in-out;
outline: none;
border: none;
}
/* yes i know i have to put on the font haha*/
/* font-done */
/* lets work on the right part now */
#rtopleft {
width: 45%;
height: 100%;
background-image: url(https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
/* took from unsplash - take any of your liking but that also suit the size of the div */
background-position: center;
background-size: cover;
position: relative;
}
#rtopright {
width: 55%;
height: 100%;
background-image: url(https://images.unsplash.com/photo-1552196563-55cd4e45efb3?q=80&w=1926&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-position: center;
background-size: cover;
position: relative;
}
#rbottom {
width: 100%;
height: 50%;
background-image: url(https://images.unsplash.com/photo-1524863479829-916d8e77f114?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-position: center;
background-size: cover;
animation: slide 25s infinite; /* also remove this if you want to remove animation */
}
/* now we must use display flex on "#rtop */
#rtop {
width: 100%;
height: 50%;
display: flex;
}
#textright-second p {
width: 100%;
height: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
#textright-first p {
width: 100%;
height: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
/* Hovver + blur */
#rtopleft:hover #textright-first p {
transition: all 0.3s ease;
opacity: 1;
backdrop-filter: blur(10px);
}
#rtopright:hover #textright-second p {
transition: all 0.3s ease;
opacity: 1;
backdrop-filter: blur(10px);
}
/* Done */
/* Now lets make it responsive */
@media(max-width:650px) {
#main-container {
flex-direction: column;
}
#main-container #left-side {
width: 100%;
}
#main-container #right-side {
width: 100%;
}
#left-side #textcenter {
height: 60%;
width: 80%;
}
}
@media(max-width:450px) {
#left-side #textcenter h1 {
font-size: 50px;
}
}
/* animation --- is here ---- if you want to remove */
@keyframes slide {
10% {
background-image: url(https://images.unsplash.com/photo-1524863479829-916d8e77f114?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}
25% {
background-image: url(https://images.unsplash.com/photo-1508050249562-b28a87434496?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}
50% {
background-image: url(https://images.unsplash.com/photo-1545205597-3d9d02c29597?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}
75% {
background-image: url(https://images.unsplash.com/photo-1547852355-26c780c450f9?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}
100% {
background-image: url(https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=2120&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}
}How to use animation Effects on images with CSS?
Animation-
The animation effects can be used in CSS by using its animation property and assigning Keyframes as we want the animation to happen as our design. In above CSS file we have used Keyframes on animation named “slide”. Slide is a name given to that animation in “rbottom” section. You can name your animation according to your preference.
How to use animation Effects on images with CSS?
The Blur Effect-
The blur effect in CSS can be used by using the backdrop-filter property in CSS. we can assign the area that we want the blur to affect by giving it a height and width.
The opacity of the text is zero at first, after we hover on the image the text shows up and the opacity of the text becomes one as shown in the CSS and the blur effect takes place.
Conclusion
We hope this blog will help you as a beginner in your web development journey.
And there you have it! A fully responsive yoga website that looks great and works smoothly across all devices. By combining HTML for structure, CSS for styling and responsiveness. If there is anything you need or problems you face , please comment in our comment section and lets be interactive.
Here is the our youtube channel-codellaready
Link to this video-