-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (123 loc) · 4.88 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
151
152
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://kit.fontawesome.com/1e3355b51a.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mystyle.css">
<title>My Nat Geo</title>
</head>
<body>
<nav class="menu">
<img class="natgeo-frame" src="img/ng-border.png" alt="Nat Geo border">
<img class="natgeo-logo" src="img/ng-logo-2fl.webp" alt="Nat Geo Logo">
<div>
<a href="#" class="login-link">Login</a>
<a href="#" class="search-link"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="#" class="news-link">Newsletters</a>
<a href="#" class="subs-link">Subscribe</a>
<a href="#" class="menu-link"> <span>Menu</span> <i class="fa-solid fa-angles-down"></i></a>
</div>
</nav>
<header>
<p class="title">Lastest Stories</p>
<p class="description"> <span>Subscribe</span> for full access to read stories from National Geographic.</p>
<div class="border"></div>
</header>
<div class="container">
<div class="flex-container-reversed">
<main>
<section class="main-news">
<div class="main-news-img">
<img src="img/main-news.jpg" alt="">
<div class="main-news-text">
<h3>History & Culture</h3>
<p>These border villages still struggle 75 years...</p>
<h4><i class="fa-solid fa-bars"></i>Read</h4>
</div>
</div>
</section>
<!--end of main news-->
<div class="grid-container">
<section class="secondary-news">
<div class="secondary-news-img">
<img src="img/secondary-news.jpg" alt="">
</div>
<div class="secondary-news-text">
<h3>Histroy magazine</h3>
<p>Who wrote the Dead Sea scrolls? Science may have the answer</p>
<h4><i class="fa-solid fa-bars"></i>Read</h4>
</div>
</section>
<section class="secondary-news">
<div class="secondary-news-img">
<img src="img/secondary-news2.jpg" alt="">
</div>
<div class="secondary-news-text">
<h3>magazine</h3>
<p>Cox's Bazar, know as a refugee camp, is also a vaction site</p>
<h4><i class="fa-solid fa-bars"></i>Read</h4>
</div>
</section>
</div> <!--end of .flex container-->
</main>
<section class="todays-picks">
<h2>Today's Picks</h2>
<!--pick1-->
<div class="pick-element">
<div class="pick-element-img">
<img class="pick1" src="img/picks1.jpg" alt="">
</div>
<div class="pick-element-text">
<h3>Environment</h3>
<h3 class="subtitle">Planet possible</h3>
<p>How the climate bill will dramatically cut U.S emissions</p>
</div>
</div>
<!--pick2-->
<div class="pick-element">
<div class="pick-element-img">
<img class="pick2" src="img/picks2.jpg" alt="">
</div>
<div class="pick-element-text">
<h3>Science</h3>
<p>A second asteroid may have struck during the dinosuar's demise</p>
</div>
</div>
<!--pick3-->
<div class="pick-element">
<div class="pick-element-img">
<img class="pick3" src="img/pick3.webp" alt="">
</div>
<div class="pick-element-text">
<h3>Paid Content</h3>
<p>Why we shouldn't ingore safety eduction </p>
</div>
</div>
<!--pick4-->
<div class="pick-element">
<div class="pick-element-img">
<img class="pick4" src="img/pick4.webp" alt="">
</div>
<div class="pick-element-text">
<h3>Environment</h3>
<p>Big changes coming for the Colorado River soon could get messy</p>
</div>
</div>
<!--pick5-->
<div class="pick-element">
<div class="pick-element-img">
<img class="pick5" src="img/pick5.webp" alt="">
</div>
<div class="pick-element-text">
<h3>Travel</h3>
<p>Explore Pakistan's wildest, most beaufiful landscapes</p>
</div>
</div>
<h3 class="see-more">See More</h3>
</section>
</div>
</div>
</body>
</html>