-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (139 loc) · 7.24 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="src/css/normalize.css">
<link rel="stylesheet" href="src/css/fonts.css">
<link rel="stylesheet" href="src/css/style.css">
<title>Kasia Erbel - studio graficzne</title>
</head>
<body>
<header class="box header">
<div class="inner__header">
<figure class="logo"><img src="src/img/logo_kasia.svg" alt="" class="logo__img"></figure>
<nav class="menu">
<div class="menu__item menu__item--active">Portfolio</div>
<div class="menu__item">Usługi</div>
<div class="menu__item menu__item--hl">Kontakt</div>
</nav>
</div>
</header>
<main class="box main">
<section class="introduction">
<h2 class="introduction__hdl">Studio graficzne</h2>
<h3 class="introduction__content">Zajmuję się projektowaniem logotypów, materiałów promocyjnych,
oraz
<span class="introduction__content--hl">systemów identyfikacji wizualnej marek.</span>
</h3>
</section>
<a href="#slider" class="down-arrow">
<img src="src/img/arrow.svg" alt="" class="down-arrow__img">
</a>
<section class="slider" id="slider">
<div class="slider__slide"><img src="src/img/slider/01bashu.jpg" alt="" class="slider__img"></div>
<div class="slider__slide"><img src="src/img/slider/02sylvia.jpg" alt="" class="slider__img"></div>
<div class="slider__slide"><img src="src/img/slider/03bashu.jpg" alt="" class="slider__img"></div>
<div class="slider__slide"><img src="src/img/slider/04ewa.jpg" alt="" class="slider__img"></div>
</section>
<section class="description">
<h2 class="description__hdl">Projektuję systemy identyfikacji wizualnej dla marek, logotypy, tworzę
ilustracje, składam do druku materiały promocyjne, koordynuję proces powstawania stron
internetowych.</h2>
<p class="description__content">Zapewniam moim Klientom opiekę wizualną nad ich przedsięwzięciem, dbając o
to,
żeby
proces powstawania wspólnego projektu był spokojny, precyzyjny, przemyślany i jasny. Doradzam w kwestii
doboru
materiałów fotograficznych. Uczę rozmawiać z drukarzami tak, by obie strony dokładnie się porozumiały.
Pomagam
wybierać papiery do druku i doradzam we wszelkich kwestiach związanych z poligrafią. </p>
</section>
<section class="portfolio">
<h2 class="portfolio__hdl">Portfolio</h2>
<figure class="portfolio__thumbnails">
<img src="src/img/portfolio/04ewa/p4__head.jpg" alt="" class="portfolio__img">
<img src="src/img/portfolio/06bashu/p6__head.jpg" alt="" class="portfolio__img">
<img src="src/img/portfolio/02sylviaDara/p2__head.jpg" alt="" class="portfolio__img">
</figure>
<button class="portfolio__btn">Zobacz więcej</button>
</section>
<section class="services">
<h2 class="services__hdl">Usługi</h2>
<h3 class="services__content">Co mogę dla Ciebie zrobić?</h3>
<div class="services__columns">
<div class="services__column">
<h4 class="services__service-hdl">Identyfikacja wizualna</h4>
<ul class="services__list">
<li class="services__list-item">Projekt Logotypu</li>
<li class="services__list-item">Dobór typografii</li>
<li class="services__list-item">Zdefiniowanie kolorystyki marki</li>
<li class="services__list-item">Stworzenie brandbooka</li>
</ul>
</div>
<div class="services__column">
<h4 class="services__service-hdl">Materiały promocyjne</h4>
<ul class="services__list">
<li class="services__list-item">Wizytówki, ulotki, foldery</li>
<li class="services__list-item">Grafiki do mediów społecznościowych</li>
<li class="services__list-item">Opakowania</li>
</ul>
</div>
<div class="services__column">
<h4 class="services__service-hdl">Strategia i konsulting</h4>
<ul class="services__list">
<li class="services__list-item">Stworzenie strategii marketingowej</li>
<li class="services__list-item">Konsultacje fotograficzne</li>
<li class="services__list-item">Zdefiniowanie kierunków rozwoju marki</li>
</ul>
</div>
</div>
<button class="services__btn">Czytaj więcej</button>
</section>
<section class="about-me">
<h2 class="about-me__hdl">O mnie</h2>
<div class="about-me__flex">
<figure class="photo"><img src="src/img/kasia.jpg" alt="" class="photo__img"></figure>
<article class="about-me__full">
<h3 class="about-me__name">Kasia Erbel</h3>
<p class="about-me__description">
Grafiką użytkową i ilustracją zajmuję się od 15 lat. Przez ten czas nauczyłam się, jak ważne jest
pomaganie klientom na trudnej drodze do własnej identyfikacji wizualnej. Jak sprawiać, by droga
ta okazywała się mniej trudna i jak rozwiązywać problemy, które możemy napotkać. Wierzę, że dobra
współpraca pozwala osiągnąć wspólny cel: spójną, kreatywną, wyróżniającą się i estetyczną
identyfikację marki.
</p>
<p class="about-me__description">
W projektowaniu przywiązuję dużą wagę do typografii i oddechu, dlatego moje realizacje
charakteryzują się czystością przekazu, harmonią i wysokimi walorami estetycznymi.
</p>
<p class="about-me__description">
Po godzinach czytam książki, oglądam filmy i tańczę lindy hop.
</p>
</article>
</div>
</section>
<section class="contact">
<h2 class="contact__hdl">Kontakt i wycena</h2>
<h3 class="contact__content">Chcesz stworzyć lub odświeżyć wizerunek swojej firmy?
<span class="contact__content contact__content--hl">
Skontaktuj się ze mną.
</span>
</h3>
</section>
</main>
<footer class="box footer">
<div class="inner-footer">
<div class="copyright">© Copyright by Katarzyna Erbel</div>
<figure class="social">
<img src="src/img/social/instagram2.svg" alt="" class="social__img">
<img src="src/img/social/behence2.svg" alt="" class="social__img">
<img src="src/img/social/linkedin.svg" alt="" class="social__img">
<img src="src/img/social/pinterest.svg" alt="" class="social__img">
</figure>
</div>
</footer>
</body>
</html>