app/templates/styles/main.css
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Cousine');
* {
box-sizing: border-box;
}
html {
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-weight: lighter;
color: #4A4A4A;
box-sizing: border-box;
line-height: 1.4em;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
strong {
font-weight: 700;
}
a {
text-decoration: none;
color: #FF4543;
cursor: pointer;
}
img {
width: 100%;
height: 100%;
}
a:hover {
color: #B20D0B;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.2em;
}
h2 {
font-size: 1.6em;
margin: 0 0 20px;
}
.mobile {
display: inline;
}
.tablet {
display: none;
}
.desktop {
display: none;
}
.parallax-window {
min-height: 300px;
background: transparent;
width: 100%;
margin: 0;
padding: 0;
}
.separator {
width: 30px;
background-color: #FF4543;
height: 4px;
border-radius: 1px;
margin: auto auto 20px;
}
.section_area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
overflow: hidden;
padding: 0 10px;
}
.limited {
max-width: 992px;
}
.cols {
display: flex;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.cols .text {
width: 100%;
max-width: 496px;
padding-top: 10px;
padding-right: 20px;
}
.col_left {
justify-content: flex-end;
}
.col_right {
justify-content: flex-start;
}
.box {
display: flex;
align-items: center;
width: 100%;
max-width: 496px;
background-color: White;
margin-top: 10px;
padding: 0 20px;
font-size: 1.4em;
}
.box .icon {
display: flex;
justify-content: center;
align-items: center;
min-width: 60px;
min-height: 60px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #FF4543;
color: White;
margin: 20px;
font-size: 1.5em;
}
.box_left {
justify-content: flex-end;
margin-right: 15px;
text-align: right;
}
.box_right {
justify-content: flex-start;
margin-left: 15px;
text-align: left;
}
.code_area {
font-family: 'Cousine', monospace;
border: 1px solid #eee;
border-radius: 3px;
display: block;
clear: both;
color: #4A4A4A;
padding: 5px 10px;
background-color: #ffff0056;
}
.social {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 40px;
}
.social a {
color: #4A4A4A;
font-size: 1.5em;
display: block;
margin-left: 20px;
}
.social a:first-child {
margin-left: 0;
}
#thanks {
display: none;
padding-bottom: 10px;
}
#error_box {
display: none;
padding-bottom: 10px;
color: #B20D0B;
}
#error_box *{
margin: 0;
padding: 0;
}
.error {
border: 1px solid #FF4543 !important;
}
textarea,
input {
background-color: transparent;
border: 1px solid #AEAEAE;
border-radius: 2px;
color: #4A4A4A;
padding: 15px;
height: 40px;
resize: none;
}
textarea::placeholder,
input::placeholder {
color: #4A4A4A;
}
textarea {
min-height: 100px;
}
button {
background-color: transparent;
border: 1px solid #AEAEAE;
border-radius: 2px;
color: #4A4A4A;
height: 40px;
resize: none;
min-width: 150px;
cursor: pointer;
}
button:hover {
background-color: rgba(174, 174, 174, .9);
}
:focus {
outline-color: transparent;
outline-style: none;
}
header {
transition: all 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
height: 60px;
padding: 10px 16px;
background: rgba(0, 0, 0, .5);
z-index: 999;
}
header.sticky {
transition: all 0.3s ease-in-out;
background: rgba(0, 0, 0, .6);
height: 60px;
}
header.sticky + #content {
}
header img#logo {
width: 200px;
height: 40px;
}
header #headerContainer {
max-width: 992px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-icon {
width: 20px;
max-width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: White;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0;
}
#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
top: 9px;
}
#nav-icon span:nth-child(4) {
top: 18px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
menu {
transition: right 0.4s ease-in-out;
position: fixed;
top: 60px;
right: -250px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 250px;
margin: 0;
padding: 15px;
height: calc(100% - 60px);
background: rgba(0, 0, 0, .9);
list-style-type: none;
}
menu.open {
transition: right 0.4s ease-in-out;
right: 0;
}
menu li.title h2 {
font-weight: normal;
margin: 0;
padding: 0;
color: White;
}
menu li {
margin: 15px 25px;
font-size: 18px;
}
menu li a {
color: white;
display: flex;
width: 100%;
height: 100%;
justify-content: flex-start;
align-items: center;
text-decoration: none;
}
menu li a {
position: relative;
transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
}
menu li a:hover {
color: #FFFFFF;
}
menu li a::before {
content: '';
display: block;
position: absolute;
bottom: -5px;
left: 0;
height: 3px;
width: 100%;
margin-top: 20px;
background-color: #FF4543;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s, transform 0.2s ease-out;
}
menu li a:active::before {
background-color: #1DB24A;
}
menu li a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
#slideShow {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
max-height: 100vh;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
}
#slideShow::after {
content: "";
background: url('../img/wallpaper.jpeg');
background-size: cover;
opacity: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
#slideShow .slideShow_container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#slideShow h1 {
font-size: 2.5em;
line-height: 1.2em;
text-align: center;
color: #FFFFFF;
font-weight: 300;
text-transform: uppercase;
padding: 0;
margin: 0;
}
#slideShow h1 strong {
color: #5DFF8E;
font-weight: 300;
}
#slideShow div.subtitle {
color: White;
margin: 30px;
font-size: 1.4em;
line-height: 1.5em;
text-align: center;
}
#slideShow .button {
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
margin-top: 20px;
border-bottom: 6px solid #B20D0B;
border-radius: 4px;
width: 200px;
height: 60px;
background-color: #FF4543;
overflow: hidden;
}
#slideShow .button .fab {
font-size: 1.5em;
}
#slideShow .button a {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
color: #FFFFFF;
text-transform: uppercase;
font-weight: 400;
padding: 10px;
font-size: 1.3em;
}
#learn-more {
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
}
#learn-more .col_left {
align-items: center;
}
#learn-more .separator {
margin: 0 auto 40px auto;
}
#quick-start {
flex-direction: column-reverse;
align-items: center;
padding: 0;
}
#quick-start .text {
text-align: center;
padding: 50px 10px;
}
#features {
margin: 0;
background-color: #EEEEEE;
flex-direction: column;
align-items: center;
padding: 50px 0;
}
#features .container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
text-transform: uppercase;
}
#features .separator {
background-color: #1DB24A;
}
#about {
margin-top: 0px;
padding: 0 0 50px;
}
#about img {
width: 100%;
max-width: 200px;
max-height: 200px;
height: 100%;
margin-bottom: 15px;
}
#about .cols {
flex-direction: column;
text-align: center;
justify-content: center;
}
#about .col_right {
padding: 30px 0 0 0;
}
#about .separator {
margin: 0 auto 40px auto;
}
#about .container {
padding-right: 0;
}
#about .text {
padding: 0;
}
#about h3 {
padding: 0;
margin: 0;
}
#contact {
width: 100%;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column-reverse;
align-items: stretch;
}
#contact::after {
content: "";
background-size: cover;
background: url('../img/contact.jpg') bottom;
opacity: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
overflow: hidden;
}
#contact .button {
font-size: 1.5em;
border: 1px solid White;
padding: 10px;
margin-top: 30px;
width: 150px;
text-align: center;
}
#contact .col {
width: 100%;
}
#contact .text {
padding: 50px 10px;
justify-content: center;
}
#contact .image {
max-width: 200px;
max-height: 100px;
}
#contact .col_left {
background-color: rgba(0, 0, 0, 0.4);
color: #999;
font-size: 0.8em;
height: 100%;
}
#contact .col_left .text {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
align-items: center;
}
#contact .col_left p {
margin-top: 50px;
}
#contact .col_right {
background-color: rgba(93, 255, 142, .6);
text-align: center;
}
#contact .col_right .text {
color: White;
}
#contact label {
display: none;
}
#contact input, #contact textarea {
border: 1px solid White;
color: #4A4A4A;
width: 100%;
margin-bottom: 10px;
}
#contact textarea::placeholder,
#contact input::placeholder {
color: White;
}
#contact button {
border: 2px solid White;
border-radius: 2px;
color: White;
height: 40px;
resize: none;
min-width: 150px;
}
#contact button:hover {
background-color: rgba(255, 255, 255, .5);
}
footer {
min-height: 60px;
background-color: rgba(0, 0, 0, 0.9);
color: #4A4A4A;
font-size: .9em;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
padding: 10px;
}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
.mobile {
display: none;
}
.tablet {
display: inline !important;
}
.desktop {
display: none;
}
.parallax-window {
min-height: 600px;
}
.separator {
margin: 0 0 20px;
}
.section_area {
flex-direction: row;
}
.cols {
width: 50%;
}
.social {
margin-top: 20px;
}
#quick-start {
flex-direction: row;
align-items: stretch;
}
#quick-start .col_left {
padding-top: 70px;
padding-bottom: 70px;
}
#quick-start .text {
text-align: left;
padding: 0px 20px;
}
#features {
padding-top: 70px;
padding-bottom: 70px;
}
#features .container {
flex-direction: row;
}
#about {
padding: 0;
}
#about .text {
padding-top: 20px;
padding-right: 10px;
}
#about .col_right {
padding: 0;
}
#contact .text {
justify-content: flex-start;
}
#contact .image {
margin: auto;
margin-bottom: 0;
margin-top: 20px;
}
#contact .col_right {
padding: 0 70px;
}
#contact .col_right .text {
}
#contact {
height: 450px;
flex-direction: row;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
.mobile {
display: none;
}
.tablet {
display: none;
}
.desktop {
display: inline !important;
}
.social {
justify-content: flex-end;
}
header #headerContainer {
margin-left: 11px;
margin-right: 11px;
}
header {
height: 100px;
background: rgba(0, 0, 0, .5);
}
header img#logo {
width: 247px;
height: 49px;
}
menu {
position: initial;
background: none;
flex-direction: row;
justify-content: right;
width: auto;
height: 100%;
}
menu li {
margin-bottom: 0;
}
menu li.active a {
color: #5DFF8E;
}
menu li.title {
display: none;
}
#nav-icon {
display: none;
}
#learn-more {
padding-top: 70px;
padding-bottom: 70px;
}
#about {
}
#about .col_left {
}
#about .col_right {
padding: 50px 50px 0px 0;
text-align: right;
}
#about .separator {
margin: 0 0 40px auto;
}
#contact .image {
margin-left: 0px;
}
#contact .col_left .text {
display: block;
margin-left: 20px;
text-align: left;
align-items: left;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
}