Skip to content

Commit

Permalink
Updated
Browse files Browse the repository at this point in the history
  • Loading branch information
soniya-malviy authored May 2, 2024
1 parent 8f1848f commit 05270b5
Show file tree
Hide file tree
Showing 3 changed files with 1,224 additions and 0 deletions.
117 changes: 117 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
header{
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
padding-inline: 24px;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
nav h3{
margin-left: 10px;
}
nav{
display: flex;
justify-content: space-between;
}
nav i{
font-size: 25px;
margin: 10px 5px 0px 0px;
}
nav i:hover{
cursor: pointer ;
}
.main-display{
/* padding-bottom: 30px; */
background-color: #F3F7F6;
height: 100%;
margin: 0px;
}
.filter-section{
display: flex;
justify-content: space-between;
}
.search-section{
margin: 18px 0 0 25px;
}
.filter-options p{
font-size: 15px;
margin: 12px 20px 4px 0;
}
select{
width: 100px;
height: 25px;
margin-left: 5px;
}
#countries-tempelate{
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 10px;

}

.country-name{
min-height: 230px;
width: 160px;
background-color: rgb(255, 255, 255);
text-align: center;
box-shadow: 1px 1px 10px #8e8e8e;
margin: 9px;
border-radius: 4px;
padding: 8px;
}
.country-name img{
width: 100%;
border-radius: 2px 2px 0px 0px;

}
.country-name button{
height: 17px;
width: 50px;
font-size: 10px;
padding: 1px;
/* margin-top: -1px; */
}
.country-name button:hover{
cursor: pointer;
}
.country-name h3{
font-size: 16px;
margin: 12px 0 12px 0;
}
.country-name p{
font-size: 14px;
margin-top: 9px;
word-wrap: break-word;
}
#sample{
display: none;
}
.favourite-section{
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 20px;
}
.outer-of-favourite{
text-align: center;
display: none;
margin: 10px;
height: 100%;
padding-top: 10px;
background-color: rgb(255, 244, 252);
}
.favourite-section h3{
color: grey;
margin-top: 10px;
display: none;
}
.outer-of-favourite h2{
font-size: 25px;
}
.noMatchFound{
color: grey;
font-size: 40px;
font-weight: 700;
}
50 changes: 50 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<nav>
<h3>Where in the world?</h3>
<div class="favourite-button">
<i class="fa-regular fa-heart"></i>
</div>
</nav>
</header>
<div class="outer-of-favourite">
<h2>Favourites</h2>
<div class="favourite-section">
<h3>˙◠˙ Nothing in your Favourites !!</h3>
</div>
</div>
<div class="main-display">
<div class="filter-section">
<div class="search-section">
<input class="search-box" name="search">
<button class="searching">Search</button>
</div>
<div class="filter-options">
<p>Filter by Region</p>
<select class="region-list" name="region">
</select>
</div>
</div>
<div id="countries-tempelate">
<div class="noMatchFound">No Match Found!</div>
<div class="country-name" id="sample">
<img src='https://d3dyfaf3iutrxo.cloudfront.net/general/upload/8a03a3ef41ee48efb9d97990d224b35a.svg'>
<h3>Aland islands</h3>
<p>Capital: Mariehamn </p>
<p>Region: Europe</p>
<button>Favourite</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Loading

0 comments on commit 05270b5

Please sign in to comment.