mobile view

Author: unknown

Mobileview.css

@@ -0,0 +1,122 @@
+@media (max-width:450px) {
+
+
+
+    .about,
+    .contact,
+    .projects {
+        width: 100vw;
+        height: 100vh;
+        flex-wrap: wrap;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+    }
+    .center{
+        height: 50%;
+        border:  5px solid green;
+    }
+    .about>.right{
+        border:  5px solid orange;
+    }
+    .about>.left{
+        border:  5px solid red;
+        gap:30%;
+    }
+
+    #section{
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        width: 100%;
+        border: 2px solid beige;
+    }
+    .section1{
+        font-size: 10px;
+    }
+    .section1>h1{
+        font-size: 10px;
+        font-style: italic;
+    }
+    .section2{
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+        flex-direction: row;
+        border: 1px solid ;
+    }
+    .section2>p{
+        font-size: 1px;
+    }
+
+    .section{
+        font-size: 10px;
+    }
+
+    
+    
+
+    .home {
+        height: 100vh;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        /* border: 5px solid rebeccapurple; */
+    }
+
+    .home .left {
+        margin-top: 120px;
+        width: 100%;
+        height: 40%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .home>.right {
+        width: 100%;
+        display: flex;
+        align-items: normal;
+        padding-top:20%;
+        justify-content: center;
+    }
+
+    .right>button {
+        margin: 10px;
+    }
+
+    .home>.left p {
+        font-size: large;
+
+    }
+    .Prcont {
+        grid-template-columns: auto;
+        grid-template-rows: auto;
+    }
+
+    nav {
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 10px;
+        position: fixed;
+    }
+
+    nav ul {
+        width: 100%;
+    }
+    .contact{
+        width: 100vw;
+        border: 5px solid blue;
+    }
+    .contact>.sect{
+        width: 100%;
+        
+    }
+
+    .sect>.content{
+        width: 100%;
+    }
+    
+}

Style.css

@@ -21,7 +21,7 @@ nav {
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     width: 80%;
-    height: 70px;
+    height: 10%;
     border: none;
     display: flex;
     justify-content: center;
@@ -31,12 +31,20 @@ nav {
     font-family: 'Poppins';
     position: fixed;
     top: 0;
-    z-index: 1000;
+    z-index: 3;
+}
+
+nav ul {
+    width: 60%;
+    display: flex;
+    justify-content: space-around;
+
 }
 
 a {
     text-decoration: none;
     color: white;
+
 }
 
 li {
@@ -50,7 +58,6 @@ li:hover {
 nav>ul {
     list-style: none;
     display: flex;
-    gap: 40px;
 }
 
 .icons {
@@ -72,7 +79,7 @@ nav>ul {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 50px;
+
 }
 
 
@@ -81,7 +88,7 @@ nav>ul {
     width: 50%;
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    align-items: center;
     transition: all 1s ease-in-out;
     animation: reveal 1s ease-in;
 }
@@ -103,9 +110,11 @@ nav>ul {
     font-family: monospace;
     font-size: x-large;
     color: white;
-    width: 300px;
+    width: 60%;
     height: 60px;
     border-radius: 10px;
+    font-weight: bolder;
+    letter-spacing: 2px;
     border: none;
     background-color: rgb(46, 139, 0);
     box-shadow: 0 0 20px rgb(46, 139, 0);
@@ -129,6 +138,7 @@ nav>ul {
     align-items: left;
     transition: all 1s ease-in-out;
     transition-delay: 3s;
+    padding: 20px;
 }
 
 
@@ -157,14 +167,13 @@ nav>ul {
 
 .about {
     position: relative;
-    height: 550px;
-    width: 100%;
+    height: 100vh;
     display: flex;
     color: white;
     font-family: 'Poppins', sans-serif;
-    padding-top: 80px;
+    padding-top: 5%;
     z-index: 1;
-    /* ensures content stays above the background */
+    flex-wrap: wrap;
 }
 
 .about::before {
@@ -266,7 +275,7 @@ nav>ul {
     flex-direction: column;
 }
 
-.about>.right>.section>h1 {
+/* .about>.right>.section>h1 {
     font-size: 30px;
 }
 
@@ -276,7 +285,7 @@ nav>ul {
 
 .about>.right>.section>p {
     font-size: smaller;
-}
+} */
 
 .about>.left>.section1>h1 {
     font-size: 30px;
@@ -295,45 +304,38 @@ nav>ul {
     font-size: 20px;
 }
 
-.right p {
+.about>.right p {
     font-family: 'Courier New', Courier, monospace;
 }
 
-.right b {
+.about>.right b {
     color: chartreuse;
 }
 
 /* Projects */
 
 .projects {
-    height: 700px;
-    display: flex;
-    justify-content: center;
-    padding-top: 80px;
+    height: 100vh;
+    width: 90vw;
 }
 
 .projects>.Prcont {
-    height: 70%;
-    display: grid;
-    grid-template-columns: 250px 250px 250px;
-    grid-row: 200px;
-    gap: 30px;
-    padding: 10px;
-    padding-left: 30px;
+    display: flex;
+    height: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .projects>.Prcont>.box {
+    height: 40%;
+    width: 30%;
     border: 1px solid silver;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: black;
-    font-family: 'Poppins';
-    letter-spacing: 1px;
     border: 2px solid;
     border-color: rgb(66, 66, 66);
-    font-weight: bold;
-    font-size: small;
     background-position: center;
     border-radius: 20px;
 }
@@ -488,19 +490,19 @@ footer {
     gap: 10px;
 }
 
-.name input{
+.name input {
     height: 30px;
     width: 100%;
     border: none;
     outline: none;
     border-radius: 15px;
     padding: 10px;
     background-color: #ccc;
-    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
+    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);
     transition: 300ms ease-in-out;
 }
 
-.email>input{
+.email>input {
     height: 30px;
     width: 100%;
     gap: 10px;
@@ -509,10 +511,11 @@ footer {
     border-radius: 15px;
     padding: 1em;
     background-color: #ccc;
-    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
+    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);
     transition: 300ms ease-in-out;
 }
-.phNo>input{
+
+.phNo>input {
     height: 30px;
     width: 100%;
     gap: 10px;
@@ -521,25 +524,27 @@ footer {
     border-radius: 15px;
     padding: 1em;
     background-color: #ccc;
-    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
+    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);
     transition: 300ms ease-in-out;
 }
 
 .message {
     display: flex;
     flex-direction: column;
 }
-.message>textarea{
+
+.message>textarea {
     height: 70px;
     width: 100%;
     border: none;
     outline: none;
     border-radius: 15px;
     padding: 1em;
     background-color: #ccc;
-    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
+    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);
     transition: 300ms ease-in-out;
 }
+
 .but {
     display: flex;
     justify-content: center;
@@ -550,7 +555,7 @@ footer {
     height: 40px;
     width: 30%;
     border: none;
-    border-radius:5px;
+    border-radius: 5px;
     background-color: rgba(6, 119, 249);
     font-weight: bolder;
     font-size: large;
@@ -559,15 +564,17 @@ footer {
 
 }
 
-.but>button:hover{
+.but>button:hover {
     background-color: rgba(6, 119, 249, 0.6);
 }
 
-.content input:focus,textarea:focus{
+.content input:focus,
+textarea:focus {
     opacity: 0.8;
     transform: scale(1.1) scale(1.1);
 }
 
-.name input:focus{
+.name input:focus {
     transform: translateY(10px);
 }
+