mirror of
				https://github.com/dawidolko/Website-Templates.git
				synced 2025-10-31 00:13:11 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			290 lines
		
	
	
		
			4.7 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			290 lines
		
	
	
		
			4.7 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| @import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
 | |
| body {
 | |
| 	color:#FFF; 
 | |
| 	font-family: 'Oswald', sans-serif; 
 | |
| 	min-width:960px;
 | |
| 	top:0;
 | |
| 	left:0;
 | |
| 	position:absolute;
 | |
| 	height:100%;
 | |
| 	width:100%;
 | |
| 	margin:0;
 | |
| 	/*background:url(../images/road2.jpg) no-repeat;*/
 | |
| 	background-size:cover;
 | |
| }
 | |
| .ie body {
 | |
| 	filter: dropshadow(color=#000000, offx=0, offy=1);	
 | |
| }
 | |
| h1 {
 | |
| 	font-size:68px;
 | |
| 	letter-spacing:-2px;	
 | |
| 	line-height:60px;
 | |
| 	margin:25px 0;  
 | |
| 	text-align:center;
 | |
| 	margin-left:15px;
 | |
| 	padding-top:20px;
 | |
| }
 | |
| .ie h1 {
 | |
| 	filter: dropshadow(color=#000000, offx=0, offy=3);
 | |
| 	padding-bottom:12px;	
 | |
| }
 | |
| h2 { 
 | |
| }
 | |
| .ie h2 {
 | |
| 	filter: dropshadow(color=#000000, offx=0, offy=3);
 | |
| }
 | |
| h3 {
 | |
| 	font-size:25px;
 | |
| 	margin:0.2em 0; 
 | |
| }
 | |
| .ie h3 {
 | |
| 	filter: dropshadow(color=#000000, offx=0, offy=3);
 | |
| }
 | |
| h4 {
 | |
| 	margin-bottom:5px;	
 | |
| }
 | |
| p, pre {
 | |
| 	margin:0 0 10px 0; 
 | |
| }
 | |
| code {
 | |
| 	text-transform:uppercase !important;
 | |
| 	color:#EEE;	
 | |
| 	border-bottom:1px dotted #666;
 | |
| }
 | |
| small {
 | |
| 	background:url(../images/alpha.png);
 | |
| 	background:rgba(0, 0, 0, 0.8) url();	
 | |
| 	border:1px solid #111;
 | |
| 	font-size:15px;
 | |
| 	padding:0 5px;
 | |
| }
 | |
| a {
 | |
| 	color:rgba(0, 210, 255, 1);
 | |
| 	text-decoration:none;	
 | |
| }
 | |
| a:hover {
 | |
| 	color:#BBB;	
 | |
| } 
 | |
| #Header {
 | |
| margin-bottom: 62px;
 | |
| position: relative;
 | |
| width: 100%;
 | |
| height: 119px;
 | |
| line-height: 118px;
 | |
| z-index: 1;
 | |
| }
 | |
| .wrapper {
 | |
| margin: 0 auto;
 | |
| position: relative;
 | |
| width: 920px;
 | |
| z-index: 1;
 | |
| }
 | |
| #socialIcons {
 | |
| display:block;
 | |
| }
 | |
| #socialIcons ul {
 | |
| margin: 0px; 
 | |
| padding:0px;
 | |
| text-align: center;
 | |
| }
 | |
| #socialIcons ul li {
 | |
| margin-right: 5px;
 | |
| height: 34px;
 | |
| line-height: 34px;
 | |
| list-style-type: none;
 | |
| display: inline-block;
 | |
| background: rgba(255, 255, 255, 0.44);
 | |
| }
 | |
| #socialIcons ul li a{
 | |
| width:34px;
 | |
| height:34px; 
 | |
| display: inline-block;
 | |
| }
 | |
| .twitterIcon, .facebookIcon, .linkedInIcon, .pintrestIcon{
 | |
| background: url('../images/social-icons.png') -74px 0px;
 | |
| }
 | |
| .facebookIcon{
 | |
| background-position: 10px 0px;
 | |
| }
 | |
| .linkedInIcon{
 | |
| background-position: -245px 0px;
 | |
| }
 | |
| .pintrestIcon{
 | |
| background-position: -331px 0px;
 | |
| }
 | |
| .tempBy{
 | |
| display:block;
 | |
| text-align:center;
 | |
| margin-top:40px;
 | |
| }
 | |
| #Content h2 {
 | |
| margin: 0px 0px 65px 0px;
 | |
| padding: 0px;
 | |
| text-align: center;
 | |
| font-size: 48px;
 | |
| font-weight: 300;
 | |
| color:#00D2FF;
 | |
| }
 | |
| #WindowSlide {
 | |
| margin: 0 auto;
 | |
| position: relative;
 | |
| width: 634px;
 | |
| height: 170px;
 | |
| display: block;
 | |
| overflow: hidden;
 | |
| }
 | |
| #Mail {
 | |
| position: absolute;
 | |
| width: 634px;
 | |
| top: 0px;
 | |
| left: 0px;
 | |
| }
 | |
| #Content h3 {
 | |
| text-align: center;
 | |
| font-size: 24px;
 | |
| font-weight: normal;
 | |
| display: block;
 | |
| clear: both;
 | |
| }
 | |
| 
 | |
| #subscribe p{
 | |
| text-align:center;
 | |
| }
 | |
| #subscribe input {
 | |
| background: rgba(255, 255, 255, 0.52); 
 | |
| color: #000;
 | |
| font: bold 19px;  
 | |
| vertical-align: middle;
 | |
| width: 293px;
 | |
| border: 1px solid rgba(255, 255, 255, 0.76);
 | |
| padding: 10px;
 | |
| }
 | |
| #subscribe input[type="button"]{
 | |
| background: rgba(255, 255, 255, 1);
 | |
| width:auto;
 | |
| padding: 9px 25px;
 | |
| cursor: pointer;
 | |
| margin-left: -5px;
 | |
| }
 | |
| 
 | |
| 
 | |
| .callback,
 | |
| .simple {
 | |
|   font-size: 20px;
 | |
|   background: #27ae60;
 | |
|   padding: 0.5em 0.7em;
 | |
|   color: #ecf0f1;
 | |
|   margin-bottom: 50px;
 | |
|   -webkit-transition: background 0.5s ease-out;
 | |
|   transition: background 0.5s ease-out;
 | |
| }
 | |
| .callback{
 | |
|   cursor: pointer;
 | |
| }
 | |
| .ended {
 | |
|   background: #c0392b;
 | |
| }
 | |
| .countdown {
 | |
| text-align:center;
 | |
| }
 | |
| .styled{
 | |
|   margin-bottom: 90px;
 | |
| }
 | |
| .styled div {
 | |
|   display: inline-block;
 | |
|   margin-left: 10px;
 | |
|   font-size: 60px;
 | |
|   font-weight: normal; 
 | |
|   text-align: center;
 | |
|   margin:0 25px;
 | |
|   width:100px;
 | |
|   padding:30px;
 | |
|   border-radius:80px;
 | |
|   background:rgba(255, 255, 255, 0.26);
 | |
|   height:100px; 
 | |
|   background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.15); 
 | |
|   text-shadow:none;
 | |
|   vertical-align: middle; 
 | |
|   border: 1px solid rgba(255, 255, 255, 0.76);
 | |
| }
 | |
| #overlay{
 | |
| background: rgba(0, 0, 0, 0.56) url(../images/overlays/01.png) top left repeat;
 | |
| position: fixed;
 | |
| top: 0px;
 | |
| width: 100%;
 | |
| bottom: 0px;
 | |
| opacity:0.8;
 | |
| }
 | |
| /* IE7 inline-block hack */
 | |
| *+html .styled div{
 | |
|   display: inline;
 | |
|   zoom: 1;
 | |
| }
 | |
| .styled div:first-child {
 | |
|   margin-left: 0;
 | |
| }
 | |
| .styled div span {
 | |
|   display: block;
 | |
|   border-top: 1px solid #cecece;
 | |
|   padding-top: 3px;
 | |
|   font-size: 19px;
 | |
|   font-weight: normal; 
 | |
|   text-align: center;
 | |
| }
 | |
| footer{
 | |
| width:100%;
 | |
| height:30px;
 | |
| background:rgba(0, 0, 0, 0.64);
 | |
| position:absolute;
 | |
| bottom:0px;
 | |
| }
 | |
| footer span{
 | |
| float:right;
 | |
| margin:10px;
 | |
| }
 | |
| @media(max-width:768px){
 | |
| 	body {
 | |
| 	min-width: initial !important;
 | |
| 	}
 | |
| 	.wrapper{width:100%;}
 | |
| 	.styled div {
 | |
| 	  margin-bottom:10px; 
 | |
| 	}
 | |
| }
 | |
| @media(max-width:420px){
 | |
| 	h1{
 | |
| 	float:initial;
 | |
| 	text-align: center;
 | |
| 	margin-left:0px;
 | |
| 	margin-bottom:0px;
 | |
| 	}
 | |
| 	.styled div {
 | |
| 	  margin-bottom:10px;
 | |
| 	  font-size: 40px;
 | |
| 	  font-weight: normal; 
 | |
| 	  text-align: center;
 | |
| 	  width:80px; 
 | |
| 	  border-radius:80px; 
 | |
| 	  height:80px;  
 | |
| 	}
 | |
| 	#Content h2 {
 | |
| 	margin: 0px 0px 0px 0px;
 | |
| 	padding: 0px;
 | |
| 	text-align: center;
 | |
| 	font-size: 29px;
 | |
| 	font-weight: 300;
 | |
| 	}
 | |
| 	.styled {
 | |
| 	margin-bottom: 30px;
 | |
| 	}
 | |
| 	#subscribe input[type="button"]{
 | |
| 	margin-top:10px;
 | |
| 	}
 | |
| 	#subscribe input{
 | |
| 	width:80%;
 | |
| 	}
 | |
| 	footer{
 | |
| 	position:relative !important;
 | |
| 	}
 | |
| }
 |