-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (158 loc) · 7.58 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
176
177
178
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Filip Szwedo | Projekt 1 - HTML i CSS @ CodersCamp</title>
<meta name="description" content="Project no.1 in area of HTML and CSS @ CodersCamp open web development course.">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/3513e7856f.js" crossorigin="anonymous"></script>
</head>
<body>
<img src="images/coding.jpg" alt="Background image" class="background-image" />
<!-- NAVIGATION -->
<div class="social-link-wrapper">
<a href="http://costam.pl/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="http://costam.pl/">
<i class="fab fa-github"></i>
</a>
<a href="http://costam.pl/">
<i class="fab fa-facebook"></i>
</a>
</div>
<!-- INTRODUCTION -->
<div class="introduction-container">
<div class=" introduction-text">
<h2>
Hello, I'm
</h2>
<h1>
Phil
</h1>
<h4>
Project Manager<br />
Aspiring Developer<br />
Mountain Bike passionate<br />
</h4>
<div class="introduction-buttons">
<a href="#about-me">
<div class="button">
<span>ABOUT ME</span>
</div>
</a>
<a href="#contact">
<div class="button">
<span>CONTACT</span>
</div>
</a>
</div>
</div>
<div class="introduction-image">
<img src="https://images.unsplash.com/photo-1539923779676-1a9bddf986db?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxMTU1NTIzfHxlbnwwfHx8&w=1000&q=80"
alt="Phil's photo" />
</div>
</div>
<!-- ABOUT ME -->
<div class="about-me" id="about-me">
<img src="images/ja2.png" alt="Phil's photo" />
<span>
<h3>
A little bit about myself
</h3>
<p>
Passionate about technology - both "analog" and digital </br>
Involved in Formula Student project during my studies </br>
Striving for excellence in IT
</p>
</span>
</div>
<!-- SPACER -->
<div class="spacer">
<label class="spacer-content">
<input class="spacer-more" type="checkbox" checked="">
<div class="expandable-container">
<span>Click anywhere to close! </span>
<span>Hobby text description<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s.</span>
<div class="expandable-container-photo">
<img src="https://trek.scene7.com/is/image/TrekBicycleProducts/b300_mtbMarqueeImage?$responsive-pjpg$&cache=on,on&wid=1920"
alt="Phil's photo" />
</div>
</div>
<img src="https://trek.scene7.com/is/image/TrekBicycleProducts/b300_mtbMarqueeImage?$responsive-pjpg$&cache=on,on&wid=1920"
alt="Phil's photo" />
</label>
<label class="spacer-content">
<input class="spacer-more" type="checkbox" checked="">
<div class="expandable-container" id="expandable-container2">
<span>Click anywhere to close! </span>
<span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
<br>has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
</span>
</div>
<img src="https://inteng-storage.s3.amazonaws.com/img/iea/EBwmyMobw0/sizes/types-of-welding_resize_md.jpg"
alt="Phil's photo" />
</label>
<label class="spacer-content">
<input class="spacer-more" type="checkbox" checked="">
<div class="expandable-container">
<span>Click anywhere to close! </span>
<span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
<br>has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
</span>
</div>
<img src="https://www.eurocircuits.com/wp-content/uploads/PWR-Racing-Team-Image-5-web.jpg" />
</label>
<label class="spacer-content">
<input class="spacer-more" type="checkbox" checked="">
<div class="expandable-container">
<span>Click anywhere to close! </span>
<span>Hobby text description<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s.</span>
<div class="expandable-container-photo">
<img
src="https://i0.wp.com/images-prod.healthline.com/hlcmsresource/images/topic_centers/2019-8/couple-hiking-mountain-climbing-1296x728-header.jpg?w=1155&h=1528" />
</div>
</div>
<img
src="https://i0.wp.com/images-prod.healthline.com/hlcmsresource/images/topic_centers/2019-8/couple-hiking-mountain-climbing-1296x728-header.jpg?w=1155&h=1528" />
</label>
</div>
<!-- FORM -->
<form action="mailto:filip.szwedo@gmail.com" method="post" enctype="text/plain" id="contact">
<h2>Contact me</h2>
<div class="form-inner">
<input type="text" placeholder="Username">
<input type="email" placeholder="Email">
<textarea placeholder="Message..." rows="5"></textarea>
<button type="submit" value="Send">SEND</button>
<div class="contact-info">
If you prefer to contact me directly:<br>
<i class="fas fa-phone"></i> 883 - 039 - 532<br>
<i class="fas fa-envelope"></i> filip.szwedo@gmail.com
</div>
</div>
</form>
<!-- FOOTER -->
<footer>
2020 Filip Szwedo
</footer>
</body>
</html>