-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (55 loc) · 3.26 KB
/
index.html
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
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Task Positioning & Floats">
<meta name="author" content="Gambrinius/Ilya Konon">
<title>Positioning and Floats</title>
<link href="css/css_description.css" rel="stylesheet" >
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
</head>
<body>
<div class="common_frame">
<div class="first_page">
<div class="bookmark"></div>
<div class="content">
<h1> Lorem ipsum dolor sit amet </h1>
<img src="images/cup.jpg" alt="CSS IS AWESOME">
<p>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.</p>
<p>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 src="images/web-designer-developer-jokes.jpg" alt="YOU ARE THE CSS TO MY HTML">
<p> 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>
<h2>Nulla viverra tortor efficitur vestibulum tristique.</h2>
<img class="img_left_top" src="images/ninja.jpg" alt="Ninja-CSS">
<img class="img_right_top" src="images/titanic.jpg" alt="Titanic-CSS">
<img class="img_left_bottom" src="images/puns.jpg" alt="Puns-CSS">
<img class="img_right_bottom" src="images/triangle.jpg" alt="Triangle-CSS">
<footer>
<p>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>
</footer>
</div>
</div>
<div class="second_page">
<div class="bookmark"></div>
</div>
<div class="third_page">
<div class="bookmark"></div>
</div>
</div>
<div class="social">
<p>Share this</p>
<a href="#"><img src="images/facebook-icon.png" alt="Facebook-Icon"></a>
<a href="#"><img src="images/twitter-icon.png" alt="Twitter-Icon"></a>
<a href="#"><img src="images/instagram-icon.png" alt="Instagram-Icon"></a>
</div>
</body>
</html>