responsive view

stylesheet1.css

+*{
+    margin: 0px;
+    padding:0px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+
+body{
+    padding: 0px;
+    margin: 0px;
+    font-family: Arial, Helvetica, sans-serif;
+    width: 100%;
+    min-height: 100vh;
+   
+   
+}
+
+.container{
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    width: 100%;
+    
+}
+
+.card{
+    display:flex;
+  
+}
+nav>img{
+    max-width: 50%;
+    margin: 60% 20% 3% 9%
+    
+}
+nav>h3{
+    color:white;
+    font-size:14px;
+    line-height: 1.5rem;
+}
+
+nav >hr {
+    border: 1px solid white;
+    
+}
+nav>p{
+    color:white;
+    opacity: 0.5;
+    text-transform: uppercase;
+    font-size: 9px;
+    margin:1% 2% 3% 2%
+}
+
+main>img{ 
+    max-width:90%;
+    margin: 1% 5% 2% 10%;
+}
+
+
+
+
+
+.card:nth-child(1){
+    background-color:rgb(65,202,110);
+    padding:20% 5% 1% 20%;
+   
+    
+   
+   } 
+
+.card:nth-child(2){
+  
+  background-color: rgb(250,177,83);
+  padding:20% 15% 1% 30%;
+}
+
+.card:nth-child(3){
+    background-color:rgb(114,119,213);
+    padding:13% 15% 1% 15%;
+}
+
+.card:nth-child(4){
+    background-color:rgb(248,125,81);
+    padding:15% 10% 1% 15%;;
+   
+}
+
+.card:nth-child(5){
+    background-color:rgb(237,84,102); 
+    padding:15% 10% 1% 15%;   
+}
+.card:nth-child(6){
+    background-color:rgb(78,194,231);
+    padding:15% 10% 0% 9%;
+}
+
+ 
+@media(min-width:320px) and (max-width:768px) {
+    .container{
+        display: grid;
+        grid-template-columns:repeat(1,1fr);
+        min-height: 100vh;
+    } 
+    .card{
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+    }
+   main>img{
+       align-items: center;
+   }
+
+
+
+}
+
+@media(min-width:768px){
+    .container{
+        display: grid;
+        grid-template-columns:repeat(2,1fr)
+    }
+   
+} 
+
+@media(min-width:1100px){
+    .container{
+        display: grid;
+        grid-template-columns:repeat(3,1fr);
+    }
+}