Pavlov_Maik_HM6

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,164 @@
+.wrapper{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-width: 98vw;
+}
+.header{
+	display: flex;
+	justify-content: space-between;
+	height: 12vh;
+	max-height: 80px;
+	background:#d3b714;
+}
+.header img{
+	height: 80px;
+}
+.menu{
+	display: inline-flex; 
+	align-items: center;
+	text-align: center;
+}
+.menu a{
+	width: 80px;
+	font-size: 20px;
+	text-decoration: none;
+	color:#000;
+}
+.main{
+	display: flex;
+	justify-content: space-between;
+	height:100%;
+	min-height: 85vh;
+}
+.main aside{
+	width: 210px;
+	align-items: flex-start;
+	background: #c798b9;
+	align-items: center;
+	text-align: center;
+	padding-top:20px;
+}
+.main aside:last-child{
+	background: #9cb1c7;
+}
+aside a{
+	font-size: 25px;
+	text-decoration: none;
+	color:#000;
+}
+.footer{
+	display: flex;
+	left: 0;
+	bottom: 0;
+	background:#86ec86;
+	height: 4vh;
+	align-items: center;
+	justify-content:center;
+}
+.footer a{
+	font-size: 20px;
+	text-decoration: none;
+	color:#000;
+}
+.content{
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+
+}
+.block{
+	display: flex;
+	border: 3px solid #bbb;
+	border-radius: 20px;
+	flex-grow: 1;
+	flex-direction: column;
+	align-items: center;
+	width: 150px;
+	min-width:25%;
+	margin: 10px;
+	padding: 10px;
+	align-content: space-around;
+}
+.block img{
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	border: 10px solid #9e99b7;
+	bottom: 0;
+	transition: transform 1s;
+}
+.block img:hover{
+	border: 10px solid black;
+}
+.block h2{
+	font-size: 30px;
+	margin:20px;
+	font-weight: 600;
+}
+.block p{
+	text-align: justify;
+	margin:20px;
+}
+.btn {
+	display: flex;
+	margin-top: auto;
+	margin-bottom: 5px;
+}
+.btn a{
+	display: inline-flex; 
+	align-items: center;
+	justify-content: center;
+	font-size: 20px;
+	text-decoration: none;
+	color:#fff;
+	background: #757;
+	height: 30px;
+	width: 70px;
+	border-radius: 15px;
+}
+.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;
+
+
+}