<header>
<div class="headert">
<h1>Welcome To tasty</h1>
<h4>since 1970 </h4>
</div>
<div id="navbar">
</div>
<div id="navbar2">
<div id=>
<a href="#about">About</a>
</div>
<div>
<a href="#Menus">Menus</a>
</div>
<div>
<a href="#Hours ">Hours & Locations </a>
</div>
<div>
<a href="#footer">Contact Us</a>
</div>
</div>
</header>
<main>
<section id="photosab">
<div id="about">
<div>
<h2>About Us </h2>
tasty has one of the delicioust foods you can ever taste.Our goal is to better the days of everyone
who walks in.A local favorite for +50 years.Featuring our famous pizzas, sandwiches and others for
you to discover.Full menu offered all day and late night.You can enjoy our menu with your family or
with your friends.You're our honoroable guests .
</div>
</div>
<div id="aboutpho">
<div id="im1">
</div>
<div id="im2">
</div>
<div id="im3">
</div>
<div id="im4">
</div>
<div id="im5">
</div>
<div id="im6">
</div>
<div id="im7">
</div>
<div id="im8">
</div>
<div id="im9">
</div>
</div>
</section>
header {
position: relative;
border-style: solid;
height: 100vh;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1521917441209-e886f0404a7b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGNhZmV8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80");
}
.headert {
position: absolute;
height: auto;
width: fit-content;
border-style: solid;
color: white;
text-align: center;
top: 80px;
left: 20vw;
padding-left: 5px;
padding-right: 5px;
}
header a {
color: white;
text-decoration: none;
}
.headert h4 {
margin-top: 20px;
}
.headert h1 {
margin-bottom: -0.8em;
}
#navbar {
position: absolute;
color: white;
width: 100%;
height: 100px;
bottom: 0px;
left: 0px;
margin-left: -3px;
margin-bottom: -3px;
background-color: grey;
opacity: 0.5;
filter: blur(2px);
margin-left: 1px;
padding-top: 1px;
}
#navbar2 {
display: flex;
position: absolute;
color: white;
width: 100%;
height: 97px;
bottom: 0px;
left: 0px;
margin-left: -2px;
margin-bottom: -2px;
margin-right: -5px;
border-style: solid;
border-color: white;
border-radius: 10px;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#navbar2 div {
padding: 5px;
}
#navbar2 div:hover {
cursor: pointer;
background-color: black;
border-radius: 5px;
}
#photosab {
width: 100%;
height: fit-content;
position: relative;
display: flex;
flex-wrap: wrap;
}
#about {display: flex;
justify-content: center;
align-items: center;
width: 30%;
background-image: url('https://previews.123rf.com/images/yphotoland/yphotoland1707/yphotoland170700134/85249062-black-lamps-is-shining-orange-light-on-red-brick-wall-for-background-texture-.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
flex-basis: 200px;
flex-grow: 1;
}
#about div {
height: fit-content;
padding-bottom: 30px;
width: 70%;
border-style: solid;
border-radius: 10px;
box-shadow: 10px 10px 20px rgba(102, 74, 15, 0.699);
backdrop-filter: blur(2px);
background-color: rgba(221, 216, 216, 0.397);
text-align: center;
}
#about div h2 {
color: white;
}
#aboutpho {
display: grid;
width: 70%;
height: 80vh;
flex-shrink: 1;
flex-grow: 1;
grid-template-rows: repeat(4, 25%);
grid-template-columns: repeat(6, auto);
}
#aboutpho div {
border-style: solid;
border-width: 1px;
}
#im1 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1579027989536-b7b1f875659b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
grid-row: 1/3;
grid-column: 1/3;
background-repeat: no-repeat;
}
#im2 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=353&q=80");
grid-row: 3/5;
grid-column: 1/2;
background-repeat: no-repeat;
}
#im3 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1574936145840-28808d77a0b6?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fHJlc3RhdXJhbnR8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
grid-row: 1/3;
grid-column: 6/7;
background-repeat: no-repeat;
}
#im4 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1491960693564-421771d727d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=399&q=80");
grid-row: 3/5;
grid-column: 2/3;
background-repeat: no-repeat;
}
#im5 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1584365685547-9a5fb6f3a70c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1534&q=80");
grid-row: 1/3;
grid-column: 5/6;
background-repeat: no-repeat;
}
#im6 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1551024709-8f23befc6f87?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=825&q=80");
grid-row: 3/5;
grid-column: 5/7;
background-repeat: no-repeat;
}
#im7 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1504718855392-c0f33b372e72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
grid-row: 1/4;
grid-column: 3/5;
background-repeat: no-repeat;
}
#im8 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=401&q=80");
grid-row: 4/5;
grid-column: 4/5;
background-repeat: no-repeat;
}
#im9 {
background-size: 100% 100%;
background-image: url("https://images.unsplash.com/photo-1527224538127-2104bb71c51b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");
grid-row: 4/5;
grid-column: 3/4;
background-repeat: no-repeat;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.