Home Explore Help
Sign In
pvvvm505
/
Pavlov_Maik_HM5
Watch 1
Star 0
Fork 0
Files Issues 1 Pull Requests 0 Wiki
Browse Source

Pavlov_HW5

pavlovm503 5 years ago
commit
888831e7d6
5 changed files with 290 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      Validator.png
  2. 43 0
      clean.css
  3. BIN
      img/card.png
  4. 45 0
      index.html
  5. 202 0
      style.css

BIN
Validator.png
View File


+ 43 - 0
clean.css
View File 

@@ -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;
 
+    }

BIN
img/card.png
View File


+ 45 - 0
index.html
View File 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="utf-8">
 
+	<title>Pavlov_Maik_FSA3</title>
 
+	<link rel="stylesheet" href="clean.css">
 
+	<link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+	<!-- first lvl -->
 
+	<div class="btn">
 
+		<a href="#">Menu here</a>
 
+		<div class="menu">
 
+			<nav class="list">
 
+				<a href="#">Home</a>
 
+				<a href="#">Contact</a>
 
+				<a href="#">Our team</a>
 
+				<a href="#">FAQ</a>
 
+				<a href="#">About</a>
 
+				<a href="#">News</a>
 
+			</nav>
 
+		</div>
 
+	</div>
 
+	<div class="content">
 
+		<!-- second lvl -->
 
+		<div class="crd">
 
+			<div class="txt">
 
+				<blockquote>"Cудьба тасует карты, а мы ими играем"</blockquote>
 
+				<blockquote>Артур Шопенгауэр</blockquote>
 
+			</div>
 
+				<div class="card">
 
+				<img src="img/card.png" alt="pic">
 
+				<img src="img/card.png" alt="pic">
 
+				<img src="img/card.png" alt="pic">
 
+				</div>
 
+		</div>
 
+		<!-- fourth lvl -->
 
+		<div class="hub">
 
+			<div class="box">
 
+			</div>
 
+		</div>
 
+	</div>
 
+
 
+</body>
 
+</html>

+ 202 - 0
style.css
View File 

@@ -0,0 +1,202 @@
 
+body{
 
+	position:relative;
 
+	overflow-x:hidden;
 
+}
 
+/*first lvl*/
 
+.btn{
 
+	display:flex;
 
+	position:fixed;
 
+	width:35px;
 
+	height:100%;
 
+	top:0;
 
+	left:0;
 
+	background:#818181;
 
+}
 
+.btn>a{
 
+	display:fixed;
 
+	position: absolute;
 
+	height: 30px;
 
+	left: -35px;
 
+	top: 50%;
 
+	color:#fff;
 
+	text-decoration:none;
 
+	font-size:25px;
 
+	transform:rotate(90deg);
 
+    position:relative;
 
+    white-space:nowrap;
 
+}
 
+.menu{
 
+	position:fixed;
 
+	top:0;
 
+	left:0;
 
+	width:300px;
 
+	height:100%;
 
+	text-align:left;
 
+	background:#818181;
 
+	transform:translateX(-300px);
 
+	transition: transform 0.4s;
 
+}
 
+.list{
 
+	display:flex;
 
+	justify-content:center;
 
+	text-align:left;
 
+	height:100%;
 
+	flex-direction:column;
 
+	margin-left:15%;
 
+}
 
+.list a{
 
+	display:inline-block;
 
+	color:#FFFFFF;
 
+	text-align:left;
 
+	text-decoration:none;
 
+	font-size:30px;	
+	margin-top:10px;
 
+}
 
+.list a:before{
 
+    display:inline-block;
 
+    content:'';
 
+    height:10px;
 
+    width:10px;
 
+    background:#FFB33A;
 
+    margin:3px 10px;
 
+    border:2px groove black;
 
+    transform:rotate(45deg);
 
+}
 
+.content{
 
+	display: flex;
 
+	position: fixed;
 
+	left: 35px;
 
+	width: 100vw;
 
+	height: 150%;
 
+}
 
+.btn:hover .menu{
 
+	transform: translateX(0px);
 
+}
 
+.list a:hover{
 
+	color:#FFB33A;
 
+}
 
+.content{
 
+	position:fixed;
 
+	top:0;
 
+	left:0;
 
+	text-align:left;
 
+	transform:translateX(35px);
 
+	transition: transform 0.4s;
 
+}
 
+.btn:hover+.content{
 
+	transform: translateX(300px);
 
+}
 
+/*second lvl*/
 
+.crd{
 
+	position: fixed;
 
+	display:flex;
 
+	background: #0d5825;
 
+	height: 500px;
 
+	width: 500px;
 
+	top: 10%;
 
+	left: 10%;
 
+	transition: transform 0.4s;
 
+}
 
+.txt{
 
+	position: absolute;
 
+	width: 450px;
 
+	height: 100px;
 
+	display:block;
 
+	justify-content:center;
 
+	text-align:center;
 
+	flex-direction:column;
 
+	margin:25px;
 
+	top: 0;
 
+	left: 0;
 
+}
 
+.txt blockquote{
 
+	color: #FFFFFF;
 
+	font-size: 25px ;
 
+	text-align: center;
 
+	margin-top: 10px;
 
+}
 
+.txt blockquote:last-child{
 
+	color: #FFFFFF;
 
+	font-size: 25px ;
 
+	text-align: center;
 
+	font-style: oblique;
 
+}
 
+.card{
 
+	display: inline-block;
 
+	position: absolute;
 
+	justify-content: center;
 
+	width: 500px;
 
+	height: 400px;
 
+	left: 0;
 
+	bottom:0;
 
+}
 
+.crd img{
 
+	z-index: 1;
 
+	width: 120px;
 
+    position:absolute;
 
+   	transform: translateX(-50px) rotate(-25deg);
 
+    top: 100px;
 
+    left: 200px;
 
+    transition: transform 0.4s;
 
+}
 
+.crd img:nth-child(2){
 
+	z-index: 2;
 
+	width: 120px;
 
+	transform: rotate(-10deg);
 
+    position: absolute;
 
+    transition: transform 0.4s;
 
+}
 
+.crd img:last-child{
 
+	z-index: 3;
 
+	width: 120px;
 
+    position: absolute;
 
+    transform: translate(50px,15px) rotate(10deg);
 
+    transition: transform 0.4s;
 
+}
 
+
 
+img:hover{
 
+	transform: translate(-50px,-30px) rotate(-25deg);
 
+}
 
+img:hover:nth-child(2){
 
+	transform: translateY(-30px) rotate(-10deg);
 
+}
 
+img:hover:last-child{
 
+	transform: translate(50px,-20px) rotate(10deg);
 
+}
 
+/*fourth lvl*/
 
+.hub{
 
+	position: fixed;
 
+	height: 300px;
 
+	width: 300px;
 
+	display:flex;
 
+	top: 18%;
 
+	left: 60%;
 
+	transition: transform 0.4s;
 
+}
 
+.box{
 
+	width:100px;
 
+	height: 100px;
 
+	animation: jump 4s 0.3s infinite normal both;
 
+}
 
+@keyframes jump {
 
+	0%{
 
+		background: #F6FF00;
 
+		transform: translateX(200px);
 
+	}
 
+	25%{
 
+		background: #FF0000;
 
+		transform: translateX(0px);
 
+	}
 
+	50%{
 
+		background: #3600FF;
 
+		transform: translateY(200px);
 
+	}
 
+	75%{
 
+		background: #36F000;
 
+		transform: translate(200px,200px);
 
+	}
 
+	100%{
 
+		background: #F6FF00;
 
+		transform: translate(200px,0px);
 
+	}
 
+}