pavlov_HM7

css/clean.css

@@ -0,0 +1,43 @@
+ html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+    	margin: 0;
+    	padding: 0;
+    	border: 0;
+    	font-size: 100%;
+    	font: inherit;
+    	vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
+    	display: block;
+    }
+    body {
+    	line-height: 1;
+    }
+    ol, ul {
+    	list-style: none;
+    }
+    blockquote, q {
+    	quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+    	content: '';
+    	content: none;
+    }
+    table {
+    	border-collapse: collapse;
+    	border-spacing: 0;
+    }

css/style.css

@@ -0,0 +1,291 @@
+body{
+	overflow-x:hidden;
+}
+.wrapper{
+	display: flex;
+	flex-direction: column;
+	width: 100vw;
+}
+.m-header{
+	background: #d3b714;
+	padding: 15px;
+	position: relative;
+	z-index: 69;
+	width: auto;
+}
+.cont{
+	display: flex;
+	min-width: 720px;
+	margin: 0 auto ;
+	padding: 0 15px ;
+	justify-content: space-between;
+}
+.logo-pic img{
+	margin-left: 200px;
+	width: 150px;
+}
+.B-list{
+	display: flex;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.B-list li{
+	margin: 10px;
+}
+.B-list a{
+	text-decoration: none;
+	color: #000;
+	font-size: 30px;
+}
+#menu__toggle {
+  opacity: 0; 
+}
+.menu__btn {
+  display: flex;
+  align-items: center; 
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 99;
+}
+.menu__btn > span,
+.menu__btn > span::before,
+.menu__btn > span::after {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: #616161;
+}
+.menu__btn > span::before {
+  content: '';
+  top: -8px;
+}
+.menu__btn > span::after {
+  content: '';
+  top: 8px;
+}
+.main{
+	display: flex;
+	width: 100%;
+	flex-grow: 1;
+}
+.content{
+	flex-grow: 1;
+	padding: 20px;
+}
+.head-content{
+	display: block;
+	text-align: center;
+	font-size: 1.25em;
+	margin-bottom: 30px;
+}
+.head-content p{
+	margin:20px;
+}
+.box{
+	display: flex;
+	flex-wrap: wrap;
+	justify-content:space-between;
+	margin: 0 -10px;
+}
+.card{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	position: relative;
+	margin: 0 10px 20px;
+	width:calc(46% - 20px); 
+	padding: 10px 15px 15px;
+	border: 1px solid black;
+	border-radius: 15px;	
+}
+.c-content{
+	width: 100%;
+}
+.c-content  p{
+	padding-bottom: 20px;
+}
+.img-content{
+	width: 100px;
+	margin: 0 auto;
+	border-radius: 50%;
+	overflow: hidden;
+	border: 10px solid #f0dcc2;
+}
+.img-content img{
+	width: 100px;
+	vertical-align: top;
+	
+}
+.btn {
+	display: flex;
+	height: 30px;
+	width: 70px;
+	border-radius: 15px;
+	background: #757;
+	margin-top: auto;
+	margin-bottom: 20px;
+	align-items: center;
+	justify-content: center;
+	font-size: 20px;
+	text-decoration: none;
+	color:#fff;
+}
+.btn:hover{
+	background: #fff;
+	color: #757;
+}
+.sidebar {
+	flex-shrink: 0;
+	width: 210px;
+	padding: 10px;
+	background-color:#9cb0c7;
+	align-items: center;
+	text-align: center;
+	padding-top:20px;
+}
+.left{
+	flex-shrink: 0;
+	width: 210px;
+	padding: 10px;
+	background-color: #c798b8;
+	order: -1;
+}
+.footer{
+	padding: 10px 15px;
+	background-color: rgba(0, 255, 0, .5);
+	text-align: center;
+}
+.daun{
+	font-size: 30px;
+}
+.holder{
+	display: flex;
+	border: 5px solid #000;
+	border-radius: 50px 50px 0px 0px;
+	flex-grow: 1;
+	width: 100%;
+	height: 100px;
+	margin: 10px;
+	flex-wrap: wrap;
+	overflow: hidden;
+	background: #0e7f12;
+}
+.item{
+	display: inline-flex;
+	background: #fd644d;
+	order: 1;
+	height: 50%;
+	width: 50%;
+	display: inline-flex; 
+	align-items: center;
+	justify-content: center;
+	font-size: 20px;
+	text-decoration: none;
+}
+.item:nth-child(2){
+	background: #4983b2;
+	order: 4;
+	width: calc(100%/3);
+}
+.item:nth-child(3){
+	background: #663797;
+	order: 3;
+	width: calc(100%/3);
+}
+.item:nth-child(4){
+	background: #0e7f12;
+	order: 5;
+	width: calc(100%/3);
+}
+.item:last-child{
+	background: #fda429;
+	order: 2;
+}
+
+@media (max-width: 799px){
+.card{
+	width:calc(100% - 20px);
+}
+.B-list {
+  display: block;
+  position: fixed;
+  visibility: hidden;
+  top: 0;
+  left: -100%;
+  width: 300px;
+  height: 100%;
+  margin: 0;
+  padding: 80px 0;
+  list-style: none;
+  text-align: center;
+  background-color: #d3b714;
+  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
+  z-index: 2;
+}
+.B-list li{
+	margin: 15px;
+}
+.menu__item {
+  display: block;
+  padding: 12px 24px;
+  color: #333;
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.menu__item:hover {
+  background-color: #CFD8DC;
+}
+#menu__toggle:checked ~ .menu__btn > span {
+  transform: rotate(45deg);
+}
+
+#menu__toggle:checked ~ .menu__btn > span::before {
+  top: 0;
+  transform: rotate(0);
+}
+
+#menu__toggle:checked ~ .menu__btn > span::after {
+  top: 0;
+  transform: rotate(90deg);
+}
+
+#menu__toggle:checked ~ .B-list {
+  visibility: visible;
+  left: 0;
+  z-index: 6;
+}
+.menu__btn > span,
+.menu__btn > span::before,
+.menu__btn > span::after {
+  transition-duration: .25s;
+}
+.menu__btn{
+	opacity: 1;
+}
+.B-list {
+  transition-duration: .25s;
+}
+.menu__item {
+  transition-duration: .25s;
+}
+}
+@media (min-width: 800px){
+.card{
+	width:calc(40% - 20px);
+}
+}
+@media (min-width: 1440px){
+	.card{
+	width:calc(30% - 20px);
+}
+}

index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Pavlov_Maik_FSA3</title>
+	<link rel="stylesheet" href="css/clean.css">
+	<link rel="stylesheet" href="css/style.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<script></script>
+</head>
+<body>
+	<div class="wrapper">
+		<header class="m-header">
+			<div class="cont">
+				<a href="#" class="logo-pic"><img src="img/A-logo.png"></a>
+				<nav class="B-naw">
+					<input id="menu__toggle" type="checkbox" />
+  					<label class="menu__btn" for="menu__toggle"><span></span></label>
+					<ul class="B-list">
+						<li><a href="#">Item1</a></li>
+						<li><a href="#">Item2</a></li>
+						<li><a href="#">Item3</a></li>
+						<li><a href="#">Item4</a></li>	
+						<li><a href="#">Item5</a></li>
+					</ul>
+					
+				</nav>
+			</div>
+		</header>
+		<main class="main">
+			<section class="content">
+				<div class="head-content">
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil iure illum nisi debitis, voluptatum rem temporibus autem. Temporibus quod placeat inventore, excepturi iure molestiae ex, ducimus deleniti harum fuga, unde iste ad vel necessitatibus incidunt id sapiente aliquam!</p>
+					<h1>OUR WORK</h1>
+					</div>
+					<div class="box">
+						<div class="card">
+							<div class="c-content">
+								<div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
+								<h4>Lorem ipsum dolor sit.</h4>
+								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
+							</div>
+							<a href="#" class="btn">Go</a>
+						</div>
+						<div class="card">
+							<div class="c-content">
+								<div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
+								<h4>Lorem ipsum dolor sit.</h4>
+								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
+							</div>
+							<a href="#" class="btn">Go</a>
+						</div>
+						<div class="card">
+							<div class="c-content">
+								<div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
+								<h4>Lorem ipsum dolor sit.</h4>
+								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
+							</div>
+							<a href="#" class="btn">Go</a>
+						</div>
+						<div class="card">
+							<div class="c-content">
+								<div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
+								<h4>Lorem ipsum dolor sit.</h4>
+								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste officiis sunt accusantium sit minima exercitationem quia qui sequi iusto, laboriosam amet pariatur voluptates, obcaecati adipisci suscipit, nobis, ut debitis dicta. </p>
+							</div>
+							<a href="#" class="btn">Go</a>
+						</div>
+						<div class="card">
+							<div class="c-content">
+								<div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
+								<h4>Lorem ipsum dolor sit.</h4>
+								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
+							</div>
+							<a href="#" class="btn">Go</a>
+						</div>
+						<div class="card">
+							<div class="c-content">
+								<div class="img-content"><img src="img/car.jpg" alt="car pic"></div>
+								<h4>Lorem ipsum dolor sit.</h4>
+								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia tenetur, repellendus labore quibusdam pariatur culpa!</p>
+							</div>
+							<a href="#" class="btn">Go</a>
+						</div>
+						<div class="holder">
+							<div class="item">1</div>
+							<div class="item">2</div>
+							<div class="item">3</div>
+							<div class="item">4</div>
+							<div class="item">5</div>
+						</div>
+					</div>
+				</section>
+				<aside class="sidebar left">
+					<p>Aside1</p>
+				</aside>
+				<aside class="sidebar right">
+					<p>Aside2</p>
+				</aside>
+			</main>
+		<footer class="footer">
+			<div class="daun">
+				<a>footer</a>
+			</div>
+		</footer>
+	</div>
+</body>
+</html>