Update style.css

Shaunish123 · Jul 20, 2024 · e9ff59b · e9ff59b
1 parent 19f4644
commit e9ff59b
Showing 1 changed file with 196 additions and 0 deletions.
diff --git a/style.css b/style.css
@@ -127,6 +127,7 @@ body{
 #my-work{
     display: flex;
     flex-direction: column;
+    margin-bottom: 10%;
     height: 170vh;
     background: linear-gradient(210deg, #f6fb7a, #BA6CD6);
     background-size: 400% 400%;
@@ -285,3 +286,198 @@ footer{
     50%{background-position:50% 100%}
     100%{background-position:50% 0%}
 }
+
+@media (max-width: 360px) {
+
+    .background{
+        width: 100%;
+    }
+
+    .heading-text{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position:absolute;
+        font-family: 'Karla', sans-serif;
+        font-weight: 700;
+        font-size: 3.5rem;
+        text-transform: uppercase;
+        word-spacing: 0.1rem;
+        color:indigo;
+        height: 100vh;
+        align-items: center;
+        text-align: center;
+        left: 20%;
+        font-size: 1.1rem;
+    }
+
+    .heading-text>p{
+        font-size: 1rem;
+        text-align: center;
+    }
+
+    #About-me{
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 140vh;
+    }
+
+
+    .myimg{
+        height: 9rem;
+        width: 9rem;
+    }
+
+    #description{
+        width: 50%;
+    }
+
+    #description h2{
+      font-size: 2rem;
+      padding-bottom: 1rem;
+      text-align: center;
+    }
+
+    #description p{
+        font-size: 1rem;
+        line-height: 1.2rem;
+        text-align: center;
+    }
+
+    #Credentials{
+        width: 100%;
+        height: 120vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    #header{
+        font-size: 25px;
+        text-align: center;
+    }
+    #content hr{
+        border: 2px dotted white;
+    }
+
+    #content ul{
+        margin-bottom: 30px;
+    }
+
+    #content h3{
+        margin-top: 30px;
+        font-size: 120%;
+    }
+
+    #content{
+        width: 80%;
+        font-size: 100%;
+    }
+
+    #my-work{
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10%;
+        height: 380vh;
+    }
+
+    #title{
+        text-align: center;
+        font-family: 'Karla', sans-serif;
+        font-weight: 700;
+        font-size: 2rem;
+        padding: 20px;
+    }
+
+    #title h3{
+        font-family: 'Martel', serif;
+        font-weight: 800;
+        font-size: 15px;
+        letter-spacing: 2px;
+    }
+
+
+     .projects{
+        font-family: 'Martel', serif;
+        font-weight: 400;
+        font-size: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+
+    .projects>div{
+        display: flex;
+        flex-direction: column;
+        width: 70%;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        font-size: 15px;
+    }
+
+
+    .projects img{
+        border: 5px dotted white;
+        width: 80%;
+        height: 110px;
+        margin-right: 20px ;
+        align-self: center;
+    }
+
+
+    .Project-heading {
+        text-align: center;
+        font-size: 20px;
+    }
+
+    #Contact{
+        font-size: 2rem;
+    }
+
+    #Contact a{
+        font-size: 1rem;
+        color: #252521;
+        text-decoration: none;
+    }
+
+    #links{
+        background-color: #EECEB9;
+        color: white;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        height: 10vh;
+        align-items: center;
+        font-size: 15px;
+    }
+
+    #links li{
+        display: flex;
+        text-align: center;
+        list-style: none;
+        padding-left: 80px;
+        padding-right: 80px;
+    }
+
+    #links>ul>li>a{
+        text-decoration: none;
+        color: green;
+    }
+
+    footer{
+        color: black;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        height: 5vh;
+        align-items: center;
+        margin-bottom: 0%;
+        font-family: "Crimson Text", serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 13px;
+    }
+}