Updated design
changed a lot of things
This commit is contained in:
Hendrik Blöß committed
1 parent
39888142eb
commit
583f0bd6ab
9 files changed
+165
-313
No files matched your search
+131
-51
@@ -1,13 +1,13 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
|
||||
body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
a {
|
||||
@@ -21,47 +21,51 @@ a:hover {
|
||||
color: #e76c3c;
|
||||
}
|
||||
.row {
|
||||
padding: 80px 0px;
|
||||
padding: 50px 0px;
|
||||
}
|
||||
.btn {
|
||||
border: none;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
-o-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
text-transform: uppercase;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-lg{
|
||||
border-radius: 25px;
|
||||
}
|
||||
.btn-common {
|
||||
background: #3d566e;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 1px solid white;
|
||||
}
|
||||
.btn-common:hover {
|
||||
background: #2576E5;
|
||||
color: #fff;
|
||||
border-color: #428bca;
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
margin-bottom: 35px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
padding-bottom: 30px;
|
||||
padding-bottom: 25px;
|
||||
position: relative;
|
||||
color: #bdc3c7;
|
||||
color: white;
|
||||
}
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar li {
|
||||
color: #d1d1d1;
|
||||
color: white;
|
||||
}
|
||||
.navbar-default {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: #2C3E50;
|
||||
}
|
||||
.navbar-default .navbar-nav > .active > a,
|
||||
.navbar-default .navbar-nav > .active > a:hover,
|
||||
@@ -75,14 +79,12 @@ a:hover {
|
||||
}
|
||||
.navbar-default .navbar-nav > .active,
|
||||
.navbar-default .navbar-nav li:hover {
|
||||
background: #2576E5;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 3px solid #428bca;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-default .navbar-brand {
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
}
|
||||
.navbar-default .navbar-brand:hover {
|
||||
color: #eee;
|
||||
@@ -92,41 +94,63 @@ a:hover {
|
||||
}
|
||||
.navbar-default .navbar-toggle:hover,
|
||||
.navbar-default .navbar-toggle:focus {
|
||||
background: #333;
|
||||
background: transparent;
|
||||
}
|
||||
.affix.navbar-default {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: #2C3E50;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
/**Hero area**/
|
||||
#hero-area {
|
||||
background: #013543;
|
||||
background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: -moz-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: -o-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: -ms-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background: #2C3E50;
|
||||
color: #fff;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
#hero-area img {
|
||||
max-width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#hero-area .row {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#hero-area .btn {
|
||||
margin-right: 20px;
|
||||
}
|
||||
#hero-area img {
|
||||
max-width: 100%;
|
||||
#hero-area .title {
|
||||
font-size: 60pt;
|
||||
text-align: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#hero-area .subtitle {
|
||||
font-size: 32pt;
|
||||
font-weight: 100;
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
#hero-area p {
|
||||
padding: 50px 0;
|
||||
font-size: 14pt;
|
||||
font-weight: 100;
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
|
||||
#services h3 {
|
||||
margin-top: 0;
|
||||
font-size: 28px;
|
||||
color: #2576E5;
|
||||
}
|
||||
|
||||
#download, #help {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
/*Portfolio*/
|
||||
#portfolio {
|
||||
background: #f1f1f1;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
/*Portfolio Overlay */
|
||||
.portfolio-item {
|
||||
@@ -173,12 +197,7 @@ a:hover {
|
||||
background: #fff;
|
||||
}
|
||||
#about {
|
||||
background: #013543;
|
||||
background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: -moz-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: -o-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: -ms-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background-image: radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
|
||||
background: #2C3E50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -338,38 +357,99 @@ a:hover {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/*Download Section*/
|
||||
#download, #help {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
#download p {
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 13pt;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.nightly {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
|
||||
.nightly .release-date a {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.pre-release {
|
||||
background-color: #E74C3C;
|
||||
}
|
||||
|
||||
.pre-release .release-date a {
|
||||
color: #2C3E50;
|
||||
}
|
||||
|
||||
.stable {
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
.stable .release-date a {
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.release-details {
|
||||
text-align:left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card .release-date {
|
||||
font-size: 11pt;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.btnDownload {
|
||||
display:flex;
|
||||
flex: 1 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
margin: 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btnDownload:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btnDownloadIcon {
|
||||
flex: 0 0 auto;
|
||||
padding-right:10px;
|
||||
font-size:2em;
|
||||
}
|
||||
|
||||
.btnDownloadText {
|
||||
flex: 0 1 auto;
|
||||
/*flex: 0 0 auto;*/
|
||||
padding-right: 5px;
|
||||
/*font-size: 1em;*/
|
||||
}
|
||||
|
||||
.release-section {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media (min-width: 992px){
|
||||
.release-section {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 27%;
|
||||
min-width: 27%;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-box-col {
|
||||
@@ -421,4 +501,4 @@ a:hover {
|
||||
height: 100%;
|
||||
background-image: url("../img/stamp.jpg");
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user