Hotel website templete HTML CSS Only
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="stylesheet" href="CSS\styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<title>Foodies | All your favourite food at one place</title>
</head>
<body>
<div class="main">
<img class="logo" src="Images\logo.png" alt="">
</div>
<div class="contact">
<p>
<h4>Contact Now</h4> +92 097 2341234</p>
</div>
<nav>
<div class="menu">
<ul>
<li><Button class="nav-btn">Home</Button></li>
<li><Button class="nav-btn">Foods</Button></li>
<li><Button class="nav-btn">About</Button></li>
<li><Button class="nav-btn">Get In touch</Button></li>
</ul>
</div>
</nav>
<header>
<h1>Order your Fav. Food!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo impedit quisquam iure expedita, accusantium
voluptate quasi eveniet totam ad non. Voluptates aperiam placeat at quod amet, earum dignissimos maxime
tempora architecto cumque asperiores voluptatum.</p>
<button class="header-button">Learn More</button>
<button class="header-button">Learn More</button>
</header>
<div id="food">
<div class="foods">
<img src="https://img.icons8.com/dotty/80/000000/egg-stand.png" />
<h2>Food 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod rem eum repellat ducimus nam in! Lorem
ipsum dolor sit amet.</p>
<button class="about-button foods-opt">Learn More</button>
</div>
<div class="foods">
<img src="https://img.icons8.com/dotty/80/000000/egg-basket.png" />
<h2>Food 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab impedit sunt iste unde. Ea! Lorem ipsum dolor
sit amet.</p>
<button class="about-button foods-opt">Learn More</button>
</div>
<div class="foods">
<img src="https://img.icons8.com/dotty/80/000000/fruit-bag.png" />
<h2>Food 3</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat pariatur facilis Lorem ipsum dolor sit
amet. </p>
<button class="about-button foods-opt">Learn More</button>
</div>
<div class="foods">
<img src="https://img.icons8.com/dotty/80/000000/hamburger.png" />
<h2>Food 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi labore consequatur unde reiciendis ipsam!
</p>
<button class="about-button foods-opt">Learn More</button>
</div>
<div class="foods">
<img src="https://img.icons8.com/dotty/80/000000/sandwich-with-fried-egg.png" />
<h2>Food 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus adipisci eaque, voluptatibus cum
nostrum mollitia?</p>
<button class="about-button foods-opt">Learn More</button>
</div>
<div class="foods">
<img src="https://img.icons8.com/dotty/80/000000/food-and-wine.png" />
<h2>Food 6</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae voluptates obcaecati necessitatibus
quas non?</p>
<button class="about-button foods-opt">Learn More</button>
</div>
</div>
<div id="about">
<div class="about-content">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam mollitia velit ad minus nobis corporis cum enim ullam? Eius veritatis perferendis tenetur veniam temporibus odio eligendi optio, quasi, obcaecati corrupti id distinctio, illo voluptatum maiores quis earum odit quidem ab!</p>
<button class="about-button">Learn More</button>
</div>
</div>
<div class="cta">
<h1>Order now</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut blanditiis iste consequuntur impedit voluptatum
asperiores magni deserunt sequi ratione animi?</p>
<button>Order Now!</button>
</div>
<footer>
<p>Copyright © Foodies 2016 | All rights reserved</p>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: Lato, sans-serif
}
.logo {
text-align: left;
height: 150px;
width: 150px;
margin-left: 74px
}
.main {
display: inline-block
}
.contact {
display: inline-block;
margin-left: 724px;
font-size: 20px;
padding-bottom: 10px
}
nav {
height: 60px;
background-color: #902b2b
}
nav ul li {
display: inline-block
}
.ul {
padding-top: 12px
}
.nav-btn {
font-size: 20px;
background: 0 0;
border: none;
color: #fff;
margin: 0 15px;
padding: 5px
}
.menu {
padding-top: 13px;
padding-left: 90px
}
header {
height: 70vh;
margin-bottom: 50px;
padding-left: 108px;
background-image: url(header-image.jpg);
background-color: gray;
background-blend-mode: darken;
background-size: cover;
background-attachment: fixed
}
header h1 {
padding-top: 30px;
color: #fff;
font-size: 70px
}
header p {
color: #fff;
padding-right: 742px;
padding-top: 21px;
font-size: 20px
}
.header-button {
color: #000;
background-color: #ffc400;
border: none;
font-size: 30px;
padding: 10px;
margin: 43px 20px 20px 0
}
.food {
text-align: center;
display: inline-block;
margin-top: 100px;
margin-bottom: 100px
}
.foods {
text-align: center;
height: 300px;
margin: 20px;
width: 300px;
background-color: #ffc400;
border-radius: 30px;
display: inline-block;
margin-left: 78px;
font-size: 20px;
box-shadow: rgba(0, 0, 0, .3) 0 19px 38px, rgba(0, 0, 0, .22) 0 15px 12px
}
#about {
height: 60vh;
margin-top: 50px;
background-image: url(about.jpg);
background-color: #535353;
background-blend-mode: darken;
background-attachment: fixed;
background-size: cover;
background-repeat: none;
padding: 50px
}
#about h1 {
font-size: 50px;
color: #fff;
margin-bottom: 15px
}
.about-content {
color: #fff;
text-align: center;
padding: 100px
}
.about-button {
color: #000;
background-color: #ffc400;
border: none;
font-size: 20px;
padding: 10px;
margin-top: 20px
}
.cta {
text-align: center;
height: 15vh;
padding: 15vh
}
.cta h1 {
font-size: 50px;
margin-bottom: 20px
}
.cta p {
padding: 0 200px
}
.cta button {
color: #000;
background-color: #ffc400;
border: none;
font-size: 20px;
padding: 10px;
margin-top: 20px;
box-shadow: rgba(0, 0, 0, .35) 0 5px 15px
}
footer {
height: 100px;
background-color: #3a3737;
text-align: center;
margin-top: 10vh
}
footer p {
color: #fff;
padding: 40px
}
.foods-opt {
color: #fff;
border-radius: 24px;
width: 200px;
background-color: #000;
box-shadow: rgba(0, 0, 0, .35) 0 5px 15px
}
Comments
Post a Comment