mirror of
https://github.com/sergeyyarkov/granit-flex.git
synced 2026-10-11 02:09:12 +03:00
Footer
This commit is contained in:
parent
cec01991b2
commit
4c711b9335
95
index.html
95
index.html
@ -254,34 +254,95 @@
|
||||
<div class="container">
|
||||
<h2>Наши услуги</h2>
|
||||
<div class="services-content">
|
||||
<div class="service">
|
||||
<div class="service-img">
|
||||
<img src="./src/img/services/service-1.png" alt="#">
|
||||
<a href="#">
|
||||
<div class="service">
|
||||
<div class="service-img">
|
||||
<img src="./src/img/services/service-1.png" alt="#">
|
||||
</div>
|
||||
<div class="service-title">
|
||||
<h3>Аренда самосвала</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-title">
|
||||
<h3>Аренда самосвала</h3>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="service">
|
||||
<div class="service-img">
|
||||
<img src="./src/img/services/service-2.png" alt="#">
|
||||
</div>
|
||||
<div class="service-title">
|
||||
<h3>Аренда спецтехники</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service">
|
||||
<div class="service-img">
|
||||
<img src="./src/img/services/service-2.png" alt="#">
|
||||
</a>
|
||||
|
||||
<a href="#">
|
||||
<div class="service">
|
||||
<div class="service-img">
|
||||
<img src="./src/img/services/service-3.png" alt="#">
|
||||
</div>
|
||||
<div class="service-title">
|
||||
<h3>Рытье траншеи</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-title">
|
||||
<h3>Аренда спецтехники</h3>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contacts">
|
||||
<div class="container">
|
||||
<div class="contacts-content">
|
||||
<div class="contacts-info">
|
||||
<div class="contact-title">
|
||||
<h3>Контакты</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service">
|
||||
<div class="service-img">
|
||||
<img src="./src/img/services/service-3.png" alt="#">
|
||||
<div class="contact-telephone">
|
||||
<p>
|
||||
8 800 034-23-34
|
||||
<br>
|
||||
8 495 034-23-34
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-title">
|
||||
<h3>Рытье траншеи</h3>
|
||||
<div class="contact-place">
|
||||
<p>
|
||||
Московская обл. г. Балашиха,<br>
|
||||
пер. Столовой, д.23, кор. 34
|
||||
</p>
|
||||
</div>
|
||||
<div class="contact-email">
|
||||
<a href="#">Info@stroika.ru</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-wrap">
|
||||
<div class="footer-content_top">
|
||||
<div class="footer-logo">
|
||||
<p>Granit<br>
|
||||
<small>Доставка нерудных материалов</small>
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-info">
|
||||
<p>8 800 342-13-33<br>
|
||||
<small>Бесплатный звонок по России</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-content_bottom">
|
||||
<div class="footer-copy">
|
||||
<span>© 2019. Гранти</span>
|
||||
</div>
|
||||
<div class="footer-btn">
|
||||
<button class="btn-yellow">Обратный звонок</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
src/img/contacts/contacts-background.png
Normal file
BIN
src/img/contacts/contacts-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
BIN
src/img/contacts/email-icon.png
Normal file
BIN
src/img/contacts/email-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
BIN
src/img/contacts/location-pin.png
Normal file
BIN
src/img/contacts/location-pin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 788 B |
BIN
src/img/contacts/phone-icons.png
Normal file
BIN
src/img/contacts/phone-icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 B |
BIN
src/img/contacts/pin-icon.png
Normal file
BIN
src/img/contacts/pin-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 B |
17
src/img/footer/footer-logo.svg
Normal file
17
src/img/footer/footer-logo.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36.469" height="38" viewBox="0 0 36.469 38">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #292929;
|
||||
fill-rule: evenodd;
|
||||
filter: url(#filter);
|
||||
}
|
||||
</style>
|
||||
<filter id="filter" x="490" y="3530" width="36.469" height="38" filterUnits="userSpaceOnUse">
|
||||
<feFlood result="flood" flood-color="#fff"/>
|
||||
<feComposite result="composite" operator="in" in2="SourceGraphic"/>
|
||||
<feBlend result="blend" in2="SourceGraphic"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<path id="Фигура_1" data-name="Фигура 1" class="cls-1" d="M490,3564.77v-2.25a2.863,2.863,0,0,1,2.845-2.88h16.318c2.231,0,3.382,1.07,3.382,2.66v3.21c0,1.66-1.1,2.49-3.382,2.49H492.631C490.971,3568,490,3566.88,490,3564.77Zm3.221,0.19h16.1a0.218,0.218,0,0,0,.214-0.22v-1.84a0.218,0.218,0,0,0-.214-0.22h-16.1a0.218,0.218,0,0,0-.215.22v1.84A0.218,0.218,0,0,0,493.221,3564.96Zm9.34-22.79a0.21,0.21,0,0,1,.215.21v7.06h0l-0.85,2.31a0.215,0.215,0,0,0,.2.29h1.194a0.206,0.206,0,0,0,.174-0.09l15.54-21.89a0.223,0.223,0,0,1,.284-0.06l3.116,1.9a0.225,0.225,0,0,1,.075.3l-0.918,1.62a0.236,0.236,0,0,0-.028.11v9.54a0.218,0.218,0,0,0,.214.22h0.648a0.209,0.209,0,0,1,.212.24l-0.684,4.89a0.216,0.216,0,0,1-.212.19h-0.178v1.47a0.216,0.216,0,0,0,.116.19,2.422,2.422,0,0,1,.711,3.75,0.216,0.216,0,0,0,.015.31l3.46,3.01a0.217,0.217,0,0,1-.14.38h-0.5a0.234,0.234,0,0,1-.14-0.05l-3.454-3.01a0.2,0.2,0,0,0-.207-0.04,2.844,2.844,0,0,1-.91.16,2.1,2.1,0,0,1-.885-0.2,0.2,0.2,0,0,0-.225.02l-3.747,3.07a0.175,0.175,0,0,1-.135.05h-0.436a0.242,0.242,0,0,1-.149-0.43l3.821-3.14a0.208,0.208,0,0,0,.043-0.28,2.352,2.352,0,0,1-.39-1.35,0.752,0.752,0,1,1,1.5,0,1.17,1.17,0,0,0,.029.27,0.213,0.213,0,0,0,.343.11h0a0.379,0.379,0,0,1,.481.01l0.165,0.14a0.213,0.213,0,0,0,.271.01,0.8,0.8,0,0,0,.278-0.67,0.934,0.934,0,0,0-.8-0.88,0.757,0.757,0,0,1-.627-0.75v-1.94a0.21,0.21,0,0,0-.214-0.21H519.4a0.221,0.221,0,0,1-.21-0.18l-0.965-4.88a0.214,0.214,0,0,1,.21-0.26h0.658a0.218,0.218,0,0,0,.214-0.22v-4.41a0.213,0.213,0,0,0-.4-0.1l-8.589,16.71a0.229,0.229,0,0,0-.024.1v0.62a0.21,0.21,0,0,1-.215.21H507.5a0.217,0.217,0,0,0-.214.22v1.09a0.21,0.21,0,0,1-.215.21H496.226a0.21,0.21,0,0,1-.214-0.21v-1.09a0.218,0.218,0,0,0-.214-0.22h-4.081a0.21,0.21,0,0,1-.214-0.21v-14.01a0.21,0.21,0,0,1,.214-0.21h10.844Zm6.715,3.95-0.009.01,2.508,1.65a0.214,0.214,0,0,0,.316-0.26l-1.192-3.09a0.213,0.213,0,0,0-.373-0.05Zm10.784-2.65a0.218,0.218,0,0,0,.214.22H520.6a0.218,0.218,0,0,0,.214-0.22v-7.29a0.213,0.213,0,0,0-.4-0.1l-0.323.61a0.218,0.218,0,0,0-.025.1v6.68Zm-0.369-8.08,0.922-1.77a0.218,0.218,0,0,0-.072-0.28l-1.437-.95a0.213,0.213,0,0,0-.328.22l0.515,2.72A0.211,0.211,0,0,0,519.691,3535.39Zm-2.319-1.25-1.064,1.87a0.217,0.217,0,0,0,.07.29l1.717,1.12a0.216,0.216,0,0,0,.325-0.23l-0.653-2.99A0.214,0.214,0,0,0,517.372,3534.14Zm-0.12,4.91-1.589-1.05a0.216,0.216,0,0,0-.326.23l0.622,2.86a0.215,0.215,0,0,0,.4.06l0.966-1.82A0.212,0.212,0,0,0,517.252,3539.05Zm-3.238.37-1.207,1.78a0.211,0.211,0,0,0,.061.3l1.815,1.18a0.216,0.216,0,0,0,.325-0.23l-0.608-2.95A0.212,0.212,0,0,0,514.014,3539.42Zm0.378,5.25-2-1.39a0.214,0.214,0,0,0-.321.25l1.14,3.09a0.211,0.211,0,0,0,.391.02l0.862-1.7A0.21,0.21,0,0,0,514.392,3544.67Zm-3.649,6.94,1-1.78a0.213,0.213,0,0,0-.062-0.28l-2.482-1.79a0.215,0.215,0,0,0-.322.26l1.482,3.57A0.211,0.211,0,0,0,510.743,3551.61Zm-1.52,1.43-1.786-3.89a0.214,0.214,0,0,0-.367-0.04l-1.452,2a0.222,0.222,0,0,0,.066.32l3.237,1.89A0.217,0.217,0,0,0,509.223,3553.04Zm-14.5-3.28h4.832a0.21,0.21,0,0,0,.214-0.21v-4.13a0.21,0.21,0,0,0-.214-0.21h-4.832a0.21,0.21,0,0,0-.215.21v4.13A0.21,0.21,0,0,0,494.724,3549.76Zm30.987,12.92h0.537a0.218,0.218,0,0,1,.215.22v1.08a0.218,0.218,0,0,1-.215.22h-11.6a0.218,0.218,0,0,1-.214-0.22v-1.08a0.218,0.218,0,0,1,.214-0.22h1.075a0.218,0.218,0,0,0,.214-0.22v-1.84a0.218,0.218,0,0,0-.214-0.22h-1.075a0.21,0.21,0,0,1-.214-0.21v-1.09a0.218,0.218,0,0,1,.214-0.22h11.6a0.218,0.218,0,0,1,.215.22v1.09a0.21,0.21,0,0,1-.215.21h-1.074a0.218,0.218,0,0,0-.215.22v1.84a0.218,0.218,0,0,0,.215.22h0.537Z" transform="translate(-490 -3530)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@ -3,81 +3,131 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#catalogue .catalogue-content .item {
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 919px) {
|
||||
#services .services-content {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#services .service {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 868px) {
|
||||
#advantages .advantages-content {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#advantages .advantage {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header .header-content_top {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header .header-info {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 679px) {
|
||||
#popular-items .pop-item {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 660px) {
|
||||
header .header-content_bottom ul {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header .header-content_bottom ul li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 619px) {
|
||||
#catalogue .catalogue-content .item {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
#popular-items .popular-items_content {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#contacts .contacts-content {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#contacts .contacts-info {
|
||||
padding-left: 30px;
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
footer .footer-content_top {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .footer-content_bottom {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .footer-copy {
|
||||
align-self: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
footer .footer-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
footer .footer-info p {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 519px) {
|
||||
#popular-items .pop-item {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 440px) {
|
||||
header .header-info {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
header .header-info p {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header .header-info button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
#main-info .more-info span {
|
||||
display: block;
|
||||
|
||||
@ -1,14 +1,23 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6,p {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
@ -17,6 +26,7 @@ h2 {
|
||||
font-family: GothamProBold;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
padding-right: 10px;
|
||||
@ -24,6 +34,7 @@ h2 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.btn-yellow {
|
||||
color: #0d0d0d;
|
||||
font-family: GothamProMedium;
|
||||
@ -34,35 +45,43 @@ h2 {
|
||||
border: none;
|
||||
transition: all .1s;
|
||||
}
|
||||
|
||||
.btn-yellow:hover {
|
||||
border: 2px solid #ffd200;
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.header-content_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-logo p {
|
||||
font-family: GothamProBold;
|
||||
font-size: 20px;
|
||||
@ -71,12 +90,14 @@ header {
|
||||
padding-left: 50px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.header-logo p small {
|
||||
font-family: GothamProLight;
|
||||
font-size: 11px;
|
||||
color: #969696;
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
.header-logo::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
@ -85,6 +106,7 @@ header {
|
||||
position: absolute;
|
||||
background: url(../img/header/logo.svg) no-repeat center center;
|
||||
}
|
||||
|
||||
.header-info p {
|
||||
font-family: GothamProBold;
|
||||
font-size: 18px;
|
||||
@ -94,11 +116,13 @@ header {
|
||||
padding-right: 30px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.header-info p small {
|
||||
font-family: GothamProMedium;
|
||||
font-size: 11px;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
.header-info button {
|
||||
vertical-align: top;
|
||||
height: 40px;
|
||||
@ -112,10 +136,12 @@ header {
|
||||
transition: all .1s;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.header-info button:hover {
|
||||
background-color: #292929;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-content_bottom {
|
||||
min-height: 60px;
|
||||
background-color: #ffcc00;
|
||||
@ -128,10 +154,12 @@ header {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.header-nav ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Section Main Info */
|
||||
#main-info {
|
||||
min-height: 550px;
|
||||
@ -139,12 +167,14 @@ header {
|
||||
background-size: cover;
|
||||
padding-top: 170px;
|
||||
}
|
||||
|
||||
.main-info_content h1 {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
font-family: GothamProBold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.main-info_content p {
|
||||
color: #fff;
|
||||
font-family: GothamProLight;
|
||||
@ -152,33 +182,40 @@ header {
|
||||
line-height: 22px;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.more-info {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.more-info button {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.more-info span {
|
||||
color: #fff;
|
||||
font-family: GothamProLight;
|
||||
font-size: 12px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.more-info span a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
font-family: GothamProMedium;
|
||||
}
|
||||
|
||||
/* Section Catalogue */
|
||||
#catalogue {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.catalogue-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 300px;
|
||||
height: 470px;
|
||||
@ -188,15 +225,19 @@ header {
|
||||
padding-left: 35px;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
min-height: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.item-image img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item:nth-child(3) img {
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.item-title h3 {
|
||||
font-size: 15px;
|
||||
font-family: GothamProMedium;
|
||||
@ -205,38 +246,46 @@ header {
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.item-description p {
|
||||
color: #626262;
|
||||
font-size: 13px;
|
||||
font-family: GothamProLight;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.item-price p {
|
||||
font-size: 16px;
|
||||
font-family: GothamProMedium;
|
||||
color: #0f0f0f;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
padding-right: 23px;
|
||||
padding-left: 23px;
|
||||
}
|
||||
|
||||
.item-btn button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-btn button:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Section Advantages */
|
||||
#advantages {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.advantages-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.advantage {
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
@ -248,19 +297,23 @@ header {
|
||||
padding-left: 25px;
|
||||
color: #292929;
|
||||
}
|
||||
|
||||
.advantage:nth-child(3) {
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.advantage-image {
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.advantage-title {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
font-family: GothamProMedium;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.advantage-description {
|
||||
font-family: GothamProLight;
|
||||
font-size: 13px;
|
||||
@ -272,11 +325,13 @@ header {
|
||||
padding-bottom: 80px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.popular-items_content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pop-item {
|
||||
width: 220px;
|
||||
height: 345px;
|
||||
@ -285,9 +340,11 @@ header {
|
||||
padding-top: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.pop-img {
|
||||
min-height: 155px;
|
||||
}
|
||||
|
||||
.pop-img span {
|
||||
height: 23px;
|
||||
width: 55px;
|
||||
@ -303,52 +360,60 @@ header {
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pop-title h3 {
|
||||
font-size: 13px;
|
||||
font-family: GothamProMedium;
|
||||
font-weight: normal;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.pop-price {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 25px;
|
||||
font-family: GothamProMedium;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pop-item.sale p {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.pop-price span {
|
||||
font-size: 10px;
|
||||
text-decoration: line-through;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.pop-btn button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pop-btn button:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pop-btn {
|
||||
padding-right: 18px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.pop-item:nth-child(3) {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
/* Section Services */
|
||||
/* #main-info, #catalogue, #advantages, #popular-items {
|
||||
display: nsdsdsdsdsdone;
|
||||
} */
|
||||
#services {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.services-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.service {
|
||||
text-align: center;
|
||||
font-family: GothamProMedium;
|
||||
@ -357,11 +422,194 @@ header {
|
||||
width: 300px;
|
||||
height: 253px;
|
||||
padding-top: 45px;
|
||||
transition: all .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.service:hover {
|
||||
opacity: .6;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.service-img {
|
||||
height: 129px;
|
||||
}
|
||||
|
||||
.service-title h3 {
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #c1c1c1;
|
||||
}
|
||||
|
||||
/* Section Contacts */
|
||||
#contacts {
|
||||
min-height: 520px;
|
||||
background: url(../img/contacts/contacts-background.png) no-repeat center center;
|
||||
background-size: cover;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.contacts-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #292929;
|
||||
}
|
||||
|
||||
.contacts-info {
|
||||
width: 380px;
|
||||
height: 360px;
|
||||
background-color: #fff;
|
||||
padding-left: 60px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.contact-title h3 {
|
||||
font-family: GothamProBold;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contact-telephone {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.contact-telephone p {
|
||||
font-size: 14px;
|
||||
padding-left: 25px;
|
||||
font-family: GothamProMedium;
|
||||
}
|
||||
|
||||
.contact-telephone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: 2px;
|
||||
background: url(../img/contacts/phone-icons.png);
|
||||
}
|
||||
|
||||
.contact-place {
|
||||
margin-top: 40px;
|
||||
font-family: GothamProMedium;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contact-place p {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.contact-place::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
margin-top: 2px;
|
||||
background: url(../img/contacts/pin-icon.png);
|
||||
}
|
||||
|
||||
.contact-email a {
|
||||
font-family: GothamProMedium;
|
||||
font-size: 14px;
|
||||
text-decoration: underline;
|
||||
display: block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.contact-email {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.contact-email::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
margin-top: 3px;
|
||||
background: url(../img/contacts/email-icon.png);
|
||||
}
|
||||
|
||||
footer {
|
||||
min-height: 196px;
|
||||
background-color: #292929;
|
||||
padding-bottom: 45px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.footer-content_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-copy span {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: GothamProMedium;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.footer-content_bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.footer-logo p {
|
||||
font-family: GothamProBold;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
line-height: 19px;
|
||||
padding-left: 50px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer-logo p small {
|
||||
font-family: GothamProLight;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
.footer-logo::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: url(../img/footer/footer-logo.svg) no-repeat center center;
|
||||
}
|
||||
|
||||
.footer-info p {
|
||||
font-family: GothamProBold;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.footer-info p small {
|
||||
font-family: GothamProMedium;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.footer-btn button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.footer-btn button:hover {
|
||||
background-color: #ffd200;
|
||||
color: #000;
|
||||
border: none;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user