-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (68 loc) · 2.36 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aufgabe1</title>
<link rel="stylesheet" href="style.css">
</head>
</body>
<!--preview-card-right-->
</header>
<h1>Aufgabe: Article Preview Card</h1>
</header>
<main>
<article class="preview-card">
<img src="https://picsum.photos/400" alt="img">
<div class="author">
<p>Veröffentlich 24.4.2024</p>
<img class="avatar-img" src="https://i.pravatar.cc/100" alt="avatar1">
<p class="name">Lian</p>
</div>
<div class="category">
<a>Reisen</a>
</div>
<article class="content">
<header>
<h2>Die besten Reisetipps für den Sommer</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et quis nostrud exercitation ullamco laboris
et quis nostrud exercitation ullamco laboris
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
<div class="butten">
<a class="a1">lesen</a>
</div>
</article>
</div>
</article>
<!--preview-card-left-->
<article class="preview-card-2">
<img src="https://picsum.photos/401" alt="img">
<div class="author-2">
<p>Veröffentlich 24.4.2024</p>
<img class="avatar-img-2" src="https://i.pravatar.cc/101" alt="avatar1">
<p class="name">Railey</p>
</div>
<div class="category">
<a> Lifestyle</a>
<a>Tips</a>
</div>
<article class="content-2">
<header>
<h2>So wird 2025 dein Jahr </h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et quis nostrud exercitation ullamco laboris
et quis nostrud exercitation ullamco laboris
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
<div class="butten">
<a class="a2">lesen</a>
</div>
</article>
</article>
</main>
</body>
</html>