-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticles.html
192 lines (142 loc) · 7.71 KB
/
articles.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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="javascript.js"></script>
<link rel="stylesheet" href="main.css">
<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>Document</title>
<style>
.card-block .btn-outline-primary {
width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
bottom: 0;
left: 0;
position: absolute;
}
.card {
margin: 20px 0;
}
/* Flip Cards CSS */
.card-container {
perspective: 700px;
}
.card-flip {
position: relative;
width: 100%;
transform-style: preserve-3d;
height: auto;
transition: all 0.5s ease-out;
background: white;
border: none;
}
.card-flip div {
backface-visibility: hidden;
transform-style: preserve-3d;
height: 100%;
width: 100%;
border: none;
}
.card-flip .front {
position: relative;
z-index: 1;
}
.card-flip .back {
position: relative;
z-index: 0;
transform: rotateY(-180deg);
}
.card-container:hover .card-flip {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="header">
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/index.html"> <img style="width: 160px;height: 65px;margin-top: -20px;" class="logo" src="images/logo.png" alt="logo"></a>
<div class="allDropdowns">
<div class="dropdown">
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/articles.html" class="dropbtn">Articles</a>
<div class="dropdown-content">
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/all_articles.html">My Articles</a>
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/write_article.html">Write Article</a>
</div>
</div>
<div class="dropdown">
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/solutions.html"class="dropbtn">Solutions</a>
<div class="dropdown-content">
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/write_solutions.html">Write Solutions</a>
</div>
</div>
<div class="dropdown">
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/facts.html" class="dropbtn">Facts</a>
</div>
<div class="dropdown">
<a href="file:///C:/Users/FURKAN-OZGUL/Desktop/Project/more.html" class="dropbtn">More</a>
</div>
</div>
</div>
<div class="totalWrapper">
<div class="wrapper">
<div class="container">
<article class="card">
<header>
<h3 class='header' style="margin-top: 1px ">
Affect of the Global Warming
</h3>
</header>
<div class="image"><img src="images/img1.jpg" alt="image"></div>
<div class="content">
<p class='para'>In common usage, climate change describes global warming—the ongoing increase in global average temperature—and its effects on Earth's climate system. Climate change in a broader sense also includes previous long-term changes to Earth's climate. The current rise in global average temperature is more rapid than previous changes, and is primarily caused by humans burning fossil fuels.[2][3] Fossil fuel use, deforestation, and some agricultural and industrial practices increase greenhouse gases, notably carbon dioxide and methane.[4] Greenhouse gases absorb some of the heat that the Earth radiates after it warms from sunlight. Larger amounts of these gases trap more heat in Earth's lower atmosphere, causing global warming.
Due to climate change, deserts are expanding, while heat waves and wildfires are becoming more common.[5] Increased warming in the Arctic has contributed to melting permafrost, glacial retreat and sea ice loss.[6] Higher temperatures are also causing more intense storms, droughts, and other weather extremes.[7] Rapid environmental change in mountains, coral reefs, and the Arctic is forcing many species to relocate or become extinct.[8] Even if efforts to minimise future warming are successful, some effects will continue for centuries. These include ocean heating, ocean acidification and sea level rise.[9]
</p>
<button class='btn'>Read more</button>
</div>
</article>
<article class="card" style="margin-top: 2%;">
<header>
<h3 class='header' style="margin-top: 1px ">
Affect of the Global Warming
</h3>
</header>
<div class="image"><img src="images/img3.jpg" alt="image"></div>
<div class="content">
<p class='para'> Increased warming in the Arctic has contributed to melting permafrost, glacial retreat and sea ice loss.[6] Higher temperatures are also causing more intense storms, droughts, and other weather extremes.[7] Rapid environmental change in mountains, coral reefs, and the Arctic is forcing many species to relocate or become extinct.[8] Even if efforts to minimise future warming are successful, some effects will continue for centuries. These include ocean heating, ocean acidification and sea level rise.[9]
oints, such as the melting of the Greenland ice sheet.[12] Under the 2015 Paris Agreement, nations collectively agreed to keep warming "well under 2 °C". However, with pledges made under the Agreement, global warming would still reach about 2.7 °C (4.9 °F) by the end of the century.[13] Limiting warming to 1.5 °C will require halving emissions by 2030 and achieving net-zero emissions by 2050.[14]
</p>
<button class='btn'>Read more</button>
</div>
</article>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-4 card-container">
<div class="card card-flip">
<div class="front card-block">
<p class='para'> Increased warming in the Arctic has contributed to melting permafrost, glacial retreat and sea ice loss.[6] Higher temperatures are also causing more intense storms, droughts, and other weather extremes.[7] Rapid environmental change in mountains, coral reefs, and the Arctic is forcing many species to relocate or become extinct.[8] Even if efforts to minimise future warming are successful, some effects will continue for centuries. These include ocean heating, ocean acidification and sea level rise.[9]
oints, such as the melting of t vely agreed to keep warming "well under 2 °C". However, with pledges made under the Agreement, global warming would still reach about 2.7 °C (4.9 °F) by the end of the century.[13] Limiting warming to 1.5 °C will require halving emissions by 2030 and achieving net-zero emissions by 2050.[14]
</p>
<button style="float: right;" class='btn'>Read more</button>
</div>
</div>
</div>
<div class="wrapper" style="margin-top: -20px;margin-right: 30px;">
<div class="container">
<article class="card" style="width: 210%;margin-left: -40px;">
<header>
<h3 class='header'style="margin-top: 1px ">
Global Warming
</h3>
</header>
<div class="image"><img src="images/img2.jpeg" alt="image"></div>
<div class="content">
<p class='para'>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a p</p>
<button class='btn'>Read more</button>
</div>
</article>
</div>
</div>
</body>
</html>