Добавлен: 18.06.2023
Просмотров: 58
Скачиваний: 3
<div class="l_two">Самые популярные пирожные во Франции. </div>
</div>
<div class="block_two">
<div class="item_one">
<div class="item_image"><img src="Image/cat_3_1.jpg" class="image_size"></div>
<div class="item_name">Ассорти № 1</div>
<div class="item_price">160 руб.</div>
<div class="item_comment">Макарони со вкусами: апельсин, малина, фисташка.</div>
</div>
<div class="item_two">
<div class="item_image"><img src="Image/cat_3_2.jpg" class="image_size"></div>
<div class="item_name">Ассорти № 2</div>
<div class="item_price">180 руб.</div>
<div class="item_comment">Макарони со вкусами: яблоко, персик, абрикос.</div>
</div>
<div class="item_three">
<div class="item_image"><img src="Image/cat_3_3.jpg" class="image_size"></div>
<div class="item_name">Ассорти № 3</div>
<div class="item_price">210 руб.</div>
<div class="item_comment">Макарони со вкусами: лимон, земляника, какао.</div>
</div>
</div>
</div>
<div class="category_last">
<div class="block_one">
<div class="l_one">Пироги</div>
<div class="l_two">Попробовать один кусочек или взять весь пирог? — Решать вам.</div>
</div>
<div class="block_two_last">
<div class="item_one">
<div class="item_image"><img src="Image/cat_4_1.jpg" class="image_size"></div>
<div class="item_name">Яблочный Пирог </div>
<div class="item_price">320 руб.</div>
<div class="item_comment">Фирменный яблочный пирог на песочном тесте.</div>
</div>
<div class="item_two">
<div class="item_image"><img src="Image/cat_4_2.jpg" class="image_size"></div>
<div class="item_name">Ягодный Пирог</div>
<div class="item_price">390 руб.</div>
<div class="item_comment">Начинка из ягод смородины, малины и брусники.</div>
</div>
<div class="item_three">
<div class="item_image"><img src="Image/cat_4_3.png" class="image_size"></div>
<div class="item_name">Черничный Чизкейк</div>
<div class="item_price">370 руб.</div>
<div class="item_comment">Слой сливочного сыра, ягоды черники и ежевики.</div>
</div>
</div>
<div class="block_two_last_two">
<div class="item_one">
<div class="item_image"><img src="Image/cat_4_4.jpg" class="image_size"></div>
<div class="item_name">Клубничный Пирог</div>
<div class="item_price">540 руб.</div>
<div class="item_comment">Сочная клубника в закрытом пироге. Подается с шариком ванильного мороженого. </div>
</div>
<div class="item_two">
<div class="item_image"><img src="Image/cat_4_5.png" class="image_size"></div>
<div class="item_price">630 руб.</div>
<div class="item_comment">Только сыр и ничего лишнего. Подается к основным блюдам.</div>
</div>
<div class="item_three">
<div class="item_image"><img src="Image/cat_4_6.jpg" class="image_size"></div>
<div class="item_name">Сливовый Пирог</div>
<div class="item_price">400 руб.</div>
<div class="item_comment">Небольшой пирог в виде тарталетки с начинкой из слив.</div>
</div>
</div>
</div>
</div>
<footer>
<div class="foot_one"></div>
<div class="line_line"></div>
<div class="foot_two">
Кондитерский комбинат "Вишенка" 2018
</div>
</footer>
</body>
</html>
Приложение 3. О компании
<html>
<head>
<meta charset="utf-8">
<title>О компании</title>
<link rel="stylesheet" href="Content/style.css">
</head>
<body>
<header class="page_head">
<div class="left_head">
<a id="main_page" href="index.html">
<img class="logo" id=logo src="Image/logo.png">
</a>
</div>
<div class="right_head">
<div class="menu">
<ul>
<li><a href="products.html">ПРОДУКЦИЯ</a></li></li>
<li><a href="about.html" id="active_i">О КОМПАНИИ</a></li>
<li><a href="contacts.html">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</header>
<div class="content">
<div class="back_img_about">
<div class="f_line_all">О компании</div>
</div>
<div class="a_block_one">
<div class="a_left">
<img src="Image/history.jpg">
</div>
<div class="a_right">
<div class="a_text">
Когда в 2016 году Борис Фадюшин — хозяин кондитерского комбината Вишенка — вернулся из Франции, где он жил последние 6 лет, ему в голову пришла идея основать свой собственный кондитерский магазин. «В Москве немного таких мест, в которых вы можете почувствовать себя не как в кондитерском магазине, а как в гостях у друзей или родственников, у которых в духовке печется ароматный пирог», — говорит Борис. Вскоре было найдено помещение, и уже через полгода пекарня начала свою работу.
</div>
</div>
</div>
</div>
<footer>
<div class="foot_one"></div>
<div class="line_line"></div>
<div class="foot_two">
Кондитерский комбинат "Вишенка" 2018
</div>
</footer>
</body>
</html>
Приложение 4. Контакты
<html>
<head>
<meta charset="utf-8">
<title>Контакты</title>
<link rel="stylesheet" href="Content/style.css">
</head>
<body>
<header class="page_head">
<div class="left_head">
<a id="main_page" href="index.html">
<img class="logo" id=logo src="Image/logo.png">
</a>
</div>
<div class="right_head">
<div class="menu">
<ul>
<li><a href="products.html">ПРОДУКЦИЯ</a></li>
<li><a href="about.html">О КОМПАНИИ</a></li>
<li><a href="contacts.html" id="active_i">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</header>
<div class="content">
<div class="back_image_contacts">
<div class="f_line_all">Контакты</div>
</div>
<div class="c_block_one">
<div class="con_left">
<div class="c_line_one">Часы работы</div>
<div class="c_line_day">По будням:</div>
<div class="c_line_time">08:00 - 21:00</div>
<div class="c_line_day">По выходным:</div>
<div class="c_line_time">10:00 - 23:00</div>
</div>
<div class="con_right">
<img src="Image/contact.jpg" class="con_image">
</div>
</div>
<div class="c_block_two">
<div class="block_address">
<div class="add_one">Адрес</div>
<div class="add_two">г. Москва, Зверинецкая улица, 13</div>
<div class="add_one">Телефон</div>
<div class="add_two">+7(999) 999-99-99</div>
<div class="add_one">E-mail</div>
<div class="add_two">info@vishenka.com</div>
</div>
</div>
</div>
<footer>
<div class="foot_one"></div>
<div class="line_line"></div>
<div class="foot_two">
Кондитерский комбинат "Вишенка" 2018
</div>
</footer>
</body>
</html>
Приложение 5. Таблица стилей
body{
margin: 0;
padding: 0;
}
.page_head{
width: 100%;
min-width: 1000px;
height: 90px;
background-color: black;
display: flex;
text-align: center;
position: fixed;
}
.left_head{
position: absolute;
left: 20%;
height: 85px;
width: 400px;
border-bottom: 5px solid white;
}
.right_head {
position: absolute;
left: 50%;
display: inline;
}
.logo{
width: 150px;
margin-top: -9px;
cursor: pointer;
}
.menu ul{
display: flex;
padding-left: 0;
list-style: none;
margin-top: 20;
}
a{
padding: 1em;
display: block;
text-decoration: none;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.42857143;
color: #969696;
}
.menu a:hover{
color: white;
transition: 0.5s;
}
#active_i{
color: white;
}
.content{
width: 100%;
min-width: 1000px;
height: auto;
}
.back_img{
min-width: 1000px;
height: 64%;
max-height: 419px;
min-height: 108px;
background-image:
background-size: cover;
background-position: center;
}
.text_img{
width: 100%;
min-width: 1000px;
text-align: center;
color: white;
padding-top: 5%;
}
.f_line{
font-size: 80;
font-weight: 600;
font-family: sans-serif;
}
.l_line{
font-size: 47px;
font-weight: 600;
}
.about_company {
width: 60%;
min-width: 600px;
height: 300px;
margin-top: 100px;
margin-left: 24%;
}
.about_left{
width: 35%;
min-width: 300px;
text-align: right;
float: left;
}
.about{
font-size: 40;
font-family:sans-serif;
margin-bottom: 30px;
}
.about_text{
font-size: 16;
font-family: sans-serif;
}
.about_right{
width: 35%;
min-width: 300px;
height: 300px;
float: left;
margin-left: 50px;
}
.pekar{
width: 110%;
min-width: 300px;
}
.element_sub{
margin-top: 30px;
width: 200px;
height: 30px;
border: 3px solid #fc8e0f;
float: right;
text-align: center;
padding-top: 12px;
font-family:sans-serif;
cursor: pointer;
}
.element_sub:hover{
background-color: #fc8e0f;
color: white;
}
.about_menu {
width: 60%;
min-width: 600px;
height: 300px;
margin-top: 20px;
margin-left: 24%;
}
.pekar_two{
width: 105%;
margin-top: 50px;
}
.about_mm{
margin-top: 60px;
font-size: 40;
font-family:sans-serif;
margin-bottom: 30px;
}
.element_sub_left {
margin-top: 30px;
width: 200px;
height: 30px;
border: 3px solid #fc8e0f;
float: left;
text-align: center;
padding-top: 12px;
font-family:sans-serif;
cursor: pointer;
}
.element_sub_left:hover{
background-color: #fc8e0f;
color: white;
}
.write_us{
width: 100%;
min-width: 1000px;
height: 400px;
margin-top: 50px;
text-align: center;
background-image:
background-position: right;
background-size: cover;
margin-top: 150px;
}
.write_left{
width: 22%;
min-width: 300px;
float: left;
margin-left: 24%;
text-align: left;
margin-top: 30px;
}
.write_right{
width: 35%;
min-width: 300px;
float: left;
display: block;
text-align: left;
margin-top: 50px;
margin-left: 40px;
}
.write_w{
color: white;
font-size: 40;
font-family:sans-serif;
margin-top: 50px;
margin-bottom: 30px;
font-weight: 600;
}
.write_text{
color:white;
font-size: 16;
font-family: sans-serif;
font-weight: 600;
}
.input_write{
color: dimgrey;
width: 450px;
margin-right: 40px;
height: 35px;
padding-left: 20px;
font-size: 14;
margin-bottom: 15px;
font-family: monospace;
}
.input_write_multi{
color: dimgrey;
width: 450px;
margin-right: 40px;
height: 90px;
padding-left: 20px;
font-size: 16;
margin-bottom: 20px;
font-family: monospace;
}
.submit_but{
width: 150px;
text-align: center;
height: 26px;
border: 1px solid darksalmon;
padding-top: 8px;
font-size: 16;
background-color: darksalmon;
font-family: sans-serif;
color: white;
font-weight: 600;
cursor: pointer;
}
.submit_but:hover{
transition: 0.2s;
background-color: #3b3a3f;
border: 1px solid white;
}
.foot_one{
width: 100%;
min-width: 1000px;
height: 40px;
background-color: #282728;
}
.line_line{
width: 100%;
min-width: 1000px;
height: 1px;
background-color: aliceblue;
}
.foot_two{
width: 100%;
min-width: 1000px;
height: 50px;
background-color: #282728;
text-align: center;
color: white;
padding-top: 25px;
font-size: 16;
font-family: sans-serif;
}
.a_all{
color: black;
}
.back_img_products {
width: 100%;
min-width: 1000px;
height: 23%;
max-height: 400px;
min-height: 100px;
background-image
background-size: cover;
background-position: center;
padding-top: 7%
}
.f_line_all{
text-align: center;
font-size: 80;
font-weight: 600;
font-family: sans-serif;
color: white;
}
.category_one{
width: 70%;
min-width: 600px;
margin: auto;
height: 550px;
margin-top: 150px;
display: block;
text-align: center;
}
.l_one{
font-family: 'Roboto Slab',serif;
font-size: 30;
font-weight: bold;
margin-bottom: 20px;
}
.l_two{
font-family: 'Roboto Slab',serif;
font-size: 17;
}
.block_two {
width: 100%;
display: flex;
height: 100%;
margin-bottom: 0;
margin-top: 56px;
}
.item_one{
width: 30%;
height: 400px;
border: 1px solid #efefef;
box-shadow: 1px 1px 3px #c4c4c4;
}
.item_two{
width: 30%;
height: 400px;
border: 1px solid #efefef;
box-shadow: 1px 1px 3px #c4c4c4;
margin-left: 5%;
margin-right: 5%;
}
.item_three{
width: 30%;
height: 400px;
border: 1px solid #efefef;
box-shadow: 1px 1px 3px #c4c4c4;
}
.item_image{
width: 100%;
height: 55%;
background-color: antiquewhite;
}
.item_name {
text-align: center;
height: 8%;
margin-top: 4%;
margin-bottom: 2.5%;
padding-top: 2%;
font-size: 17;
font-weight: 600;
}
.item_price{
text-align: center;
height: 8%;
padding-top: 2%;
font-size: 17;
font-weight: 600;
}
.item_comment{
width: 82%;
margin: auto;
text-align: center;
height: 8%;
padding-top: 2%;
font-size: 17;
}
.image_size{