Skip to content

Commit

Permalink
styling added
Browse files Browse the repository at this point in the history
  • Loading branch information
@soniya-malviy
soniya-malviy committed Sep 3, 2024
1 parent 8822e30 commit 7459629
Show file tree
Hide file tree
Showing 3 changed files with 1,639 additions and 74 deletions.
226 changes: 187 additions & 39 deletions index.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand All @@ -103,58 +163,90 @@ 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 {
padding: 0.5rem 1rem;
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 {
Expand All @@ -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 {
Expand Down
Loading

0 comments on commit 7459629

Please sign in to comment.