Update Shepar-photography1.css

tranthanhvi · Dec 15, 2021 · b18c099 · b18c099
1 parent 1b88cb9
commit b18c099
Showing 1 changed file with 93 additions and 82 deletions.
diff --git a/Shepar-photography1.css b/Shepar-photography1.css
@@ -1,5 +1,10 @@
 
 /*COMMON FEATURES BETWEEN PAGES*/
+.mutual-title{
+    font-family: lucida handwriting;
+    padding: 40px 50px;
+    display:inline-block;
+}
 a:hover{
     color:lightgrey;
 }
@@ -17,6 +22,7 @@ a:hover{
 .home-button>a:hover{
     color:lightgrey;
 }
+    /*Project pictures*/
 .project-flex-container{
     display: flex;
     flex-direction: row;
@@ -31,21 +37,31 @@ a:hover{
     font-size: 26px;
     justify-content: center;
 }
-.project-picture-1, .project-picture-2 {
+.project-picture-1>img{
+    padding: 20px 20px;
+    margin:0 30px;
+    width: 750px;
+}
+.project-picture-2>img{
     padding: 20px 20px;
     margin:0 30px;
+    width: 550px;
 }
 .project-picture-single{
     text-align: center;
     margin: 40px 30px;
     padding: 30px;
 }
+.project-picture-single>img{
+    width: 750px;
+}   /*Project-page-nav*/
 .nav-projectbt-container{
     display: flex;
     margin:0;
     justify-content: center;
     padding: 0 30px;
     max-width: 100%;
+    flex-direction: row;
 }
 .nav-projectbt-item{
     font-size: 35px;
@@ -60,16 +76,24 @@ color:lightgrey;
 
 }
 .left{
-  justify-content: left;
-  padding:45px 500px 45px 90px;
+    position: relative;
+    width: 200px;
+    padding:30px 400px 30px 80px;
 }
 .right{
-    text-align: right;
-    padding:45px 90px 45px 500px;
+    position: relative;
+    width: 200px;
+    padding:30px 80px 30px 400px;
 }
 .main{
     padding:20px 120px;
 }
+
+.nav-projectbt-item>a:hover{
+color:lightgrey;
+
+}
+
 /*Navigation section*/
 .nav {
     display: flex;
@@ -165,6 +189,37 @@ color: black;
 
 }
 
+/*Project section*/
+.flex-container{
+    display:flex;
+    justify-content: center;
+    flex-direction: row;
+    max-width: 100%;
+    margin: 0;
+}
+.flex-item{
+
+    padding: 20px 40px;
+    margin: 0;
+}
+.link-flex{
+    text-decoration: none;
+    color: black;
+    font-size: 30px;
+    font-family: sans-serif;
+}
+a:hover{
+    color:lightgrey;
+}
+
+
+.bottom-title-test{
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+
 /*Footer*/ 
 .contact-symbol {
     width: 20px;
@@ -173,56 +228,38 @@ color: black;
     display: flex;
     justify-content: center;
 }
-
-.contact-container {
-    padding-bottom: 40px;
-    text-align: center;
-    font-family: sans-serif;
-}
 .validator-icon{
     border-width: 1px;
     border-style: solid none none none;
     padding: 15px 0;
     text-align: center;
 }
+.contact-table{
+    margin:auto;
+    width: 20%;
+    padding: 15px 0;
+}
+.contact-table>h3{
+    font-size: 30px;
+    margin: 0;
+    padding-bottom: 10px;
+
+}
 
 /*About page*/
 
-.about-content{
-    font-family: sans-serif;
+.background-info{
+    font-family: 'Lucida Sans';
     color: black;
 }
-.about-flex-container{
-    margin: 30px 0;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    flex: 50% 50%;
-}
-.about-flex-container-item{
-    margin:0;
-    padding: 50px 100px;
-    background-color: grey;
-    font-size: 26px;
-
-}
-.shepaar-portrait{
-    background-color: darkgrey;
-}
-.mutual-title{
-    font-family: lucida handwriting;
-    padding: 40px 50px;
-    display:inline-block;
-}
 
-/*Grid layout for About.html*/
+
+    /*Grid layout for About.html*/
         .portrait{ grid-area: pic; }
         .title-name { grid-area: title; }
         .background-info { grid-area: content; }
         .contact-info { grid-area: contact; }
 
-
-
         .grid-container {
             display: grid;
             grid-template-areas:
@@ -233,53 +270,16 @@ color: black;
             grid-gap: 0;
             padding: 40px 40px;
           }
-              /*Draft css from w3s*/
-              .grid-container > div {
+        .grid-container > div {
                 text-align: center;
                 padding: 30px 50px;
                 font-size: 30px;
               }
-        /*Css for content-pic section*/
-            .portrait{
-                padding: 30px 50px;
-            }
-            .title-name{
-            }
-            .background-info{
-                padding: 30px 50px;
-            }
-            .contact-info{
-
-            }
-/*Project section*/
-.flex-container{
-    display:flex;
-    justify-content: center;
-    flex-direction: row;
-    max-width: 100%;
-    margin: 0;
-}
-.flex-item{
-
-    padding: 20px 40px;
-    margin: 0;
-}
-.link-flex{
-    text-decoration: none;
-    color: black;
-    font-size: 30px;
-    font-family: sans-serif;
-}
-a:hover{
-    color:lightgrey;
-}
-
-
-.bottom-title-test{
-    position: absolute;
-    bottom: 20px;
-    left: 20px;
-}
+    /*Flex for grid layout*/
+              .flex-container-about{
+                  display: flex;
+                  flex-direction: row;
+              }
 
 
 /*Ipad Pro*/
@@ -291,6 +291,10 @@ a:hover{
     .nav-pc{
         display: none;
     }
+    .flex-container-about{
+        flex-direction: column;
+    }
+}
     }
 /*Small tablet-mobile phone*/
 @media (min-width: 320px) and (max-width: 799px){
@@ -303,8 +307,15 @@ a:hover{
     .flex-container, .about-flex-container, .project-flex-container{
         flex-direction: column;
     }
+    .project-pic-flex{
+        display: fixed;
+        width: 550px;
+    }
+    .flex-container-about{
+        flex-direction: column;
+    }
 }
-
+/*Transition for the small-screen nav*/
 @keyframes fadeIn {
     from {
         opacity: 0;