This repository has been archived by the owner on Mar 29, 2022. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Info.html
112 lines (112 loc) · 5.95 KB
/
Info.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
<html lang="en">
<head>
<link href="hi.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solor system</title>
<style>
img{
border-radius: 10px;
border-style: solid;
}
body
font-family: 'Courgette', cursive;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
</head>
<body>
<section class="text-gray-500 bg-gray-900 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Solor System</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">In this web design you will find information about solor system.</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="/img/src/220px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA's_Solar_Dynamics_Observatory_-_20100819.jpg
">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Sun</h1>
<p class="leading-relaxed">Sun is the main part of the Solar System. It is situated in the center of the solar system. All the planets revolve around the sun.
</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="mercury.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Mercury</h1>
<p class="leading-relaxed">The first planet in the solor system is Mercury. Mercury is also known as the smallest planet of the solar system.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="venu.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Venus</h1>
<p class="leading-relaxed">The hottest planet in the solar system is Venus. Its surface is enough to melt you this is because all the green house gases the Venus has.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="earth.png">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Earth</h1>
<p class="leading-relaxed">The blue planet, the living planet is known as Earth. Earth is the only planet in the solar system which has life on it, so take care of Earth.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="Mars.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Mars</h1>
<p class="leading-relaxed">The Mars is known as Red Planet because of iron composition in its soil. The tallest mountain in the Solar System is located on Mars its name is 'Olympus Mons'.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="jupiter.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Jupiter</h1>
<p class="leading-relaxed">Jupiter is the largest planet in the solar system. It is also the fastest rotating planet, it takes only 9 hours to rotate around itself.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="sat.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Saturn</h1>
<p class="leading-relaxed">The planet which have most rings is known as Saturn. It is also the lightest planet by volume that it can float on water.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="uranus.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Uranus</h1>
<p class="leading-relaxed">The lazy planet, Uranus is the seventh planet in Solar System. It is called as sleeping planet because it appears rolling on its axis.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="neptune.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h1 class="title-font text-lg font-medium text-white mb-3">Neptune</h1>
<p class="leading-relaxed">The last planet in the Solar System is Neptune. It appears blue in color due to presence of hydrogen in large amount in its atomsphere.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>