Aland islands
-Capital: Mariehamn
-Region: Europe
- -Aland islands
+Capital: Mariehamn
+Region: Europe
+diff --git a/index.css b/index.css index 8332010..e37f482 100644 --- a/index.css +++ b/index.css @@ -1,51 +1,101 @@ -/* Reset some default styles */ +/* Basic reset and styles */ * { margin: 0; padding: 0; box-sizing: border-box; } -/* Basic styling for the body */ body { - font-family: Arial, sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f4; color: #333; } -/* Header styling */ -header { - background-color: #333; - color: #fff; - padding: 1rem; -} -nav { +header { + background-color: #2c3e50; + color: #ecf0f1; + padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; + max-width: 100%; + margin: 0 auto; + position: relative; } + nav h3 { margin: 0; + font-size: 1.5rem; + font-weight: 700; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + color: #ecf0f1; } +/* Favourite button styling */ .favourite-button { cursor: pointer; + background: none; + border: none; + color: #ecf0f1; + font-size: 1.5rem; + transition: color 0.3s ease; + position: absolute; + top: 50%; + right: 1rem; + transform: translateY(-50%); } -.favourite-button i { - font-size: 1.5rem; +.favourite-button:hover { + color: #e74c3c; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + nav h3 { + font-size: 1.2rem; + } + + .favourite-button { + font-size: 1.2rem; + right: 0.5rem; + } } -/* Outer favourite section */ + +/* Intro text styling */ +.intro-text { + margin: 1rem auto; + padding: 1.5rem; + background-image: url("https://png.pngtree.com/thumb_back/fh260/background/20200205/pngtree-3d-world-map-with-shadow-light-image_329158.jpg"); + background-size: cover; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 800px; + text-align: center; + font-weight: bold; +} + +.intro-text p { + margin: 0; + font-size: 1.1rem; + color: #333; + line-height: 1.6; + padding: 0.5rem 0; +} + +/* Favourite section */ .outer-of-favourite { padding: 1rem; background-color: #fff; border-bottom: 2px solid #ddd; + margin-bottom: 1rem; } .outer-of-favourite h2 { margin-bottom: 0.5rem; + color: #333; } .favourite-section { @@ -56,45 +106,55 @@ nav h3 { /* Main display section */ .main-display { display: flex; - flex-wrap: wrap; + flex-direction: column; padding: 1rem; - gap: 1rem; } -/* Filter section styling */ .filter-section { - flex: 1; background-color: #fff; padding: 1rem; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-bottom: 1rem; } +/* Search and filter section */ .search-section { - margin-bottom: 1rem; display: flex; - flex-direction: column; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; } .search-box { - width: 100%; - padding: 0.5rem; + width: 200px; + padding: 0.75rem; border: 1px solid #ddd; - border-radius: 5px; + border-radius: 8px; + font-size: 1rem; + color: #333; + transition: border-color 0.3s ease; +} + +.search-box:focus { + border-color: #007bff; + outline: none; } .searching { - padding: 0.5rem 1rem; + padding: 0.75rem 1rem; border: none; background-color: #333; color: #fff; - border-radius: 5px; + border-radius: 8px; cursor: pointer; - margin-top: 0.5rem; + font-size: 1rem; + text-align: center; + transition: background-color 0.3s ease; } .searching:hover { - background-color: #555; + background-color: dimgrey; } .filter-options { @@ -103,45 +163,75 @@ nav h3 { .filter-options p { margin-bottom: 0.5rem; + font-size: 1rem; + color: #333; } .region-list { - width: 100%; - padding: 0.5rem; + width: 200px; + padding: 0.75rem; border: 1px solid #ddd; - border-radius: 5px; + border-radius: 8px; + font-size: 1rem; + color: #333; + background-color: #fff; + transition: border-color 0.3s ease; +} + +.region-list:focus { + border-color: #007bff; + outline: none; } /* Country template styling */ #countries-tempelate { - flex: 3; display: flex; flex-wrap: wrap; gap: 1rem; + /*margin-bottom: 1rem;*/ + justify-content: space-between; + margin-top: 2rem; + padding: 1rem; + /*background-image: url("https://media.istockphoto.com/id/165069637/vector/world-map-background.jpg?s=612x612&w=0&k=20&c=g3jg9LoiNolN4HcZD5qjW9W7xidB4nrNPBsmujW4NFY=");*/ + background-size: cover; } .country-name { background-color: #fff; - border-radius: 5px; - padding: 1rem; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; + padding: 2rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; - width: calc(33.333% - 1rem); + width: calc(25% - 0.75rem); /* Adjust width to make the div smaller */ box-sizing: border-box; + /*background-image: url("https://static.vecteezy.com/system/resources/previews/000/570/755/non_2x/vector-political-paper-map-of-the-world-on-a-gray-background-paper-art-world-map.jpg");*/ + background-size: cover; + + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.country-name:hover { + transform: scale(1.03); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .country-name img { max-width: 100%; height: auto; - border-radius: 5px; + border-radius: 8px; + margin-bottom: 0.5rem; } .country-name h3 { margin: 0.5rem 0; + font-size: 1.25rem; + color: #333; } .country-name p { margin: 0.25rem 0; + font-size: 1rem; + color: #666; } .country-name button { @@ -149,12 +239,14 @@ nav h3 { border: none; background-color: #333; color: #fff; - border-radius: 5px; + border-radius: 8px; cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s ease; } .country-name button:hover { - background-color: #555; + background-color: dimgrey; } .noMatchFound { @@ -167,6 +259,62 @@ nav h3 { height: 100%; } +/* Detailed View */ +.country-details { + display: none; + background-color: #fff; + border-radius: 8px; + padding: 1.5rem; + margin: 1.5rem 0; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + position: absolute; + max-width: 400px; + z-index: 1000; +} + +.country-details img { + max-width: 150px; + height: auto; + border-radius: 8px; +} + +.country-details h2 { + margin-top: 0; + font-size: 1.5rem; +} + +.country-details p { + margin: 0.5rem 0; + font-size: 1rem; +} + +/* Map */ +#map { + height: 300px; + width: 100%; + border-radius: 8px; + margin-top: 1.5rem; +} + +/* Buttons */ +.button { + padding: 0.75rem 1.5rem; + border: none; + background-color: #007bff; + color: #fff; + border-radius: 8px; + cursor: pointer; + text-align: center; + display: inline-block; + text-decoration: none; + font-size: 1rem; + transition: background-color 0.3s ease; +} + +.button:hover { + background-color: #0056b3; +} + /* Responsive Design */ @media (max-width: 768px) { .main-display { diff --git a/index.html b/index.html index 616300e..f93b107 100644 --- a/index.html +++ b/index.html @@ -8,43 +8,59 @@
-" Explore essential details about countries from around the world. Find out about their major cities, cultural heritage, and key statistics that offer a glimpse into what makes each country unique. "
+Capital: Mariehamn
-Region: Europe
- -Capital: Mariehamn
+Region: Europe
+