-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (166 loc) · 10.8 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!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.0" />
<title>John Portfolio</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="container_header">
<button class="header__toggle--btn">
<img src="./images/svg/toggle_btn.svg" alt="toggle butoon ">
</button>
<nav class="hidden">
<ul class="nav__list">
<li class="nav__item">
<a href="index.html" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="./html/works.html" class="nav__link">Works</a>
</li>
<li class="nav__item">
<a href="./html/blog.html" class="nav__link">Blog</a>
</li>
<li class="nav__item">
<a href="./html/contact.html" class="nav__link">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<main class="main">
<section class="hero">
<div class="container">
<div class="hero__info--wrapper">
<h1>
Hi, I am John, <br> Creative Technologist
</h1>
<p>
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
</p>
<a class="hero__btn btn" href="">
Download Resume
</a>
</div>
<div class="hero__img-div">
<img width="247px" height="247px" src="./images/png/jonas.png" alt="jonas image" srcset="./images/png/jonas.png 1x, ./images/png/[email protected] 2x">
<img class="jonas_bg" src="./images/png/jonas_bg.png" alt="" srcset="./images/png/jonas_bg.png 1x, ./images/png/[email protected] 2x">
</div>
</div>
</section>
<section class="post">
<div class="container">
<div class="post__top-div">
<h3>Recent posts</h3>
<a class="post__top_link" href="">View all</a>
</div>
<div class="post__bottom">
<div class="post__card">
<h2>Making a design system from scratch</h2>
<div>
<a href="data">
12 Feb 2020
</a>
<div class="vertical_line"></div>
<h4>Design, Pattern</h4>
</div>
<p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
<div class="post__card">
<h2>Creating pixel perfect icons in Figma</h2>
<div>
<a href="data">
12 Feb 2020
</a>
<div class="vertical_line"></div>
<h4>Figma, Icon Design</h4>
</div>
<p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
</div>
</section>
<section class="works work_padding">
<div class="container">
<h3>Featured works</h3>
<div class="works__card">
<img src="./images/png/admin_dashboard.png" alt="admin panel illustration" srcset="./images/png/admin_dashboard.png 1x, ./images/png/[email protected] 2x">
<div class="works__card-info">
<a href="./html/work_detail.html">
<h2>Designing Dashboards</h2>
</a>
<div>
<span>2020</span>
<p>Dashboard</p>
</div>
<p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
<div class="works__card hiddener">
<img src="./images/png/portrait.png" alt="admin panel illustration" srcset="./images/png/portrait.png 1x, ../images/png/[email protected] 2x">
<div class="works__card-info">
<a href="./html/work_detail.html">
<h2>Vibrant Portraits of 2020</h2>
</a>
<div>
<span>2018</span>
<p>Illustration</p>
</div>
<p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
<div class="works__card hiddener">
<img src="./images/png/pattern.png" alt="admin panel illustration" srcset="./images/png/pattern.png 1x, ./images/png/[email protected] 2x">
<div class="works__card-info">
<a href="./html/work_detail.html">
<h2>36 Days of Malayalam type</h2>
</a>
<div>
<span>2018</span>
<p>Typhography</p>
</div>
<p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="footer__socials">
<a href="">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.6055 0H4.39453C1.97159 0 0 1.97159 0 4.39453V25.6055C0 28.0284 1.97159 30 4.39453 30H13.2422V19.3945H9.72656V14.1211H13.2422V10.5469C13.2422 7.63893 15.6077 5.27344 18.5156 5.27344H23.8477V10.5469H18.5156V14.1211H23.8477L22.9688 19.3945H18.5156V30H25.6055C28.0284 30 30 28.0284 30 25.6055V4.39453C30 1.97159 28.0284 0 25.6055 0Z" fill="#21243D"/>
</svg>
</a>
<a href="">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.7209 0H8.27874C3.71384 0 0 3.71402 0 8.27892V21.7211C0 26.2862 3.71384 30 8.27874 30H21.7209C26.2862 30 30 26.286 30 21.7211V8.27892C30.0002 3.71402 26.2862 0 21.7209 0ZM27.3384 21.7211C27.3384 24.8185 24.8185 27.3383 21.7211 27.3383H8.27874C5.18153 27.3384 2.66175 24.8185 2.66175 21.7211V8.27892C2.66175 5.18171 5.18153 2.66175 8.27874 2.66175H21.7209C24.8183 2.66175 27.3383 5.18171 27.3383 8.27892V21.7211H27.3384Z" fill="#21243D"/>
<path d="M15 7.27014C10.7375 7.27014 7.26978 10.7379 7.26978 15.0004C7.26978 19.2627 10.7375 22.7303 15 22.7303C19.2625 22.7303 22.7303 19.2627 22.7303 15.0004C22.7303 10.7379 19.2625 7.27014 15 7.27014ZM15 20.0683C12.2054 20.0683 9.93152 17.7949 9.93152 15.0002C9.93152 12.2054 12.2052 9.93171 15 9.93171C17.7948 9.93171 20.0685 12.2054 20.0685 15.0002C20.0685 17.7949 17.7947 20.0683 15 20.0683Z" fill="#21243D"/>
<path d="M23.0545 5.01318C22.5417 5.01318 22.0379 5.2208 21.6757 5.58457C21.3118 5.94657 21.1025 6.45053 21.1025 6.96513C21.1025 7.47814 21.3119 7.98192 21.6757 8.34569C22.0377 8.70769 22.5417 8.91708 23.0545 8.91708C23.5691 8.91708 24.0713 8.70769 24.435 8.34569C24.7988 7.98192 25.0064 7.47796 25.0064 6.96513C25.0064 6.45053 24.7988 5.94657 24.435 5.58457C24.073 5.2208 23.5691 5.01318 23.0545 5.01318Z" fill="#21243D"/>
</svg>
</a>
<a href="">
<svg width="37" height="30" viewBox="0 0 37 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.9231 3.55154C35.55 4.15385 34.0869 4.55308 32.5615 4.74692C34.1308 3.81 35.3285 2.33769 35.8915 0.563077C34.4285 1.43538 32.8131 2.05154 31.0915 2.39538C29.7023 0.916154 27.7223 0 25.5623 0C21.3715 0 17.9977 3.40154 17.9977 7.57154C17.9977 8.17154 18.0485 8.74846 18.1731 9.29769C11.88 8.99077 6.31154 5.97462 2.57077 1.38C1.91769 2.51308 1.53462 3.81 1.53462 5.20615C1.53462 7.82769 2.88462 10.1515 4.89692 11.4969C3.68077 11.4738 2.48769 11.1208 1.47692 10.5646C1.47692 10.5877 1.47692 10.6177 1.47692 10.6477C1.47692 14.3262 4.10077 17.3815 7.54154 18.0854C6.92538 18.2538 6.25385 18.3346 5.55692 18.3346C5.07231 18.3346 4.58308 18.3069 4.12385 18.2054C5.10462 21.2031 7.88769 23.4069 11.1969 23.4785C8.62154 25.4931 5.35154 26.7069 1.81154 26.7069C1.19077 26.7069 0.595385 26.6792 0 26.6031C3.35308 28.7654 7.32692 30 11.6123 30C25.5415 30 33.1569 18.4615 33.1569 8.46C33.1569 8.12538 33.1454 7.80231 33.1292 7.48154C34.6315 6.41538 35.8938 5.08385 36.9231 3.55154Z" fill="#21243D"/>
</svg>
</a>
<a href="">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.6055 0H4.39453C1.97159 0 0 1.97159 0 4.39453V25.6055C0 28.0284 1.97159 30 4.39453 30H25.6055C28.0284 30 30 28.0284 30 25.6055V4.39453C30 1.97159 28.0284 0 25.6055 0ZM10.6055 23.7891H7.08984V11.4844H10.6055V23.7891ZM10.6055 9.72656H7.08984V6.21094H10.6055V9.72656ZM22.9102 23.7891H19.3945V16.7578C19.3945 15.7887 18.6058 15 17.6367 15C16.6676 15 15.8789 15.7887 15.8789 16.7578V23.7891H12.3633V11.4844H15.8789V12.147C16.7999 11.8607 17.3982 11.4844 18.5156 11.4844C20.8999 11.4869 22.9102 13.6258 22.9102 16.1536V23.7891Z" fill="#21243D"/>
</svg>
</a>
</div>
<p>Copyright ©2020 All rights reserved </p>
</div>
</footer>
<!-- JavaScript -->
<script src="./js/scripts.js" defer></script>
</body>
</html>