mirror of
https://github.com/sergeyyarkov/granit-flex.git
synced 2026-10-11 10:19:27 +03:00
Add files via upload
This commit is contained in:
Sergey
GitHub
parent
3b440b0a66
commit
fc86f6cd7d
16
src/styles/fonts.css
Normal file
16
src/styles/fonts.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: GothamPro; /* Имя шрифта */
|
||||||
|
src: url(../fonts/GothamPro.ttf); /* Путь к файлу со шрифтом */
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: GothamProBold; /* Имя шрифта */
|
||||||
|
src: url(../fonts/GothamPro-Bold.ttf); /* Путь к файлу со шрифтом */
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: GothamProLight; /* Имя шрифта */
|
||||||
|
src: url(../fonts/GothamPro-Light.ttf); /* Путь к файлу со шрифтом */
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: GothamProMedium; /* Имя шрифта */
|
||||||
|
src: url(../fonts/GothamPro-Medium.ttf); /* Путь к файлу со шрифтом */
|
||||||
|
}
|
||||||
367
src/styles/style.css
Normal file
367
src/styles/style.css
Normal file
@ -0,0 +1,367 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6,p {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #292929;
|
||||||
|
font-family: GothamProBold;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 960px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.btn-yellow {
|
||||||
|
color: #0d0d0d;
|
||||||
|
font-family: GothamProMedium;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #ffd200;
|
||||||
|
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;
|
||||||
|
color: #292929;
|
||||||
|
line-height: 19px;
|
||||||
|
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;
|
||||||
|
width: 38px;
|
||||||
|
height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
background: url(../img/header/logo.svg) no-repeat center center;
|
||||||
|
}
|
||||||
|
.header-info p {
|
||||||
|
font-family: GothamProBold;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #292929;
|
||||||
|
text-align: right;
|
||||||
|
display: inline-block;
|
||||||
|
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;
|
||||||
|
border: 2px solid #292929;
|
||||||
|
color: #292929;
|
||||||
|
text-align: center;
|
||||||
|
font-family: GothamProMedium;
|
||||||
|
font-size: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .1s;
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
.header-info button:hover {
|
||||||
|
background-color: #292929;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.header-content_bottom {
|
||||||
|
min-height: 60px;
|
||||||
|
background-color: #ffcc00;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: GothamProMedium;
|
||||||
|
padding-left: 70px;
|
||||||
|
padding-right: 70px;
|
||||||
|
padding-top: 23px;
|
||||||
|
padding-bottom: 23px;
|
||||||
|
position: relative;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.header-nav ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
/* Section Main Info */
|
||||||
|
#main-info {
|
||||||
|
min-height: 550px;
|
||||||
|
background: url(../img/main-info/main-info_background.jpg) no-repeat center center;
|
||||||
|
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;
|
||||||
|
font-size: 14px;
|
||||||
|
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;
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid #f6f6f6;
|
||||||
|
padding-right: 35px;
|
||||||
|
padding-left: 35px;
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
.item-image {
|
||||||
|
min-height: 130px;
|
||||||
|
}
|
||||||
|
.item-image img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.item:nth-child(3) img {
|
||||||
|
height: 110px;
|
||||||
|
}
|
||||||
|
.item-title h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: GothamProMedium;
|
||||||
|
color: #292929;
|
||||||
|
display: inline-block;
|
||||||
|
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;
|
||||||
|
height: 253px;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-right: 25px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Popular Items */
|
||||||
|
#popular-items {
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.popular-items_content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.pop-item {
|
||||||
|
width: 220px;
|
||||||
|
height: 345px;
|
||||||
|
border: 2px solid #f6f6f6;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.pop-img {
|
||||||
|
min-height: 155px;
|
||||||
|
}
|
||||||
|
.pop-img span {
|
||||||
|
height: 23px;
|
||||||
|
width: 55px;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #ff0000;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: GothamProMedium;
|
||||||
|
position: absolute;
|
||||||
|
padding-top: 6px;
|
||||||
|
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: none;
|
||||||
|
} */
|
||||||
|
#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;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
width: 300px;
|
||||||
|
height: 253px;
|
||||||
|
padding-top: 45px;
|
||||||
|
}
|
||||||
|
.service-img {
|
||||||
|
height: 129px;
|
||||||
|
}
|
||||||
|
.service-title h3 {
|
||||||
|
display: inline-block;
|
||||||
|
border-bottom: 1px solid #c1c1c1;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user