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

first

Andrey Yakovlev 7 years ago
commit
c4e7eb1535
13 changed files with 538 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      img/Content.png
  2. BIN
      img/Content.psd
  3. BIN
      img/article_image_1.png
  4. BIN
      img/article_image_2.jpg
  5. BIN
      img/bg_img.jpg
  6. BIN
      img/clndr.png
  7. BIN
      img/ppl.jpg
  8. 197 0
      index.html
  9. BIN
      maket/Content.png
  10. BIN
      maket/Content2.png
  11. BIN
      maket/Footer.png
  12. BIN
      maket/header_and_topBlock.png
  13. 341 0
      style.css

BIN
img/Content.png
View File


BIN
img/Content.psd
View File


BIN
img/article_image_1.png
View File


BIN
img/article_image_2.jpg
View File


BIN
img/bg_img.jpg
View File


BIN
img/clndr.png
View File


BIN
img/ppl.jpg
View File


+ 197 - 0
index.html
View File 

@@ -0,0 +1,197 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Module</title><link type="text/css" rel="stylesheet" href="style.css" media="all">
 
+   
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
 
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css">
 
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
+</head>
 
+<body>
 
+<header>
 
+    
+ <div class="modul"> 
+  Module #1
 
+ </div>
 
+        
+        <ul class="menu">
 
+        <li >
 
+            <a href="#" class="in" >Home</a>
 
+        </li>
 
+
 
+        <li>
 
+            <a href="#">Downloads</a>
 
+        </li>
 
+        <li>
 
+            <a href="#">Gallery</a>
 
+        </li>
 
+         <li>
 
+            <a href="#">contact us</a>
 
+         </li>
 
+        <li>
 
+            <a href="#">about</a>
 
+        </li>
 
+     </ul>
 
+</header>
 
+    <section class="part2">
 
+    <div class="pos_blk">
 
+    <h1>A-Level Front-End course</h1>
 
+        
+        <p>
 
+           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias ab dignissimos sit neque, quod itaque, architecto dicta deserunt consequatur veniam assumenda maiores sed expedita labore! Asperiores reiciendis consectetur dolore maiores?
 
+        </p>
 
+</div>
 
+    </section>
 
+    <article class="part3">
 
+    <div class="a_block">        <div class="article">
 
+            <img src="img/article_image_1.png" alt="#" class="img1">
 
+            <h2 class="Layout">HTML Layout Using div Elements</h2>
 
+            <ul class="inform">
 
+                <li>
 
+                    April 6, 2015
 
+                </li>
 
+                <li>
 
+                    Aigars
 
+                </li>
 
+                <li>
 
+                    15 comments
 
+                </li>
 
+            </ul>
 
+            <p class="main_txt">
 
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic repudiandae consectetur unde harum quia animi eum, quasi ab officia deleniti voluptatem recusandae tempore numquam, delectus nulla ipsum veritatis labore!
 
+            </p>
 
+            <a href="#" class="display_a">read more</a>
 
+                   <img src="img/article_image_2.jpg" alt="figna" class="img1">
 
+            <h2 class="Layout">HTML Layout Using div Elements</h2>
 
+            <ul class="inform">
 
+                <li>
 
+                    April 6, 2015
 
+                </li>
 
+                <li>
 
+                    Aigars
 
+                </li>
 
+                <li>
 
+                    15 comments
 
+                </li>
 
+            </ul>
 
+            <p class="main_txt">
 
+               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam explicabo reprehenderit id excepturi, alias molestias aspernatur obcaecati placeat molestiae quae officia ab quod dolorum iure, impedit voluptatum ipsa dignissimos at.
 
+            </p>
 
+            <a href="#" class="display_a">read more</a>
 
+        </div>
 
+        <div class="general">
 
+        <h2>follow us</h2>
 
+
 
+
 
+       <div class="litter"> 
+           
+            <div class="ppl_lt"> 
+             <a href="#"> 
+              <i class="fa fa-facebook" aria-hidden="true"></i>
 
+              </a>
 
+               </div>
 
+            <div class="ppl_lt"> 
+            <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i>
 
+            </a>
 
+</div>
 
+            <div class="ppl_lt">
 
+            <a href="#">
 
+            <i class="fa fa-youtube" aria-hidden="true"></i>
 
+            </a>
 
+            </div>
 
+            <div class="ppl_lt"> 
+            <a href="#">
 
+            <i class="fa fa-google" aria-hidden="true"> </i>
 
+            </a>
 
+</div>
 
+            <div class="ppl_lt"><a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a>
 
+            </div>
 
+                 
+</div>
 
+
 
+    <h2>resent comments</h2>
 
+    <div class="beta">
 
+    <div class="alpha">
 
+      <div class="ppl_name"> <img src="img/Content.png" alt="" class="comment">
 
+      <p class="username">John</p> </div>
 
+      <div class="mb_text">Lorem ipsum dolor </div>
 
+  </div>
 
+  <div class="alpha">
 
+      <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
 
+      <p class="username">John</p></div>
 
+      <div class="mb_text">Lorem ipsum dolor</div>
 
+  </div>
 
+  <div class="alpha">
 
+      <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
 
+      <p class="username">John</p>s</div>
 
+      <div class="mb_text">Lorem ipsum dolor</div>
 
+  </div>
 
+  <div class="alpha">
 
+      <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
 
+      <p class="username">John</p></div>
 
+      <div class="mb_text">Lorem ipsum dolor</div>
 
+  </div>
 
+  <div class="alpha">
 
+      <div class="ppl_name"><img src="img/Content.png" alt="" class="comment">
 
+      <p class="username">John</p></div>
 
+      <div class="mb_text">Lorem ipsum dolor</div>
 
+  </div>
 
+  </div>
 
+  
+            <h2>tags</h2>
 
+                <div class="smth_wt"><div class="tags1">
 
+        <a href="#">tags</a>
 
+        <a href="#">tags-tags</a>
 
+        <a href="#">tagssd</a>
 
+        <a href="#">tags</a>
 
+        <a href="#">tags</a>
 
+        <a href="#">tagsasdaasdas</a>  
+        
+        <a href="#">tags</a>
 
+        <a href="#">tags</a>
 
+        <a href="#">tagsasdf</a>
 
+        <a href="#">tags</a>
 
+        <a href="#">tagsasdf</a>  
+          <a href="#">tagsstags</a>
 
+        <a href="#">tags</a>
 
+         <a href="#">tags</a>
 
+         <a href="#">tags</a>
 
+         </div>
 
+           </div>
 
+       
+                
+        </div>
 
+        </div>
 
+
 
+</article>
 
+
 
+<footer>
 
+        <ul class="menu">
 
+            <li>
 
+                <a href="#">Home</a>
 
+            </li>
 
+
 
+            <li>
 
+                <a href="#">Downloads</a>
 
+            </li>
 
+            <li>
 
+                <a href="#">Gallery</a>
 
+            </li>
 
+            <li>
 
+                <a href="#">contact us</a>
 
+            </li>
 
+            <li>
 
+                <a href="#">about</a>
 
+            </li>
 
+
 
+        </ul>
 
+        <h2>lorem <span>ipsum dolor</span> sit amet</h2>
 
+</footer>
 
+ </body>
 
+</html>
 
+
 
+
 
+                        
+                        
+

BIN
maket/Content.png
View File


BIN
maket/Content2.png
View File


BIN
maket/Footer.png
View File


BIN
maket/header_and_topBlock.png
View File


+ 341 - 0
style.css
View File 

@@ -0,0 +1,341 @@
 
+html, body{
 
+	position: relative;
 
+    font-family: 'Roboto Slab', serif;
 
+    color: #6B6B6B;
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+li{
 
+	list-style: none;
 
+}
 
+header{
 
+	
+	
+    background: #363636;
 
+    width: 100%;
 
+    justify-content: space-between;
 
+    height: 16vh;
 
+    display: flex;
 
+    align-items: center;
 
+    flex-wrap: wrap;
 
+}
 
+
 
+
 
+.pos_blk{
 
+	padding: 27% 5%;
 
+}
 
+.menu{
 
+	padding: 0;
 
+	display: flex;
 
+	height: 3.5vh;
 
+	width: 35%;
 
+	justify-content: center;
 
+	flex-wrap: wrap;
 
+}
 
+.menu li{
 
+	margin-right: 2%;
 
+	height: 3.5vh;
 
+}
 
+.modul{
 
+	
+	font-size: 3.3vh;
 
+	color: white;
 
+	margin-left: 2vw;
 
+}
 
+.menu li a{
 
+	color: #fff;
 
+	text-decoration: none;
 
+	text-transform: uppercase;
 
+	font-size: 2.5vh;
 
+}
 
+.menu li a:hover{
 
+	color: #eca187;
 
+}
 
+.in{
 
+	color: #da4453 !important;
 
+}
 
+section{
 
+	background: url(img/bg_img.jpg) no-repeat;
 
+	background-size: cover;
 
+	width: 100%;
 
+	height: 84vh;
 
+}
 
+
 
+.part2 h1{
 
+	width: 36vw;
 
+	color: #fff;
 
+	font-size: 3.3vh;
 
+	margin-bottom: 2vh;
 
+    background-color: rgba(218, 68, 83, 0.8);
 
+}
 
+.part2 p{
 
+    background-color: rgba(59,59,59,.8);
 
+    color: #ddd;
 
+    font-size: 2vh;
 
+	width: 36vw;
 
+}
 
+.part3{
 
+	display: -webkit-flex;
 
+	display: -moz-flex;
 
+	display: -ms-flex;
 
+	display: -o-flex;
 
+	display: flex;
 
+	justify-content: center;
 
+	margin-top: 2vh;
 
+}
 
+.a_block{
 
+	display: -webkit-flex;
 
+	display: -moz-flex;
 
+	display: -ms-flex;
 
+	display: -o-flex;
 
+	display: flex;
 
+	justify-content: space-around;
 
+	max-width: 100%;
 
+	flex-wrap: wrap;
 
+	width: 70%;
 
+}
 
+.article{
 
+	margin-bottom: 30px;
 
+	float: left;
 
+	box-sizing: border-box;
 
+	border: 1px solid #dadada;
 
+	max-width: 100%;
 
+	width: 60%;
 
+}
 
+
 
+.img1{
 
+	margin-top: 2vh;
 
+	width: 92%;
 
+	margin-left: 3.5%;
 
+}
 
+.Layout {
 
+	color: #444444;
 
+	margin-left: 3.5%;
 
+	font-size: 3.4vh;
 
+}
 
+.inform{
 
+	padding-left: 0;
 
+	margin-left: 9%;
 
+	font-size: 1vh;
 
+}
 
+.inform li{
 
+	font-size: 2.1vh;
 
+	padding-left: 5%;
 
+	display: inline;
 
+}
 
+.inform li:nth-child(1){
 
+	background: url(img/clndr.png) no-repeat;
 
+	background-size: 18% auto;
 
+}
 
+.inform li:nth-child(2){
 
+	background: url(img/ppl.jpg) no-repeat;
 
+	background-size: 28% auto;
 
+}
 
+.inform li:nth-child(3){
 
+	background: url(img/Content.png) no-repeat;
 
+	background-size: 17% auto;
 
+}
 
+.main_txt{
 
+	margin-bottom: 30px;
 
+	font-size: 2.5vh;
 
+	margin-left: 3.5%;
 
+	width: 90%;
 
+	color: #6b6b6b;
 
+}
 
+.display_a{
 
+	font-size: 3vh;
 
+	margin-bottom: 50px;
 
+	font-family: Arial;
 
+	color: #fff;
 
+	text-decoration: none;
 
+	text-transform: uppercase;
 
+	padding: 10px 2%;
 
+	background:#da4453;
 
+	display: inline-block;
 
+	margin-left: 70%; 
+}
 
+.display_a:hover{
 
+	color:#fff;
 
+}
 
+.general{
 
+	border-radius: 2px;
 
+	border: 1px solid #dadada;
 
+	box-sizing: border-box;
 
+	width: 34%;
 
+}
 
+.general h2{
 
+	text-transform: uppercase;
 
+	font-size: 2.4vh;
 
+	margin-left:5%;
 
+}
 
+
 
+.litter{
 
+	display: -webkit-flex;
 
+	display: -moz-flex;
 
+	display: -ms-flex;
 
+	display: -o-flex;
 
+	display: flex;
 
+
 
+	width: 93%;
 
+	justify-content: space-around;
 
+	height:  3%;
 
+}
 
+.litter a i{
 
+	padding: 10px;
 
+	border-radius: 20%;
 
+	font-size: 20px;
 
+	color: #fff;
 
+	background: #c1c0c0;
 
+	height: 100%;
 
+	width: 100%;
 
+	text-align: center;
 
+}
 
+.ppl_lt{
 
+	width: 	20px;
 
+	height: 	20px;
 
+}
 
+
 
+.smth_wt{display: flex;
 
+	-webkit-flex-direction: column;
 
+	-moz-flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	-o-flex-direction: column;
 
+	flex-direction: column;
 
+margin-left: 10%;
 
+}
 
+.smth_wt a{
 
+	font-size: .9em;
 
+	text-decoration: none;
 
+	color: #fff;
 
+	border-radius: 5px;
 
+	margin-right: 2%;
 
+	padding: 0 2%;
 
+	
+	background:  #dadada;
 
+	margin-top: 2vh;
 
+	height: 33px;
 
+	display: flex;
 
+	align-items: center;
 
+}
 
+.smth_wt a:hover{
 
+	opacity: .8;
 
+}
 
+.beta{
 
+	display: -webkit-flex;
 
+	display: -moz-flex;
 
+	display: -ms-flex;
 
+	display: -o-flex;
 
+	display: flex;
 
+	-webkit-flex-direction: column;
 
+	-moz-flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	-o-flex-direction: column;
 
+	flex-direction: column;
 
+
 
+	color: #cfc2c4;
 
+}
 
+.alpha{
 
+	display: -webkit-flex;
 
+	display: -moz-flex;
 
+	display: -ms-flex;
 
+	display: -o-flex;
 
+	display: flex;
 
+	-webkit-flex-direction: column;
 
+	-moz-flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	-o-flex-direction: column;
 
+	flex-direction: column;
 
+
 
+	width: 80%;
 
+	margin-left: 10%;
 
+}
 
+
 
+.tags1{
 
+	display: flex;
 
+	flex-wrap: wrap;
 
+}
 
+.tags2{
 
+}
 
+.ppl_name{
 
+	display: -webkit-flex;
 
+	display: -moz-flex;
 
+	display: -ms-flex;
 
+	display: -o-flex;
 
+	display: flex;
 
+	-webkit-flex-direction: row;
 
+	-moz-flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	-o-flex-direction: row;
 
+	flex-direction: row;
 
+	align-items: center;
 
+}
 
+.comment{
 
+	height: 60%;
 
+
 
+}
 
+.username{
 
+	
+	padding-left: 1vh;
 
+	font-weight: bold;
 
+	font-size: 0.9em;
 
+	margin: 0;
 
+}
 
+.mb_text{
 
+	padding: 2vh 0;
 
+	font-size: .9em;
 
+	border-bottom: 1px solid;
 
+}
 
+.tags2{margin: 3vh 0;
 
+}
 
+footer{
 
+	background: #363636;
 
+    width: 100%;
 
+    justify-content: space-around;
 
+    display: flex;
 
+	flex-wrap: wrap;
 
+	align-items: center;
 
+}
 
+footer .nav{
 
+	margin-left: 1.5%;
 
+}
 
+footer h2{
 
+	color: #fff;
 
+	font-size: 3vh;
 
+}
 
+footer h2 span{
 
+	color: #999999;
 
+}
 
+@media screen and (max-width: 1024px) {
 
+	.article{width: 100%;
 
+	}
 
+	.a_block{
 
+		width: 100%
 
+	}
 
+	.general{
 
+		width: 100%;
 
+	}
 
+	.litter{
 
+		height: 9vh
 
+	}
 
+	.tags1{
 
+		display: flex;
 
+		margin-bottom: 1vh
 
+	
+	}
 
+	.menu{
 
+		
+		width: 100%;
 
+	}
 
+	
+	.part2 h1{
 
+		padding:  0;
 
+		width: 100%;
 
+			font-size:20px;
 
+	}
 
+	.part2 p{
 
+		width: 100%;
 
+		font-size: 15px;
 
+	}
 
+	}
 
+   
+