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