Home Verkennen Help
Inloggen
Entony
/
homework
Volgen 1
Ster 0
Vork 0
Bestanden Issues 1 Pull-aanvragen 0 Wiki
Bladeren bron

second test

Entony 7 jaren geleden
bovenliggende
192d8a4313
commit
afe70ad12a
13 gewijzigde bestanden met toevoegingen van 430 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 31 0
      06.07.2017/1/css/style.css
  2. BIN
      06.07.2017/1/img/no-image-icon-15.png
  3. 30 0
      06.07.2017/1/index.html
  4. 41 0
      06.07.2017/2/css/style.css
  5. BIN
      06.07.2017/2/img/no-image-icon-15.png
  6. 30 0
      06.07.2017/2/index.html
  7. 45 0
      06.07.2017/3/css/style.css
  8. BIN
      06.07.2017/3/img/no-image-icon-15.png
  9. 37 0
      06.07.2017/3/index.html
  10. 78 0
      06.07.2017/4/css/style.css
  11. 44 0
      06.07.2017/4/index.html
  12. 57 0
      06.07.2017/5/css/style.css
  13. 37 0
      06.07.2017/5/index.html

+ 31 - 0
06.07.2017/1/css/style.css
Bestand weergeven 

@@ -0,0 +1,31 @@
 
+* {
 
+	box-sizing: border-box;  /*-изменения алгоритма расчета ширины и высоты*/
 
+}
 
+html {
 
+	font-size: 10px;  /*- задаем начальный резмер текста на странице*/
 
+}
 
+body {
 
+	margin: 0;      /*- обнуляем отступы*/
 
+	font-size: 1.6rem;   /*- контролируем размер текста на всей странице*/
 
+}
 
+img {
 
+	max-width: 100%;     /*-максимальная ширина картинки*/
 
+}
 
+
 
+.content {  
+	width: 850px;  /*-ширина всего контента в пикселях*/
 
+	max-width: 90%;      /* -даем задаем резиновую возможность для контента*/
 
+	margin: 10px auto;   /*- отступы с верху и с низу по 10, с права и с лева авто*/
 
+	box-shadow: 0 0 5px;   /*- тень без сдвигов по горизонтали и вертикали(вокруг элемента)*/
 
+}
 
+.over {
 
+	overflow: hidden;  
+}
 
+.colum {
 
+	float: left;      
+	width: calc(100% / 3);   /*- расчет ширины колонок*/
 
+	padding: 15px
 
+}
 
+.header, .footer {
 
+	padding: 15px;
 
+}

BIN
06.07.2017/1/img/no-image-icon-15.png
Bestand weergeven


+ 30 - 0
06.07.2017/1/index.html
Bestand weergeven 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<link rel="stylesheet" href="css/style.css">
 
+	<title>First task</title>
 
+</head>
 
+<body>
 
+	<main class="content">
 
+		<div class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi explicabo vitae rem amet possimus illo nisi architecto, eos beatae deserunt facilis reprehenderit cumque atque veniam repellat earum tempore corporis animi expedita ut sed nihil quas. Laudantium consectetur doloremque, ullam quibusdam.
 
+		</div>
 
+		<div class="over">
 
+			<div class="colum">
 
+				<img src="img/no-image-icon-15.png" alt="">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus consequatur accusantium vitae reprehenderit earum, aperiam quod reiciendis voluptatum vero accusamus id ipsam eaque provident architecto, tempore veniam! Placeat consequuntur accusamus aliquid iure quasi beatae blanditiis nemo asperiores debitis corrupti earum odit recusandae porro labore, voluptas iusto similique saepe, vitae perferendis.</p>
 
+			</div>
 
+			<div class="colum">
 
+				<img src="img/no-image-icon-15.png" alt="">
 
+				<p>Impedit animi obcaecati ipsam, dolorem soluta vitae, itaque nam aliquam consequuntur id sequi at laborum rerum praesentium maiores labore, ducimus nemo iste facere eveniet nulla maxime dolorum! Esse, similique. Eaque, optio sequi rem aut illo obcaecati et qui cum praesentium, minima beatae, officia veritatis eum debitis expedita facilis. Sit, incidunt.</p>
 
+			</div>
 
+			<div class="colum">
 
+				<img src="img/no-image-icon-15.png" alt="">
 
+				<p>Placeat laborum a recusandae quia beatae numquam praesentium non asperiores molestiae cupiditate nihil eaque atque molestias esse illo quam voluptatibus delectus voluptatum, nam sed est itaque deleniti fugit. Consequuntur asperiores, aliquam magnam sapiente aspernatur deleniti ea vel accusamus, quisquam harum possimus laudantium, necessitatibus iusto cum? Sed sint dolore error, quos.</p>
 
+			</div>
 
+		</div>
 
+		<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus assumenda, laboriosam amet mollitia perspiciatis, hic provident, quo inventore sapiente molestias odio repellendus sed facilis dolor ab? Provident, voluptates harum nisi.
 
+		</div>
 
+	</main>
 
+</body>
 
+</html>

+ 41 - 0
06.07.2017/2/css/style.css
Bestand weergeven 

@@ -0,0 +1,41 @@
 
+* {
 
+	box-sizing: border-box;
 
+}
 
+html {
 
+	font-size: 10px;
 
+}
 
+body {
 
+	margin: 0;
 
+	font-size: 1.6rem;
 
+}
 
+img {
 
+	max-width: 100%;
 
+}
 
+main {
 
+	margin: 10px auto;
 
+	width: 850px;
 
+	max-width: 90%;
 
+	box-shadow: 0 0 5px;
 
+}
 
+
 
+.conteiner {
 
+	display: flex;
 
+	flex-flow: column wrap;    /*- обьеденяет в себе оба свойства(направление и многострочность)*/
 
+	justify-content: space-around;  /*- определяем как будут выровнены элементы в доль главной оси */
 
+	align-items: center;			/*- определяем как будут выглядеть элементы в доль поперечной оси*/
 
+	height: auto;
 
+	align-content: space-between;
 
+}
 
+.content {
 
+	display: flex;
 
+	flex-flow: row nowrap;
 
+	justify-content: space-around;
 
+	align-items: flex-start;
 
+}
 
+.footer, .header {
 
+	padding: 15px;
 
+}
 
+.colum  {
 
+	margin: 0 auto;
 
+	padding: 15px;
 
+}

BIN
06.07.2017/2/img/no-image-icon-15.png
Bestand weergeven


+ 30 - 0
06.07.2017/2/index.html
Bestand weergeven 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<link rel="stylesheet" href="css/style.css">
 
+	<title>Second task</title>
 
+</head>
 
+<body>
 
+	<main class="conteiner">
 
+		<div class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, modi magnam voluptates facere officiis. Eaque sapiente sequi facilis illum blanditiis autem illo voluptate! Ratione, fugiat. Ab sit neque, distinctio placeat tempore, fugit odit omnis praesentium architecto officia nesciunt, minus fuga.</div>
 
+		<div class="content">
 
+			<div class="colum">
 
+				<img src="img/no-image-icon-15.png" alt="">
 
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolorem similique minima eveniet consequuntur doloribus animi nam sequi exercitationem ea dignissimos dolore, illo. Suscipit magnam laborum debitis. Eligendi modi aperiam voluptates voluptatibus id maiores quis pariatur repellat quam odio quaerat, dolorem cum deleniti, culpa voluptas repudiandae expedita delectus sed vitae!</p>
 
+			</div>
 
+			<div class="colum">
 
+				<img src="img/no-image-icon-15.png" alt="">
 
+				<p>Laboriosam aspernatur, unde aliquam accusantium, magnam quas temporibus veritatis molestiae, autem quasi sunt vel sit? Voluptas minima sequi repellat natus mollitia necessitatibus aut impedit aliquid ab vero neque iure id tenetur quibusdam facere ea dolores ipsa tempore, cum numquam doloremque quidem totam enim quisquam. Illo itaque, adipisci iure hic nostrum.</p>
 
+			</div>
 
+			<div class="colum">
 
+				<img src="img/no-image-icon-15.png" alt="">
 
+				<p>Corporis non iusto aspernatur amet, atque tempora est id fuga sed fugiat possimus totam, accusamus molestias pariatur, corrupti. Ex distinctio fuga quod dolorum ad doloremque fugiat, nesciunt esse sapiente atque impedit praesentium provident. Incidunt voluptates mollitia odio, quod aspernatur, perspiciatis voluptas recusandae nisi omnis laborum, officiis fugit tempore, iure blanditiis!</p>
 
+			</div>
 
+		</div>
 
+		<div class="footer">
 
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi adipisci, suscipit, quibusdam, amet deleniti rerum mollitia temporibus error tenetur illum, alias unde. Officia, omnis tempore molestias labore expedita minima quaerat.</p>
 
+		</div>
 
+	</main>
 
+</body>
 
+</html>

+ 45 - 0
06.07.2017/3/css/style.css
Bestand weergeven 

@@ -0,0 +1,45 @@
 
+* {
 
+	box-sizing: border-box;
 
+}
 
+html {
 
+	font-size: 10px;
 
+}
 
+body {
 
+	margin: 0;
 
+	font-size: 1.6rem;
 
+}
 
+img {
 
+	max-width: 100%;
 
+}
 
+header, footer {
 
+	padding: 5px 15px;
 
+}
 
+
 
+.conteiner {
 
+	margin: 10px auto;
 
+	width: 850px;
 
+	max-width: 90%;
 
+	box-shadow: 0 0 5px;
 
+
 
+	display: flex;
 
+	flex-flow: column wrap;
 
+	justify-content: space-between;
 
+	height: auto;
 
+}
 
+.content {
 
+	display: flex;
 
+	flex-flow: row nowrap;
 
+	justify-content: space-between;
 
+}
 
+.left-content {
 
+	padding: 5px 15px;
 
+	flex:0 0 25%;
 
+}
 
+.right-content {
 
+	display: flex;
 
+	flex-flow: row nowrap;
 
+}
 
+.colum {
 
+	padding: 5px 15px;
 
+	margin: 0 auto;
 
+}

BIN
06.07.2017/3/img/no-image-icon-15.png
Bestand weergeven


File diff suppressed because it is too large
+ 37 - 0
06.07.2017/3/index.html


+ 78 - 0
06.07.2017/4/css/style.css
Bestand weergeven 

@@ -0,0 +1,78 @@
 
+* {
 
+	box-sizing: border-box;
 
+}
 
+html {
 
+	font-size: 10px;
 
+}
 
+body {
 
+	margin: 0;
 
+	font-size: 1.6rem;
 
+}
 
+img {
 
+	max-width: 100%
 
+}
 
+
 
+.conteiner {
 
+	padding-bottom: 20px;
 
+	margin: 10px auto;
 
+	width: 850px;
 
+	height: 150px;
 
+	max-width: 90%;
 
+	box-shadow: 0 0 5px;
 
+
 
+	display: flex;
 
+	flex-flow: row nowrap;
 
+	justify-content: center;
 
+
 
+}
 
+.columpr {
 
+	background: #fff;
 
+	width: 50px;
 
+	text-align: center;
 
+}
 
+.colum {
 
+	padding-top: 10px;
 
+	display: flex;
 
+	flex-flow: column wrap;
 
+	justify-content: flex-end;
 
+}
 
+.columcol1 {
 
+	background: #FF1493;
 
+	width: 50px;
 
+	height: calc(70% - 18px);
 
+}
 
+.columcol2 {
 
+	background: #1E90FF;
 
+	width: 50px;
 
+	height: calc(50% - 18px);
 
+}
 
+.columcol3 {
 
+	background: #7CFC00;
 
+	width: 50px;
 
+	height: calc(30% - 18px);
 
+}
 
+.columcol4 {
 
+	background: #F4A460;
 
+	width: 50px;
 
+	height: calc(100% - 18px);
 
+}
 
+.columcol5 {
 
+	background: #CD853F;
 
+	width: 50px;
 
+	height: calc(90% - 18px);
 
+}
 
+.columcol6 {
 
+	background: #87CEEB;
 
+	width: 50px;
 
+	height: calc(60% - 18px);
 
+}
 
+.columcol7 {
 
+	background: #800080;
 
+	width: 50px;
 
+	height: 10%;
 
+}
 
+.columcol8 {
 
+	background: #663399;
 
+	width: 50px;
 
+	height: calc(35% - 18px);
 
+}

+ 44 - 0
06.07.2017/4/index.html
Bestand weergeven 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<link rel="stylesheet" href="css/style.css">
 
+	<title>Fourth task</title>
 
+</head>
 
+<body>
 
+	<div class="conteiner">
 
+		<div class="colum">
 
+			<div class="columpr">70%</div>
 
+			<div class="columcol1"></div>
 
+		</div>
 
+		<div class="colum">
 
+			<div class="columpr">50%</div>
 
+			<div class="columcol2"></div>
 
+		</div>
 
+		<div class="colum">
 
+			<div class="columpr">30%</div>
 
+			<div class="columcol3"></div>
 
+		</div>
 
+		<div class="colum">
 
+			<div class="columpr">100%</div>
 
+			<div class="columcol4"></div>
 
+		</div>
 
+		<div class="colum">
 
+			<div class="columpr">90%</div>
 
+			<div class="columcol5"></div>
 
+		</div>
 
+		<div class="colum">
 
+			<div class="columpr">60%</div>
 
+			<div class="columcol6"></div>
 
+		</div>
 
+		<div class="colum">
 
+			<div class="columpr">10%</div>
 
+			<div class="columcol7"></div>
 
+		</div>
 
+		<div class="colum">
 
+			<div class="columpr">35%</div>
 
+			<div class="columcol8"></div>
 
+		</div>
 
+	</div>
 
+</body>
 
+</html>

+ 57 - 0
06.07.2017/5/css/style.css
Bestand weergeven 

@@ -0,0 +1,57 @@
 
+* {
 
+	box-sizing: border-box;
 
+}
 
+html {
 
+	font-size: 10px;
 
+}
 
+body {
 
+	margin: 0;
 
+	font-size: 1.6rem;
 
+}
 
+img {
 
+	max-width: 100%
 
+}
 
+span {
 
+	font-size: 25px;
 
+	font-weight: bold;
 
+}
 
+.conteiner { 
+	width: 1024px;
 
+	margin: 10px auto;
 
+	max-width: 90%;
 
+
 
+	display: flex;
 
+	flex-flow: row wrap;
 
+	justify-content: space-around;
 
+ }
 
+ .data1, .data2 {
 
+ 	width: 50%;
 
+ 	display: flex;
 
+ 	flex-flow: row nowrap;
 
+ }
 
+ .data3 {
 
+	width: 100%;
 
+	display: flex;
 
+	flex-flow: row wrap;
 
+ }
 
+.content {
 
+ 	background: #eee;
 
+ 	margin: 10px;
 
+ 	padding: 10px;
 
+ }
 
+
 
+ @media screen and (orientation: portrait) {
 
+ 	.data1 {
 
+ 		flex-flow: column-reverse wrap;
 
+ 	}
 
+ 	.data2 {
 
+ 		flex-flow: row-reverse nowrap;
 
+ 	}
 
+ }
 
+ @media screen and (max-width: 375px){
 
+ 	.data1, .data2, .data3 {
 
+ 		width: 100%;
 
+ 		flex-flow: row wrap;
 
+ 	}
 
+ }
 
+

+ 37 - 0
06.07.2017/5/index.html
Bestand weergeven 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width">
 
+	<link rel="stylesheet" href="css/style.css">
 
+	<title>Fifth task</title>
 
+</head>
 
+<body>
 
+	<main class="conteiner">
 
+		<div class="data1">
 
+			<div class="content">
 
+				<p><span>1.</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum aspernatur repudiandae praesentium accusantium quo eaque porro ut at corporis ipsa omnis vero minima aliquam, nulla eos dolorem provident deserunt asperiores inventore maiores a tempore suscipit id tenetur? Dicta aperiam facere error accusamus ad vero amet, eius mollitia iste blanditiis porro.</p>
 
+			</div>
 
+			<div class="content">
 
+				<p><span>2.</span>Neque asperiores quidem, quia debitis, ea provident, fugiat ex numquam similique at nostrum harum error perspiciatis tenetur possimus minus illo qui. Hic saepe, corporis amet dolorem minus! Accusamus, iste minus, necessitatibus earum, repellat magni saepe modi, ducimus perferendis ipsa sunt. Eum nam reiciendis aspernatur tempore delectus nobis at culpa velit!</p>
 
+			</div>
 
+		</div>
 
+		<div class="data2">
 
+			<div class="content">
 
+				<p><span>3.</span>Veniam dignissimos, qui reiciendis voluptas, minus harum vitae quas accusamus praesentium ullam modi tempora cupiditate nam corporis error, sequi in sit aliquam quia, laudantium? Debitis nesciunt perspiciatis natus consequuntur repellendus mollitia dolorem id expedita, dolores reprehenderit possimus iure inventore ratione nemo, quam.</p>
 
+			</div>
 
+			<div class="content">
 
+				<p><span>4.</span>Et ab aut veritatis at. Ea ipsa eum, ipsam voluptas quam amet autem ad inventore facilis nulla, aliquam cum impedit. Doloribus, accusamus, molestias. Quas numquam dicta blanditiis deserunt culpa esse earum nulla aliquam saepe est ea quos explicabo minus id, doloribus error</p>
 
+			</div>
 
+		</div>
 
+		<div class="data3">
 
+			<div class="content">
 
+				<p><span>5.</span>Nulla dolores dolor cum consequuntur, nisi eos itaque cumque repellendus tenetur alias rerum, officia officiis veniam tempora temporibus quaerat impedit earum voluptatem similique soluta ipsam eveniet assumenda deserunt. Quae optio sint nam, odit. Alias perspiciatis necessitatibus at veritatis veniam tempore quas dolorum magni, consequuntur, repudiandae ab consequatur hic aperiam assumenda.</p>
 
+			</div>
 
+			<div class="content">
 
+				<p><span>6.</span>Eveniet nesciunt repellat laborum temporibus voluptatem ut, sequi, voluptates excepturi eum commodi aut saepe, fugit veniam praesentium dolorem magnam. Fuga aut atque aspernatur unde temporibus rerum modi blanditiis. Expedita optio, nihil laboriosam repellendus voluptate voluptates cupiditate, voluptatem ex modi eveniet fugiat soluta. Excepturi culpa tempore aliquid cupiditate ipsam fugiat. Eius.</p>
 
+			</div>
 
+		</div>
 
+	</main>
 
+</body>
 
+</html>