-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
05ad9cd
commit 0f8d1ba
Showing
2 changed files
with
116 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .navbar { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 10px 20px; | ||
| background-color: #333; | ||
| color: white; | ||
| } | ||
|
|
||
| .brand-name { | ||
| font-family: "Kode Mono", monospace; | ||
| font-optical-sizing: auto; | ||
| font-weight: 40px; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| .nav-menu { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .nav-menu a { | ||
| color: white; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .content { | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .image-left, | ||
| .image-right { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .image-left img, | ||
| .image-right img { | ||
| max-width: 200px; | ||
| max-height: 200px; | ||
| background-color: blueviolet; | ||
| } | ||
|
|
||
| .image-left .description { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .image-right { | ||
| flex-direction: row-reverse; | ||
| } | ||
|
|
||
| .image-right .description { | ||
| flex: 1; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>SPACE</title> | ||
| <link rel="stylesheet" href="./imgdesc.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="navbar"> | ||
| <div class="brand-name">SPACE</div> | ||
| <div class="nav-menu"> | ||
| <a href="#">Home</a> | ||
| <a href="#">About</a> | ||
| <a href="#">Services</a> | ||
| <a href="#">Contact</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="content"> | ||
| <div class="image-left"> | ||
| <img | ||
| src="https://apod.nasa.gov/apod/image/1911/Arp273_HubblePohl_960.jpg" | ||
| alt="Galaxies" | ||
| /> | ||
| <div class="description"> | ||
| <h2>Galaxies</h2> | ||
| <p> | ||
| Galaxies are vast systems of stars, gas, dust, and dark matter, | ||
| bound together by gravity. There are different types of galaxies, | ||
| including spiral galaxies, elliptical galaxies, and irregular | ||
| galaxies. Each type has unique characteristics and structures. | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="image-right"> | ||
| <img | ||
| src="https://4.bp.blogspot.com/-oqLrgf_q5qM/U68fguDIIUI/AAAAAAAACd4/Dci6GW2E53c/s1600/SOLAR-SYSTEM-scope.jpg" | ||
| alt="Solar System" | ||
| /> | ||
| <div class="description"> | ||
| <h2>Solar Systems</h2> | ||
| <p> | ||
| A solar system consists of a star and all the objects that are bound | ||
| to it by gravity, including planets, moons, asteroids, comets, and | ||
| meteoroids. Our solar system, with the Sun at its center, is just | ||
| one of many in the universe. There are various types of solar | ||
| systems, each with different arrangements and characteristics of | ||
| celestial bodies. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |