Calculator Tools Calculator Tools
Create

USSR Countries Information

Dec 23, 2023

About this app

Explore information about the countries of the USSR.

USSR Countries Information

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>USSR Countries Information</title>
<meta name="description" content="Explore information about the countries of the USSR.">
<meta name="keywords" content="USSR, countries, information">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
const countries = [
{
name: "Russia",
description: "Russia, the largest country in the world, spans over two continents and is known for its rich history and diverse culture.",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Russia.svg/1280px-Flag_of_Russia.svg.png"
},
{
name: "Ukraine",
description: "Ukraine is a country in Eastern Europe known for its beautiful landscapes, historical sites, and delicious cuisine.",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Flag_of_Ukraine.svg/1280px-Flag_of_Ukraine.svg.png"
},
{
name: "Belarus",
description: "Belarus, also known as the 'Lungs of Europe', is a landlocked country in Eastern Europe with a rich cultural heritage.",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/1280px-Flag_of_Belarus.svg.png"
},
{
name: "Kazakhstan",
description: "Kazakhstan is the largest landlocked country in the world and is known for its vast steppes, beautiful mountains, and rich cultural heritage.",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Flag_of_Kazakhstan.svg/1280px-Flag_of_Kazakhstan.svg.png"
},
{
name: "Armenia",
description: "Armenia, a small landlocked country in the South Caucasus region, is known for its ancient history, rich culture, and stunning landscapes.",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Flag_of_Armenia.svg/1280px-Flag_of_Armenia.svg.png"
},
{
name: "Georgia",
description: "Georgia, located on the crossroads of Europe and Asia, is known for its breathtaking landscapes, vibrant culture, and delicious cuisine.",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Flag_of_Georgia.svg/1280px-Flag_of_Georgia.svg.png"
}
];

function createCountryCard(country) {
const card = document.createElement("div");
card.classList.add("card");
card.style.width = "18rem";

const image = document.createElement("img");
image.src = country.image;
image.classList.add("card-img-top");
image.alt = country.name;

const cardBody = document.createElement("div");
cardBody.classList.add("card-body");

const title = document.createElement("h5");
title.classList.add("card-title");
title.textContent = country.name;

const description = document.createElement("p");
description.classList.add("card-text");
description.textContent = country.description;

cardBody.appendChild(title);
cardBody.appendChild(description);

card.appendChild(image);
card.appendChild(cardBody);

return card;
}

const container = document.getElementById("main-container");

countries.forEach(country => {
const countryCard = createCountryCard(country);
container.appendChild(countryCard);
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
body {
background-color: #f8f9fa;
font-family: 'Roboto', sans-serif;
color: #333;
}

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.card {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
background-color: #fff;
transition: all 0.3s ease;
}

.card:hover {
transform: scale(1.05);
}

.card-img-top {
object-fit: cover;
height: 200px;
}

.card-title {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 10px;
}

.card-text {
font-size: 1rem;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
</div>
</body>
</html>