ホーム エクスプローラ ヘルプ
サインイン
okriuchkov
/
homework
Watch 1
Star 0
Fork 0
ファイル 課題 4 プルリクエスト 0 Wiki
ソースを参照

homework 02.02.18

oleg 6 年 前
コミット
8484fe2c2c
13 ファイル変更、420 行追加、0 行削除
分割表示 差分情報を表示
  1. BIN
      02.02.2018/Task 1/image.png
  2. 33 0
      02.02.2018/Task 1/index.html
  3. 19 0
      02.02.2018/Task 1/style.css
  4. BIN
      02.02.2018/Task 2/image.png
  5. 33 0
      02.02.2018/Task 2/index.html
  6. 17 0
      02.02.2018/Task 2/style.css
  7. BIN
      02.02.2018/Task 3/image.png
  8. 46 0
      02.02.2018/Task 3/index.html
  9. 35 0
      02.02.2018/Task 3/style.css
  10. 22 0
      02.02.2018/Task 4/index.html
  11. 70 0
      02.02.2018/Task 4/style.css
  12. 27 0
      02.02.2018/Task 5/index.html
  13. 118 0
      02.02.2018/Task 5/style.css

BIN
02.02.2018/Task 1/image.png
ファイルの表示


+ 33 - 0
02.02.2018/Task 1/index.html
ファイルの表示 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<title>Задание 1</title>
 
+	<link rel="stylesheet" type="text/css" href="style.css">
 
+</head>
 
+<body>
 
+
 
+	<section class="container">
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, pariatur, aperiam! Nesciunt laudantium amet nulla veritatis doloremque voluptate enim fugiat ad voluptas dolor non eum, quam est eveniet libero, consequuntur ab reiciendis illum nemo, facilis eligendi quos neque. Quisquam, ut!</p>
 
+		
+		<article class="clearfix">
 
+			<article class="article">
 
+				<img src="image.png">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+			</article>
 
+			<article class="article">
 
+				<img src="image.png">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+			</article>
 
+			<article class="article">
 
+				<img src="image.png">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+			</article>
 
+		</article>
 
+
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, pariatur, aperiam! Nesciunt laudantium amet nulla veritatis doloremque voluptate enim fugiat ad voluptas dolor non eum, quam est eveniet libero, consequuntur ab reiciendis illum nemo, facilis eligendi quos neque. Quisquam, ut!</p>
 
+
 
+	</section>
 
+	
+</body>
 
+</html>

+ 19 - 0
02.02.2018/Task 1/style.css
ファイルの表示 

@@ -0,0 +1,19 @@
 
+.container {
 
+	box-shadow: 0 0 5px rgba(0,0,0,0.5);
 
+	width: 50%;
 
+	margin: 0 auto;
 
+	padding: 15px;
 
+}
 
+
 
+.article {
 
+	float: left;
 
+	width: calc(100% / 3);
 
+	padding: 0 15px;
 
+	box-sizing: border-box;
 
+}
 
+
 
+.clearfix:after {
 
+	content: "";
 
+	display: block;
 
+	clear: both;
 
+}

BIN
02.02.2018/Task 2/image.png
ファイルの表示


+ 33 - 0
02.02.2018/Task 2/index.html
ファイルの表示 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<title>Задание 2</title>
 
+	<link rel="stylesheet" type="text/css" href="style.css">
 
+</head>
 
+<body>
 
+
 
+	<section class="container">
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, pariatur, aperiam! Nesciunt laudantium amet nulla veritatis doloremque voluptate enim fugiat ad voluptas dolor non eum, quam est eveniet libero, consequuntur ab reiciendis illum nemo, facilis eligendi quos neque. Quisquam, ut!</p>
 
+		
+		<article class="flex-container">
 
+			<article class="flex-block">
 
+				<img src="image.png">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+			</article>
 
+			<article class="flex-block">
 
+				<img src="image.png">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+			</article>
 
+			<article class="flex-block">
 
+				<img src="image.png">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+			</article>
 
+		</article>
 
+
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, pariatur, aperiam! Nesciunt laudantium amet nulla veritatis doloremque voluptate enim fugiat ad voluptas dolor non eum, quam est eveniet libero, consequuntur ab reiciendis illum nemo, facilis eligendi quos neque. Quisquam, ut!</p>
 
+
 
+	</section>
 
+	
+</body>
 
+</html>

+ 17 - 0
02.02.2018/Task 2/style.css
ファイルの表示 

@@ -0,0 +1,17 @@
 
+.container {
 
+	box-shadow: 0 0 5px rgba(0,0,0,0.5);
 
+	width: 50%;
 
+	margin: 0 auto;
 
+	padding: 15px;
 
+}
 
+
 
+.flex-container {
 
+	display: flex;
 
+	flex-direction: row;
 
+	justify-content: space-between;
 
+}
 
+
 
+.flex-block {
 
+	padding: 0 15px;
 
+}
 
+

BIN
02.02.2018/Task 3/image.png
ファイルの表示


+ 46 - 0
02.02.2018/Task 3/index.html
ファイルの表示 

@@ -0,0 +1,46 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<title>Задание 3</title>
 
+	<link rel="stylesheet" type="text/css" href="style.css">
 
+</head>
 
+<body>
 
+
 
+	<section class="container">
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum ut veritatis accusamus voluptas dolor fuga maxime nihil, maiores consectetur, nisi unde alias adipisci officia, pariatur vitae reprehenderit optio voluptates asperiores temporibus autem. In ex doloribus a quo, placeat non, vitae provident enim quidem minus, similique repellat voluptatum, perspiciatis iusto libero.</p>
 
+
 
+		<section class="clearfix">
 
+			<article class="side-bar">
 
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error suscipit eligendi laudantium! Totam, rem modi amet sed asperiores minima explicabo perspiciatis repellat veniam commodi deleniti, nobis architecto quos, nihil quas maiores tenetur sunt quod quia tempora neque ipsa doloribus numquam!
 
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error suscipit eligendi laudantium! Totam, rem modi amet sed asperiores minima explicabo perspiciatis repellat veniam commodi deleniti, nobis architecto quos, nihil quas maiores tenetur sunt quod quia tempora neque ipsa doloribus numquam!
 
+			</article>
 
+
 
+			<section class="content">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, pariatur, aperiam! Nesciunt laudantium amet nulla veritatis doloremque voluptate enim fugiat ad voluptas dolor non eum, quam est eveniet libero, consequuntur ab reiciendis illum nemo, facilis eligendi quos neque. Quisquam, ut!</p>
 
+		
+				<article class="clearfix">
 
+					<article class="article">
 
+						<img src="image.png">
 
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+					</article>
 
+					<article class="article">
 
+						<img src="image.png">
 
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+					</article>
 
+					<article class="article">
 
+						<img src="image.png">
 
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nihil dolore recusandae quo facilis enim consequatur animi dolorum aperiam explicabo delectus dicta non aliquam rerum at odio doloremque, nobis cupiditate!</p>
 
+					</article>
 
+				</article>
 
+
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, pariatur, aperiam! Nesciunt laudantium amet nulla veritatis doloremque voluptate enim fugiat ad voluptas dolor non eum, quam est eveniet libero, consequuntur ab reiciendis illum nemo, facilis eligendi quos neque. Quisquam, ut!</p>
 
+			</section>
 
+		</section>
 
+
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolor eius facere, recusandae aliquid hic repudiandae rem quaerat, perferendis earum dicta deserunt. Mollitia a deserunt ut eveniet saepe nam et atque corporis temporibus qui numquam soluta omnis labore velit reprehenderit magnam placeat vitae, error quia. Perspiciatis doloremque odio error expedita.</p>		
+
 
+	</section>
 
+	
+</body>
 
+</html>

+ 35 - 0
02.02.2018/Task 3/style.css
ファイルの表示 

@@ -0,0 +1,35 @@
 
+.container {
 
+	box-shadow: 0 0 5px rgba(0,0,0,0.5);
 
+	width: 50%;
 
+	margin: 0 auto;
 
+	padding: 15px;
 
+}
 
+
 
+.side-bar {
 
+	float: left;
 
+	width: 25%;
 
+	padding: 16px;
 
+	box-sizing: border-box;
 
+}
 
+
 
+.content {
 
+	float: left;
 
+	width: 75%;
 
+}
 
+
 
+.article {
 
+	float: left;
 
+	width: calc(100% / 3);
 
+	padding: 0 15px;
 
+	box-sizing: border-box;
 
+}
 
+
 
+.clearfix:after {
 
+	content: "";
 
+	display: block;
 
+	clear: both;
 
+}
 
+
 
+img {
 
+	width: 100%;
 
+}

+ 22 - 0
02.02.2018/Task 4/index.html
ファイルの表示 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<title>Задание 4</title>
 
+	<link rel="stylesheet" type="text/css" href="style.css">
 
+</head>
 
+<body>
 
+
 
+	<section class="flex-container container">
 
+		<section class="flex-block block-1"><span>70%</span></section>
 
+		<section class="flex-block block-2"><span>50%</span></section>
 
+		<section class="flex-block block-3"><span>30%</span></section>
 
+		<section class="flex-block block-4"><span>100%</span></section>
 
+		<section class="flex-block block-5"><span>90%</span></section>
 
+		<section class="flex-block block-6"><span>60%</span></section>
 
+		<section class="flex-block block-7"><span>10%</span></section>
 
+		<section class="flex-block block-8"><span>35%</span></section>
 
+	</section>	
+	
+</body>
 
+</html>

+ 70 - 0
02.02.2018/Task 4/style.css
ファイルの表示 

@@ -0,0 +1,70 @@
 
+.container {
 
+	width: 50%;
 
+	box-shadow: 0 0 5px black;
 
+	margin: 0 auto;
 
+	padding: 15px;
 
+	padding-top: 50px;
 
+}
 
+
 
+.flex-container {
 
+	display: flex;
 
+	flex-direction: row;
 
+	justify-content: center;
 
+	align-items: flex-end;
 
+}
 
+
 
+.flex-block {
 
+	width:  calc(100%/12);
 
+}
 
+
 
+.block-1 {
 
+	height: 70px;
 
+	background: pink;
 
+}
 
+
 
+.block-2 {
 
+	height: 50px;
 
+	background: purple;
 
+}
 
+
 
+.block-3 {
 
+	height: 30px;
 
+	background: green;
 
+}
 
+
 
+.block-4 {
 
+	height: 100px;
 
+	background: yellow;
 
+}
 
+
 
+.block-5 {
 
+	height: 90px;
 
+	background: orange;
 
+}
 
+
 
+.block-6 {
 
+	height: 60px;
 
+	background: blue;
 
+}
 
+
 
+.block-7 {
 
+	height: 10px;
 
+	background: SeaGreen;
 
+}
 
+
 
+.block-8 {
 
+	height: 35px;
 
+	background: red;
 
+}
 
+
 
+section > section {
 
+	position: relative;
 
+}
 
+
 
+section > section > span {
 
+	position: absolute;
 
+	left: 30%;
 
+	bottom: 100%;
 
+	font-size: 20px;
 
+	font-weight: bold;
 
+}

+ 27 - 0
02.02.2018/Task 5/index.html
ファイルの表示 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1">
 
+	<title>Задание 5</title>
 
+	<link rel="stylesheet" type="text/css" href="style.css">
 
+</head>
 
+<body>
 
+	<section class="flex-container-1-2-3-4">
 
+		<section class="flex-container-1-2">
 
+			<article class="flex-block-1-2"><strong>1. </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique dolore maxime laudantium fugit recusandae doloremque vitae facilis sint, commodi libero. Vero, corrupti impedit voluptates. Aperiam quaerat ipsam suscipit, labore ea? Nobis, facere maxime aliquid ab quibusdam fugiat molestias. Vitae dolore nulla perspiciatis exercitationem, iusto neque sint ut quas eum eaque.</article>
 
+			<article class="flex-block-1-2"><strong>2. </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sequi reiciendis asperiores magni molestias nam officia, eum voluptates doloremque mollitia cupiditate enim ut, vero totam a voluptate assumenda dicta fuga alias voluptas fugiat quis error in molestiae. Officia, qui, quo.</article>
 
+		</section>
 
+
 
+		<section class="flex-container-3-4">
 
+			<article class="flex-block-3-4"><strong>3. </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A qui, tempore totam odit ipsa sapiente nam vero nisi libero maiores, nostrum, quis, facilis dolor in iusto unde. Alias, illum. Repellendus dolore aliquid aliquam ipsa quibusdam.</article>
 
+			<article class="flex-block-3-4"><strong>4. </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A qui, tempore totam odit ipsa sapiente nam vero nisi libero maiores, nostrum, quis, facilis dolor in iusto unde. Alias, illum. Repellendus dolore aliquid aliquam ipsa quibusdam.</article>
 
+		</section>
 
+	</section>
 
+	
+
 
+	<section class="flex-container-5-6">
 
+		<article class="flex-block-5-6"><strong>5. </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere eos sint facilis id optio eius quaerat nesciunt deserunt itaque doloremque modi, ab fugit? Unde ipsum sint odit accusantium nihil rem fuga fugit facilis, mollitia qui!</article>
 
+		<article class="flex-block-5-6"><strong>6. </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere eos sint facilis id optio eius quaerat nesciunt deserunt itaque doloremque modi, ab fugit? Unde ipsum sint odit accusantium nihil rem fuga fugit facilis, mollitia qui!</article>
 
+	</section>
 
+</body>
 
+</html>

+ 118 - 0
02.02.2018/Task 5/style.css
ファイルの表示 

@@ -0,0 +1,118 @@
 
+.flex-container-1-2-3-4 {
 
+	display: flex;
 
+	flex-direction: row;
 
+	justify-content: space-between;
 
+}
 
+
 
+.flex-container-1-2 {
 
+	display: flex;
 
+	flex-direction: row;
 
+	justify-content: space-between;
 
+	width: 50%;
 
+}
 
+
 
+.flex-block-1-2 {
 
+	background: #DCDCDC;
 
+	padding: 15px;
 
+	width: 48%;
 
+	font-size: 20px;
 
+}
 
+
 
+.flex-container-3-4 {
 
+	display: flex;
 
+	flex-direction: row;
 
+	justify-content: space-between;
 
+	width: 50%;
 
+}
 
+
 
+.flex-block-3-4 {
 
+	background: #DCDCDC;
 
+	padding: 15px;
 
+	width: 48%;
 
+	font-size: 20px;
 
+}
 
+
 
+.flex-container-5-6 {
 
+	display: flex;
 
+	flex-direction: row;
 
+	justify-content: space-between;
 
+	margin-top: 15px;
 
+
 
+}
 
+
 
+.flex-block-5-6 {
 
+	background: #DCDCDC;
 
+	padding: 15px;
 
+	font-size: 20px;
 
+	width: 48%;
 
+}
 
+
 
+article {
 
+	margin: 15px;
 
+	box-sizing: border-box;
 
+}
 
+
 
+@media screen and (max-width: 1280px ) {
 
+
 
+	.flex-container-1-2 {
 
+		flex-direction: column-reverse;
 
+		align-content: space-between;
 
+		margin-right: 20px;
 
+	}
 
+
 
+	.flex-block-1-2 {
 
+		width: 100%;
 
+	}
 
+
 
+	/*article.flex-block-1-2:first-child {
 
+		order: 5;
 
+	}*/
 
+	
+	.flex-container-5-6 {
 
+		flex-direction: column;
 
+		align-content: space-between;
 
+	}
 
+
 
+	.flex-block-5-6 {
 
+		width: 100%;
 
+	}	
+}
 
+
 
+@media screen and (max-width: 375px) {
 
+
 
+	.flex-container-1-2-3-4 {
 
+		flex-direction: column;
 
+		align-content: space-between;
 
+	}
 
+
 
+	.flex-container-1-2 {
 
+		flex-direction: column;
 
+		align-content: space-between;
 
+		width: 100%;
 
+	}
 
+
 
+	article.flex-block-1-2:first-child {
 
+		order: 0;
 
+	}
 
+
 
+	.flex-container-3-4 {
 
+		flex-direction: column;
 
+		align-content: space-between;
 
+		width: 100%;
 
+	}
 
+
 
+	.flex-block-3-4 {
 
+		width: 100%;
 
+	}
 
+
 
+	.flex-container-5-6 {
 
+		flex-direction: column;
 
+		align-content: space-between;
 
+	}
 
+
 
+	.flex-block-5-6 {
 
+		width: 100%;
 
+	}
 
+	
+}
 
+