PythonFullStackCourse/Day12/index.html at main · GODSROBOT/PythonFullStackCourse · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ancient Wonders of the World</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="SevenWonders">
        <h1 style="color: rgb(255, 200, 0); font-family: Georgia, 'Times New Roman', Times, serif; transform: translate(30%);" >Ancient Wonders of the World</h1>
        <div>
            <h3 style="color: rgb(255, 140, 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 200; transform: translate(-30%, -100%);"> 🏛 Pyramid of Giza</h3>
            <img style="transform: translate(-220%, -35%);" src="https://i.natgeofe.com/n/535f3cba-f8bb-4df2-b0c5-aaca16e9ff31/giza-plateau-pyramids.jpg" alt="Pyramid of Giza">
            <p style="transform: translate(20%, -600%);"><strong>Era :</strong> Built around 2560 BCE during the Fourth Dynasty of Egypt.</p>
            <p style="transform: translate(7%, -580%);"><strong>Purpose :</strong> Tomb of Pharaoh Khufu (Cheops).</p>
            <p style="transform: translate(-180%, -550%);"><strong>Construction :</strong></p>
            <ul style="transform: translate(22%, -400%);">
                <li>Originally ~146.6 m (481 ft) tall, now ~138.8 m (455 ft).</li>
                <li>Made of ~2.3 million limestone blocks, each weighing 2–15 tons.</li>
            </ul>
            <p style="transform: translate(-180%, -680%);"><strong>Special Facts :</strong></p>
            <ul style="transform: translate(26%, -310%);">
                <li>Only surviving wonder of the ancient list.</li>
                <li>Aligned almost perfectly with the cardinal points (north, south, east, west).</li>
                <li>Served as the tallest man-made structure for over 3,800 years.</li>
            </ul>
        </div>
        <div>
            <h3 style="color: rgb(255, 140, 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 200; transform: translate(0%, -700%);">🌿Hanging Gardens of Babylon</h3>
            <img style="transform: translate(-220%, -200%);" src="https://www.csmc.uni-hamburg.de/18145893/fig-1-20e1bb2c9a379398ef5b8f2d1c63b239df631f00.jpg" alt="Hanging Gardens of Babylon">
            <p style="transform: translate(28%, -1280%);"><strong>Era :</strong> Possibly built around 600 BCE by King Nebuchadnezzar II for his wife, Amytis.</p>
            <p style="transform: translate(28%, -1230%);"><strong>Purpose :</strong> To replicate her homeland’s lush greenery and mountainous landscape.</p>
            <p style="transform: translate(-180%, -1180%);"><strong>Construction :</strong></p>
            <ul style="transform: translate(32%, -1420%);">
                <li>Terraced gardens up to 75 ft high, irrigated by an advanced water-lifting system from the Euphrates River.</li>
            </ul>
            <p style="transform: translate(-180%, -1380%);"><strong>Special Facts :</strong></p>
            <ul style="transform: translate(36%, -820%);">
                <li>No definitive archaeological evidence — some historians believe it may have been in Nineveh (Assyrian capital) instead of Babylon.</li>
                <li>Considered an engineering marvel for its irrigation technology.</li>
            </ul>
        </div>
        <div>
            <h3 style="color: rgb(255, 140, 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 200; transform: translate(0%, -1300%);">⚡Statue of Zeus at Olympia</h3>
            <img style="transform: translate(-220%, -380%);" src="https://www.ancient-origins.net/sites/default/files/field/image/statue-of-Zeus-Olympia.jpg" alt="Statue of Zeus at Olympia">
            <p style="transform: translate(8%, -1980%);"><strong>Era :</strong> Built around 435 BCE by sculptor Phidias.</p>
            <p style="transform: translate(24%, -2020%);"><strong>Purpose :</strong> Honored the chief Greek god, Zeus, in the sanctuary at Olympia.</p>
            <p style="transform: translate(-180%, -1950%);"><strong>Construction :</strong></p>
            <ul style="transform: translate(22%, -1100%);">
                <li>About 12 m (39 ft) tall.</li>
                <li>Made of ivory plates and gold panels over a wooden framework.</li>
            </ul>
            <p style="transform: translate(-180%, -2160%);"><strong>Special Facts :</strong></p>
            <ul style="transform: translate(26%, -1210%);">
                <li>Sat on a grand throne decorated with precious stones and mythological scenes.</li>
                <li>Destroyed in the 5th–6th century CE, possibly in a fire.</li>
            </ul>
        </div>
        <div>
            <h3 style="color: rgb(255, 140, 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 200; transform: translate(0%, -1950%);">⚰ Mausoleum at Halicarnassus</h3>
            <img style="transform: translate(-220%, -580%);" src="https://www.worldhistory.org/img/c/p/1200x627/12902.png" alt="Mausoleum at Halicarnassus">
            <p style="transform: translate(27%, -2800%);"><strong>Era :</strong> Original temple built in the 6th century BCE, destroyed and rebuilt several times.</p>
            <p style="transform: translate(26%, -2790%);"><strong>Purpose :</strong> Dedicated to Artemis, Greek goddess of the hunt, wilderness, and fertility.</p>
            <p style="transform: translate(-180%, -2800%);"><strong>Construction :</strong></p>
            <ul style="transform: translate(22%, -1530%);">
                <li>Final version was about 115 m (377 ft) long and 55 m (180 ft) wide.</li>
                <li>Decorated with marble sculptures and massive columns.</li>
            </ul>
            <p style="transform: translate(-180%, -2990%);"><strong>Special Facts :</strong></p>
            <ul style="transform: translate(21%, -1620%);">
                <li>Destroyed in 356 BCE by arson (by Herostratus, seeking fame).</li>
                <li>Rebuilt and later destroyed again by invading Goths in 262 CE.</li>
            </ul>
        </div>
        <div>
            <h3 style="color: rgb(255, 140, 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 200; transform: translate(-9%, -2600%);">🌞 Colossus of Rhodes</h3>
            <img style="transform: translate(-220%, -765%);" src="https://www.meisterdrucke.uk/kunstwerke/800px/English_School_-_The_Colossus_of_Rhodes_-_%28MeisterDrucke-71521%29.jpg" alt="Colossus of Rhodes">
            <p style="transform: translate(31%, -3550%);"><strong>Era :</strong> Built between 353–350 BCE for Mausolus, a satrap of the Persian Empire, and his wife Artemisia II.</p>
            <p style="transform: translate(-15%, -3500%);"><strong>Purpose :</strong> Monumental tomb.</p>
            <p style="transform: translate(-180%, -3500%);"><strong>Construction :</strong></p>
            <ul style="transform: translate(28%, -1880%);">
                <li>Bronze statue of the sun god Helios.</li>
                <li>Estimated height: 33 m (108 ft) — about the height of the Statue of Liberty’s pedestal.</li>
            </ul>
            <p style="transform: translate(-180%, -3730%);"><strong>Special Facts :</strong></p>
            <ul style="transform: translate(25%, -1995%);">
                <li>Stood for only 54 years before being toppled by an earthquake.</li>
                <li>Its remains lay on the ground for over 800 years before being sold for scrap.</li>
            </ul>
        </div>
        <div>
                <h3 style="color: rgb(255, 140, 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 200; transform: translate(0%, -3300%);">🏛 Temple of Artemis at Ephesus</h3>
                <img style="transform: translate(-220%, -969%);" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Miniaturk_009.jpg" alt="Temple of Artemis at Ephesus">
                <p style="transform: translate(27%, -4350%);"><strong>Era :</strong> Original temple built in the 6th century BCE, destroyed and rebuilt several times.</p>
            <p style="transform: translate(27%, -4330%);"><strong>Purpose :</strong> Dedicated to Artemis, Greek goddess of the hunt, wilderness, and fertility.</p>
            <p style="transform: translate(-180%, -4250%);"><strong>Construction :</strong></p>
            <ul style="transform: translate(22%, -2250%);">
                <li>Final version was about 115 m (377 ft) long and 55 m (180 ft) wide.</li>
                <li>Decorated with marble sculptures and massive columns.</li>
            </ul>
            <p style="transform: translate(-180%, -4390%);"><strong>Special Facts :</strong></p>
            <ul style="transform: translate(21%, -2325%);">
                <li>Destroyed in 356 BCE by arson (by Herostratus, seeking fame).</li>
                <li>Rebuilt and later destroyed again by invading Goths in 262 CE.</li>
            </ul>
        </div>
        <div>
            <h3 style="color: rgb(255, 140, 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 200; transform: translate(0%, -3800%);">🔥 Lighthouse of Alexandria</h3>
            <img style="transform: translate(-220%, -1120%);" src="https://ucarecdn.com/1c2da6be-227e-4eff-845a-29e7d188bbfe/-/crop/678x381/0,71/-/preview/" alt="Lighthouse of Alexandria">
            <p style="transform: translate(25%, -4950%);"><strong>Era :</strong> Built between 280–247 BCE on Pharos Island by the Ptolemaic Kingdom.</p>
            <p style="transform: translate(18%, -4910%);"><strong>Purpose :</strong> Guided sailors safely into Alexandria’s busy harbor.</p>
            <p style="transform: translate(-180%, -4850%);"><strong>Construction :</strong></p>
            <ul style="transform: translate(28%, -2550%);">
                <li>Estimated height: 100–130 m (330–430 ft).</li>
                <li>Three-tier design: square base, cylindrical middle, and a smaller circular tower at the top.</li>
            </ul>
            <p style="transform: translate(-180%, -4980%);"><strong>Special Facts :</strong></p>
            <ul style="transform: translate(26%, -1750%);">
                <li>Only surviving wonder of the ancient world.</li>
                <li>Aligned almost perfectly with the cardinal points (north, south, east, west).</li>
                <li>Served as the tallest man-made structure for over 3,800 years.</li>
            </ul>
        </div>
    </section>
</body>
</html>