Position-Float/task_position.html at master · Shelenium/Position-Float · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="Task">
    <meta name="keywords" content="Task">
    <meta name="author" content="Elena Shokhan Shelenium">


    <title>Task Position by Elena Shokhan</title>

    <link href="css/myriard-font.css" rel="stylesheet">
    <link href="css/task-position.css" rel="stylesheet">


</head>


<body>

<div class = "common_frame">

	<div class = "maingray gray3"></div>
	<div class = "bookmarks color3"></div>
	<div class = "maingray gray2"></div>
	<div class = "bookmarks color2"></div>

<div class = "maingray gray1">
    <h1>Lorem ipsum dolor sit amet</h1>
    <img class="image-up" src="images/image-up.jpg" alt="image-up">
    <p class="just-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit in nisl accumsan blandit. Mauris sed consequat tortor. Etiam enim odio, elementum sed risus id, faucibus lobortis felis. Donec maximus dolor in egestas fringilla. Pellentesque a neque quis eros lobortis mollis sit amet ut dolor. Aenean nec quam dictum, pharetra nulla et, ornare eros.</br>Quisque accumsan felis vel dolor placerat, sed imperdiet dolor tempor. Morbi et molestie dolor, ac consectetur ipsum. Nullam varius risus in purus bibendum, in auctor odio eleifend. Proin cursus leo quis ex commodo, non placerat diam finibus.</p>
    <img class="image-middle shift" src="images/image-middle.jpg" alt="image-middle">
    <p class="just-text shift">Aliquam tempus gravida fermentum. Quisque vel sodales risus. Sed ultricies justo sem, in rutrum neque interdum eget. Donec nec metus nunc. Nullam tempus convallis porttitor. Aliquam tempus gravida fermentum. Quisque vel sodales risus. Sed ultricies justo sem, in rutrum neque interdum eget. Donec nec metus nunc. Nullam tempus convallis porttitor. Sed ultricies justo sem, in rutrum neque interdum eget. Donec nec metus nunc. Nullam tempus convallis porttitor.</p>
    <p class="subtitle">Nulla viverra tortor efficitur vestibulum tristique.</p>
    <div class = "block">
    <div><img src="images/joke1.jpg" alt="joke1"></div>
    <div><img src="images/joke3.jpg" alt="joke3"></div>
    </div>
    <div class = "block right">
    <div><img src="images/joke2.jpg" alt="joke2"></div>
    <div><img src="images/joke4.jpg" alt="joke4"></div>
	</div>
	<p class = "final">Suspendisse bibendum porttitor purus quis vestibulum. Etiam pellentesque justo ac dui cursus tincidunt. Etiam iaculis semper metus vel facilisis. Etiam ut mi nec libero ullamcorper feugiat a eu augue.</p>
</div> <!-- end  maingray gray1-->

	<div class = "bookmarks color1"></div>

</div> <!-- end common_frame-->

<div class = "social">
	<p class="share">Share this</p>
	<div class = "block"><img class="img-circle" src = "images/facebook-icon-s.png" alt="facebook"></div>
	<div class = "block"><img class="img-circle" src = "images/twitter-logo-s.png" alt="twitter"></div>
	<div class = "block"><img class="img-circle" src = "images/instagram-icon-s.png" alt="instagram"></div>
</div>


</body>
</html>