mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2026-05-11 16:00:12 +00:00
Website templates
This commit is contained in:
Dawid Olko
@@ -0,0 +1,98 @@
|
||||
/*******************************/
|
||||
/* Navigatioin */
|
||||
/*******************************/
|
||||
.navbar-inverse { border-radius: 0; background:rgba(0, 0, 0, .8); border-bottom:1px solid rgba(255, 255, 255, 0.15); min-height:100px; padding-top:25px; margin-bottom:0;}
|
||||
.navbar-inverse *:focus { outline: 0; }
|
||||
@media (max-width: 767px) {
|
||||
.navbar-inverse { background:rgba(0,0,0,.9); }
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a,
|
||||
.navbar-inverse .navbar-nav > .open ul > a { color:rgba(255, 255, 255, .4); }
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background:none ; }
|
||||
.navbar-inverse .navbar-nav > .open > a{ background:none; color:white; }
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a:hover,
|
||||
.navbar-inverse .navbar-nav>li>a:focus,
|
||||
.navbar-inverse .navbar-nav>.open>a:hover,
|
||||
.navbar-inverse .navbar-nav>.open>a:focus { background:none; color:white; }
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a { background:none; color:white; }
|
||||
|
||||
.navbar-inverse .navbar-brand { font-family: "Open sans", helvetica, arial; font-size: 24px; color:white; padding:0 0 0 15px; margin:12px 0 0 0; }
|
||||
.navbar-inverse .navbar-brand img { margin-top:-8px;}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
left:-5px;
|
||||
font-size: 13px;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
border: 0px none;
|
||||
-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
.navbar-nav .dropdown-menu > li > a { color:rgba(255, 255, 255, .7); padding:7px 20px; }
|
||||
.navbar-nav .dropdown-menu > li > a:hover,
|
||||
.navbar-nav .dropdown-menu > li > a:focus,
|
||||
.navbar-nav .dropdown-menu > .active > a:hover{ background: rgba(255, 255, 255, .1); color:white; }
|
||||
|
||||
.navbar-nav .dropdown-menu > .active > a,
|
||||
.navbar-nav .dropdown-menu > .active > a:focus { background: none; color:#fff; }
|
||||
|
||||
.navbar-nav .btn { border:1px solid rgba(255, 255, 255, .2); margin-left:5px; margin-top:5px; padding-top:10px; padding-bottom:10px; }
|
||||
|
||||
.navbar-nav a.btn:focus,
|
||||
.navbar-nav a.btn:hover { border:1px solid rgba(255,255,255,.6); }
|
||||
|
||||
.navbar-collapse { border:0 none; border-top:0 none; box-shadow: none; }
|
||||
@media (max-width: 767px) {
|
||||
.navbar-collapse ul { text-align: center; width:100%; padding-bottom:10px; }
|
||||
.navbar-collapse ul .btn{ max-width:50%; margin:0 auto; }
|
||||
}
|
||||
|
||||
.navbar-static-top,
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom { border-radius: 0; }
|
||||
|
||||
|
||||
|
||||
|
||||
/*******************************/
|
||||
/* Buttons */
|
||||
/*******************************/
|
||||
.btn-default, .btn-primary, .btn-success, .btn-action
|
||||
.btn-info, .btn-warning, .btn-danger {
|
||||
text-shadow: 0 2px 1px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.btn { padding: 10px 40px; font-weight: bold; border:0 none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
|
||||
.btn-lg { padding: 15px 65px; font-size: 14px; font-weight:bold; }
|
||||
.btn-default { text-shadow: none; background:transparent; color:rgba(50,50,50,.5); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.5); -moz-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.5); box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.5); }
|
||||
.btn-default:hover,
|
||||
.btn-default:focus { color:rgba(50,50,50,.8); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.8); -moz-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.8); box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.8); background: transparent; }
|
||||
.btn-default:active,
|
||||
.btn-default.active { color:#333; -webkit-box-shadow:inset 0px 0px 0px 3px #333; -moz-box-shadow:inset 0px 0px 0px 3px #333; box-shadow:inset 0px 0px 0px 3px #333; background: transparent; }
|
||||
|
||||
.btn-action,
|
||||
.btn-primary { color:#FFEFD7; background-image: -webkit-linear-gradient(top, #FF9B22 0%, #FF8C00 100%); background-image: linear-gradient(to bottom, #FF9B22 0%, #FF8C00 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffFF9B22', endColorstr='#ffFF8C00', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background-repeat: repeat-x; border:0 none; }
|
||||
.btn-action:hover,
|
||||
.btn-action:focus { color:#fff; background: #FF9B22; }
|
||||
.btn-action:active { background: #FF8C00; }
|
||||
|
||||
|
||||
/*******************************/
|
||||
/* Jumbotron */
|
||||
/*******************************/
|
||||
.jumbotron { color: inherit; background-color: #F7F5F4; padding-top:30px; padding-bottom:30px; margin-bottom:0; }
|
||||
.container .jumbotron { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding-left:40px; padding-right:40px; }
|
||||
.jumbotron p { font-size:inherit; }
|
||||
.jumbotron h2, .jumbotron h3, .jumbotron h4,
|
||||
.jumbotron h5, .jumbotron h6 { line-height: 1.3em; }
|
||||
|
||||
|
||||
/*******************************/
|
||||
/* Images */
|
||||
/*******************************/
|
||||
.img-rounded { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,179 @@
|
||||
/* Start: Recommended Isotope styles */
|
||||
|
||||
/**** Isotope Filtering ****/
|
||||
|
||||
.isotope-item {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.isotope-hidden.isotope-item {
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/**** Isotope CSS3 transitions ****/
|
||||
|
||||
.isotope,
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-duration: 0.8s;
|
||||
-moz-transition-duration: 0.8s;
|
||||
-ms-transition-duration: 0.8s;
|
||||
-o-transition-duration: 0.8s;
|
||||
transition-duration: 0.8s;
|
||||
}
|
||||
|
||||
.isotope {
|
||||
-webkit-transition-property: height, width;
|
||||
-moz-transition-property: height, width;
|
||||
-ms-transition-property: height, width;
|
||||
-o-transition-property: height, width;
|
||||
transition-property: height, width;
|
||||
}
|
||||
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
-ms-transition-property: -ms-transform, opacity;
|
||||
-o-transition-property: top, left, opacity;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
/**** disabling Isotope CSS3 transitions ****/
|
||||
|
||||
.isotope.no-transition,
|
||||
.isotope.no-transition .isotope-item,
|
||||
.isotope .isotope-item.no-transition {
|
||||
-webkit-transition-duration: 0s;
|
||||
-moz-transition-duration: 0s;
|
||||
-ms-transition-duration: 0s;
|
||||
-o-transition-duration: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
/* End: Recommended Isotope styles */
|
||||
|
||||
|
||||
|
||||
/* disable CSS transitions for containers with infinite scrolling*/
|
||||
.isotope.infinite-scrolling {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**** Isotope styles ****/
|
||||
|
||||
/* required for containers to inherit vertical size from window */
|
||||
/*html,
|
||||
body {
|
||||
height: 100%;
|
||||
}*/
|
||||
|
||||
#container {
|
||||
border: 1px solid #666;
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #888;
|
||||
color: #222;
|
||||
-webkit-border-top-right-radius: 1.2em;
|
||||
-moz-border-radius-topright: 1.2em;
|
||||
border-top-right-radius: 1.2em;
|
||||
}
|
||||
|
||||
.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); }
|
||||
.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); }
|
||||
.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); }
|
||||
.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); }
|
||||
.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); }
|
||||
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
|
||||
.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); }
|
||||
.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); }
|
||||
.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); }
|
||||
.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }
|
||||
|
||||
|
||||
.element * {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.element .symbol {
|
||||
left: 0.2em;
|
||||
top: 0.4em;
|
||||
font-size: 3.8em;
|
||||
line-height: 1.0em;
|
||||
color: #FFF;
|
||||
}
|
||||
.element.large .symbol {
|
||||
font-size: 4.5em;
|
||||
}
|
||||
|
||||
.element.fake .symbol {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.element .name {
|
||||
left: 0.5em;
|
||||
bottom: 1.6em;
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
.element .weight {
|
||||
font-size: 0.9em;
|
||||
left: 0.5em;
|
||||
bottom: 0.5em;
|
||||
}
|
||||
|
||||
.element .number {
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
color: hsla(0,0%,0%,.5);
|
||||
right: 0.5em;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
.variable-sizes .element.width2 { width: 230px; }
|
||||
|
||||
.variable-sizes .element.height2 { height: 230px; }
|
||||
|
||||
.variable-sizes .element.width2.height2 {
|
||||
font-size: 2.0em;
|
||||
}
|
||||
|
||||
.element.large,
|
||||
.variable-sizes .element.large,
|
||||
.variable-sizes .element.large.width2.height2 {
|
||||
font-size: 3.0em;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.clickable .element:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clickable .element:hover h3 {
|
||||
text-shadow:
|
||||
0 0 10px white,
|
||||
0 0 10px white
|
||||
;
|
||||
}
|
||||
|
||||
.clickable .element:hover h2 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user