-
Notifications
You must be signed in to change notification settings - Fork 0
/
dokumentation.html
225 lines (221 loc) · 9.36 KB
/
dokumentation.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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="da">
<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>Dokumentation</title>
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="icon" type="image/png" href="favicon/favicon.png" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="tema.css" />
<link rel="stylesheet" href="dokumentation.css" />
<link rel="stylesheet" href="galleries.css" />
</head>
<body id="dokumentation">
<header>
<div id="headerid">
<div>
<a href="index.html"
><img id="logo_mobile" src="logo/logo_mobile.svg" alt="logo_mobile"
/></a>
<a href="index.html"
><img id="logo_desktop" src="logo/logo.svg" alt="logo_desktop"
/></a>
</div>
<nav>
<ul class="burger_menu">
<li><img src="logo/logo.svg" alt="logo_mobile" /></li>
<li><a href="index.html">Home</a></li>
<li><hr /></li>
<li class="mmd">
<div class="dropdown">
<button class="dropbtn">MMD</button>
<div class="dropdown-content">
<ul>
<li><a href="tema1.html">Tema 1</a></li>
<li><hr /></li>
<li><a href="tema2.html">Tema 2</a></li>
<li><hr /></li>
<li><a href="tema3.html">Tema 3</a></li>
<li><hr /></li>
<li><a href="tema4.html">Tema 4</a></li>
<li><hr /></li>
<li><a href="tema5.html">Tema 5</a></li>
<li><hr /></li>
</ul>
</div>
</div>
</li>
<li><a href="dokumentation.html">Dokumentation</a></li>
<li><hr /></li>
<li><a href="aboutme.html">About me</a></li>
</ul>
<div id="hamburger">
<div id="burger_closed"></div>
<div id="burger_opened"></div>
</div>
</nav>
</div>
<div class="top_separator"></div>
</header>
<main>
<article class="triangle_middle index_article dokumentationtriangle">
<h1 class="number">0</h1>
<a id="two" class="index_link" href="tema5.html"
>Dokumen <br />
tation</a
>
</article>
<h2>Portfolio</h2>
<article id="dokcenter" class="no_triangle">
<img class="to_left odd grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_right even">
For Tema 6: Portfolio opgave har jeg valgt at bruge lidt af alle de
teknikker vi har lært i semestret. Jeg har siddet ned og lavet et
trello board for alle de opgaver jeg skulle og lavet også en timeline
med de samme opgaver som var klistret op på mit vindue så jeg kunne se
hver dag.
</p>
<img class="to_right grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_left even">
Jeg har valgt at fokusere først og fremmest på alt det forarbejde og
opsamling. Jeg har samlet alle de dokumenter jeg skulle bruge i
portfolio’en og har sat dem op i forskellige mapper. Jeg har derefter
skrevet udkast af alt det jeg skulle skrive om på sitet.
</p>
<img class="to_left odd grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_right even">
Så har jeg også sorteret alle de inspirationsmapper jeg har lavet i
løbet af semestret (både ressources og flotte sider) for at samle alle
de ideer jeg kunne tænke mig at bruge eller blive inspireret af.
</p>
<img class="to_right grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_left even">
Jeg har lavet forskellige farvepaletter og forskellige font pairings
og så valgte dem jeg skulle bruge. Jeg har downloadet fontene og
fundet hsla koderne for alle mine farver. Med alt det lavet jeg en
skitse af hvordan det skulle hænge sammen, en slags mix mellem
moodboard og styletile.
</p>
<img class="to_left odd grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_right even">
Jeg har så lavet et slags sitemap og tænkt på hvad for nogle sider jeg
skulle have og hvad de skulle hedde. Derefter tog jeg udgangspunkt i
det for at lave wireframes/layouts til alle de siderne. Både mobil og
desktop version.
</p>
<img class="to_right grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_left even">
Skelettet til min portfolio vscode mappe skulle så laves. Og med alle
de ting jeg har samlet i mapper er det nemt at bare sætte dem ind i
både html og css.
</p>
<img class="to_left odd grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_right even">
Parallelt har jeg eksperimenteret med noget css html og java i andre
mapper for at have koden til de funktioner jeg vil have i min side og
bare kunne copy/paste dem.
</p>
<img class="to_right grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_left even">
Jeg har prøvet så vidt som muligt at undgå rod og har prøvet at bruge
alt det vi har lært på det semester.
</p>
<img class="to_left odd grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_right even">
Temaet for mit website er art nouveau selvom paletten jeg valgte var
ikke en af de art nouveau nogle jeg lavede og var så en af dem jeg har
lavet for at afspejle migselv. Jeg har så tegnet mine grafik elementer
og nogle knapper og ikoner.
</p>
<img class="to_right grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_left even">
Jeg har så også lavet ”logo” samt favicon til siden.
</p>
<img class="to_left odd grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_right even">
Med alle mine ideer og inspirationer har jeg valgt at vente til enden
for at tegne mit portræt for ”om mig” siden, det er en slags poetisk
måde for mig at afslutte projektet ved at tegne migselv i det nyeste
version af mig.
</p>
<img class="to_right grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_left even">
Al valg har taget meget tid og omsorg, jeg har brug ca. 80 af tiden på
”forabejdet” og gennemtænke tingene.
</p>
<img class="to_left odd grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<p class="to_right even">
Jeg har så også prøvet at dokumentere så meget som jeg kunne, for det
er en af de ting jeg har haft det sværeste med på studiet.
</p>
<img class="to_right grafic3" src="assets/grafic3.svg" alt="grafic3"/>
<img id="grafic3" src="assets/grafic3.svg" alt="grafic3"/>
</article>
<article id="dokcenter2" class="triangle_middle index_article">
<a
class="even to_right"
href="https://xd.adobe.com/view/c147c2f7-4a0e-4db2-8251-6e9dbb69cd07-9414/?fullscreen"
>XD mobil prototype</a
>
<a
class="even to_right"
href="https://xd.adobe.com/view/63eada9a-2b41-41ff-ac62-74ef25c09549-36b9/"
>XD desktop prototype</a
>
</article>
<article id="mobile_galleri5" class="triangle_middle">
<figure>
<img src="content/dokumentation/img1.png" alt="img1" />
</figure>
<figure>
<img src="content/dokumentation/img2.png" alt="img2" />
</figure>
<figure>
<img src="content/dokumentation/img3.png" alt="img3" />
</figure>
<figure>
<img src="content/dokumentation/img4.png" alt="img4" />
</figure>
<figure>
<img src="content/dokumentation/img5.png" alt="img5" />
</figure>
<figure>
<img src="content/dokumentation/img6.png" alt="img6" />
</figure>
</article>
<article class="triangle_middle desktop_h3 padding_top">
<div id="img_galleri5"></div>
<img class="border9" src="assets/border3.svg" alt="border3" />
<div id="arrow_system1">
<img id="arrow_left5" src="assets/arrow_left1.svg" alt="arrowleft1" />
<img src="assets/separator2.svg" alt="separator2" />
<img
id="arrow_right5"
src="assets/arrow_left2.svg"
alt="arrowleft2"
/>
</div>
</article>
<article id="doksisdt" class="triangle_middle">
<img id="grafic2" src="assets/grafic2.svg" alt="grafic2"/>
</article>
</main>
<footer>
<div class="bottom_separator"></div>
<div id="footerid">
<div>
<p>Copyright <em class="emma"> Emma Pasquer </em>2022</p>
</div>
<div>
<a href="#headerid"
>TAKE <em class="emma">ME </em>TO THE <em class="emma">TOP </em>
</a>
</div>
</div>
</footer>
<script src="script.js"></script>
<script src="gallerydok.js"></script>
</body>
</html>