SugarBake
project-2 food website
index.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">
<title>Online Meals</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen and (max-width=1180px)" href="phone.css">
</head>
<style>
</style>
<body>
<nav id="navbar">
<div id="logo">
<!-- <img src="patrick.jpg" alt="Onlinemeals.com"> -->
<img src="isaac.jpg" alt="Onlinemeals.com">
<!-- <img src="luca.jpg" alt="Onlinemeals.com"> -->
</div>
<ul>
<li class="items"><a href="#home">HOME</a></li>
<li class="items"><a href=".services-container"> MENU</a></li>
<li class="items"><a href="#client-section">ABOUT US</a></li>
<li class="items"><a href="#contact">CONTACT US</a></li>
<li class="items"><a href="#contact">ORDER ONLINE</a></li>
</ul>
</nav>
<section id="home">
<h1 class="h-primary">Welcome to SugarBake</h1>
<p>Dunkin' has been winning the hearts of customers with its delectable range of freshly brewed coffee and espresso, donuts, baked goods and more.It has been people's hearts.</p>
<p> While serving as a great hangout spot for family and friends, Dunkin' also offers delivery and on-the-go pick up service to fulfil everyone's cravings and comfort.</p>
<button class="btn">ORDER NOW</button>
</section>
<section class="services-container">
<h1 class="h-primmary center">DISCOVER OUR MENU</h1>
<div id="services">
<div class="box">
<img src="cake.jpg" alt="Food">
<h2 class="h-secondary center">CAKES</h2>
<p class="center">Let your cravings drive you to the boxful of flavour-full delights!</p>
</div>
<div class="box">
<img src="salad.jpg" alt="Food">
<h2 class="h-secondary center">SALADS</h2>
<p class="center">Binge on something light yet heavenly! Choose from a wide range of options.</p>
</div>
<div class="box">
<img src="shake6.jpg" alt="Food">
<h2 class="h-secondary center">BEVERAGES</h2>
<p class="center">Keep the chill mode on with your favourite Dunkin’ cold beverages.</p>
</div>
</div>
</section>
<section id="client-section">
<h1 class="h-secondary center ">OUR COLLABORATERS</h1>
<div id="clients">
<div class="clients-item">
<img src="COKE.jpg" alt="COKE">
</div>
<div class="clients-item">
<img src="BK.jpg" alt="COKE">
</div>
<div class="clients-item">
<img src="mcd.jpg" alt="COKE">
</div>
<div class="clients-item">
<img src="KFC.jpg" alt="COKE">
</div>
<div class="clients-item">
<img src="ketchup.jpg" alt="COKE">
</div>
</div>
</section>
<section id="contact">
<h1 class="h-secondary center ">CONTACT US</h1>
<div id="contact-box">
<form action="">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="" id="name" placeholder="Enter Your Name">
</div>
<div class="form-group">
<label for="name">Email</label>
<input type="text" name="" id="mail" placeholder="Enter Your Email">
</div>
<!-- <div class="form-group">
<label for="name">Message</label>
<textarea name="message" id="message" cols='20' rows='10'placeholder="Enter Your Message">
</div> -->
</form>
</div>
</section>
<footer>
<div class="center">
Copyrigth ©www.onlinemeals.com. All Rights Reserved
</div>
</footer>
</body>
</html>
style.css
/* CSS Reset */
*{
margin: 0;
padding: 0;
background-size: 100%;
}
html{
scroll-behavior: smooth;
}
/* CSS Variables */
:root{
--navbar-heigth:60px;
}
/* Navigation bar- logo and image */
#logo{
/* margin: 40px 50px; */
margin-top: 0.1%;
margin-bottom: 2%;
}
#logo img{
height: 10%;
width: 15%;
margin-bottom: -3.5%;
}
/* Navigation Bar */
#navbar{
display: flex;
align-items: center;
position: sticky;
top: 0px ;
}
/* Navbar;list styling */
#navbar ::before{
content: "";
background-color: white;
position: absolute;
top: 0 ;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.5;
/* margin-top: 1%;
margin-left: 2%;
margin-right: 2%;
*/
}
#navbar ul{
display: flex;
justify-content: center;
background-color: white;
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
cursor: pointer;
opacity: 0.5;
}
#navbar ul li{
margin-top: 2%;
list-style: none;
font-size: 4.5rem;
}
#navbar ul li a{
color: black;
display: block;
padding: 50px 250px;
border-radius: 20px;
text-decoration: none;
}
#navbar ul li a :hover{
color: black;
background-color: white;
cursor: pointer;
}
body{
padding: 0;
margin: 0;
background-image: url(marshmeollow.jpg);
background-size: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#home{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px 250px;
height: 13rem;
height: 60%;
width: 100%;
}
#home ::before{
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: -1;
opacity: 0.5;
}
#home h1{
color: white ;
text-align: center;
}
#home p{
color: white;
text-align: center;
font-size: 5rem;
margin-top: 20px;
height: 50px;
}
/* Servies Section */
#services{
display: flex;
margin: 40px;
/* border: 8px solid black; */
/* height: 200px; */
}
#services.box{
/* border: 5px solid blueviolet; */
padding: 40px;
margin: 5px 5px;
border-radius: 25px;
/* background-color: aqua; */
}
#services .box img {
display: block;
margin: auto;
/* justify-items: center; */
margin-left: 300px;
margin-top: 200px;
/* margin-bottom: 50px; */
height: 35%;
width: 59%;
border-radius: 70px;
border: 5px solid white;
}
/* CLIENTS SERVICES */
#clients-section{
height: 250px;
}
#clients-section::before{
content: "";
position: absolute;
z-index: -1;
opacity: 0.8;
}
.clients-item{
padding: 55px;
/* margin: 5px; */
}
#clients{
display: flex;
justify-content:center ;
align-items: center;
}
#clients img{
height: 785px;
border-radius: 95px;
}
/* contact section */
#contact{
position: relative;
height: 1px;
padding-top: 30px;
padding-bottom: 300px;
}
#contact ::before{
content: "";
position: absolute;
opacity: 0.5;
z-index: -1;
/* background: url(contact.jpg) no-repeat;
background-size: 100%;
background-position: center; */
width: 100%;
height: 100%;
}
#contact-box{
display: flex;
height: 2px;
justify-content: center;
align-items: center;
padding-bottom: 34px;
margin-bottom: 54px;
}
#contact-box input{
width: 100%;
padding-top: 1.2rem;
font-size: 3.5rem;
font-style: bold;
border-radius: 32px;
margin-top: 13px;
margin-bottom: 22px;
justify-content: center
}
#contact-box form{
width: 20%;
height: 20%;
}
#contact-box label{
font-size: 0.5rem;
/* height: 900px; */
/* color: white; */
}
footer{
background-color: black;
color: white;
padding: 199px 19px;
margin-top: 100px;
margin-bottom: 100px;
height: 900px;
}
/*Utiliy classes -padho */
.h-primary{
font-size: 14.5rem;
padding: 20px;
/* margin-top: 2%; */
margin-bottom: 4%;
height: 59px;
color: black;
}
.h-secondary{
font-size: 2rem;
padding: 15px;
color: black;
}
.btn{
padding-top: 40px;
padding-bottom: 40px;
padding-right: 200px;
padding-left: 200px;
border: 4px solid black;
background-color: white;
color: black;
margin-top: 200px;
font-size: 3.2rem;
font-style: bold;
border-radius: 15px;
cursor: pointer;
}
.center{
text-align: center;
padding-top: 10px;
padding-bottom: 60px;
padding-right: 20px;
color: whitesmoke;
font-size: 7.5em;
border: 8px solid black;
border-radius: 90px;
margin-top: 460px;
margin-bottom: 0%;
}
phone.css
/* NAVIGATION BAR */
#navbar{
flex-direction: column;
}
#navbar ul li a {
font-size: 1rem;
padding: 0px 9px;
padding-bottom: 9px;
}
/* home section */
#home{
height: 250px;
padding: 4px 28px;
}
#home ::before{
height: 400px;
}
#home p{
font-size: 15px;
}
#services{
flex-direction: column;
}
#services .box{
padding: 14px;
margin: 4px;
margin-bottom: 20px;
}
/* client section */
#clients{
overflow: hidden;
flex-wrap: wrap;
}
#clients img{
width: 65px;
padding: 8px;
height: auto;
}
/* contact section */
#contact-box form{
width: 80%;
}
/* footer */
/* utility classes */
.h-primary{
font-size: 25px
flex-direction : column;
}
.btn{
font-size: 12px;
padding: 5px 9px;
}
Comments
Post a Comment