HTML
<!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" />
<link rel="icon" type="image/png" sizes="32x32" href="./Img/Logo.png" />
<link rel="stylesheet" href="./Css/style.css" />
<title>Best Food Online Services In Pakistan | Sea of Cook</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="logo">
<img src="./Img/Logo-3.png" alt="Logo" />
</div>
<ul>
<li class="item"><a href="#" class="active">Home</a></li>
<li class="item"><a href="./blog.html">Blog</a></li>
<li class="item"><a href="./join.html">Join</a></li>
<li class="item"><a href="./about-us.html">About Us</a></li>
</ul>
</nav>
</header>
<section id="home">
<img src="./Img/logo-2.png" alt="Logo" />
<h1 class="h-primary">“Welcome to Sea of Cook”</h1>
<p>
Are you want to cook a meal and different beautiful dishes
<strong>Then you are on the right place.</strong>
</p>
<p>Serve the Website for cooking.</p>
</section>
<section class="services-container">
<h1 class="h-primary center">Our Services</h1>
<div id="services">
<div class="box">
<h2 class="h-secondary center">Food Ordering</h2>
<img src="./Img/1.jpg" alt="" />
<p class="p-secondary center">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod
magnam repellat nisi dignissimos, alias harum, nesciunt, in nostrum
delectus porro temporibus eveniet voluptas beatae pariatur.
</p>
</div>
<div class="box">
<h2 class="h-secondary center">Learn Cooking</h2>
<img src="./Img/2.jpg" alt="" />
<p class="p-secondary center">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod
magnam repellat nisi dignissimos, alias harum, nesciunt, in nostrum
delectus porro temporibus eveniet voluptas beatae pariatur.
</p>
</div>
<div class="box">
<h2 class="h-secondary center">Fast Srevices</h2>
<img src="./Img/3.jpg" alt="" />
<p class="p-secondary center">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod
magnam repellat nisi dignissimos, alias harum, nesciunt, in nostrum
delectus porro temporibus eveniet voluptas beatae pariatur.
</p>
</div>
</div>
</section>
<hr size="8" color="black" />
<section id="client-section">
<h1 class="h-primary center">Our Clients</h1>
<div class="clients">
<div class="client-items">
<img src="./Img/man1.png" alt="Our Client" />
<h2 class="h-secondary center">Harry</h2>
</div>
<div class="client-items">
<img src="./Img/man2.png" alt="Our Client" />
<h2 class="h-secondary center">James</h2>
</div>
<div class="client-items">
<img src="./Img/man3.png" alt="Our Client" />
<h2 class="h-secondary center">Amelia</h2>
</div>
<div class="client-items">
<img src="./Img/man4.png" alt="Our Client" />
<h2 class="h-secondary center">William</h2>
</div>
<div class="client-items">
<img src="./Img/man5.png" alt="Our Client" />
<h2 class="h-secondary center">Isabella</h2>
</div>
</div>
</section>
<hr size="8" color="black" />
<section id="testimonials-section">
<h1 class="h-primary center">Testimonials</h1>
<div class="testimonial">
<div class="testimonials-para">
<h1 class="h-primary center">“Gordon Ramsay”</h1>
<p class="p-secondary center">
This is an innovative approach that expands the cook's thinking and
creativity. I greatly respect his passion about food and his
commitment to teaching and honing his unique and thorough
curriculum.
</p>
</div>
<div class="testimonials-para">
<h1 class="h-primary center">“Matt Basile”</h1>
<p class="p-secondary center">
We spent a delightful evening being taught how to prepare delicious
Yunnanese food by the patient and talented Ms. olivia . Highly
recommended!
</p>
</div>
</div>
</section>
<footer>
<div class="footline center p-secondary">
Copyright © SeaofCook.netlify.app. All Right Reserved.
</div>
</footer>
</body>
</html>
Css
/* CSS Reset */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2&display=swap");
* {
margin: 0;
padding: 0;
}
/* CSS Variables */
:root {
--height: 1em;
}
/* Navigatgion Bar */
#navbar {
display: flex;
position: sticky;
justify-content: center;
margin: 0px 4px;
top: 0px;
}
#navbar::before {
content: "";
position: absolute;
background: black;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.4;
border-radius: 23px;
margin: 7px 0px;
}
/* Navigatgion Bar:Logo and Image*/
.logo {
margin: 3px 33px;
position: relative;
top: 13px;
right: 250px;
background-attachment: fixed;
}
.logo>img {
height: 49px;
border-radius: 8px;
}
/* Navigatgion Bar:List */
#navbar ul {
display: flex;
align-items: center;
position: relative;
top: 7px;
right: 49px;
}
#navbar ul li {
list-style: none;
font-size: 1rem;
padding: 2px 2rem;
}
#navbar ul li a {
padding: 3px 9px;
display: block;
border-radius: 9px;
text-decoration: none;
color: black;
font-family: "Baloo 2", cursive;
font-weight: bold;
font-size: 24px;
transition: all 0.5s;
}
#navbar ul li a:hover,
#navbar ul li a.active {
color: #fff;
background-color: #97f6ff;
}
/* Home Section */
#home {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20px;
height: 468px;
padding: 3px 100px;
font-family: "Baloo 2", cursive;
font-size: 24px;
}
#home::before {
content: "";
background: url(../Img/BG_IMG.jpg) no-repeat fixed center/cover;
position: absolute;
bottom: 150px;
width: 100%;
z-index: -2;
height: 700px;
/* opacity: 0.9; */
}
#home>img {
height: 330px;
margin-top: -114px;
margin-bottom: -265px;
}
#home h1 {
text-align: center;
margin-top: 200px;
font-family: "Baloo 2", cursive;
}
#home p {
color: #000000;
text-align: center;
font-size: 25px;
font-weight: bold;
font-family: "Baloo 2", cursive;
}
#home p>strong {
color: #97f6ff;
text-shadow: 2px 2px 4px black;
text-decoration: underline;
font-weight: bolder;
}
/* Services Section */
#services {
display: flex;
margin: 40px;
}
.services-container h1 {
color: black;
font-size: 3rem;
}
#services .box {
border: 4px solid #97f6ff;
border-radius: 20px;
margin: 1px 20px;
padding: 3px 0px;
background: #e7e7e7;
}
#services .box img {
height: 300px;
margin: auto;
display: block;
border-radius: 23px;
}
/* Clients Section */
#client-section {
height: 512px;
}
#client-section::before {
content: "";
position: absolute;
height: 512px;
width: 100%;
/* opacity: 0.8; */
background-image: url(../Img/Client-BG.jpg);
z-index: -1;
}
#client-section h1 {
color: black !important;
font-size: 3rem;
}
.clients {
display: flex;
align-items: center;
justify-content: center;
}
.clients .client-items {
padding: 0;
border: 5px solid #000;
border-radius: 23px;
margin: 67px 20px;
}
.clients .client-items img {
height: 200px;
display: block;
border-radius: 19px;
}
/* Testimonials Section */
#testimonials-section {
height: 490px;
}
#testimonials-section h1 {
color: black;
font-size: 3rem;
margin-top: 30px;
}
.testimonial {
margin-top: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.testimonials-para {
align-items: center;
background-color: #e7e7e7;
border-radius: 10px;
/* width: 530px; */
margin: 32px;
position: relative;
top: -35px;
}
.testimonial .testimonials-para::after {
position: absolute;
font-family: "PT Serif", Georgia, Times, Times New Roman, Serif;
content: "“";
left: 21px;
top: 17px;
color: #000000;
font-size: 200px;
font-style: normal;
line-height: 1;
}
.testimonials-para h1 {
font-size: xxx-large;
}
.testimonials-para p {
font-size: x-large;
}
/* Footer Section */
footer {
background-color: #000;
border-radius: 10px 10px 0 0;
}
footer .footline {
color: white;
font-weight: 300;
}
/* Scroll Bar Section */
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #4f74f7;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #1b1c80;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0f1046;
}
/* Utility Classes */
.h-primary {
color: white;
text-decoration: underline;
font-weight: bolder;
text-shadow: 2px 2px 4px black;
font-size: 2em;
font-family: "Baloo 2", cursive;
}
.h-secondary {
color: black;
font-size: 2em;
font-weight: bolder;
font-family: "Baloo 2", cursive;
text-shadow: 2px 2px 4px #fff;
}
.p-secondary {
color: black;
font-size: 19px;
font-weight: bold;
font-family: "Baloo 2", cursive;
}
.center {
text-align: center;
}
hr {
border-radius: 10px;
}
@media screen and (max-width: 1200px) {
/* Navigation Section */
.logo {
top: 11px;
right: 218px;
}
/* Home Section */
#home {
height: 372px;
}
/* Services Section */
/* Client Section */
.clients .client-items {
padding: 0;
border: 5px solid #000;
border-radius: 23px;
margin: 67px auto;
}
/* Testimonials Section */
}
@media screen and (max-width: 1024px) {
/* Navigation Section */
.logo {
top: 11px;
right: 138px;
}
/* Home Section */
#home>img {
height: 354px;
margin: -104px 0 -288px 0;
}
/* Services Section */
#services .box img {
height: 272px;
}
/* Client Section */
.clients .client-items img {
height: 170px;
}
/* Testimonials Section */
.testimonial .testimonials-para::after {
left: 6px;
top: 21px;
font-size: 155px;
font-family: "PT Serif", Georgia, Times, Times New Roman, Serif;
}
}
@media screen and (max-width: 900px) {
/* Navigation Section */
.logo {
top: 11px;
right: 73px;
}
/* Home Section */
/* Services Section */
#services .box img {
height: 225px;
}
/* Client Section */
#client-section {
height: 409px;
}
#client-section::before {
height: 409px;
}
.clients .client-items img {
height: 150px;
}
/* Testimonials Section */
#testimonials-section h1 {
font-size: 2.3rem;
}
/* Footer Section */
footer .footline {
margin-top: 34px;
}
}
@media screen and (max-width: 768px) {
/* Navigation Section */
#navbar ul li a {
padding: 3px 7px;
}
.logo {
top: 11px;
right: 25px;
}
/* Home Section */
/* Services Section */
#services {
overflow: hidden;
}
#services .box img {
height: 300px;
}
/* Client Section */
.clients {
overflow: hidden;
}
#client-section {
height: 409px;
}
#client-section::before {
height: 409px;
}
.clients .client-items {
margin: 40px;
}
.clients .client-items img {
height: 180px;
}
/* Testimonials Section */
#testimonials-section h1 {
font-size: 2.3rem;
}
.testimonial .testimonials-para::after {
content: "";
}
/* Footer Section */
footer .footline {
margin-top: 37px;
}
}
@media screen and (max-width: 600px) {
/* Navigation Section */
.logo {
top: 11px;
right: 31px;
}
#navbar ul li {
padding: 2px 18px;
}
#navbar ul li a {
font-size: 18px;
}
/* Home Section */
#home {
height: 500px;
}
#home::before {
bottom: 22px;
}
#home>img {
height: 345px;
margin: -98px 0 -288px 0;
}
/* Services Section */
#services {
margin: 29px;
}
#services .box img {
height: 225px;
}
.center {
text-align: center;
}
.p-secondary {
font-size: 16px;
}
/* Client Section */
#client-section {
height: 409px;
}
#client-section::before {
height: 409px;
}
.clients .client-items img {
height: 170px;
}
.clients .client-items {
margin: 9px;
}
/* Testimonials Section */
#testimonials-section {
height: 416px;
}
#testimonials-section h1 {
font-size: 2.3rem;
}
.testimonials-para {
margin: 19px;
}
.testimonials-para p {
font-size: large;
}
/* Footer Section */
footer .footline {
margin-top: 34px;
}
}
@media screen and (max-width: 480px) {
/* Navigation Section */
.logo {
top: -5px;
right: 63px;
margin: -8px 200px;
}
#navbar {
flex-direction: column;
margin: 2px 4px;
}
#navbar ul li {
padding: 0px 11px;
}
#navbar ul {
top: -16px;
right: -47px;
width: 377px;
}
#navbar ul li a {
font-size: 23px;
}
.logo>img {
height: 75px;
}
/* Home Section */
#home {
height: 373px;
padding: 3px 22px;
}
#home::before {
bottom: 97px;
}
#home>img {
height: 0px;
}
#home h1 {
margin-top: 330px;
}
/* Services Section */
#services {
margin: 29px;
overflow: auto;
}
#services .box img {
height: 225px;
}
.center {
text-align: center;
}
.p-secondary {
font-size: 16px;
}
/* Client Section */
#client-section {
height: 355px;
}
#client-section::before {
height: 355px;
}
.clients .client-items img {
height: 129px;
}
.clients .client-items {
margin: 9px;
}
.clients {
overflow: hidden;
}
/* Testimonials Section */
#testimonials-section {
height: 498px;
}
#testimonials-section h1 {
font-size: 2.3rem;
}
.testimonials-para {
margin: 19px;
}
.testimonials-para p {
font-size: large;
}
.testimonial {
flex-direction: column;
}
/* Footer Section */
footer .footline {
margin-top: 34px;
}
/* Utility Section */
.h-primary {
font-size: 40px;
}
/* scroll bar Section */
::-webkit-scrollbar-thumb {
background: #1b1c80;
border-radius: 32px;
}
::-webkit-scrollbar-track {
background: #4f74f7;
border-radius: 32px;
}
::-webkit-scrollbar {
width: 5px;
}
}
@media screen and (max-width: 320px) {
/* Navigation Section */
#navbar ul {
top: -16px;
right: -11px;
width: 289px;
}
#navbar ul li {
padding: 0px 0px;
}
.logo {
top: -5px;
right: -4px;
margin: -2px 67px;
}
/* Home Section */
#home {
height: 363px;
}
/* client section */
.clients .client-items img {
height: 174px;
}
.clients .client-items {
margin: 15px 38px;
}
/* testimonial section */
.testimonials-para p {
font-size: 13px;
}
#testimonials-section h1 {
margin-top: 4px;
}
#testimonials-section {
height: 440px;
}
}
Download
Comments
Post a Comment