Trang chủ Khám phá Trợ giúp
Đăng nhập
okriuchkov
/
homework
Xem 1
Star 0
Fork 0
Các tập tin Các vấn đề 4 Yêu cầu khéo về 0 Wiki
Browse Source

homework 02.02.18

oleg 6 năm trước cách đây
commit
8484fe2c2c
13 tập tin đã thay đổi với 420 bổ sung và 0 xóa
Split View Hiển thị tình trạng sai khác
  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
Xem Tập Tin


+ 33 - 0
02.02.2018/Task 1/index.html
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin


+ 33 - 0
02.02.2018/Task 2/index.html
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin


+ 46 - 0
02.02.2018/Task 3/index.html
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

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