Skip to content

Commit

Permalink
Add Style for the country info section
Browse files Browse the repository at this point in the history
- Add the style for the info that is going to get display on like the
  country name and other info
i-Bex authored and i-Bex committed Apr 30, 2024
1 parent 17f659c commit 64619c0
Showing 1 changed file with 52 additions and 0 deletions.
52 changes: 52 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -168,6 +168,58 @@ body {
appearance:none;
}

.main__countries {
padding:1rem 3rem;
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto;
justify-items:center;
}

.countries__info {
width:100%;
color:var(--Element-text-clr);
display:flex;
flex-direction:column;
border-radius:10px;
border-radius:10px;
background-color:var(--Element-bg);
}

.countries__info__flag {
/* padding-bottom:; */
height:100%;
width:100%;
object-fit:cover;
border-radius:10px 10px 0px 0px;
}

.countries__info__name {
color:var(--Element-text-clr);
padding:1rem;
font-family:var(--Main-font);
font-size:1rem;
font-weight:800;
text-align:start;
text-transform:capitalize;
border:none;
background-color: transparent;
}

.countries__info__stats {
padding:1rem;
margin-bottom:2rem;
font-size:0.875rem;
font-family:var(--Main-font);
font-weight:500;
list-style-type:none;
text-transform:capitalize;
}

.stats__value__name {
font-weight:700;
}

@media screen and (min-width:81.25rem) {
.main__header {
flex-direction:row;

0 comments on commit 64619c0

Please sign in to comment.