<script>alert(Hacked);<script>

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (49.6 KB, 9 trang )

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="preconnect" href="">
<link rel="preconnect" href="" crossorigin>
<link href=" />family=Dancing+Script&family=Merriweather&family=Open+Sans&family=Oswald&
family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href=" /><link rel="stylesheet" href="style.css">
<title>Bakery - Tasty & Fresh</title>
</head>
<body>
<div class="container">
<section class="page_1">
<div class="content">
<img src="img/Untitled2_150.png">
<span>Tasty & Fresh</span>
<span>Bakery</span>
<div class="line"></div>
</div>
</section>
<section class="page_2">
<div class="content">

Our Bakery offers classic, scratch-made baked goods for every
occasion.

<span>We believe in the goodness of real food, made from scratch. We
source only the finest ingredients and hand-craft our baked goods daily.</span>
<div class="line"></div>
</div>
<div class="grid_container">

<div class="item item1">
<img src="img/pexelsphoto291528.jpg">
</div>
<div class="item item2">
<span>
Our bakery and store-front hours are Monday-Friday 8:30-6:00pm
and Saturday’s 10:00-2:00pm. Our phone and order hours are Monday-Friday 8:303:00pm and Saturday’s 10:00-2:00pm. Whether you are searching for a special
birthday cake or simply looking for a sweet ending to an everyday
meal, The Cake Shop offers something for everyone. This is a one of a kind bakery,
where the aroma of home-style baking weakens even the strongest
will.
</span>
</div>
<div class="item item3">

<img src="img/pexelsphoto839220.jpg">
</div>
</div>
</section>
<section class="page_3">
<div>
<img src="img/pexelsphoto982612.jpg">
</div>
<div>

Today's Menu

<span>18th May 2018</span>
<span>Delight in three layers of cake paired with two generous layers
of filling. DeEtta's uses real buttercream, offers a variety of flavors and fillings, and
tailors everything — from taste to design — to your personal preferences.</span>

Visit Our Online Shop

<span>
The Cake Shop offers something for everyone. This is a one of a kind
bakery, where the aroma of home-style baking weakens even the strongest will. The
Cake Shop offers a wide variety of freshly baked goods daily; gourmet cookies, fresh
apple cake, cheesecake slices, chocolate eclairs, strawberry torte,
pound cake, lemon bars, decadent brownies, shortbread, and over 20 flavors of
cupcakes that no one can resist.
</span>
<button>shop</button>
</div>
</section>
<section class="page_5">
<div class="grid_container">
<div class="item item1">
<div>
<img src="img/pexelsphoto907142.jpeg">
</div>
<span>
Danishes, muffins, and scones ... oh my! Start your morning off
right with a sweet treat from our bakery. Need a little pick-me-up any time of day?

Look no further than our delicious selection of cookies, brownies, macarons,
eclairs, and other goodies.
</span>
</div>
<div class="item item2">

<span>
There is nothing like the aroma and taste of freshly-baked bread.
We use traditional methods (without additives or preservatives) to ensure the best
taste and quality possible. You can find us working in the wee hours of
the morning mixing, kneading, and making each loaf by hand.
</span>
<div class="line"></div>
<div>
<img src="img/pexelsphoto1028711.jpeg">
</div>
</div>
</div>
</section>
</div>
</body>
</html>
:root
{
--black: #111111;
--grey: #ccd3db;
--white: #ffffff;
--lightgrey: #999999;
}

*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font-family: 'Merriweather', serif;
}
section
{
display: flex;
width: 100%;
height: 100vh;
}
/* Page 1 */
.page_1
{
background-image: url('img/pexelsphoto213621.png');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
justify-content: center;
align-items: center;
flex-direction: column;

}
.page_1 .content

{
position: relative;
padding: 20px;
margin-top: 74px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.page_1 .content span:nth-of-type(1)
{
font-size: 96px;
color: var(--white);
margin-top: 27px;
}
.page_1 .content span:nth-of-type(2)
{
font-size: 24px;
color: var(--white);
text-transform: uppercase;
letter-spacing: 10px;
margin-top: 20px;
}
.line
{
position: relative;
width: 150px;
border-bottom: 3px dotted var(--white);
margin-top: 27px;
transform: translateX(-1.5%);

}
/* Page 2 */
.page_2
{
background-color: var(--grey);
justify-content: center;
align-items: center;
flex-direction: column;
height: 150vh;
}
.page_2 .content
{
position: relative;
width: 826px;
height: 254px;
text-align: center;
margin-top: 63px;

padding: 0 20px;
}
.page_2 .content h2
{
font-size: 36px;
color: var(--black);
margin-top: 39px;
margin-bottom: 21px;
}
.page_2 .content span
{

font-size: 16px;
color: var(--black);
}
.page_2 .content .line
{
left: 25%;
transform: translateX(70%);
margin-top: 21px;
border-bottom: 3px dotted var(--black);
}
.page_2 .grid_container
{
width: 1140px;
height: 654px;
margin-top: 29px;
margin-bottom: 60px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 60px;
overflow: hidden;
}
.page_2 .item1
{
grid-row: 1 / 3;
}
.page_2 .item1 img
{
width: 100%;
height: 100%;
object-fit: cover;

}
.page_2 .item2
{
min-height: 200px;
margin-top: 65px;
}
.page_2 .item2 span
{

font-size: 16px;
padding-right: 20px;
text-align: left;
line-height: 1.6px;
}
.page_2 .item3
{
min-height: 400px;
}
.page_2 .item3 img
{
width: 100%;
height: 100%;
object-fit: cover;
}
/* Page 3 */
.page_3
{
flex-direction: row;
justify-content: center;

}
.page_3 div
{
flex-basis: calc(100% / 3);
}
.page_3 div img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.page_3 div:nth-of-type(2)
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.page_3 div:nth-of-type(2) h2
{
font-size: 48px;
}
.page_3 div:nth-of-type(2) span:nth-of-type(1)
{
font-size: 18px;
color: var(--lightgrey);
font-style: italic;
}

.page_3 div:nth-of-type(2) span:nth-of-type(2)
{
font-size: 16px;
padding: 20px;
text-align: center;
}
.page_3 div .line
{
border-bottom: 3px dotted var(--black);
margin-top: 0;
transform: translateY(-100%);
}
.page_3 div button
{
width: 146px;
height: 46px;
font-size: 16px;
border: none;
outline: none;
transform: translateY(-500%);
}
/* Page 4 */
.page_4
{
background-image: url('img/pexelsphoto324028.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
align-items: center;

}
.page_4 .content
{
position: relative;
width: 733px;
height: 360px;
color: var(--white);
display: flex;
flex-direction: column;
margin-left: 60px;
padding: 0 20px;
}
.page_4 .content h2
{
font-size: 48px;
margin-top: 58px;
}
.page_4 .content span
{
margin-top: 20px;

}
.page_4 .content button
{
width: 98px;
height: 46px;
margin-top: 35px;
background: #41bb94;
border: none;

outline: none;
cursor: pointer;
font-size: 16px;
color: var(--white);
}
/* Page 5 */
.page_5
{
background-color: var(--grey);
justify-content: center;
align-items: center;
}
.page_5 .grid_container
{
position: relative;
width: 1140px;
height: 591px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.page_5 .item
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.page_5 .item1 div
{
width: 345px;

height: 431px;
margin-top: 16px;
}
.page_5 div img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.page_5 .item1 span
{

margin-top: 20px;
padding: 0 20px;
}
.page_5 .item2 div
{
width: 570px;
height: 342px;
margin-top: 32px;
}
.page_5 .item2 span
{
padding: 20px;
}
.page_5 .item2 .line
{
width: 150px;
height: 0;

left: -50%;
transform: translateX(65%);
border-bottom: 3px dotted var(--black);
margin-top: 0;
}