-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (145 loc) · 6.48 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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CodersCamp | Projekt 1 - HTML i CSS</title>
<meta name="description" content="CodersCamp to darmowy, otwarty kurs programowania webowego we Wrocławiu. Sprawdź, czego nauczysz się na CodersCamp i spróbuj swoich sił w branży IT!">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poly&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/keyframes.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
</head>
<body>
<header>
<nav>
<div><a href="#portfolio">portfolio</a></div>
<div><a href="#gallery">gallery</a></div>
<div><a href="#">adam kostuch.</a></div>
<div><a href="#achievements">achievements</a></div>
<div><a href="#contact">contact</a></div>
</nav>
</header>
<section class="main_view">
<div class="main_left"></div>
<div class="main_content flex_center">
<div class="main_text">
<h2>Hello!</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus sint, voluptatem libero vel nesciunt voluptates aliquid minima ad temporibus repudiandae tempora sequi autem numquam. Reprehenderit excepturi commodi est quas eligendi.</p>
</div>
</div>
<div class="main_right"></div>
<div class="blank"></div>
</section>
<section id="portfolio">
<div class="portfolio_container">
<h1>portfolio</h1>
<div class="portfolio_logo">
<div class="single_project">
<div class="project_hover flex_center">
<div class="hover_animation">
<a href=""><img src="img/github_white.png" alt="gh"></a>
<a href=""><img src="img/file.png" alt="fl"></a>
</div>
</div>
</div>
<div class="single_project">
<div class="project_hover flex_center">
<div class="hover_animation">
<a href=""><img src="img/github_white.png" alt="gh"></a>
<a href=""><img src="img/file.png" alt="fl"></a>
</div>
</div>
</div>
</div>
</div>
<div class="blank"></div>
</section>
<section id="gallery">
<div class="blank"></div>
<h1>Gallery</h1>
<div class="gallery_container">
<img src="img/g1.jpg" alt="g1" class="item-a">
<img src="img/g2.jpg" alt="g2" class="item-b">
<img src="img/g3.jpg" alt="g3" class="item-c">
<img src="img/g4.jpg" alt="g4" class="item-d">
<img src="img/g5.jpg" alt="g5" class="item-e">
</div>
</section>
<section id="achievements">
<div class="blank"></div>
<h1>Achievements</h1>
<div class="achievements_all flex_center">
<div class="achievements_photo">
<img src="img/achievement.jpg" alt="achievements_photo">
</div>
<div class="achievements_container">
<div class="single_achievement">
<h3>Example achievement 1</h3>
<img src="img/select.png" alt="select">
</div>
<div class="single_achievement">
<h3>Example achievement 2</h3>
<img src="img/select.png" alt="select">
</div>
<div class="single_achievement">
<h3>Example achievement 3</h3>
<img src="img/select.png" alt="select">
</div>
<div class="single_achievement">
<h3>Example achievement 4</h3>
<img src="img/select.png" alt="select">
</div>
</div>
</div>
</section>
<section id="contact">
<div class="blank"></div>
<div class="form_container flex_center">
<h1>Contact</h1>
<div class="iframe_side">
<h4>Where to find me?</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d327952.4182831036!2d19.724694226515123!3d50.0464284278981!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471644c0354e18d1%3A0xb46bb6b576478abf!2zS3Jha8Ozdw!5e0!3m2!1spl!2spl!4v1608641603780!5m2!1spl!2spl" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="form_side">
<h4>Write to me!</h4>
<form method="post" class="flex_center">
<input type="email" name="email" placeholder=" EMAIL">
<textarea name="message" placeholder=" MESSAGE"></textarea>
<input type="submit" name="submit" value="SEND">
</form>
</div>
<div class="contact_side">
<h4>Some information:</h4>
<div class="info_container flex_center">
<div class="one_info flex_center">
<img src="img/user.png" alt="name">
<p>Name Surname</p>
</div>
<div class="one_info flex_center">
<img src="img/email.png" alt="email">
<p>name@mail.com</p>
</div>
<div class="one_info flex_center">
<img src="img/phone-call.png" alt="phone">
<p>+48 000 000 000</p>
</div>
<div class="one_info flex_center">
<img src="img/placeholder.png" alt="home">
<p>City, Country</p>
</div>
</div>
</div>
</div>
</section>
<footer class="flex_center">
<div class="copyrights">
<em>© Adam Kostuch</em>
</div>
</footer>
</body>
</html>