-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (169 loc) · 8.12 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
<!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 href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/main.min.css">
</head>
<body>
<nav class="nav">
<span class="nav__logo">JM</span>
<input class="nav__checkbox" type="checkbox" role="button" aria-expanded="false" />
<div class="nav__hamburger">
<div></div>
</div>
<ul class="nav__list">
<li><a href="#header">Home</a></li>
<li><a href="#projects">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button class="btn nav__btn">Get A Quote</button>
</nav>
<header class="header" id="header">
<span>James Martin</span>
<h1 class="header__banner">JM</h1>
<h2 class="header__banner-small">Creative</h2>
<span>professional</span>
<a class="header__arrow" href="#motto">
<svg viewBox="0 0 477.175 477.175" >
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>
</svg>
</a>
</header>
<section class="motto" id="motto">
<div class="border">
<div class="border__inner"></div>
</div>
<img class="motto__person" src="./img/img-6.png" alt="Photo of myself">
<div class="motto__phrase">
<h3>Nothing is impossible</h3>
<p>Just if you work hard enough on it</p>
</div>
<span class="motto__name">James Martin</span>
</section>
<section class="app section-app-web">
<div class="section-app-web__heading">
<h3>Topaz App Design</h3>
<p>App design for Topaz, an awesome creative company from New York</p>
<a href="./sub-pages/comming.html" target="_blank">Check it out</a>
</div>
<img class="app__phone" src="./img/iphone.png" alt="Iphone">
</section>
<section class="web section-app-web">
<img class="web__laptop" src="./img/macbook.png" alt="Macbook">
<div class="section-app-web__heading">
<h3>MGF Web design</h3>
<p>Web design I made for MGF, amazing architecture agency from London</p>
<a href="./sub-pages/comming.html" target="_blank">Check it out</a>
</div>
</section>
<section class="projects" id="projects">
<h3 class="projects__heading">Latest Projects</h3>
<div class="border">
<div class="border__inner"></div>
</div>
<div class="slides">
<div class="slide" id="slide1">
<div class="slide__desc">
<h3 class="slide__title">Strategik INC Web Design</h3>
<p>Awesome guys at Strategik INC were superb to work with because they knew exactly what they...</p>
<a href="./sub-pages/comming.html" target="_blank">See full project</a>
</div>
<img class="slide__img" src="./img/img-4.jpg" alt="First project">
</div>
<div class="slide" id="slide2">
<div class="slide__desc">
<h3 class="slide__title">Strategik INC Web Design</h3>
<p>Awesome guys at Strategik INC were superb to work with because they knew exactly what they...</p>
<a href="./sub-pages/comming.html" target="_blank">See full project</a>
</div>
<img class="slide__img" src="./img/project2.jpg" alt="Second project">
</div>
<div class="slide" id="slide3">
<div class="slide__desc">
<h3 class="slide__title">Strategik INC Web Design</h3>
<p>Awesome guys at Strategik INC were superb to work with because they knew exactly what they...</p>
<a href="./sub-pages/comming.html" target="_blank">See full project</a>
</div>
<img class="slide__img" src="./img/project3.jpg" alt="Third project">
</div>
<div class="slide" id="slide4">
<div class="slide__desc">
<h3 class="slide__title">Strategik INC Web Design</h3>
<p>Awesome guys at Strategik INC were superb to work with because they knew exactly what they...</p>
<a href="./sub-pages/comming.html" target="_blank">See full project</a>
</div>
<img class="slide__img" src="./img/project4.jpg" alt="Fourth project">
</div>
</div>
<div class="projects__nav">
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
<a href="#slide4">4</a>
</div>
</section>
<section class="blog" id="blog">
<h3 class="blog__heading">Blog posts</h3>
<div class="posts">
<div class="posts__article">
<img src="./img/img-2.jpg" alt="First blog post">
<h4>Another day in the office</h4>
<p>I love using UI Kits VS website templates
because UI kist are giving you easier way of using the elements then templates.
</p>
<a href="./sub-pages/comming.html" target="_blank">Read Full section</a>
</div>
<div class="posts__article">
<img src="./img/img-1.jpg" alt="Second blog post">
<h4>Why I used CCO images</h4>
<p>CCO images are awesome because you don't have to credit the author, and you can use them anywhere, anytime.</p>
<a href="./sub-pages/comming.html" target="_blank">Read Full section</a>
</div>
<div class="posts__article">
<img src="./img/img.jpg" alt="Third blog post">
<h4>Designing for IOT</h4>
<p>Internet of things is comming so quickly, we as designers will have to design UI and UX for more and more things in the future.</p>
<a href="./sub-pages/comming.html" target="_blank">Read Full section</a>
</div>
</div>
<button class="btn">Load More</button>
</section>
<section class="contact" id="contact">
<div class="border">
<div class="border__inner"></div>
</div>
<h3 class="contact__heading">Contact Me</h3>
<div class="contact__wrapper">
<div class="map">
<img src="./img/map.jpg" alt="City map">
<img class="map__pin" src="./img/location_pin.png" alt="Pin on the map">
</div>
<form action="#">
<div class="group">
<input id="name" type="text" required>
<label for="name">Your name</label>
</div>
<div class="group">
<input id="email" type="text" required>
<label for="email">Your Email</label>
</div>
<div class="group">
<textarea id="message" required></textarea>
<label for="message">Message</label>
</div>
<button class="btn" type="submit">Send</button>
</form>
</div>
</section>
<footer class="footer">
<p class="footer__designer">Webpage made by Ernest Szczeblewski as a project for CodersCamp 2020. Layout designed by: <a href="https://www.webdonut.net/personal.html" target="_blank">Web Donut</a></p>
<span class="footer__logo">JM</span>
</footer>
</body>
</html>