-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (116 loc) · 4.83 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
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 name="author" content="bl0op">
<title>Tribute</title>
<link rel="icon" href="assets/img/me.png" type="image/icon type">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<img src="assets/img/bl0op_logo.svg" class="logo" alt="logo"/>
<nav class="navbar">
<ul class="navbar-nav">
<li>
<a href="#" class="nav-item current" data-target="home">Home</a>
</li>
<li>
<a href="#" class="nav-item" data-target="about">About</a>
</li>
<li>
<a href="#" class="nav-item" data-target="contact-me">Contact Me</a>
</li>
</ul>
</nav>
<div class="toggler"><img src="assets/img/bars-solid.svg"></div>
</div>
</header>
<!-- Home tab -->
<section class="showcase tab active" id="home">
<div class="container">
<div class="media">
<img src="assets/img/me.png" alt="me" class="media-img-right">
<article class="media-body">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mene ergo et Triarium dignos existimas,
apud quos turpiter loquare? Eam tum adesse,
cum dolor omnis absit; Duo Reges:
constructio interrete. Itaque primos
congressus copulationesque et consuetudinum
instituendarum voluntates fieri propter voluptatem;
Quo modo autem philosophus loquitur?
Iam enim adesse poterit..
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mene ergo et Triarium dignos existimas,
apud quos turpiter loquare? Eam tum adesse,
cum dolor omnis absit; Duo Reges:
constructio interrete. Itaque primos
congressus copulationesque et consuetudinum
instituendarum voluntates fieri propter voluptatem;
Quo modo autem philosophus loquitur?
Iam enim adesse poterit..
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mene ergo et Triarium dignos existimas,
apud quos turpiter loquare? Eam tum adesse,
cum dolor omnis absit; Duo Reges:
constructio interrete. Itaque primos
congressus copulationesque et consuetudinum
instituendarum voluntates fieri propter voluptatem;
Quo modo autem philosophus loquitur?
</article>
</div>
</div>
</section>
<!-- About tab -->
<section class="showcase tab" id="about">
<div class="container">
<div class="media">
<img src="assets/img/Frontend.png" alt="frontend image" class="media-img-left">
<article class="media-body">
Hi, my name is Yaroslav and I’m beginner in Web Design.
I’m passionate about everything that concerns
modern Frontend development.
You are at my first portfolio tribute project now.
To see my remaining works please
follow “Contact Me” link.
</article>
</div>
</div>
</section>
<!-- Contact Me tab-->
<section class="showcase tab" id="contact-me">
<div class="container">
<p>
<img src="assets/img/envelope-solid.svg" class="icon" alt="envelope icon">
email - <a href="mailto:[email protected]">[email protected]</a>
<p>
<p>
<img src="assets/img/phone-solid.svg" class="icon" alt="icon">
phone(ru) - <a href="tel:8-950-018-50-48">8-950-018-50-48</a>
<p>
<p>
<img src="assets/img/address-card-solid.svg" class="icon" alt="cv icon">
<a href="https://spb.hh.ru/resume/ede7571aff07fd0c650039ed1f694c47483067">cv on HeadHunter</a>
<p>
<p>
<a href="https://github.com/bl0op/tribute-page">Github project link</a>
</p>
<p>
<a href="#">Other projects</a>
</p>
</div>
</section>
<footer>
<div class="container">
bl0op 2020 ©
</div>
</footer>
<script src="scripts/script.js"></script>
</body>
</html>