-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (117 loc) · 4.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Good News Magazine</title>
<link rel="stylesheet" href="./style.css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header class="navbar-container">
<img src="./IMAGES/goodnewslogo.png" alt="good news logo" class="logo left-logo">
<h1>Good News Magazine</h1>
<nav>
<a href="#">Sign up</a>
<a href="#">2022</a>
<img src="./IMAGES/goodnews.png" alt="good news logo" class="nav-logo logo">
<a href="#">2021</a>
<a href="#">2020</a>
</nav>
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<section class="big-news">
<img
src="./IMAGES/road.jpg"
alt="road">
<div>
<h2>The future is inclusive</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="#">continue reading</a>
</div>
</section>
</section>
<section class="small-news">
<section class="news-card">
<a href="#">
<img
src="./IMAGES/piano.jpg"
alt="piano">
<h3>Effects from listening to music</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
<section class="news-card">
<a href="#">
<img
src="./images/flower.jpg"
alt="flower">
<h3>Results from saving the bees campaign</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
<section class="news-card">
<a href="#">
<img
src="./IMAGES/woman.jpg"
alt="woman">
<h3>Building green cities</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
<section class="news-card">
<a href="#">
<img
src="./IMAGES/fish.jpg"
alt="fish">
<h3>Ocean wildlife studies shows positive results</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
<section class="news-card">
<a href="#">
<img
src="./IMAGES/ocean.jpg"
alt="ocean">
<h3>The positive climate changes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
<section class="news-card">
<a href="#">
<img
src="./IMAGES/building.jpg"
alt="building">
<h3>Green buildings</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
<section class="news-card">
<a href="#">
<img
src="./IMAGES/ai.jpg"
alt="ai">
<h3>New areas for ai</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
<section class="news-card">
<a href="#">
<img
src="./IMAGES/dna.jpg"
alt="dna">
<h3>Successful dna treatments</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</section>
</section>
<footer>
<h4> Sofia Andersson 2022</h4> .
</footer>
</body>
</html>