CSS Beautification
- fixed URL
This commit is contained in:
Hendrik Blöß committed
1 parent
3949d34318
commit
c0b6c5eba8
2 files changed
+166
-118
No files matched your search
+1
-1
@@ -3,7 +3,7 @@
|
||||
|
||||
# NB! Set your site's url, otherwise stuff will break :)
|
||||
|
||||
url: "https://hendrikbl.github.io"
|
||||
url: "https://hendrikbl.github.io/Vocaluxe"
|
||||
|
||||
# If you're hosting your site at a Project repository on GitHub pages
|
||||
# (https://yourusername.github.io/repository-name)
|
||||
|
||||
+165
-117
@@ -18,32 +18,38 @@ body {
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2576E5;
|
||||
color: #428bca;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
-o-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #e76c3c;
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 50px 0px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
-o-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.btn-lg{
|
||||
|
||||
.btn-lg {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.btn-common {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 1px solid white;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.btn-common:hover {
|
||||
border-color: #428bca;
|
||||
color: #428bca;
|
||||
@@ -61,17 +67,19 @@ a:hover {
|
||||
font-weight: 100;
|
||||
padding-bottom: 25px;
|
||||
position: relative;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/**Navigation**/
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
@@ -84,18 +92,20 @@ a:hover {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > .active > a,
|
||||
.navbar-default .navbar-nav > .active > a:hover,
|
||||
.navbar-default .navbar-nav > .active > a:focus {
|
||||
.navbar-default .navbar-nav>.active>a,
|
||||
.navbar-default .navbar-nav>.active>a:hover,
|
||||
.navbar-default .navbar-nav>.active>a:focus {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav li a,
|
||||
.navbar-default .navbar-nav li a:hover {
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
}
|
||||
.navbar-default .navbar-nav > .active,
|
||||
|
||||
.navbar-default .navbar-nav>.active,
|
||||
.navbar-default .navbar-nav li:hover {
|
||||
border-bottom: 3px solid #428bca;
|
||||
color: #fff;
|
||||
@@ -110,7 +120,7 @@ a:hover {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.navbar-default .faviconPng{
|
||||
.navbar-default .faviconPng {
|
||||
height: 16pt;
|
||||
width: 16pt;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
@@ -122,16 +132,19 @@ a:hover {
|
||||
.navbar-default .navbar-brand:hover {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle .icon-bar {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle:hover,
|
||||
.navbar-default .navbar-toggle:focus {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.affix.navbar-default {
|
||||
background: #2C3E50;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
padding-top: 0;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
@@ -148,7 +161,7 @@ a:hover {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.affix.navbar-default .navbar-brand .faviconPng{
|
||||
.affix.navbar-default .navbar-brand .faviconPng {
|
||||
height: 16pt;
|
||||
width: 16pt;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
@@ -157,16 +170,14 @@ a:hover {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
@media (min-width: 767px){
|
||||
@media (min-width: 767px) {
|
||||
.navbar-default {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.navbar-default .faviconPng{
|
||||
.navbar-default .faviconPng {
|
||||
height: 25pt;
|
||||
width: 25pt;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
@@ -176,7 +187,9 @@ a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**Hero area**/
|
||||
|
||||
#hero-area {
|
||||
background: #2C3E50;
|
||||
color: #fff;
|
||||
@@ -194,11 +207,10 @@ a:hover {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px){
|
||||
@media (max-width: 992px) {
|
||||
#hero-area img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#hero-area .row {
|
||||
padding-top: 75px;
|
||||
padding-bottom: 50px;
|
||||
@@ -208,11 +220,13 @@ a:hover {
|
||||
#hero-area .btn {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#hero-area .title {
|
||||
font-size: 60pt;
|
||||
text-align: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#hero-area .subtitle {
|
||||
font-size: 32pt;
|
||||
font-weight: 100;
|
||||
@@ -221,31 +235,38 @@ a:hover {
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
#hero-area p {
|
||||
font-size: 14pt;
|
||||
font-weight: 100;
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
|
||||
#services h3 {
|
||||
margin-top: 0;
|
||||
font-size: 28px;
|
||||
color: #2576E5;
|
||||
}
|
||||
|
||||
|
||||
/*Portfolio*/
|
||||
|
||||
#portfolio {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
|
||||
/*Portfolio Overlay */
|
||||
|
||||
.portfolio-item {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.portfolio-item img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portfolio-item .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -255,6 +276,7 @@ a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -264,6 +286,7 @@ a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.portfolio-item .icons .preview {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
@@ -276,12 +299,15 @@ a:hover {
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.portfolio-item .icons .preview i {
|
||||
color: #2576E5;
|
||||
}
|
||||
|
||||
#clients {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#about {
|
||||
background: #2C3E50;
|
||||
color: #fff;
|
||||
@@ -290,18 +316,23 @@ a:hover {
|
||||
#contact {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
#contact ::-webkit-input-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact :-moz-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact ::-moz-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact :-ms-input-placeholder {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
#contact .social i {
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
@@ -311,39 +342,49 @@ a:hover {
|
||||
vertical-align: middle;
|
||||
background: #34495e;
|
||||
}
|
||||
|
||||
#contact .social .social-links a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-facebook:hover {
|
||||
background: #3b5998;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-twitter:hover {
|
||||
background: #00CAFB;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-google-plus:hover {
|
||||
background: #D23A1D;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-linkedin:hover {
|
||||
background: #007bb6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-dribbble:hover {
|
||||
background: #ea4c89;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .social .fa-github:hover {
|
||||
background: #171515;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contact .contact-info {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
#contact .contact-info p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#contact .contact-form .form-control {
|
||||
box-shadow: none;
|
||||
font-size: 17px;
|
||||
@@ -352,7 +393,9 @@ a:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
/*Scroll Top*/
|
||||
|
||||
.to-top i {
|
||||
padding: 10px 15px;
|
||||
margin: 10px;
|
||||
@@ -360,6 +403,7 @@ a:hover {
|
||||
color: #34495e;
|
||||
border: 2px solid #34495e;
|
||||
}
|
||||
|
||||
.to-top i:hover {
|
||||
background: #34495e;
|
||||
color: #fff;
|
||||
@@ -373,66 +417,68 @@ a:hover {
|
||||
background: #F1F1F1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#copyright a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
/*Feature Section*/
|
||||
|
||||
.feature {
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 250px;
|
||||
background-color: white;
|
||||
margin-bottom: 30px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 250px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.feature:hover .caption {
|
||||
opacity: 1;
|
||||
transform: translateY(-250px);
|
||||
-webkit-transform: translateY(-250px);
|
||||
-moz-transform: translateY(-250px);
|
||||
-ms-transform: translateY(-250px);
|
||||
-o-transform: translateY(-250px);
|
||||
opacity: 1;
|
||||
transform: translateY(-250px);
|
||||
-webkit-transform: translateY(-250px);
|
||||
-moz-transform: translateY(-250px);
|
||||
-ms-transform: translateY(-250px);
|
||||
-o-transform: translateY(-250px);
|
||||
}
|
||||
|
||||
.feature img{
|
||||
z-index: 4;
|
||||
.feature img {
|
||||
z-index: 4;
|
||||
height: 100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.feature .caption{
|
||||
position: absolute;
|
||||
top: 242px;
|
||||
-webkit-transition:all 0.4s ease-in-out;
|
||||
-moz-transition:all 0.4s ease-in-out;
|
||||
-o-transition:all 0.4s ease-in-out;
|
||||
-ms-transition:all 0.4s ease-in-out;
|
||||
transition:all 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
.feature .caption {
|
||||
position: absolute;
|
||||
top: 242px;
|
||||
-webkit-transition: all 0.4s ease-in-out;
|
||||
-moz-transition: all 0.4s ease-in-out;
|
||||
-o-transition: all 0.4s ease-in-out;
|
||||
-ms-transition: all 0.4s ease-in-out;
|
||||
transition: all 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature .blur{
|
||||
background-color: #428bca;
|
||||
height: 300px;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
.feature .blur {
|
||||
background-color: #428bca;
|
||||
height: 300px;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature .caption-text{
|
||||
z-index: 10;
|
||||
color: white;
|
||||
position: absolute;
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
top:-20px;
|
||||
width: 100%;
|
||||
.feature .caption-text {
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
top: -20px;
|
||||
width: 100%;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
@@ -456,8 +502,8 @@ a:hover {
|
||||
.feature .caption-text h4 {
|
||||
font-size: 20pt;
|
||||
color: #2C3E50;
|
||||
padding: 0px;
|
||||
margin-top: -40px;
|
||||
padding: 0px;
|
||||
margin-top: -40px;
|
||||
-webkit-transition: all 0.27s ease-in-out;
|
||||
-moz-transition: all 0.27s ease-in-out;
|
||||
-o-transition: all 0.27s ease-in-out;
|
||||
@@ -465,8 +511,8 @@ a:hover {
|
||||
}
|
||||
|
||||
.feature:hover .caption-text h4 {
|
||||
margin-top: 40px;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
color: #fff;
|
||||
-webkit-transition: all 0.27s ease-in-out;
|
||||
-moz-transition: all 0.27s ease-in-out;
|
||||
-o-transition: all 0.27s ease-in-out;
|
||||
@@ -474,17 +520,20 @@ a:hover {
|
||||
}
|
||||
|
||||
.contribute-icon {
|
||||
font-size:65px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 65px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
text-align:center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*Download Section*/
|
||||
#download, #help {
|
||||
|
||||
#download,
|
||||
#help {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
@@ -492,7 +541,7 @@ a:hover {
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
@@ -531,7 +580,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.release-details {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card .release-date {
|
||||
@@ -541,9 +590,9 @@ a:hover {
|
||||
}
|
||||
|
||||
.btnDownload {
|
||||
margin: 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
margin: 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btnDownload:hover {
|
||||
@@ -551,78 +600,77 @@ a:hover {
|
||||
}
|
||||
|
||||
.btnDownloadIcon {
|
||||
/*flex: 0 0 auto;*/
|
||||
padding-right: 5px;
|
||||
/*font-size: 1em;*/
|
||||
/*flex: 0 0 auto;*/
|
||||
padding-right: 5px;
|
||||
/*font-size: 1em;*/
|
||||
}
|
||||
|
||||
.release-section {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-around;
|
||||
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%;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.release-section {
|
||||
flex-direction: row;
|
||||
}
|
||||
.card {
|
||||
max-width: 27%;
|
||||
min-width: 27%;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-box-col {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-box-row {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex00a {
|
||||
flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.flex11a {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex11100 {
|
||||
flex: 1 1 100%;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.no-release-text {
|
||||
margin-top: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
color: red;
|
||||
padding: 15px;
|
||||
background-color: white;
|
||||
box-shadow: inset 0px 0px 0px 10px red;
|
||||
transform: rotate(30deg);
|
||||
margin-top: 20%;
|
||||
margin-left: 20%;
|
||||
font-size: 25px;
|
||||
width: 65%;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
color: red;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0px 0px 0px 10px red;
|
||||
transform: rotate(30deg);
|
||||
margin-top: 20%;
|
||||
margin-left: 20%;
|
||||
font-size: 25px;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.stamp:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../img/stamp.jpg");
|
||||
mix-blend-mode: lighten;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../img/stamp.jpg");
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
Reference in new issue
Block a user