Dear User, the following codes are only some parts of the actual codes. For accessing all of codes, go to my GitHub Account.
Intro Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>Around the Globe | Create your account</title>
<link rel="stylesheet" href="Page Welcome Code.css">
</head>
<body>
<table>
<tr>
<td width="29%"></td><br><br>
<td><!--The Intro Part-->
<div id="IntroPart">
<table>
<!--Intro Logo and Name-->
<tr>
<h1 align="center">🌐Welcome to Around The Globe🌐</h1><br><br><br><br>
</tr>
</table>
</div>
<div id="CreatingAccount">
<h2 align="center">Create your personal account</h2>
<form style="display: grid; place-items: center;">
<input type="text" placeholder="Your Name" size="120" style="height: 70px;" autofocus class="input"><br>
<input type="text" placeholder="Username" size="120" style="height: 70px;" class="input"><br>
<table>
<tr>
<td><input type="email" placeholder="E-Mail" size="59" style="height: 45px;" class="input"></td>
<td><input type="tel" placeholder="Phone Number" size="59" style="height: 45px;" class="input"></td>
</tr>
</table><br>
<input type="password" placeholder="Enter your Password" size="120" style="height: 60px;" class="input"><br>
<input type="password" placeholder="Confirm your Password" size="120" style="height: 60px;" class="input"><br><br><br><br>
<a href="pp.html" target="_blank"><input id="button_type" type="button" value="Create"></a>
</form>
<p align="center" id="sentence"><i>Already have an account? <a href="Sign In Code.html">Sign In</a></i></p>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
@font-face {
font-family: "Modern";
src: url("Modern\\ Font.otf") format("opentype");
}
h1 {
font-family: "Modern";
animation: heading 4s;
}
@keyframes heading {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0%);
}
}
body {
font-family: "MyFont";
background-color: #F0F3EF;
color: #35325E;
}
.input {
border: none;
border-radius: 15px;
background-color: #50616f;
color: black;
animation: input 6s;
}
@keyframes input {
from {
transform: translateX(100%);
opacity: 0;
}
50% { transform: translateX(100%); opacity: 0; }
100% { transform: translateX(0%); opacity: 1; }
}
.input:hover {
background-color: white;
}
#button_type {
border: none;
border-radius: 15px;
height: 50px;
width: 300px;
font-size: 30px;
transition: all 0.6s ease;
font-family: "MyFont";
animation: button 8s;
}
@keyframes button {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
#button_type:hover {
height: 70px;
width: 320px;
font-size: 40px;
border: none;
border-radius: 15px;
font-family: "MyFont";
}
#CreatingAccount {
background-color: black;
padding: 10px;
padding-left: 40px;
padding-right: 40px;
border-radius: 30px;
box-shadow: rgb(50, 50, 50) 30px 15px 20px;
border-style: dotted;
border-color: rgb(50, 50, 50);
color: #F0F3EF;
animation: main 3s;
}
@keyframes main {
from {
transform: translateY(90%);
opacity: 0;
}
to {
transform: translateY();
opacity: 1;
}
}
h1 {
font-size: 40px;
}
a {
color: #655fb3;
text-decoration: none;
}
#sentence {
animation: sent 7s;
}
@keyframes sent {
from {
transform: translateY(-100%);
opacity: 0;
}
60% { opacity: 0; transform: translateY(-100%); }
to {
transform: translateY(0%);
opacity: 1;
}
}
Sign In
HTML
<!DOCTYPE html>
<html>
<head>
<title>Around the Globe | Sign in</title>
<link rel="stylesheet" href="Sign In Code.css">
</head>
<body>
<!--The Intro Part-->
<div id="Main_Part">
<table>
<tr>
<td>
<img src="Home Page Photos/Sign In Photo.jpg" height="57%" width="850px" id="photo">
</td>
<td width="30px"></td>
<td width="1000px" class="sign_in">
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<!--Sign in part-->
<div id="main">
<h1 align="center" style="font-family: Modern; font-size: 50px;">SIGN IN TO YOUR ACCOUNT</h1>
<form style="display: grid; place-items: center;">
<input type="text" placeholder="Your Name" size="100" style="height: 80px;" autofocus required class="input"><br>
<input type="email" placeholder="E-Mail" size="100" style="height: 80px;" required class="input"><br>
<input type="tel" placeholder="Phone Number" size="100" style="height: 80px;" required class="input"><br>
<input type="password" placeholder="Password" size="100" style="height: 80px;" required class="input"><br>
<a href="Home.html"><input type="button" value="Sign In" style="height: 100px; width: 700px; font-size: 30px;" id="button"></a>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS
body{
font-family: MyFont;
background-color: #F0F3EF;
color: #819BB0;
animation: body 4s;
}
@keyframes body {
from{opacity: 0.3;}
to{opacity: 1;}
}
@font-face {
font-family: "Modern";
src: url("Modern\ Font.otf") format("opentype");
}
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
h1{
font-family: Modern;
animation: h1 2s;
}
@keyframes h1 {
0%{
opacity: 0;
}
80%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.sign_in{
background-color: black;
border-radius: 50px;
animation: main 5s;
}
@keyframes main {
0%{
opacity: 0;
transform: translateY(30%);
}
70%{
opacity: 1;
}
100%{
opacity: 1;
transform: translateY(0%);
}
}
.input{
border-radius: 15px;
border: none;
background-color: #50616f;
animation: input 4s;
}
@keyframes input {
0%{
width: 50px;
opacity: 0;
}
20%{
opacity: 0;
}
30%{
width: 50px;
opacity: 1;
}
100%{
width: 700px;
}
}
.input:hover{
background-color: white;
}
#photo{
border-radius: 50px;
animation: photo 5s;
}
@keyframes photo {
0%{
opacity: 0;
transform: translateX(-100%);
}
70%{
opacity: 1;
}
100%{
opacity: 1;
transform: translateX(0%);
}
}
#button{
background-color: #F0F3EF;
border-radius: 15px;
border: none;
color: black;
animation: input 4s;
}
#button:hover{
background-color: rgb(35, 35, 35);
color: #F0F3EF;
}
Payment
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pp.css">
<title>Around The Globe | Payment Page</title>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td class="plan">
<h2 class="plans">❌Free</h2>
<p style="color: white;"><strong>💳$0/month</strong></p>
<ul class="list">
<li>7-day limited access</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
</ul>
</td>
<td class="plan">
<h2 class="plans">➕Plus</h2>
<p style="color: white;"><strong>💳$9.99/month</strong></p>
<ul class="list">
<li>One-time future upgrade</li>
<li>Up to 10 help questions</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
</ul>
</td>
</tr>
<tr>
<td class="plan">
<h2 class="plans">🔥Pro</h2>
<p style="color: white;"><strong>💳$44.99/month</strong></p>
<ul class="list">
<li>Regular future updates</li>
<li>Up to 20 help questions</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
</ul>
</td>
<td class="plan">
<h2 class="plans">💲Pro Plus</h2>
<p style="color: white;"><strong>💳$99.99/month</strong></p>
<ul class="list">
<li>Regular future updates</li>
<li>Up to 50 help questions</li>
<li>Access to 3 additional services</li>
<li>----------</li>
<li>----------</li>
<li>----------</li>
</ul>
</td>
</tr>
<tr>
<td class="plan">
<h2 class="plans">💎Max</h2>
<p style="color: white;"><strong>💳$449.99/month</strong></p>
<ul>
<li>Unlimited help questions</li>
<li>Full access to all features</li>
<li>One VIP service every month</li>
<li>Access up to 3 devices</li>
<li>----------</li>
<li>----------</li>
</ul>
</td>
<td class="plan">
<h2 class="plans">👑Ultra</h2>
<p style="color: white;"><strong>💳$999.99/month</strong></p>
<ul>
<li>Unlimited access to all features</li>
<li>Unlimited help questions</li>
<li>Unlimited VIP services</li>
<li>Access on umlimited devices</li>
<li>Open-source web pages</li>
<li>Developer tools included</li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<img src="Banner.jpg" width="1150px" id="Banner"><br><br>
</tr>
</table>
<table>
<tr><br><br><br><br><br><br><br><br><br><br><br><br>
<label for="payment-method" style="font-size: 30px; color: black; padding-left: 20px;" class="some">Choose Plan: </label>
<select id="payment-method" style="background-color: black;">
<option value="Free">Free</option>
<option value="Plus">Plus</option>
<option value="Pro">Pro</option>
<option value="Pro Plus">Pro Plus</option>
<option vaue="Max">Max</option>
<option value="Ultra">Ultra</option>
</select>
</tr><br><br>
</table>
<table>
<tr>
<td>
<div class="payment_part">
<h1 id="payment_input"><br>Visa</h1>
<form class="payment_detail">
<input type="text" placeholder="Cardholder Name" class="detail"><br><br>
<input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" class="detail"><br><br>
<input type="text" placeholder="mm/yy" class="detail"><br><br>
<input type="text" placeholder="1234" class="detail"><br>
</form>
<form style="padding: 13px;"><br>
<a href="Home.html"><input type="button" value="Pay" class="pay_button"></a>
</form>
</div>
</td>
<td width="5px"></td>
<td>
<div class="payment_part">
<h1 id="payment_input"><br>American Express</h1>
<form class="payment_detail">
<input type="text" placeholder="Cardholder Name" class="detail"><br><br>
<input type="text" placeholder="xxxx-xxxxxx-xxxxx" class="detail"><br><br>
<input type="text" placeholder="mm/yy" class="detail"><br><br>
<input type="text" placeholder="123" class="detail"><br>
</form>
<form style="padding: 13px;"><br>
<a href="Home.html"><input type="button" value="Pay" class="pay_button"></a>
</form>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
CSS
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
@font-face {
font-family: "Modern Font";
src: url("Modern\ Font.otf") format("opentype");
}
body{
background-color: #F0F3EF;
font-family: "MyFont";
animation: body 5s;
}
@keyframes body {
from{
background-color: black;
}
to{
background-color: #F0F3EF;
}
}
.plan{
background-color: rgb(20, 20, 20);
width: 260px;
height: 308px;
border-radius: 30px;
box-shadow: rgb(119, 119, 119) 10px 5px 15px;
border-style: dashed;
border-color: rgb(80, 80, 80);
border-width: 1.4px;
font-family: MyFont;
animation: plan 2s;
}
@keyframes plan {
from{
transform: translateX(-100%);
opacity: 0;
}
to{
transform: translateX(0%);
opacity: 1;
}
}
.plans{
text-align: center;
color: whitesmoke;
text-transform: uppercase;
font-family: "MyFont";
}
strong{
text-align: center;
}
li{
font-size: small;
padding-bottom: 6px;
color: whitesmoke;
list-style: circle;
}
#Banner{
padding: 8px;
position: fixed;
top: 0;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
animation: banner 2s;
}
@keyframes banner {
from{
transform: translateY(-100%);
opacity: 0;
}
60%{
transform: translateY(30%);
}
75%{
transform: translateY(-20%);
}
to{
transform: translateY(0%);
opacity: 1;
}
}
select {
width: 400px;
height: 40px;
padding: 10px;
border-radius: 10px;
background-color: #B64846;
font-size: 20px;
color: #ffffff;
cursor: pointer;
animation: select 3s;
}
@keyframes select {
from{
transform: translateX(200%);
}
to{
transform: translateX(0%);
}
}
.payment_part{
background-color: #50616f;
height: 550px;
width: 575px;
border-radius: 50px;
animation: main 3s;
}
@keyframes main {
from{
transform: translateY(100%);
}
to{
transform: translateY(0%);
}
}
#payment_input{
text-align: center;
color: whitesmoke;
font-family: "Modern Font";
text-transform: uppercase;
}
.detail{
width: 555px;
height: 50px;
font-size: large;
}
.detail:hover{
background-color: #F0F3EF;
}
.payment_detail{
font-size: large;
padding: 10px;
}
.pay_button{
width: 550px;
border-radius: 20px;
border: none;
height: 90px;
font-size: xx-large;
background-color: rgb(255, 255, 255);
color: black;
}
.pay_button:hover{
background-color: black;
color: #F0F3EF;
}
.bold{
font-size: 40px;
}
li{
list-style-image: url(earth.png);
}
input{
border-radius: 20px;
border: none;
background-color: black;
}
header{
color: black;
animation: header 2s;
}
@keyframes header {
from{
transform: translateY(-30%);
}
to{
transform: translateY(0%);
}
}
nav{
animation: nav 2s;
}
@keyframes nav {
from{
transform: translateX(100%);
opacity: 0;
}
to{
transform: translateX(0%);
opacity: 1;
}
}
.some{
animation: some 5s;
}
@keyframes some {
from{
opacity: 0;
font-size: xx-large;
}
20%{
font-size: 70px;
}
70%{
font-size: xx-large;
}
to{
opacity: 1;
font-size: xx-large;
}
}
Home Page
HTML
<!DOCTYPE html>
<html>
<head>
<title>Around The Globe | Home</title>
<link rel="stylesheet" href="Home.css">
</head>
<body>
<!--The Intro Part-->
<header>
<table id="Introduction">
<!--Intro Logo and Name-->
<tr>
<td>
<img src="Home Page Photos/Globe Logo.png" height="200" width="220">
</td>
<td>
<h1 style="font-family: Modern;"><strong>AROUND THE GLOBE</strong></h1>
</td>
</tr>
</table>
<!--Intro Phrase-->
<h3 align="center"><i>Every Click, Every Country, Every Wonder, Every Secret</i></h3>
</header>
<!--Navigation Bar-->
<nav id="Nav">
<table>
<tr>
<td width="360px"></td>
<td>
<a href="Home.html">🏠Home</a>
</td>
<td width="100px"></td>
<td>
<a href="Gallery.html">🖼️Gallery</a>
</td>
<td width="100px"></td>
<td>
<a href="Maps.html">🗺️Maps</a>
</td>
<td width="100px"></td>
<td>
<a href="Records.html">☑️Records</a>
</td>
<td width="100px"></td>
<td>
<a href="Quiz.html">✅Quiz</a>
</td>
<td width="100px"></td>
<td>
<a href="Code.html">📁Codes</a>
</td>
</tr>
</table>
</nav><br><br><br>
<!--About Section-->
<div id="About_Section">
<table id="About_Table">
<tr>
<!--World Map (Simple)-->
<td width="700px" style="padding-left: 30px;">
<img src="Home Page Photos/Simple World Map.jpg" width="750px" height="450px" style="border-radius: 10px;" id="map">
</td>
<!--About Text-->
<td class="text" style="width: 45%;">
<h1 align="center" style="color: #35325E;"><i>📄About 'Around the Globe'</i></h1><br>
<p align="right" style="text-align: justify;"><strong style="font-size: large; color: floralwhite;">Welcome to Around the Globe! 🌍</strong>
<br><br>
!<br><br>
<h3 style="text-align: right; width: 90%;">✒️By Mr. Khaing Min Khant</h3>
</td>
</tr>
</table><br>
<!--Final Phrase-->
<h4 align="center"><i>🔑Open New Doors to Meet New People🔑</i></h4><hr>
</div>
<!--Earth History video-->
<br><br><br><br><br>
<div id="History_video">
<h1 align="center">🎬<i>Evoluation of the Earth</i>🎬</h1>
<video controls style="width:100%; height: 700px;">
<source src="Earth Story.mp4" type="video/mp4">
Video is not support by your browser.
</video>
<h4 align="center"><i>Our Earth, Our Home🏡. Our Home need to be safety, Our Earth need to be healthy</i></h4>
</div><br><br><br><br><br><br><br><br><br><br>
<!--Our World-->
<div id="World">
<h1 align="center"><i>🌏Quick Introduction to Earth🌏</i></h1><br>
<h2>Our world🌎</h2>
<p align="justify"> <br><br></p>
<h3>Geography and Landforms🗺️:</h3>
<p align="justify"><br><br></p>
<h3>Oceans and Water🌊:</h3>
<p align="justify"><br><br></p>
<table>
<tr>
<td align="justify">
<p>
<h3>The Atmosphere and Climate🌦️:</h3> <br><br>
<h3>Biosphere and Life👤:</h3> <br><br>
<h3>The Challenges of Sustainability💭:</h3> <br>
<h3>In summary💡,</h3>
<br><br><br>📖📖📖<a target="_blank" href="https://en.wikipedia.org/wiki/Earth">For More Information...</a>📖📖📖
</p>
</td>
<td>
<img src="Home Page Photos/Spinning Globe.gif" align="">
<h4 align="center" style="color: lightgray;"><i><b class="quote">"</b>OUR EARTH, there is no heaven, but there are pieces of it!<b class="end">"</b></i></h3>
</td>
</tr>
</table>
</div><br><br><br><br><br>
<div id="ads">
<table>
<tr>
<td width="60%" class="ads">
<h1 style="font-size: 100px; text-align: left; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,;">
<b>Dear World,</b>
</h1>
<h1 style="margin-left: 50px;">
<i>
Our Earth is a living masterpiece, filled with boundless beauty and endless possibilities, reminding us every day to protect, cherish, and celebrate the incredible home we share.
</i>
</h1>
</td>
<td width="40%">
<img src="Home Page Photos/3d planet.png" width="900px">
</td>
</tr>
</table>
</div><br>
<!--Continents and Oceans-->
<div id="Continents_Oceans"><br><br>
<table style="text-align: justify;">
<tr>
<td class="co" id="c">
<h2 align="center">Continents</h2>
<p>🏝️<br></p>
<img id="Continents_Map" height="400px" width="100%" src="Continents Codes/Continents.jpg" style="border-radius: 20px;">
</td>
<td>
<img src="Home Page Photos/Compass PNG.gif" width="150px" height="150px" style="padding: 5px;">
</td>
<td class="co" id="o">
<h2 align="center">Oceans</h2>
<p>🌊<br></p>
<img id="Oceans_Map" height="400px" width="100%" src="Continents Codes/Oceans.jpg" style="border-radius: 20px;">
</td>
</tr>
</table>
</div><br>
<footer>
<h4 align="center">2025🗓️ <b>Around the Globe🔎</b></h4>
</footer>
</body>
</html>
CSS
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
@font-face {
font-family: "Modern";
src: url("Modern\ Font.otf") format("opentype");
}
body{
font-family: MyFont;
background-color: #F0F3EF;
color: black;
animation: main 4s;
}
@keyframes main {
from{opacity: 0;}
to{opacity: 1;}
}
.text{
background-color: rgb(131, 131, 131);
padding: 25px;
border-radius: 80px;
box-shadow: black -20px 20px 1.5em;
}
#World{
background-color: rgb(118, 118, 118);
padding: 20px;
border-radius: 30px;
}
a{
color: rgb(255, 255, 255);
}
.co{
background-color: #50616f;
padding: 20px;
border-radius: 30px;
width: 46%;
color: black;
}
#c{
box-shadow: black 20px 25px 1.9em;
}
#o{
box-shadow: black -20px 25px 1.9em;
}
#summary{
background: rgb(0, 0, 0);
border-radius: 40px;
padding: 20px;
color: white;
box-shadow: black 20px 20px 1.5em;
}
footer{
padding: 10px;
}
#Nav{
background-color: rgb(147, 147, 147);
padding: 5px;
}
input{
border-radius: 5px;
border: none;
}
.living_things{
background-color: black;
width: 770px;
height: 400px;
padding: 15px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
#Challenge_Text{
background-color: white;
padding: 50px;
border-radius: 70px;
margin: 100px;
box-shadow: black 40px 30px 3em;
}
a{
text-decoration: none;
}
.quote{
font-size: 100px;
color: white;
}
.end{
font-size: 40px;
color: white;
}
footer{
color: whitesmoke;
background-color: #35325E;
}
.raining{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.climate{
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(84, 84, 84);
color: #F0F3EF;
}
.font{
padding: 30px;
background-color: #35325E;
color: white;
border-radius: 40px;
box-shadow: rgb(39, 39, 39) -40px 20px 2em;
transition: ease 1s;
}
.font:hover{
background-color: black;
}
.link:hover{
color: #35325E
}
header{
color: black;
animation: header 2s;
}
@keyframes header {
from{
transform: translateY(-80%);
}
to{
transform: translateY(0%);
}
}
nav{
animation: nav 2s;
}
@keyframes nav {
from{
transform: translateY(-800%);
opacity: 0;
}
to{
transform: translateY(0%);
opacity: 1;
}
}
#map{
transition: 1s;
}
#map:hover{
width: 800px;
height: 480px;
}
.ads{
padding: 100px;
text-align: justify;
}
Gallery Page
HTML
<!DOCTYPE html>
<html>
<head>
<title>Around The Globe | Gallery</title>
<link rel="stylesheet" href="Gallery.css">
</head>
<body>
<!--The Intro Part-->
<header>
<table>
<!--Intro Logo and Name-->
<tr>
<td>
<img src="Home Page Photos/Globe Logo.png" height="200" width="220" style="box-shadow: none; opacity: 1;">
</td>
<td>
<h1 style="font-family: Modern;"><strong>AROUND THE GLOBE</strong></h1>
</td>
</tr>
</table>
<!--Intro Phrase-->
<h3 align="center"><i>Every Click, Every Country, Every Wonder, Every Secret</i></h3>
</header>
<!--Navigation Bar-->
<nav id="Nav">
<table>
<tr>
<td width="360px"></td>
<td>
<a href="Home.html">🏠Home</a>
</td>
<td width="100px"></td>
<td>
<a href="Gallery.html">🖼️Gallery</a>
</td>
<td width="100px"></td>
<td>
<a href="Maps.html">🗺️Maps</a>
</td>
<td width="100px"></td>
<td>
<a href="Records.html">☑️Records</a>
</td>
<td width="100px"></td>
<td>
<a href="Quiz.html">✅Quiz</a>
</td>
<td width="100px"></td>
<td>
<a href="Code.html">📁Codes</a>
</td>
</tr>
</table>
</nav><br>
<div class="Photos" style="color: white;">
<h1 align="center" style="font-family: Modern; color: black;" id="title">🖼️Earth Gallery for You🖼️</h1><br><br><br>
<table>
<tr>
<td><img src="Earth Photos/Europe from Space.jpg" width="1200px"><br><h3 align="center" style="color: black;"><i>Europe from Space</i></h3></td>
<td><img src="Earth Photos/Northern Light from Norway.jpg" height="330px" width="460px" style="margin: 7px;"><br><h3 align="center" style="color: black;"><i>Northern Light from Norway</i></h3>
<img src="Earth Photos/Northern Light from Finland.jpg" height="300px" width="460px" style="margin: 7px;"><h3 align="center" style="color: black;"><i>Northern Light from Finland</i></h3>
</td>
</tr>
</table><br><br><br><br><br>
<div>
<img src="Earth Photos/Russell Glacier.jpg" width="100%">
<h2 align="center" style="color: black;"><i>Russel Glacier in Greenland</i></h2>
</div>
<table>
<tr>
<td>
<img src="Earth Photos/Mount Fuji.jpg" width="700px"><h3 align="center" style="color: black;"><i>Mount Fuji</i></h3>
</td>
<td>
<img src="Earth Photos/Spruce Forest.jpg" width="840px" style="margin-right: 5px;"><h1 align="center" style="color: black;"><i>A Spruce Forest</i></h1>
</td>
</tr>
<tr>
<td>
<img src="Earth Photos/The River Nile.jpg" width="800px"><h3 align="center" style="color: black;"><i>The River Nile</i></h3>
</td>
<td>
<img src="Earth Photos/Archipelago in Philippines.jpg" width="830px"><h2 align="center" style="color: black;"><i>Archipelago in Philippines</i></h2>
</td>
</tr>
<tr>
<td>
<img src="Earth Photos/Underwater.jpg" width="800px" height="1000px" style="margin: 13px;"><h1 align="center" style="color: black;"><i>Underwater</i></h1>
</td>
<td>
<img src="Earth Photos/Volcano.jpg" width="800px" height="1000px" style="margin: 13px; margin-left: 30px;"><h1 align="center" style="color: black;"><i>A Volcano</i></h1>
</td>
</tr>
</table>
<a href="https://www.pexels.com/search/earth/" target="_blank"><button class="more">🔗For More Photos...</button></a><br><br>
<footer>
<table>
<tr>
<th>
<h2 align="left">Contact</h2>
<p align="left">
<b> G-Mail: </b><i>khaingminkhant.james@gmail.com</i><br>
<b> YouTube: </b><i>@zephyr-ion7</i><br>
<b> Sololearn: </b><i>Khaing Min Khant</i><br>
<b> GitHub: </b><i>khaingminkhant</i><br>
<b> Telegram: </b><i>zephyr_ion</i>
</p>
</th>
<th width="45%">
<p align="justify">
<i>
© 2024 Around the Globe. All Rights Reserved.<br><br>
All content, images, and materials on this website are the intellectual property of Around the Globe and are protected by copyright laws. Unauthorized reproduction, distribution, or use of any content on this website, in part or in whole, without express written permission is prohibited.
<br><br>For inquiries or permissions, please contact us at <b>khaingminkhant.james@gmail.com</b>.
</i>
</p>
</th>
<th width="25%">
<h4><i>If you have something to tell me, <br></i></h4>
<form>
<input type="text" placeholder="Your Name" size="40"><br>
<input type="email" placeholder="example@gmail.com" size="40"><br><br>
<input type="text" size="40" style="height: 120px"><br><br>
<input type="button" value="Send" style="margin-left: 60%; background-color: whitesmoke;">
</form>
</th>
</tr>
</table>
</footer>
</div>
</body>
</html>
CSS
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
@font-face {
font-family: "Modern";
src: url("Modern\ Font.otf") format("opentype");
}
body{
font-family: MyFont;
background-color: #F0F3EF;
color: goldenrod;
}
#Nav{
background-color: rgb(147, 147, 147);
padding: 5px;
}
a{
color: rgb(255, 255, 255);
}
footer{
padding: 10px;
}
img{
border-radius: 15px;
box-shadow: black -10px 25px 1.5em;
animation: image 4s;
}
img:hover{
opacity: 0.6;
}
input{
border-radius: 5px;
border: none;
}
a{
text-decoration: none;
}
footer{
color: whitesmoke;
background-color: #35325E;
}
header{
color: black;
}
.more{
color: white;
background-color: black;
border: none;
border-radius: 30px;
width: 300px;
height: 60px;
font-size: x-large;
transition: ease 0.4s;
}
.more:hover{
background-color: #35325E;
width: 330px;
height: 79px;
border-radius: 25px;
}
header{
color: black;
animation: header 2s;
}
@keyframes header {
from{
transform: translateX(-80%);
}
to{
transform: translateX(0%);
}
}
nav{
animation: nav 2s;
}
@keyframes nav {
from{
transform: translateX(100%);
opacity: 0;
}
to{
transform: translateX(0%);
opacity: 1;
}
}
@keyframes image {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#title{
animation: title 6s;
}
@keyframes title {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
Maps Page
HTML
<!DOCTYPE html>
<head>
<title>Around The Globe | Maps</title>
<link rel="stylesheet" href="Maps.css">
</head>
<body>
<!--The Intro Part-->
<header>
<table id="Introduction">
<!--Intro Logo and Name-->
<tr>
<td>
<img src="Home Page Photos/Globe Logo.png" height="200" width="220">
</td>
<td>
<h1 style="font-family: Modern;"><strong>AROUND THE GLOBE</strong></h1>
</td>
</tr>
</table>
<!--Intro Phrase-->
<h3 align="center"><i>Every Click, Every Country, Every Wonder, Every Secret</i></h3>
</header>
<!--Navigation Bar-->
<nav id="Nav">
<table>
<tr>
<td width="360px"></td>
<td class="nav">
<a href="Home.html">🏠Home</a>
</td>
<td width="100px"></td>
<td class="nav">
<a href="Gallery.html">🖼️Gallery</a>
</td>
<td width="100px"></td>
<td class="nav">
<a href="Maps.html">🗺️Maps</a>
</td>
<td width="100px"></td>
<td class="nav">
<a href="Records.html">☑️Records</a>
</td>
<td width="100px"></td>
<td class="nav">
<a href="Quiz.html">✅Quiz</a>
</td>
<td width="100px"></td>
<td class="nav">
<a href="Code.html">📁Codes</a>
</td>
</tr>
</table>
</nav><br>
<div id="Main">
<h1 align="center" style="font-family: Modern; color: black;" id="title">🧭World Maps🧭</h1>
<table id="table">
<tr width="40%" id="one">
<td><img src="Maps/Population Map.jpg" height="550px" width="817px" class="image"></td>
<td align="justify">
<h2 align="center">👫World Population Map</h2><br>
<p class="paragraph">
As of November 2024, the global population has reached approximately 8.19 billion, marking a consistent increase at an annual growth rate of around 0.85%. Asia remains the most densely populated continent, housing over 58% of the world's population, while Africa shows the fastest growth rate at 2.3%, indicating a significant future demographic shift as its population expands. Recently, India has surpassed China, becoming the most populous nation with over 1.44 billion people, reflecting broader trends in birth rates and urbanization. Daily, the world experiences around 361,765 births and 170,463 deaths, resulting in a net increase of approximately 190,000 people each day. This growth brings challenges, including the need for resources, environmental sustainability, and urban planning, as population dynamics drive economic and social policies globally. The regions differ notably, with some, like Europe, experiencing population decline, while others grow rapidly, reshaping the global landscape and demanding a careful balance between growth and sustainability.</p>
</td>
</tr>
<tr width="40%" id="two">
<td align="justify">
<h2 align="center">🪬World Religions Map</h2><br>
<p class="paragraph">
Christianity is currently the world’s largest religion, with around 2.2 billion followers, constituting about 31% of the global population. Islam follows closely with about 1.6 billion adherents, representing 25% of the global population, and is projected to grow rapidly in the coming decades. Hinduism, with its roots in the Indian subcontinent, is the third-largest religion, encompassing roughly 15% of the world, mainly in India and Nepal. Buddhism, another major religion originating in Asia, has around 500 million followers, making up 6.6% of the global population. Smaller in global population but significant, Judaism has roughly 14 million adherents worldwide, comprising 0.2% of the population. Additionally, around 1.2 billion people, or 16%, identify as religiously unaffiliated, including atheists, agnostics, and those with no particular religious alignment, particularly concentrated in East Asia and parts of Europe. Traditional or folk religions and other faiths, including smaller groups like the Baha’i, Sikhism, and Jainism, account for the remainder. The global religious landscape continues to evolve due to demographic trends, particularly in regions with higher birth rates among religious populations.</p>
</td>
<td><img src="Maps/Religions Map.jpg" height="550px" width="817px" class="image"></td>
</tr>
<tr width="40%" id="three">
<td><img src="Maps/Weather Map.jpg" height="550px" width="817px" class="image"></td>
<td align="justify">
<h2 align="center">🌦️World Weather Map</h2><br>
<p class="paragraph">
In 2024, global weather patterns have continued to reveal a complex mix of extreme and record-breaking events. Average global temperatures have reached unprecedented highs, with El Niño further driving temperatures. January 2024 alone was the warmest on record, with a global surface temperature 1.27°C above the 20th-century average. This warming trend has resulted in extreme weather worldwide: severe heatwaves affected Asia and South America, with record-breaking temperatures in cities like Rio de Janeiro and numerous fatalities in parts of India and the Philippines. At the same time, major floods struck Brazil and Houston, while devastating wildfires continued in parts of Canada and other regions.
<br><br>Sea ice levels have also shown significant reduction, with Antarctic sea ice extent at its fifth-lowest on record, contributing to rising sea levels and further climate volatility. As global temperatures remain on this record-breaking trajectory, 2024 may become one of the warmest years, further amplifying risks of hurricanes, droughts, and other climate-related disasters. These changes highlight an increasingly volatile global climate, underscoring the urgency of adaptation and mitigation efforts.</p>
</td>
</tr>
<tr width="40%" id="four">
<td align="justify">
<h2 align="center">📕World Language Map</h2><br>
<p class="paragraph">
Languages in the world reflect immense cultural diversity, with the most widely spoken languages having millions of speakers across multiple countries. English leads as a global lingua franca with over 1.5 billion speakers, facilitating international business, science, and digital communication. Mandarin Chinese follows with approximately 1.1 billion native speakers, primarily in China, where its complex writing system and tonal pronunciation embody a rich cultural heritage. Hindi, spoken mainly in India, has around 608 million speakers, making it the third most widely spoken language, known for its expressive film and literary traditions. Spanish, spoken across Spain and much of Latin America, and Arabic, used widely in the Middle East and North Africa, each have hundreds of millions of speakers and extensive historical, religious, and literary significance. Other major languages include French, Bengali, Portuguese, Russian, and Urdu, each with unique cultural influences and significant speaker populations around the globe. The diversity of these languages highlights the range of human expression and connection across continents.</p>
</td>
<td><img src="Maps/Language Map.jpg" height="550px" width="817px" class="image"></td>
</tr>
<tr width="40%" id="five">
<td><img src="Maps/Wealth Map.jpg" height="550px" width="817px" class="image"></td>
<td align="justify">
<h2 align="center">💲World Income Map</h2><br>
<p class="paragraph">
In 2024, global median incomes show wide disparities across regions. Developed countries, like Luxembourg, rank at the top with median incomes exceeding $26,000 annually, largely due to robust social security systems, high levels of economic stability, and low inequality. Conversely, many lower-income countries, such as the Democratic Republic of Congo, report annual median incomes as low as $400, underscoring significant economic challenges. For instance, while the U.S. has a high median income around $19,000, middle-income countries, including Brazil and India, report much lower levels due to ongoing economic development efforts. Generally, high-income nations enjoy greater financial security, while income inequality remains a concern even in wealthier regions. For more insights into this economic landscape, sources like the World Bank’s Poverty and Inequality Platform provide a comprehensive view of income data.</p>
</td>
</tr>
<tr width="40%" id="six">
<td align="justify">
<h2 align="center">🎓World School Leaving Map</h2><br>
<p class="paragraph">
The school leaving age varies around the world, with different countries setting different age requirements for students to complete their compulsory education. In many countries, the minimum school leaving age is 16, including nations like the United Kingdom, France, and most of Europe. However, in some places, students can leave school at an earlier age, such as at 15 in countries like the United States and Thailand. In contrast, countries like Germany and Italy require students to stay in education until they are 18, offering options such as vocational training or apprenticeships during that time. School leaving ages are often influenced by national education policies, economic factors, and cultural norms, and many countries are continually adapting these rules to ensure better educational outcomes.</p>
</td>
<td><img src="Maps/School Leaving Map.jpg" height="550px" width="817px" class="image"></td>
</tr>
<tr width="40%" id="seven">
<td><img src="Maps/Health Map.jpg" height="550px" width="817px" class="image"></td>
<td align="justify">
<h2 align="center">❤️🩹World Health Map</h2><br>
<p class="paragraph">
Global health has made strides in recent years, yet faces complex challenges and inequalities that affect outcomes worldwide. Life expectancy has improved in many countries, but this progress is uneven, with high-income nations generally seeing more consistent health advancements. Low- and middle-income countries often grapple with limited healthcare access, significant disease burdens, and lower-quality medical infrastructure. Non-communicable diseases, including heart disease, diabetes, and cancer, have overtaken infectious diseases as the leading causes of death in many parts of the world, particularly in high-income regions. Meanwhile, infectious diseases like malaria, tuberculosis, and HIV/AIDS remain significant challenges in sub-Saharan Africa. Infant mortality rates have declined globally, but some regions still face elevated risks. Despite these challenges, advancements in medical research, vaccination programs, and global health initiatives have resulted in significant improvements in health outcomes. <br><br>Health disparities remain significant between regions, driven by factors such as economic inequality, geographic location, and social determinants of health, calling for increased global cooperation to address the diverse healthcare needs of the world’s populations.</p>
</td>
</tr>
</table>
</div>
<footer>
<p class="footer">Made by User Name. All rights reserved. (2025)</p>
</footer>
</body>
CSS
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
@font-face {
font-family: "Modern";
src: url("Modern\ Font.otf") format("opentype");
}
body{
font-family: MyFont;
background-color: #F0F3EF;
color: goldenrod;
}
footer{
padding: 10px;
}
#Nav{
background-color: rgb(147, 147, 147);
padding: 5px;
}
img{
border-radius: 15px;
}
a{
color: rgb(255, 255, 255);
}
input{
border-radius: 5px;
border: none;
}
#one{
background-color: rgb(184, 184, 184);
animation: odd 5s;
}
#two{
background-color: rgb(89, 89, 89);
color: #F0F3EF;
animation: even 5s;
}
#three{
background-color: rgb(255, 255, 255);
animation: odd 5s;
}
#four{
background-color: black;
color: #F0F3EF;
animation: even 5s;
}
#five{
background-color: rgb(211, 227, 227);
animation: odd 5s;
}
#six{
background-color: gray;
color: #F0F3EF;
animation: even 5s;
}
#seven{
background-color: rgb(190, 190, 190);
animation: odd 5s;
}
#eight{
background-color: rgb(79, 79, 94);
color: #F0F3EF;
animation: even 5s;
}
#nine{
background-color: rgba(162, 162, 162, 0.282);
animation: odd 5s;
}
#ten{
background-color: rgb(60, 60, 60);
color: #F0F3EF;
animation: even 5s;
}
#table{
border: none;
border-spacing: 0;
color: black;
}
img.image{
padding: 10px;
transition: ease 1s;
}
p.paragraph{
padding: 19px;
}
a{
text-decoration: none;
}
footer{
color: whitesmoke;
background-color: #35325E;
}
header{
color: black;
}
header{
color: black;
animation: header 2s;
}
@keyframes header {
from{
transform: translateY(-30%);
}
to{
transform: translateY(0%);
}
}
nav{
animation: nav 2s;
}
@keyframes nav {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes odd {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0%);
}
}
@keyframes even {
from{
transform: translateX(100%);
}
to{
transform: translateX(0%);
}
}
.nav{
animation: bar 3s;
}
@keyframes bar {
from{
transform: translateY(-200%);
opacity: 0;
}
80%{
transform: translateY(-30%);
}
87%{
transform: translateY(-100%);
}
to{
transform: translateY(0%);
opacity: 1;
}
}
#title{
animation: title 2s;
}
@keyframes title {
from{
transform: translateX(100%);
}
to{
transform: translateX(0%);
}
}
#Main{
scroll-snap-type: y mandatory;
}
.section{
scroll-snap-align: start;
}
.image:hover{
border-radius: 70px;
}
Records Page
HTML
<!DOCTYPE html>
<html>
<head>
<title>Around The Globe | Records</title>
<link rel="stylesheet" href="Records.css">
</head>
<body>
<!--The Intro Part-->
<header>
<table id="Introduction">
<!--Intro Logo and Name-->
<tr>
<td>
<img src="Home Page Photos/Globe Logo.png" height="200" width="220" style="box-shadow: none;">
</td>
<td>
<h1 style="font-family: Modern; padding: 0px;"><strong>AROUND THE GLOBE</strong></h1>
</td>
</tr>
</table>
<!--Intro Phrase-->
<h3 align="center"><i>Every Click, Every Country, Every Wonder, Every Secret</i></h3>
</header>
<!--Navigation Bar-->
<nav id="Nav">
<table>
<tr>
<td width="360px"></td>
<td>
<a href="Home.html">🏠Home</a>
</td>
<td width="100px"></td>
<td>
<a href="Gallery.html">🖼️Gallery</a>
</td>
<td width="100px"></td>
<td>
<a href="Maps.html">🗺️Maps</a>
</td>
<td width="100px"></td>
<td>
<a href="Records.html">☑️Records</a>
</td>
<td width="100px"></td>
<td>
<a href="Quiz.html">✅Quiz</a>
</td>
<td width="100px"></td>
<td>
<a href="Code.html">📁Codes</a>
</td>
</tr>
</table>
</nav><br>
<h1 align="center" style="padding: none; color: black; font-family: Modern;" id="title">✅World Records✅</h1><br><br>
<div id="Main_Part">
<table>
<!--Angel Falls--><br><br>
<tr>
<td width="40%"><img src="Photos for Records Section/Angel Falls.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Angel_Falls">For More Information...</a></h3></td>
<td>
<h1>Highest Waterfall: Angel Falls</h1>
<p align="justify" class="paragraph">Angel Falls in Venezuela is the world’s highest uninterrupted waterfall, plunging 979 meters (3,212 feet) from the Auyán-Tepui mountain. Its sheer drop and pristine surroundings make it a stunning natural wonder and a popular destination for adventurers. Named after aviator Jimmy Angel, the waterfall highlights the dramatic landscapes of South America and serves as a key feature of Canaima National Park, a UNESCO World Heritage Site.</p>
</td>
</tr>
<!--Nile River-->
<tr>
<td>
<h1>Longest River: Nile River</h1>
<p align="justify" class="paragraph">The Nile River flows 6,650 kilometers (4,132 miles) through northeastern Africa, making it the longest river globally. It has nurtured civilizations for thousands of years, including ancient Egypt. The Nile provides water, supports agriculture, and sustains millions of people across 11 countries, from its sources in East Africa to its delta in the Mediterranean Sea.</p>
</td>
<td width="40%"><img src="Earth Photos/The River Nile.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Nile">For More Information...</a></h3></td>
</tr>
<!--Sahara-->
<tr>
<td width="40%"><img src="Photos for Records Section/Sahara.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Sahara">For More Information...</a></h3></td>
<td>
<h1>Largest Desert: Sahara Desert</h1>
<p align="justify" class="paragraph">The Sahara Desert in northern Africa is the world’s largest hot desert, spanning 9.2 million square kilometers (3.6 million square miles). Its vast expanse of sand dunes, rocky plateaus, and scarce vegetation creates a unique and challenging environment. Despite its harsh conditions, the Sahara has supported nomadic tribes and ancient trade routes for centuries.</p>
</td>
</tr>
<!--Mariana Trench-->
<tr>
<td>
<h1>Deepest Ocean Point: Mariana Trench</h1>
<p align="justify" class="paragraph">The Mariana Trench, in the Pacific Ocean, holds the deepest known point on Earth’s seabed at about 10,994 meters (36,070 feet). This extreme environment, called the Challenger Deep, hosts unique life forms adapted to high pressure and darkness. The trench remains an area of scientific exploration, highlighting Earth’s unexplored underwater realms.</p>
</td>
<td width="40%"><img src="Photos for Records Section/Mariana Trench.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Mariana_Trench">For More Information...</a></h3></td>
</tr>
<!--Mount Everest-->
<tr>
<td width="40%"><img src="Photos for Records Section/Mount Everest.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Mount_Everest">For More Information...</a></h3></td>
<td>
<h1>Tallest Mountain: Mount Everest</h1>
<p align="justify" class="paragraph">Mount Everest, on the Nepal-Tibet border, is the highest mountain above sea level at 8,848.86 meters (29,031.7 feet). A symbol of human ambition, it attracts climbers from around the world who endure extreme weather and altitude challenges. Known locally as Sagarmatha or Chomolungma, Everest is a sacred landmark and an iconic global peak.</p>
</td>
</tr>
<!--Caspian Sea-->
<tr>
<td>
<h1>Largest Lake: Caspian Sea</h1>
<p align="justify" class="paragraph">The Caspian Sea, the world’s largest enclosed inland water body, spans 371,000 square kilometers (143,000 square miles). Despite being called a sea, it is technically a lake. It holds significant natural resources like oil and gas and supports unique biodiversity. Its shores have been a hub for civilizations and trade for centuries.</p>
</td>
<td width="40%"><img src="Photos for Records Section/Caspian Sea.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Caspian_Sea">For More Information...</a></h3></td>
</tr>
<!--Amazon Rainforest-->
<tr>
<td width="40%"><img src="Photos for Records Section/Amazon RainForest.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Amazon_rainforest">For More Information...</a></h3></td>
<td>
<h1>Largest Rainforest: Amazon Rainforest</h1>
<p align="justify" class="paragraph">The Amazon Rainforest, spanning 5.5 million square kilometers (2.1 million square miles) in South America, is the largest tropical rainforest. Known as the “lungs of the Earth,” it produces oxygen and houses millions of species, including many endemic to the region. The Amazon is vital for global climate stability but faces threats from deforestation.</p>
</td>
</tr>
<!--Andes Mountains-->
<tr>
<td>
<h1>Longest Mountain Range: Andes Mountains</h1>
<p align="justify" class="paragraph">The Andes Mountains, stretching 7,000 kilometers (4,350 miles) along South America’s western edge, form the longest continental mountain range. These towering peaks are home to diverse ecosystems, ancient cultures like the Incas, and breathtaking landscapes. The Andes are vital for water resources, agriculture, and biodiversity in the region.</p>
</td>
<td width="40%"><img src="Photos for Records Section/Andes Mountains.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Andes">For More Information...</a></h3></td>
</tr>
<!--Greenland-->
<tr>
<td width="40%"><img src="Photos for Records Section/Greenland.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Greenland">For More Information...</a></h3></td>
<td>
<h1>Largest Island: Greenland</h1>
<p align="justify" class="paragraph">Greenland is the world’s largest island, covering 2.1 million square kilometers (836,000 square miles). Known for its massive ice sheet, it plays a crucial role in global climate regulation. Despite its sparse population, Greenland supports unique wildlife and a rich indigenous culture.</p>
</td>
</tr>
<!--Great Barrier Reef-->
<tr>
<td>
<h1>Largest Coral Reef: Great Barrier Reef</h1>
<p align="justify" class="paragraph">The Great Barrier Reef in Australia is the world’s largest coral reef system, stretching 2,300 kilometers (1,429 miles). Composed of over 2,900 individual reefs, it is home to vibrant marine life and supports tourism and fishing industries. Climate change and coral bleaching threaten its delicate ecosystem.</p>
</td>
<td width="40%"><img src="Photos for Records Section/Great Barrier Reef.jpg" width="800px" height="500px"><h3 align="right"><a href="https://en.wikipedia.org/wiki/Great_Barrier_Reef">For More Information...</a></h3></td>
</tr>
</table>
</div>
<footer>
<table>
<tr>
<th>
<h2 align="left">Contact</h2>
<p align="left">
<b> G-Mail: </b><i>khaingminkhant.james@gmail.com</i><br>
<b> YouTube: </b><i>@zephyr-ion7</i><br>
<b> Sololearn: </b><i>Khaing Min Khant</i><br>
<b> GitHub: </b><i>khaingminkhant</i><br>
<b> Telegram: </b><i>zephyr_ion</i>
</p>
</th>
<th width="45%">
<p align="justify">
<i>
© 2024 Around the Globe. All Rights Reserved.<br><br>
All content, images, and materials on this website are the intellectual property of Around the Globe and are protected by copyright laws. Unauthorized reproduction, distribution, or use of any content on this website, in part or in whole, without express written permission is prohibited.
<br><br>For inquiries or permissions, please contact us at <b>khaingminkhant.james@gmail.com</b>.
</i>
</p>
</th>
<th width="25%">
<h4><i>If you have something to tell me, <br></i></h4>
<form>
<input type="text" placeholder="Your Name" size="40"><br>
<input type="email" placeholder="example@gmail.com" size="40"><br><br>
<input type="text" size="40" style="height: 120px"><br><br>
<input type="button" value="Send" style="margin-left: 60%; background-color: whitesmoke;">
</form>
</th>
</tr>
</table>
</footer>
</body>
</html>
CSS
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
@font-face {
font-family: "Modern";
src: url("Modern\ Font.otf") format("opentype");
}
body{
font-family: MyFont;
background-color: #F0F3EF;
color: whitesmoke;
}
footer{
background-color: gray;
padding: 10px;
}
#Nav{
background-color: rgb(147, 147, 147);
padding: 5px;
}
img{
border-radius: 15px;
box-shadow: black 20px 25px 2em;
}
a{
color: rgb(255, 255, 255);
}
#Main_Part{
background-image: url(Background\ Art2.jpg);
background-attachment: fixed;
background-size: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
animation: main 5s;
background-size: 100%;
}
@keyframes main {
from{
opacity: 0;
border-radius: 100px;
}
to{
opacity: 1;
}
}
input{
border-radius: 5px;
border: none;
}
a{
text-decoration: none;
}
footer{
color: whitesmoke;
background-color: #35325E;
}
header{
color: black;
}
.paragraph{
padding: 40px;
}
h1{
padding-left: 40px;
}
header{
color: black;
animation: header 2s;
}
@keyframes header {
from{
transform: translateX(100%);
}
to{
transform: translateX(0%);
}
}
nav{
animation: nav 2s;
}
@keyframes nav {
from{
transform: translateX(-100%);
opacity: 0;
}
to{
transform: translateX(0%);
opacity: 1;
}
}
#title{
animation: title 2s;
}
@keyframes title {
from{
transform: translateY(1600%);
}
to{
transform: translateY(0%);
}
}
Quiz Page
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Quiz.css">
<title>Around The Globe | Quiz</title>
</head>
<body>
<header>
<table>
<!--Intro Logo and Name-->
<tr>
<td>
<img src="Home Page Photos/Globe Logo.png" height="200" width="220" style="box-shadow: none;">
</td>
<td>
<h1 style="font-family: Modern;"><strong>AROUND THE GLOBE</strong></h1>
</td>
</tr>
</table>
<!--Intro Phrase-->
<h3 align="center" style="color: black;"><i>Every Click, Every Country, Every Wonder, Every Secret</i></h3>
</header>
<!--Navigation Bar-->
<nav id="Nav">
<table>
<tr>
<td width="360px"></td>
<td>
<a href="Home.html">🏠Home</a>
</td>
<td width="100px"></td>
<td>
<a href="Gallery.html">🖼️Gallery</a>
</td>
<td width="100px"></td>
<td>
<a href="Maps.html">🗺️Maps</a>
</td>
<td width="100px"></td>
<td>
<a href="Records.html">☑️Records</a>
</td>
<td width="100px"></td>
<td>
<a href="Quiz.html">✅Quiz</a>
</td>
<td width="100px"></td>
<td>
<a href="Code.html">📁Codes</a>
</td>
</tr>
</table>
</nav><br>
<h1 id="title" style="font-family: Modern; color: black;">❓Quiz❓</h1>
<table id="table">
<tr>
<td class="main">
<table id="choice">
<tr>
<td class="single-choice">
<h2 align="center">🔴Single Choice Questions</h2>
<form class="choice">
<h3>1. How many continents are there on Earth?</h3>
<label>
<input type="radio" name="continents" value="5">(1) 5
</label><br>
<label>
<input type="radio" name="continents" value="6">(2) 6
</label><br>
<label>
<input type="radio" name="continents" value="7">(3) 7
</label><br><br>
<h3>2. What is the name of the longest river in the world?</h3>
<label>
<input type="radio" name="river" value="Nile">(1) Nile
</label><br>
<label>
<input type="radio" name="river" value="Amazon">(2) Amazon
</label><br>
<label>
<input type="radio" name="river" value="Mississippi">(3) Mississippi
</label><br><br>
<h3>3. Which planet is closest to Earth?</h3>
<label>
<input type="radio" name="planet" value="Nile">(1) Jupiter
</label><br>
<label>
<input type="radio" name="planet" value="Amazon">(2) Venus
</label><br>
<label>
<input type="radio" name="planet" value="Mississippi">(3) Mars
</label><br><br>
<h3>4. What is the Earth's natural satellite?</h3>
<label>
<input type="radio" name="satellite" value="Sun">(1) Sun
</label><br>
<label>
<input type="radio" name="satellite" value="Mars">(2) Mars
</label><br>
<label>
<input type="radio" name="satellite" value="Moon">(3) Moon
</label><br><br>
<h3>5. How long does it take for the Earth to orbit the Sun?</h3>
<label>
<input type="radio" name="druration" value="24 hours">(1) 24 hours
</label><br>
<label>
<input type="radio" name="druration" value="365 days">(2) 365 days
</label><br>
<label>
<input type="radio" name="druration" value="30 days">(3) 30 days
</label><br><br><br>
<input type="button" value="SUMBIT" class="submit">
</form>
</td>
<td class="multiple-choice">
<h2 align="center">☑️Multiple Choice Questions</h2>
<form class="choice">
<h3>1. Which of these are continents?</h3>
<label>
<input type="checkbox" name="continents" value="Africa">(a) Africa
</label><br>
<label>
<input type="checkbox" name="continents" value="Sahara">(b) Sahara
</label><br>
<label>
<input type="checkbox" name="continents" value="Europe">(c) Europe
</label><br><br>
<h3>2. Which of these are oceans?</h3>
<label>
<input type="checkbox" name="oceans" value="Pacific">(a) Pacific
</label><br>
<label>
<input type="checkbox" name="oceans" value="Sahara">(b) Atlantic
</label><br>
<label>
<input type="checkbox" name="oceans" value="Europe">(c) Indian
</label><br><br>
<h3>3. What causes seasons on Earth??</h3>
<label>
<input type="checkbox" name="facts" value="The tilt of Earth's axis">(a) The tilt of Earth's axis
</label><br>
<label>
<input type="checkbox" name="facts" value="The Moon’s position">(b) The Moon’s position
</label><br>
<label>
<input type="checkbox" name="facts" value="The distance from the Sun">(c) The distance from the Sun
</label><br><br>
<h3>4. Which gases are present in Earth’s atmosphere?</h3>
<label>
<input type="checkbox" name="facts" value="Nitrogen">(a) Nitrogen
</label><br>
<label>
<input type="checkbox" name="facts" value="Hydrogen">(b) Hydrogen
</label><br>
<label>
<input type="checkbox" name="facts" value="Carbon">(c) Carbon
</label><br><br>
<h3>5. Which of these are renewable energy sources?</h3>
<label>
<input type="checkbox" name="facts" value="Solar Power">(a) Solar Power
</label><br>
<label>
<input type="checkbox" name="facts" value="Wind Energy">(b) Wind Energy
</label><br>
<label>
<input type="checkbox" name="facts" value="Fossil Fuels">(c) Fossil Fuels
</label><br><br><br>
<input type="button" value="SUMBIT" class="submit">
</form>
</td>
</tr>
<tr>
<td class="Answer-box"><br><br><br>
<h2 align="center">💬Answer-Box Questions</h2>
<form class="choice">
<label class="question">1. What is the name of the largest desert on Earth?<br></label><br>
Answer: <input type="text" class="answer"><br><br><br><br>
<label class="question">2. What do we call a place where two tectonic plates meet?<br></label><br>
Answer: <input type="text" class="answer"><br><br><br><br>
<label class="question">3. What is the main gas that plants need to survive?<br></label><br>
Answer: <input type="text" class="answer"><br><br><br><br>
<label class="question">4. What is the smallest continent in the world?<br></label><br>
Answer: <input type="text" class="answer"><br><br><br><br>
<label class="question">5. Name the process by which plants make their food.<br></label><br>
Answer: <input type="text" class="answer"><br><br><br>
<input type="button" value="SUMBIT" class="submit">
</form>
<a href="https://www.tutorialspoint.com/general_knowledge/general_knowledge_basics_of_planet_earth.htm"><h2 class="quiz">👉 For More Quiz...</h2></a>
</td>
<td class="Mixed"><br><br><br>
<h2 align="center">😵💫Mixed-Type Questions</h2>
<form class="choice">
<h3>1. True or False: Earth is the only planet with liquid water.</h3>
<label>
<input type="radio" name="fact">a) True
</label><br>
<label>
<input type="radio" name="fact">b) False
</label><br><br>
<h3>2. What is Earth's outermost layer called?</h3>
<label>
<input type="radio" name="layer">(1) Mantle
</label><br>
<label>
<input type="radio" name="layer">(2) Crust
</label><br>
<label>
<input type="radio" name="layer">(3) Core
</label><br>
<label>
<input type="radio" name="layer">(4) Atmosphere
</label><br><br>
<h3>3. Fill in the blank: The Earth's rotation causes __________.</h3>
Answer: <input type="text" class="answer"><br><br>
<h3>4. Name one renewable energy source used on Earth.</h3>
Answer: <input type="text" class="answer"><br><br>
<h3>5. Match the following features with their continents:</h3>
<label>
Sahara: <input type="text" class="answer"><br><br>
</label>
<label>
Amazon: <input type="text" class="answer"><br><br><br><br>
</label>
<input type="button" value="SUMBIT" class="submit">
</form>
</td>
</tr>
</table>
</td>
</tr>
</table><br>
<footer>
<table>
<tr>
<th>
<h2 align="left" style="color: whitesmoke">Contact</h2>
<a href="https://www.facebook.com/andrew.oh.7" target="_blank">Facebook: Andrew Oh</a>
</th>
<th>
<h2 align="right" style="color: whitesmoke">Follow Me!</h2>
<a href="https://www.instagram.com/oh_andrew_oh/" target="_blank">Instagram: @oh_andrew_oh</a>
</th>
</tr>
</table>
</footer>
</body>
</html>
CSS
@font-face {
font-family: "MyFont";
src: url("orkney-regular.otf") format("opentype");
}
@font-face {
font-family: "Modern";
src: url("Modern\ Font.otf") format("opentype");
}
body{
font-family: MyFont;
background-color: #F0F3EF;
color: #F0F3EF;
}
#Nav{
background-color: rgb(147, 147, 147);
padding: 5px;
}
a{
text-decoration: none;
}
a{
color: rgb(255, 255, 255);
}
footer{
padding: 10px;
color: whitesmoke;
background-color: #35325E;
}
#cocacola{
width: 500px;
}
#title{
text-align: center;
animation: title 4s;
}
@keyframes title {
from{opacity: 0;}
to{opacity: 1;}
}
#table{
background-color: rgb(69, 69, 69);
border-radius: 50px;
width: 100%;
animation: main 2.5s;
}
@keyframes main {
0%{
transform: translateY(10%);
opacity: 0;
background-attachment: fixed;
}
40%{
transform: translateY(-3%);
}
60%{
transform: translateY(2%);
}
100%{
transform: translateY(0%);
opacity: 1;}
}
.choice{
padding: 20px;
}
h2{
color: white;
}
h3{
color: #768b9c;
}
.multiple-choice, .single-choice{
width: 1000px;
}
.submit{
width: 100px;
height: 50px;
border-radius: 30px;
border: none;
font-size: large;
color: black;
background-color: white;
transition: all 0.4s ease;
}
.submit:hover{
background-color: rgb(52, 52, 52);
color: white;
}
input{
border-radius: 5px;
border: none;
background-color: #35325E;
}
input:hover{
background-color: white;
}
.answer{
width: 300px;
height: 20px;
color: rgb(0, 0, 0);
}
.question{
color: #768b9c;
font-size: large;
}
header{
color: black;
animation: header 2s;
}
@keyframes header {
from{
transform: translateY(-30%);
}
to{
transform: translateY(0%);
}
}
.quiz{
background-color: #F0F3EF;
width: 240px;
height: 30px;
border-radius: 30px;
transition: ease 0.5s;
text-align: center;
color: black;
padding: 30px;
}
.quiz:hover{
background-color: #50616f;
color: white;
border-radius: 15px;
}
nav{
animation: nav 2s;
}
@keyframes nav {
from{
transform: translateX(100%);
opacity: 0;
}
to{
transform: translateX(0%);
opacity: 1;
}
}
