-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpost.html
More file actions
121 lines (112 loc) · 7.93 KB
/
post.html
File metadata and controls
121 lines (112 loc) · 7.93 KB
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Post</title>
<link rel="stylesheet" type = "text/css" href="css/post-style.css">
</head>
<body>
<header class="header">
<img class = "logo" src="images/icon-image.png"/>
<nav class="nav">
<a href="index.html" class="button">Home</a>
<a href="#" class="button">About</a>
<a href="#contact" class="button">Contact</a>
</nav>
</header>
<article>
<section class="content content-info">
<figure>
<img class = avatar src="images/my-photo.png"
alt="Just photo of me">
<figcaption>Author photo in violet jacaranda flowers</figcaption>
</figure>
<p>
Author Info: I'm a Software QA Engineer and want to become a great Front-End Developer! And I will :-) <br/>
Name: Julia K <br/>
Title: QA Engineer <br/>
Current Company/School: EdApp<br/>
Short Bio: Hi there,<br/>
My name is Julia and want to become a great Front-End Developer. I set my goal to get a Front-End Developer job untill December 2020!
</p>
<a href=#></a>
</section>
<section class="content">
<h1>How I study CSS...</h1>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Totam, corrupti suscipit aspernatur exercitationem fugiat
explicabo? Rerum vel itaque, esse rem totam architecto!
Quas odio impedit, suscipit reprehenderit sunt non blanditiis.
</p>
<a href=#></a>
</section>
</article>
<article class="main-content">
<aside>
<a href="#contact" class="button">Previous</a>
<a href="#contact" class="button">Next</a>
</aside>
</article>
<section class="card-list">
<div class="card">
<img class = "card-image" src="images/picture1.jpg" alt="Photo of a funny kitten with a laptop"/>
<div class="card-details"> Try to understand CSS Grid
</div>
</div>
<div class="card">
<img class="card-image" src="images/picture2.jpg" alt="Photo of a sleepy cat that fell asleep in front of a computer"/>
<div class="card-details"> How do I stay focused all the time?
</div>
</div>
<div class="card">
<img class="card-image" src="images/picture3.jpg" alt="Photo of a surprised cat"/>
<div class="card-details"> When I realized that the deadline is coming
</div>
</div>
</section>
<footer class="footer" id = "contact">
<a href="https://github.com/juliaCold" target="_blank">
<svg class = "icon icon--github" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github-square" class="svg-inline--fa fa-github-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z"></path>
</svg>
</a>
<a href="http://linkedin.com/in/julia-koldorkina" target="_blank">
<svg class= "icon icon--linkedin" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>
</svg>
</a>
<a href="https://www.facebook.com/julia.shim.54" target="_blank">
<svg class="icon icon--fb" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg>
</a>
</footer>
</body>
</html>