From 5a7e2ee6aefada04f960147f931be3b5dc8a89bc Mon Sep 17 00:00:00 2001
From: Anburaj G <anburaj.g@krds.fr>
Date: Wed, 13 Apr 2022 07:56:26 +0000
Subject: [PATCH] responsive view
---
stylesheet1.css | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 128 insertions(+)
create mode 100644 stylesheet1.css
diff --git a/stylesheet1.css b/stylesheet1.css
new file mode 100644
index 0000000..a78dba5
--- /dev/null
+++ b/stylesheet1.css
@@ -0,0 +1,128 @@
+*{
+ 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);
+ }
+}
--
libgit2 0.27.0