<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.png">
<title>proekt4_Crios</title>
<!-- <link rel="stylesheet" href="main.css"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="/picturefill-master/src/external/matchmedia.js"></script>
<script src="/picturefill-master/dist/picturefill.js"></script>
<script src="/Respond-master.js"></script>
<script src="../dest/respond.src.js"></script>
</head>
<style>
@media screen and (min-width: 768px){
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image:url(images/1a.png);
background-repeat: no-repeat;
background-size: 100%;
font: 100%/1.5em 'Montserrat-Regular','Montserrat-Bold';
width: 100%;
height: auto;
text-align: center;
}
figure{
display: block;
line-height: 0;
width:100%;
height: auto;
}
.header{
width: 100%;
background-color:#000;
opacity: 0.5;
padding: 0% 0% 12% 0%;
}
.q1{
width: 100%;
height: auto;
line-height: 0;
margin: 0 auto;
z-index: 1;
position: absolute;
}
.q1 img{
width: 21%;
height: auto;
}
.q2{
background-color:#CF4;
height: auto;
width: 100%;
z-index: 2;
position: absolute;
}
.q2_vl{
float: left;
background-color:blue;
border: 1px solid #000;
height: auto;
width: 30%;
position: absolute;
z-index: 3;
}
.q2_vl .nav {
position: relative;
margin: 3.06% 0% 0% 13.453%;
padding: 1.31% 1.31% 1.31% 1.31%;
background-size: 36.363%;
background-image: url(images/m2.png);
background-color: green;
border: 1px solid #000;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 33px rgba(74, 88, 99, 0.15);
border-radius: 50%;
float: left;
height: 99px;
width: 40%;
}
.q2_vl .nav ul{
display: none;
}
li{
padding: 1% 8% 1% 8%;
min-width: 200px;
background-color: red;
border-radius: 5%;
border-bottom: #000;
}
li:hover{
display: block;
background-color: #FF3366;
}
.q2_vl .nav:hover {
padding: 1% 2% 1% 2%;
margin: 1.5% 0% 21.9% 4%;
border: 1px solid #000;
box-shadow: 0 0 33px rgba(74, 88, 99, 0.15);
height: auto;
max-width:40%;
border-radius: 1%;
position: absolute;
z-index: 999;
background-color: #F7F8FB;
}
.q2_vl .nav:hover ul{
background-color: #F7F8FB;
box-shadow: 0 0 40px #EEF6FA;
border-radius: 3%;
border: 1px solid #EEF6FA;
z-index: 999999;
}
.q2_vl .nav:hover ul, li{
max-width: 100%;
display: block;
background-color: #F7F8FB;
border-bottom: 1px solid #000;
}
.q2_vr{
background-color:green;
float: right;
width: 30%;
}
.z{
background-color:yellow;
border: 5px solid #000;
width: 100%;
text-align: center;
}
.z_1{
color: blue;
font-size: 2.1em;
height: 88px;
width: 100%;
height: auto;
}
.z_2{
color: blue;
font-size: 2.1em;
width: 100%;
height: 88px;
}
.Simple_PSD_Template{
background-color:green;
opacity: 0.5;
height: auto;
text-align: center;
width:100%;
position: absolute;
z-index: 1;
}
.Simple_PSD_Template img{
width:100%;
z-index: 1;
}
.Simple_PSD_z_index{
border: 8px solid #000;
position: absolute;
margin: 4% 0% 0% 0%;
z-index: 11;
width:100%;
height: auto;
}
.Simple_PSD_a_p {
color: red;
border: 8px solid #000;
font-size: 1.48em;
word-spacing: 0.17em;
height: auto;
text-align: left;
position: absolute;
z-index: 22;
}
.Simple_PSD_lorem_b_p {
color: rgba(74, 88, 99, 0.25);
font-size: 0.55em;
height: auto;
letter-spacing: 0.05em;
}
.Simple_PSD_button_explore_p {
color: #43a9ff;
background-image: url(images/Prostokąt-zaokrąglony-1b.png);
background-size: 100%;
background-repeat: no-repeat;
font-size: 0.44em;
font-weight: bold;
height: auto;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.Simple_PSD_button_explore_p a{
color: #43a9ff;
}
.imgSimple{
position: absolute;
z-index: 1;
width: 100%;
height: auto;
}
@font-face {
font-family: 'Montserrat-Regular';
src: url('fonts/Montserrat-Regular.otf');
}
@font-face {
font-family: 'Montserrat-Bold';
src: url('fonts/Montserrat-Bold.otf');
}
@font-face {
font-family: Montserrat-Regular;
src: url('fonts/Montserrat-Regular.otf');
}
@font-face {
font-family: Montserrat-Bold;
src: url('fonts/Montserrat-Bold.otf');
}
.container{
display: table;
width:100%;
}
.container .cols{
float: left;
}
.container .cols.col-1{width:8.333333333333333%;}
.container .cols.col-2{width:16.66666666666667%;}
.container .cols.col-3{width:25%;}
.container .cols.col-4{width:33.33333333333333%;}
.container .cols.col-5{width:41.66666666666667%;}
.container .cols.col-6{width:50%;}
.container .cols.col-7{width:58.33333333333333%;}
.container .cols.col-8{width:66.66666666666666%;}
.container .cols.col-9{width:75%;}
.container .cols.col-10{width:83.33333333333333%;}
.container .cols.col-11{width:91.66666666666666%;}
.container .cols.col-12{width:100%;}
}
.container:before,
.container:after,
.row:after,
.row:before,
.clear:before,
.clear:after{
display:table;
}
.container:after,
.row:after,
.clear:after{
content: " ";
clear: both;
}
/*/mediaquery*/
}
</style>
<body>
<!-- 1 beg <div class="container"> -->
<div class="container">
<!-- <header> -->
<div class="header">
<div class="q1">
<figure>
<img sizes="(min-width: 1em) 80vw, 100vw"
srcset="images/5.jpg 360w,
images/5.jpg 80w,
images/5.jpg 100w"
alt="bbb">
</figure>
</div>
<div class="q2">
<div class="q2_vl">
<div class="nav">
<ul>
<li>menu-1</li>
<li>menu-2</li>
</ul>
</div>
</div>
<div class="q2_vr">
<div class="search">
</div>
</div>
</div>
<div class="z">
<div class="z_1">
crios
</div>
<div class="z_2">
free
</div>
</div>
</div>
<div class="Simple_PSD_Template">
<div class="Simple_PSD_z_index">
<div class="Simple_PSD_a_p">
<p>Simple PSD template with cool stuff</p>
</div>
<div class="Simple_PSD_lorem_b_p">
<p>Lorem ipsum dolor sit amet, consectetur adipsing elit.</p>
</div>
<div class="Simple_PSD_button_explore_p">
<a href="https://validator.w3.org/whatsnew.html">explore template</a>
</div>
</div>
<div cla1ss="imgSimple">
<figure>
<img sizes="(min-width: 1em) 80vw, 100vw"
srcset="images/kon450.png 360w,
images/kon700.png 80w,
images/kon2000.png 100w"
alt="bbb">
</figure>
</div>
</div>
</div>
<!-- 1 end <div class="container"> -->
</body>
</html>
