Complete responsive website using HTML CSS
source code
HTML CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" href="style.css">
<!-- font awesome cdn -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>codewithme</title>
</head>
<body>
<!-- header section start -->
<header>
<div class="headerSection">
<a href="#" class="headerLogo">CodeWithMe</a>
<nav>
<ul class="navigation">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">our menu</a>
</li>
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">testimonial</a>
</li>
<li>
<a href="#">expert</a>
</li>
<li>
<a href="#">contact us</a>
</li>
</ul>
</nav>
<div onclick="handleToggleMenu()" class="menuToggle"></div>
</div>
</header>
<!-- header section end -->
<!-- banner section start -->
<section>
<div class="bannerSection">
<div class="bannerContent">
<h1>fresh and delicious</h1>
<p>your text</p>
<button class="bannerButton">learn more</button>
</div>
</div>
</section>
<!-- banner section end -->
<!-- about section start -->
<section>
<div class="aboutSection">
<div class="aboutTitle">
<h1 class="mainTitle">About Us</h1>
<p class="mainTitleText">your text</p>
</div>
<div class="aboutImg">
<img src="./img/aboutImg.jpg" alt="">
</div>
</div>
</section>
<!-- about section end -->
<!-- our menu section start -->
<section>
<div class="menuSection">
<div class="menuTitle">
<h1 class="mainTitle">Our Menu</h1>
<p class="mainTitleText">your text</p>
</div>
<div class="menuInfo">
<div class="menuItems">
<div class="menuItem">
<img src="img/01.jpg" alt="" class="menuImg">
<h3 class="menuText">salad</h3>
</div>
<div class="menuItem">
<img src="img/02.jpg" alt="" class="menuImg">
<h3 class="menuText">grill</h3>
</div>
<div class="menuItem">
<img src="img/03.jpg" alt="" class="menuImg">
<h3 class="menuText">soup</h3>
</div>
<div class="menuItem">
<img src="img/04.jpg" alt="" class="menuImg">
<h3 class="menuText">pasta</h3>
</div>
<div class="menuItem">
<img src="img/05.jpg" alt="" class="menuImg">
<h3 class="menuText">pasta</h3>
</div>
<div class="menuItem">
<img src="img/06.jpg" alt="" class="menuImg">
<h3 class="menuText">pizza</h3>
</div>
</div>
</div>
</div>
</section>
<!-- our menu section end -->
<!-- kitchen expert section start -->
<section>
<div class="kitchenSection">
<div class="kitchenTitle">
<div class="menuTitle">
<h1 class="mainTitle">Kitchen Experts</h1>
<p class="mainTitleText">your text </p>
</div>
<div class="experts">
<div class="expert">
<img src="img/kitchen01.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
<div class="expert">
<img src="img/kitchen002.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
<div class="expert">
<img src="img/kitchen03.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
<div class="expert">
<img src="img/kitchen01.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
<div class="expert">
<img src="img/kitchen002.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
<div class="expert">
<img src="img/kitchen03.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
<div class="expert">
<img src="img/kitchen01.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
<div class="expert">
<img src="img/kitchen002.jpg" alt="" class="expertPersonImg">
<p class="expertPersonName">Name</p>
</div>
</div>
</div>
</div>
</section>
<!-- kitchen expert section end -->
<!-- testimonials section start -->
<section>
<div class="testimonialSection">
<div class="testimonialTitle">
<div class="menuTitle">
<h1 class="mainTitle">Testimonials</h1>
<p class="mainTitleText">your text</p>
</div>
</div>
<div class="testimonials">
<div class="testimonial">
<img src="img/testimonial01.jpg" alt="" class="testimonialPersonImg">
<div class="testimonialInfo">
<h2>Name</h2>
<p>your text</p>
</div>
</div>
<div class="testimonial">
<img src="img/testimonial02.jpg" alt="" class="testimonialPersonImg">
<div class="testimonialInfo">
<h2>Name</h2>
<p>Lyour text</p>
</div>
</div>
<div class="testimonial">
<img src="img/testimonial03.jpg" alt="" class="testimonialPersonImg">
<div class="testimonialInfo">
<h2>Name</h2>
<p>your text</p>
</div>
</div>
</div>
</div>
</section>
<!-- testimonials section end -->
<!-- contact section start -->
<section>
<div class="contactSection">
<div class="contactTitle">
<div class="menuTitle">
<h1 class="mainTitle">Contact Us</h1>
</div>
</div>
<form class="contactForm">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<textarea placeholder="Your Message"></textarea>
<button class="contactButton">Submit</button>
</form>
</div>
</section>
<!-- contact section end -->
<!-- footer section start -->
<footer>
<div class="footerSection">
<div class="footerLeft">
<h1>CodeWithMe</h1>
<div class="socialIcon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="footerCenter">
<h3 class="footerTitle">Explore</h3>
<div class="footerLink">
<nav>
<ul class="navigation">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">our menu</a>
</li>
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">testimonial</a>
</li>
<li>
<a href="#">expert</a>
</li>
<li>
<a href="#">contact us</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="footerRight">
<h3 class="footerTitle">Legal</h3>
<div class="footerLink">
<nav>
<ul class="navigation">
<li>
<a href="#">terms</a>
</li>
<li>
<a href="#">Privacy</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- footer section end -->
<script>
window.addEventListener("scroll", function() {
const header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0)
});
function handleToggleMenu() {
const menuToggle = document.querySelector(".menuToggle");
menuToggle.classList.toggle("active");
const navigation = document.querySelector(".navigation");
navigation.classList.toggle("active");
}
</script>
</body>
</html>
CSS CODE
/* common css start */
body {
font-family: 'Poppins', sans-serif;
/* font-family: 'Baloo Bhaijaan 2', cursive; */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
/* common css end */
/* header section start */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px 100px;
z-index: 99;
}
header.sticky {
background-color: #fff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
}
header .headerSection {
display: flex;
justify-content: space-between;
align-items: center;
}
header .headerSection .headerLogo {
font-size: 30px;
color: #fff;
font-weight: bolder;
}
header.sticky .headerSection .headerLogo {
color: #fe4f70;
}
header .headerSection .navigation {
display: flex;
}
header .headerSection .navigation li {
margin-left: 30px;
}
header .headerSection .navigation li a {
color: #fff;
font-size: 18px;
font-family: 'Baloo Bhaijaan 2', cursive;
text-transform: capitalize;
transition: all .3s ease;
}
header.sticky .headerSection .navigation li a {
color: #000;
}
header .headerSection .navigation li a:hover {
text-decoration: underline;
color: #fe4f70;
}
.menuToggle {
display: none;
}
/* header section end */
/* banner section start */
.bannerSection {
position: relative;
background: url(img/banner.png);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.bannerSection .bannerContent {
width: 700px;
text-align: center;
}
.bannerSection .bannerContent h1 {
font-size: 50px;
color: #fff;
text-transform: capitalize;
}
.bannerSection .bannerContent p {
font-size: 18px;
color: #fff;
font-family: 'Baloo Bhaijaan 2', cursive;
line-height: 20px;
margin-top: 20px;
}
.bannerSection .bannerContent .bannerButton {
margin-top: 40px;
padding: 10px 40px;
text-transform: uppercase;
font-size: 16px;
font-weight: bolder;
border: none;
cursor: pointer;
background-color: #fe4f70;
border-radius: 5px;
color: #fff;
font-family: 'Baloo Bhaijaan 2', cursive;
transition: all .4s;
}
.bannerSection .bannerContent .bannerButton:hover {
letter-spacing: 1px;
background-color: rgba(254, 79, 112, .9);
}
/* banner section end */
/* about section start */
.aboutSection {
padding: 100px;
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
text-align: center;
}
.aboutTitle {
width: 50%;
}
.mainTitle {
font-size: 34px;
color: #fe4f70;
text-decoration: underline;
transition: all .5s ease;
}
.aboutTitle:hover .mainTitle {
letter-spacing: 3px;
}
.mainTitleText {
font-size: 16px;
font-family: 'Baloo Bhaijaan 2', cursive;
line-height: 20px;
margin-top: 20px;
}
.aboutImg {
width: 50%;
overflow: hidden;
border-radius: 20px;
}
.aboutImg img {
width: 100%;
border-radius: 20px;
transition: all 1s;
}
.aboutImg img:hover {
transform: scale(1.5);
}
/* about section end */
/* our menu section start */
.menuSection {
padding: 100px;
}
.menuTitle {
width: 700px;
text-align: center;
margin: 0 auto;
transition: all .5s;
}
.menuTitle:hover .mainTitle {
letter-spacing: 3px;
}
.menuInfo {
margin-top: 30px;
}
.menuItems {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.menuItem {
width: 320px;
border-radius: 7px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
transition: all .5s ease;
}
.menuItem:hover {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .3);
transform: scale(.93);
}
.menuImg {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 7px 7px 0px 0px;
}
.menuText {
padding: 20px;
color: #fe4f70;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
text-align: center;
text-transform: capitalize;
font-family: 'Baloo Bhaijaan 2', cursive;
word-break: break-all;
white-space: pre-wrap;
}
/* our menu section end */
/* kitchen expert section start */
.kitchenSection {
padding: 100px;
}
.experts {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 30px;
margin-top: 50px;
}
.expert {
width: 320px;
height: 180px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.expert:nth-child(even) {
transform: scale(1.07);
}
.expertPersonImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.expertPersonName {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: rgba(254, 79, 112, .7);
color: #fff;
font-family: 'Baloo Bhaijaan 2', cursive;
font-size: 20px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(-320px);
transition: all .7s ease;
}
.expert:hover .expertPersonName {
transform: translateX(0);
}
/* kitchen expert section end */
/* testimonial section start */
.testimonialSection {
padding: 100px;
background-color: #f7f7f7;
}
.testimonials {
margin-top: 70px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.testimonial {
width: 320px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
margin-top: 50px;
}
.testimonialPersonImg {
width: 90px;
height: 90px;
object-fit: cover;
margin: -45px 115px auto;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 1px 6px 0 rgba(0,0,0,.3);
transition: all .5s ease;
}
.testimonial:hover .testimonialPersonImg{
box-shadow: 0 1px 6px 0 rgba(0,0,0,1);
transform: scale(1.07);
}
.testimonialInfo {
padding: 20px;
word-break: break-all;
text-align: center;
}
.testimonialInfo h2 {
color: #fe4f70;
font-size: 17px;
margin-bottom: 10px;
}
.testimonialInfo p {
font-size: 16px;
font-family: 'Baloo Bhaijaan 2', cursive;
line-height: 20px;
color: rgba(0,0,0,.7);
}
/* testimonial section end */
/* contact section start */
.contactSection {
padding: 100px;
}
.contactForm {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
}
.contactForm input, textarea {
width: 600px;
margin-bottom: 20px;
padding: 20px;
font-family: 'Baloo Bhaijaan 2', cursive;
border: none;
outline: none;
border-bottom: 1px solid rgba(254, 79, 112, .4);
border-radius: 10px;
transition: all .5s ease;
}
.contactForm input:hover, textarea:hover {
box-shadow: 0 1px 6px 0 rgba(254, 79, 112, .4);
}
.contactForm input:focus, textarea:focus {
transform: scale(1.03);
box-shadow: 0 1px 6px 0 rgba(254, 79, 112, .4);
}
.contactButton {
width: 300px;
padding: 15px;
background-color: #fe4f70;
border: none;
outline: none;
border-radius: 30px;
cursor: pointer;
color: #fff;
transition: all .5s ease;
}
.contactButton:hover {
background-color: rgba(254, 79, 112, .9);
}
/* contact section end */
/* footer section start */
footer {
padding: 100px;
background-color: #fe4f70;
color: #fff;
}
.footerSection {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
text-align: center;
gap: 50px;
}
.footerLeft h1 {
font-size: 30px;
}
.socialIcon i {
margin-top: 20px;
font-size: 18px;
width: 30px;
height: 30px;
line-height: 30px;
background-color: #fff;
color: #000;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.footerLink {
margin-top: 20px;
}
.footerLink .navigation li a {
font-size: 12px;
}
.footerLink .navigation li a:hover {
text-decoration: underline;
}
/* footer section end */
/* responsive start */
@media screen and (max-width: 991.99px) {
/* header section start */
header {
padding: 10px 30px;
}
header .headerSection .navigation {
display: none;
}
.menuToggle {
display: block;
position: relative;
background: url(img/menu.png);
width: 35px;
height: 35px;
background-size: 35px;
background-color: #fff;
border-radius: 3px;
}
.menuToggle.active {
background: url(img/close.png);
background-size: 35px;
background-color: #fff;
border-radius: 3px;
}
header .headerSection .navigation.active {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 66px;
left: 0;
background-color: #fff;
}
header .headerSection .navigation li {
margin: 20px 0 0 0;
}
header .headerSection .navigation.active li a {
color: #000;
}
/* header section end */
/* banner section start */
.bannerSection .bannerContent {
width: 100%;
padding: 10px;
}
.bannerSection .bannerContent h1 {
font-size: 35px;
}
/* banner section end */
/* about section start */
.aboutSection {
padding: 20px;
flex-direction: column;
}
.aboutTitle {
width: 100%;
}
.aboutImg {
width: 100%;
}
/* about section end */
/* our menu section start */
.menuSection {
padding: 10px;
}
.menuTitle {
width: 100%;
}
.menuImg {
height: 200px;
}
/* our menu section end */
/* kitchen experts section start */
.kitchenSection {
margin-top: 50px;
padding: 20px;
}
/* kitchen experts section end */
/* testimonial section start */
.testimonialSection {
margin-top: 50px;
padding: 10px;
}
/* testimonial section end */
/* contact section start */
.contactSection {
margin-top: 50px;
padding: 10px;
}
.contactForm input, textarea {
width: 80%;
}
/* contact section end */
/* footer section start */
footer {
padding: 50px 10px;
}
.footerSection {
grid-template-columns: repeat(2, 1fr);
}
.socialIcon i {
margin-top: 10px;
}
.footerLink {
margin-top: 10px;
}
/* footer section end */
}
@media screen and (max-width: 575.99px) {
/* banner section start */
.bannerSection .bannerContent h1 {
font-size: 30px;
}
/* banner section end */
/* contact section start */
.contactForm input, textarea {
width: 95%;
}
/* contact section end */
/* footer section start */
.footerSection {
grid-template-columns: repeat(1, 1fr);
}
/* footer section end */
}
/* responsive end */
Youtube Video:- Complete responsive website using HTML CSS
0 Comments