In the world of web development, creating responsive designs is essential to ensure a seamless user experience across various devices. In this tutorial, we'll explore a sample HTML and CSS code for building a responsive webpage. codePen Link
 |
| Responsive Website Design |
The HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Design</title>
</head>
<body>
<section class="container">
<div class="main-container">
<nav class="navbar">
<div class="navbar-container container">
<input type="checkbox" name="" id="">
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h1 class="logo">Navbar</h1>
</div>
</nav>
<div class="main">
<div class="main-text">
<h4>Lorem ipsum dolor sit amet!</h4>
<h1>Build Earn<ion-icon name="flash"></ion-icon> Automate</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
At consequuntur, quidem amet rem sapiente in. Officia beatae quia vel
atque sunt iure placeat, culpa modi! Necessitatibus eaque doloribus laudantium
labore?</p>
<div class="btns">
<a href="https://codepen.io/amkamble/pen/yLZvwov" class="btn">
Get Code <ion-icon name="code-slash"></ion-icon></a>
<a href="#" class="btn">Explore <ion-icon name="arrow-forward"></ion-icon></a>
</div>
</div>
</div>
</div>
</section>
<span class="circle-1"></span>
<span class="circle-2"></span>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js">
</script>
</body>
</html>
The HTML structure includes sections for the navigation bar, main content, and circular elements for a visually appealing design.
Styling with CSS
CodePen Link Click The Given Code Pen Link To live Demo
@import url('https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@500&family=Gluten:wght@500&family=Merienda:wght@700&family=Poppins&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
background: linear-gradient(109.6deg, rgb(17, 19, 23)
11.2%, rgb(11, 18, 24) 51.2%, rgb(6, 18, 24) 98.6%);
}
a{
text-decoration: none;
color: #fff;
}
li{
list-style: none;
}
.container{
width: 100%;
height: 100vh;
position: relative;
display: block;
}
.main-container{
width: 100%;
color: #fff;
position: relative;
}
.navbar input[type="checkbox"],
.navbar .hamburger-lines{
display: none;
}
.container{
max-width: 1200px;
width: 100%;
position: fixed;
top: 0;
margin: auto;
}
.navbar{
width: 100%;
color: #fff;
opacity: 0.85;
z-index: 100;
}
.navbar-container{
display: flex;
justify-content: space-between;
height: 50px;
margin-top: 10px;
align-items: center;
}
.menu-items{
order: 2;
display: flex;
}
.logo{
order: 1;
font-size: 2.3rem;
}
.menu-items li{
list-style: none;
margin-left: 1.5rem;
font-size: 1.2rem;
}
.navbar a{
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease-in-out;
}
.navbar a:hover{
color: rgb(19, 119, 220) ;
}
.main{
display: flex;
justify-content: center;
align-items: center;
margin-top: 5%;
text-align: center;
}
.main-text{
width: 70%;
margin-top: 5%;
}
.main-text h4{
font-size: 15px;
padding: auto;
color: skyblue;
margin-top: 10px;
}
.main-text h1{
color: #fff;
margin-top: 10px;
font-size: 3rem;
font-weight: bolder;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
h1 [name="flash"]{
font-size: 2.3rem;
color: rgb(14, 156, 188);
text-align: center;
margin-top: 10px;
}
.main-text p{
padding: 10px;
margin-top: 5px;
font-size: 1.2rem;
letter-spacing: 0.02em;
line-height: 1.5rem;
text-align: center;
}
.main-text .btns{
display: flex;
justify-content: center;
align-items: center;
height: 40px;
padding-top: 20px;
margin-top: 10px;
}
.main-text .btns .btn{
border: 2px solid rgb(107, 41, 194);
padding: 10px 40px;
margin: 15px;
border-radius: 20px;
transition: 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
}
[name="code-slash"] ,[name="arrow-forward"]{
margin: 0 5px;
font-size: 1rem;
}
.btn:nth-child(1){
background-color:rgb(107, 41, 194);
}
.btns a:hover{
background-color:rgb(107, 41, 194);
}
.circle-1{
position: absolute;
display: flex;
height: 300px;
width: 300px;
left: 0%;
top: 50%;
border-radius: 50%;
filter: blur(70px);
background: linear-gradient(180.8deg, rgb(234, 8, 211) 6.9%,
rgb(73, 6, 70) 73.2%);
z-index: -999;
}
.circle-1::after {
content:"";
position: absolute;
height: 90%;
width: 90%;
left: 10%;
top:30%;
border-radius: 50%;
background: linear-gradient(180.8deg, rgb(19, 119, 220) 6.9%,
rgb(73, 6, 70) 73.2%);
}
.circle-2{
position: absolute;
display: flex;
height: 300px;
width: 300px;
right: 0;
border-radius: 50%;
filter: blur(80px);
background: linear-gradient(180.8deg, rgb(27, 10, 139) 6.9%,
rgb(73, 6, 70) 73.2%);
z-index: -999;
}
.circle-2::after {
content:"";
position: absolute;
height: 90%;
width: 90%;
right: -20%;
top: -120px;
border-radius: 50%;
background: linear-gradient(180.8deg, rgb(139, 10, 36) 6.9%,
rgb(73, 6, 70) 73.2%);
}
@media (max-width: 920px){
.navbar-container input[type="checkbox"]:checked ~ .logo{
display: none;
}
.navbar-container input[type="checkbox"],
.navbar-container .hamburger-lines{
display: block;
}
.navbar-container{
display: block;
position: relative;
height: 64px;
margin-top: 5px;
}
.navbar-container input[type="checkbox"]{
position: absolute;
display: block;
height: 32px;
width: 30px;
top: 20px;
left: 20px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.navbar-container .hamburger-lines{
display: block;
height: 20px;
width: 25px;
position: absolute;
top: 20px;
left: 40px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.navbar-container .hamburger-lines .line{
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: white;
}
.navbar-container .hamburger-lines .line1{
transform-origin: 0% 0%;
transition: transform 0.3s ease-in-out;
}
.navbar-container .hamburger-lines .line2{
transition: transform 0.2s ease-in-out;
}
.navbar-container .hamburger-lines .line3{
transform-origin: 0% 100%;
transition: transform 0.3s ease-in-out;
}
.navbar .menu-items{
padding-top: 100px;
background: transparent;
height: 100vh;
max-width: 300px;
transform: translate(-150%);
display: flex;
flex-direction: column;
margin-left: 00px;
padding-left: 40px;
transition: transform 0.5s ease-in-out;
background-color: rgba(0,0,0,0.5);
}
.navbar .menu-items li{
margin-bottom: 1.8rem;
font-size: 1.7rem;
font-weight: 500;
}
.logo{
position: absolute;
top: 10px;
right: 15px;
margin-right: 50px;
font-size: 1.5rem;
}
}
@media (max-width: 768px){
.navbar{
opacity: 0.95;
}
.navbar-container input[type="checkbox"],
.navbar-container .hamburger-lines{
display: block;
}
.navbar-container{
display: block;
position: relative;
height: 64px;
margin-top: 5px;
}
.navbar-container input[type="checkbox"]{
position: absolute;
display: block;
height: 32px;
width: 30px;
top: 20px;
left: 20px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.navbar-container .hamburger-lines{
display: block;
height: 28px;
width: 35px;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.navbar-container .hamburger-lines .line{
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: white;
}
.navbar-container .hamburger-lines .line1{
transform-origin: 0% 0%;
transition: transform 0.3s ease-in-out;
}
.navbar-container .hamburger-lines .line2{
transition: transform 0.2s ease-in-out;
}
.navbar-container .hamburger-lines .line3{
transform-origin: 0% 100%;
transition: transform 0.3s ease-in-out;
}
.navbar .menu-items{
padding-top: 100px;
background: transparent;
height: 100vh;
max-width: 300px;
transform: translate(-150%);
display: flex;
flex-direction: column;
margin-left: -40px;
padding-left: 40px;
transition: transform 0.5s ease-in-out;
background-color: rgba(0,0,0,0.5);
}
.navbar .menu-items li{
margin-bottom: 1.8rem;
font-size: 1.1rem;
font-weight: 500;
}
.logo{
position: absolute;
top: 10px;
right: 15px;
font-size: 1.5rem;
}
.navbar-container input[type="checkbox"]:checked ~ .menu-items{
transform: translateX(0);
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
transform: rotate(45deg);
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
transform: scaleY(0);
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
transform: rotate(-45deg);
}
.main-text{
margin-top: 20%;
}
.main-text h4{
font-size: 15px;
padding: auto;
}
.main-text h1{
color: #fff;
font-size: 1.4rem;
padding-bottom:10px;
}
h1 [name="flash"]{
font-size: 1.7rem;
color: rgb(14, 156, 188);
text-align: center;
margin-top: 5px;
}
.main-text p{
padding: 0 10px;
margin-top: 5px;
font-size: 0.8rem;
}
.main-text .btns .btn{
padding: 7px 25px;
margin: 5px;
}
[name="code-slash"] ,[name="arrow-forward"]{
margin: 0 5px;
font-size: 0.9rem;
}
}
@media (max-width: 500px){
.navbar-container input[type="checkbox"]:checked ~ .logo{
display: none;
}
.navbar-container input[type="checkbox"],
.navbar-container .hamburger-lines{
display: block;
}
.navbar-container{
display: block;
position: relative;
height: 64px;
margin-top: 5px;
}
.navbar-container input[type="checkbox"]{
position: absolute;
display: block;
height: 32px;
width: 30px;
top: 20px;
left: 20px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.navbar-container .hamburger-lines{
display: block;
height: 20px;
width: 25px;
position: absolute;
top: 20px;
left: 40px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.navbar-container .hamburger-lines .line{
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: white;
}
.navbar-container .hamburger-lines .line1{
transform-origin: 0% 0%;
transition: transform 0.3s ease-in-out;
}
.navbar-container .hamburger-lines .line2{
transition: transform 0.2s ease-in-out;
}
.navbar-container .hamburger-lines .line3{
transform-origin: 0% 100%;
transition: transform 0.3s ease-in-out;
}
.navbar .menu-items{
padding-top: 100px;
background: transparent;
height: 100vh;
max-width: 300px;
transform: translate(-150%);
display: flex;
flex-direction: column;
margin-left: 00px;
padding-left: 40px;
transition: transform 0.5s ease-in-out;
background-color: rgba(0,0,0,0.5);
}
.navbar .menu-items li{
margin-bottom: 1.8rem;
font-size: 1.1rem;
font-weight: 500;
}
.logo{
position: absolute;
top: 10px;
right: 15px;
font-size: 1.5rem;
margin-right: 50px;
}
}
The accompanying CSS code provides styling for the entire webpage, from the body to the navigation bar, main content, and responsive design adjustments for different screen sizes.
Key Features
Navigation Bar: The navigation bar includes a hamburger menu for a clean and responsive design. The menu items are styled with a smooth hover effect.
Main Content: The main content section features a bold heading, subheading, and a call-to-action button. The use of Ionicons adds visually appealing icons to the buttons.
Circular Elements: The webpage includes circular elements with gradient colors, enhancing the overall visual appeal. The use of the
::afterpseudo-element adds depth to the circles.Responsive Design: The CSS includes media queries for responsiveness. The navigation bar transforms into a mobile-friendly version on smaller screens, providing a better user experience.
Conclusion
Building a responsive webpage is crucial for reaching users on different devices. This HTML and CSS template serves as a foundation for creating visually appealing and user-friendly designs. Feel free to customize and expand upon this code for your specific projects.
If you have any Suggestions For Me .Plese let me know