bubble/advogrand-grid
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/advogrand-grid.git synced 2026-10-11 18:29:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sergey 2019-08-21 11:43:26 +03:00 committed by GitHub
parent 3a48ef5ce8
commit 511aa26f67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 215 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/styles/media.css
View File

@ -3,19 +3,33 @@
margin-right: 15px; margin-right: 15px;
} }
} }
@media (max-width: 930px) {
#price .section-price_wrap {
grid-template-columns: 1fr 1fr;
}
#price .section-price_wrap div:nth-child(3) {
grid-column: 1/3;
}
}
@media (max-width: 920px) { @media (max-width: 920px) {
header ul li { header ul li {
margin-right: 5px; margin-right: 5px;
} }
} }
@media (max-width: 900px) { @media (max-width: 900px) {
#apps .section-apps_wrap { #apps .section-apps_wrap {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
#apps .section-apps_download { #apps .section-apps_download {
text-align: center; text-align: center;
} }
} }
@media (max-width: 870px) { @media (max-width: 870px) {
#about .section-about_wrap { #about .section-about_wrap {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -56,8 +70,9 @@
#first { #first {
padding-top: 60px; padding-top: 60px;
} }
} }
@media(min-width: 861px) { @media(min-width: 861px) {
header .header-content_top { header .header-content_top {
position: fixed; position: fixed;
@ -74,6 +89,7 @@
background-color: #fff; background-color: #fff;
z-index: 999; z-index: 999;
} }
header .header-content_bottom { header .header-content_bottom {
margin-top: 70px; margin-top: 70px;
} }
@ -96,18 +112,38 @@
grid-column: 1/3; grid-column: 1/3;
margin-top: 40px; margin-top: 40px;
} }
#price .choose-card {
flex-direction: column;
}
#price .tabs-card {
margin-top: 20px;
}
} }
@media (max-width: 670px) {
#price .section-price_wrap {
grid-template-columns: 1fr;
}
#price .section-price_wrap div:nth-child(3) {
grid-column: 1;
}
}
@media(max-width: 655px) { @media(max-width: 655px) {
#comments .section-comments_wrap ul { #comments .section-comments_wrap ul {
display: block; display: block;
padding: 0; padding: 0;
} }
#comments .section-comments_wrap ul li { #comments .section-comments_wrap ul li {
margin-top: 35px; margin-top: 35px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
} }
} }
@media (max-width: 620px) { @media (max-width: 620px) {
#advantage .section-advantage_wrap .advantage-cards { #advantage .section-advantage_wrap .advantage-cards {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -162,11 +198,13 @@
padding-right: 0; padding-right: 0;
} }
} }
@media (max-width: 446px) { @media (max-width: 446px) {
.section-apps_download img { .section-apps_download img {
margin-top: 20px; margin-top: 20px;
} }
} }
@media (max-width: 360px) { @media (max-width: 360px) {
#first .section-first_wrap h1 { #first .section-first_wrap h1 {
font-size: 28px; font-size: 28px;

182
src/styles/style.css
View File

@ -54,6 +54,31 @@ h2 {
a { a {
text-decoration: none; text-decoration: none;
} }
/* Fade Animation */
.fade {
-webkit-animation-name: fade;
animation-name: fade;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: fade;
-webkit-animation-duration: 0.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.1;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0.1;
}
to {
opacity: 1;
}
}
.btn-red { .btn-red {
height: 65px; height: 65px;
width: 300px; width: 300px;
@ -69,7 +94,38 @@ a {
} }
.btn-red:hover { .btn-red:hover {
background-color: #d15252; background-color: #d15252;
}
.btn-orange, .btn-green, .btn-blue, .btn-grey {
width: 100%;
margin-top: 15px;
height: 55px;
border: none;
border-radius: 5px;
color: #fff;
font-family: MullerBold;
font-size: 18px;
text-align: center;
cursor: pointer;
}
.btn-orange {
background: -moz-linear-gradient( 90deg, rgb(255,46,0) 0%, rgb(255,76,37) 100%);
background: -webkit-linear-gradient( 90deg, rgb(255,46,0) 0%, rgb(255,76,37) 100%);
background: -ms-linear-gradient( 90deg, rgb(255,46,0) 0%, rgb(255,76,37) 100%);
}
.btn-grey {
background-color: #9a9a9a;
}
.btn-green {
background: -moz-linear-gradient( 90deg, rgb(0,142,0) 0%, rgb(0,163,0) 100%);
background: -webkit-linear-gradient( 90deg, rgb(0,142,0) 0%, rgb(0,163,0) 100%);
background: -ms-linear-gradient( 90deg, rgb(0,142,0) 0%, rgb(0,163,0) 100%);
}
.btn-blue {
background: -moz-linear-gradient( 90deg, rgb(0,28,103) 0%, rgb(2,56,143) 100%);
background: -webkit-linear-gradient( 90deg, rgb(0,28,103) 0%, rgb(2,56,143) 100%);
background: -ms-linear-gradient( 90deg, rgb(0,28,103) 0%, rgb(2,56,143) 100%);
} }
.container { .container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -544,9 +600,7 @@ header {
margin-top: 20px; margin-top: 20px;
} }
/* Section Partners */ /* Section Partners */
/* #first, #services, #about, #turn, #advantage, #apps, #comments {
display: none;
} */
#partners { #partners {
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
@ -577,11 +631,127 @@ header {
font-size: 13px; font-size: 13px;
font-family: MullerLight; font-family: MullerLight;
text-align: center; text-align: center;
padding: 20px; padding: 15px;
} }
.owl-prev span { .section-partners_wrap .owl-prev span {
top: 30px !important; top: 30px !important;
} }
.owl-next span { .section-partners_wrap .owl-next span {
top: 30px !important; top: 30px !important;
} }
/* Section Price */
#price {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f5f5f5;
}
#price h2 {
text-align: left;
font-family: MullerBold;
font-size: 30px;
color: #313131;
}
#price .about-card p {
margin-top: 40px;
font-size: 18px;
text-align: left;
font-family: MullerBold;
color: #313131;
}
#price .choose-title p {
margin-top: 40px;
font-size: 18px;
text-align: left;
font-family: MullerLight;
color: #313131;
}
.choose-card {
display: flex;
justify-content: space-between;
}
.tabs-card {
align-self: flex-end;
}
.tabs-card a {
color: #313131;
text-transform: uppercase;
font-size: 14px;
font-family: MullerMedium;
margin-right: 15px;
padding: 10px;
}
.tabs-card a:hover {
color: #e42626;
}
.tabs-card a.active {
border: 2px solid #e42626;
border-radius: 5px;
}
.section-price_wrap {
margin-top: 40px;
}
.card-title h3 {
font-family: MullerLight;
font-size: 20px;
}
.card-title h3 span {
color: #000;
font-family: MullerBold;
font-size: 20px;
}
.card-title, .card-image {
text-align: center;
}
.card-image {
margin-top: 30px;
}
.card {
padding-right: 20px;
padding-left: 20px;
padding-top: 50px;
padding-bottom: 50px;
background-color: #fff;
border: 1px solid #e8e8e8;
}
.card-list_info ul {
padding: 0;
margin-top: 30px;
min-height: 355px;
}
.card-list_info ul li {
list-style: none;
text-align: left;
padding-bottom: 16px;
padding-top: 13px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
font-family: MullerLight;
font-size: 13px;
display: flex;
justify-content: space-between;
}
.card-list_info ul li span {
text-align: right;
font-family: MullerBold;
}
.card-cost p {
font-family: MullerLight;
text-align: center;
line-height: 30px;
}
.card-cost p span {
font-family: MullerBold;
font-size: 24px;
}
.section-price_wrap {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 920px;
}
.card-buttons form {
text-align: center;
}
.card-buttons button {
max-width: 220px;
}