fix

technojam · Oct 6, 2023 · 89316ab · 89316ab
1 parent f59e78b
commit 89316ab
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 48 deletions.
diff --git a/countries/src/next_page.css b/countries/src/next_page.css
@@ -1,7 +1,7 @@
 * {
     padding: 0;
     margin: 0;
-    background-color: hsl(207, 26%, 17%);
+    /* background-color: hsl(207, 26%, 17%); */
     background-color: hsl(0, 0%, 98%);
 }
 
@@ -10,33 +10,33 @@
     justify-content: space-between;
     align-items: center;
     padding: 30px 11%;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
 }
 
 .heading {
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     color: white;
     color: black;
     font-family: Nunito Sans;
 }
 
 .mode-container {
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     display: flex;
     align-items: center;
 }
 
 .night-mode {
     width: 15px;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
 }
 
 .mode {
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     padding: 0px 12px;
     color: #fff;
@@ -60,7 +60,7 @@
     color: white;
     color: black;
     border-radius: 5px;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
     box-shadow: 0px 0px 10px 0px black;
     font-family: Nunito Sans;
@@ -79,11 +79,7 @@
 
 
 
-.flag-container {
 
-    width: 500px;
-    overflow: hidden;
-}
 
 
 
@@ -126,7 +122,7 @@
 .footer>span {
     font-size: 13px;
     padding: 5px 30px;
-    background-color: hsl(209, 23%, 22%);
+    /* background-color: hsl(209, 23%, 22%); */
     background-color: hsl(0, 0%, 100%);
 }
 

diff --git a/countries/src/style.css b/countries/src/style.css
@@ -4,13 +4,13 @@
     padding: 0;
     margin: 0;
     background-color: var(--bgcolor);
-    background-color: hsl(207, 26%, 17%);
-    background-color: hsl(0, 0%, 98%);
+    /* background-color: hsl(207, 26%, 17%); */
+    /* background-color: hsl(0, 0%, 98%); */
 }
 
 
 .card-container {
-    background-color: hsl(207, 26%, 17%);
+    /* background-color: hsl(207, 26%, 17%); */
 
     background-color: var(--bgcolor);
     padding-top: 70px;
@@ -20,7 +20,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
 
-    background: hsl(0, 0%, 98%);
+    /* background: hsl(0, 0%, 98%); */
     height: 100vh;
     display: flex;
     flex-wrap: wrap;
@@ -34,11 +34,14 @@
     height: 400px;
 }
 
+.flag-container-details img{
+    width: 500px;
+}
 .card {
     margin: 50px 30px;
     margin-bottom: 50px ;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
     height: 300px;
     width: 250px;
     border-radius: 7px;
@@ -55,8 +58,7 @@
 
 
 
-.flag-container>img {
-    object-fit: cover;
+
 
 .flag-container>img {
 
@@ -65,34 +67,35 @@
 }
 
 .country-container {
-    color: white;
-    color: black;
+    color: rgb(0, 0, 0);
+
     font-family: Nunito Sans;
     padding: 10%;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+   border: 1px solid black;
+   border-radius: 5px;
+    /* background-color: hsl(0, 0%, 100%); */
     display: flex;
     flex-direction: column;
 }
 
 .country-container>h4 {
     padding-bottom: 10px;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 .country-container>span>strong {
     font-size: 13px;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
     padding-right: 10px;
 }
 
 .country-container>span {
     padding: 10px 0px;
     font-size: 13px;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 
@@ -104,13 +107,13 @@
     justify-content: space-between;
     align-items: center;
     padding: 30px 11%;
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 .heading {
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
     color: white;
     color: black;
     font-family: Nunito Sans;
@@ -121,8 +124,8 @@
 
     background-color: var(--bgcolor);
 
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 
     display: flex;
     align-items: center;
@@ -136,13 +139,13 @@
 
 .mode {
 
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 }
 
 .mode {
-    background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(209, 23%, 22%); */
+    /* background-color: hsl(0, 0%, 100%); */
 
     padding: 0px 12px;
     color: #fff;
@@ -167,7 +170,7 @@
     align-items: center;
     justify-content: center;
     background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
     padding: 10px;
     border-radius: 5px;
     /* background-color: var(--bgcolor); */
@@ -179,7 +182,7 @@
 
     background-color: var(--bgcolor);
 
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
 
 }
 
@@ -198,7 +201,7 @@
 
     background-color: var(--bgcolor);
 
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
 
     width: 300px;
     font-size: 15px;
@@ -209,17 +212,17 @@
 .dropdowncol{
     color: white;
     width: 150px;
-    position: relative;
+    position: relative;}
 
 #continentSelect {
     border: none;
     border-right: 10px solid hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
     padding: 15px 25px;
     width: 200px;
     height: 60px;
     background-color: hsl(209, 23%, 22%);
-    background-color: hsl(0, 0%, 100%);
+    /* background-color: hsl(0, 0%, 100%); */
     color: white;
     color: black;
 
@@ -310,7 +313,7 @@
         padding-right: 80px;
         justify-content: center;
     }
-=======
+
 
 
     .container-2 {
@@ -328,4 +331,4 @@
     }
 }
 
-/* Add more media queries for other screen sizes if necessary */
+}}