repl.it
@Christopher_Joh/

solarSystem-DIV

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • 1README.md
  • earth.png
  • jupiter.png
  • mars.jpg
  • mercury.png
  • neptune.png
  • planetInfo.md
  • saturn.png
  • style.css
  • uranus.jpg
  • venus.png
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
<!DOCTYPE html>
<html>

<head>

	<!-- ACTION : update the title to a suitable phrase-->
	<title>repl.it</title>

	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<h1>The Solar System</h1>

	<div id = "mercury">

		<h2>Mercury</h2>

		<img src = "mercury.png">

	  <ul>
		  <li>diameter : 4,879 km</li>
		  <li>solar distance : 57,909,227 km</li>
		  <li>orbit : 88 days</li>
	  </ul>



    		<h2>venus</h2>

		<img src = "venus.png">

	  <ul>
		  <li>diameter : 12,104 km</li>
		  <li>solar distance : 149,598,262 km</li>
		  <li>orbit :225 days</li>
	  </ul>



	<div id = "earth">

		<h2>earth</h2>

		<img src = "earth.png">

	  <ul>
		  <li>diameter : 12,742 km</li>
		  <li>solar distance : 149,598,262 km</li>
		  <li>orbit : 365.24 days</li>
	  </ul>

	
		<h2>Mars</h2>

		<img src = "mars.jpg">

	  <ul>
		  <li>diameter :6,779 km</li>
		  <li>solar distance : 227,943,824 km</li>
		  <li>orbit :1.9 years </li>
	  </ul>



	<div id = "jupiter">

		<h2>jupiter</h2>

		<img src = "jupiter.png">

	  <ul>
		  <li>diameter : 139,822 km</li>
		  <li>solar distance : 778,340,821 km</li>
		  <li>orbit : 11.9 years</li>
	  </ul>




		<h2>saturn</h2>

		<img src = "saturn.png">

	  <ul>
		  <li>diameter :116,464 km</li>
		  <li>solar distance :1,426,666,422 km </li>
		  <li>orbit : 29.5 years </li>
	  </ul>



	<h2>uranus</h2>

		<img src = "uranus.jpg">

	  <ul>
		  <li>diameter :50,724 km</li>
		  <li>solar distance :2,870,658,186 km</li>
		  <li>orbit : 84.0 years</li>
	  </ul>

	<h2>neptune</h2>

		<img src = "neptune.png">

	  <ul>
		  <li>diameter :49,244 km</li>
		  <li>solar distance :4,498,396,441 km</li>
		  <li>orbit :164.8 years </li>
	  </ul>

	
  </div>

	<!-- ACTION : add the details of the other planets -->
	<!-- ACTION : remember to use copy and paste! -->





 <!-- ATTENTION: do NOT add content outsie the body of the web page -->
</body>

</html>
result
console