-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtema2.html
130 lines (128 loc) · 5.04 KB
/
tema2.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
<!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>Tema 2</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" />
</head>
<body>
<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 id="tema1" class="triangle_middle index_article">
<h1 class="number">2</h1>
<a id="two" class="index_link" href="tema2.html">Tema</a>
</article>
<article class="triangle_down"></article>
<article id="tema_2" class="no_triangle">
<h2>Responsive site v2</h2>
<p class="to_right even">
I tema 2: Grundlæggende web har vi lært basic html og css. Vi har lært
hvordan man får et website til at være responsivt og brugervenligt ved
brug af (good practice) html og css. Fx ved at have det rigtig html
struktur og syntax. Vi har lært at debug html ved right click og
inspicere siden og ved brug af validator. I css har vi lært at bruge
flex og grid for at give struktur til siden.
</p>
<p class="odd">
Opgaven gik ud på at lave et responsivt site fra bunden af og at følge
wireframe og design layouts. Vi nået til den endelige opgave ved at
bygge op på den samme side med hver ny opgave. Fra at lære at bruge
vscode og starte en mappe til at samle content og lave et styletile og
i sidste ende at få det hele til at hænge sammen.
</p>
<p class="to_right even">
Jeg er blevet meget glad for det endelig resultat og det er også
blevet godkendt. Det jeg ville ændre på opgaven med det vidne jeg har
nu ville måske være at lave top nav’en mere responsivt.
</p>
<a
class="odd"
href="http://emsportfolio.dk/kea/02_web/04_responsive/responsive_site_v2/"
>Link til websitet.</a
>
<p class="to_right even">
Et lille galleri med screenshots af processen og websitet.
</p>
</article>
<article class="arrow_galleri">
<a id="arrow2" class="arrow_down_link arrow_tema2" href="#mobile_galleri"></a>
</article>
<article class="triangle_up"></article>
<article id="mobile_galleri" class="triangle_middle nodesktop">
<figure><img src="content/tema_2/img1.png" alt="img1" /></figure>
<figure><img src="content/tema_2/img2.png" alt="img2" /></figure>
<figure><img src="content/tema_2/img3.png" alt="img3" /></figure>
<figure><img src="content/tema_2/img4.png" alt="img4" /></figure>
</article>
<article id="galleri_padding" class="triangle_middle">
<figure id="desktop_galleri1">
<img src="content/tema_2/img1.png" alt="img1" />
</figure>
</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>
</body>
</html>