Finish main portion of main.css and video part 1. Works exactly as ex…

…pectedS
theunmanifested · Jun 22, 2019 · a2cd1ad · a2cd1ad
1 parent fca1a5c
commit a2cd1ad
Show file tree

Hide file tree

Showing 2 changed files with 168 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -139,7 +139,7 @@ <h6>View some of my work</h6>
             </div>
             <!--Portfolio Web Development-->
             <div class="portfolio-item">
-                <div class="portfolio-img">
+                <div class="portfolio-img has-margin-right">
                     <img src="w_images\portitem1.jpeg" alt="Walter with kids near a monument">
                 </div>
                 <div class="portfolio-description">
@@ -155,7 +155,7 @@ <h1>Blog Website</h1>
             </div>
             <!--Portfolio Web Design-->
             <div class="portfolio-item">
-                <div class="portfolio-description">
+                <div class="portfolio-description has-margin-right">
                     <!--Similiar to Svcs but more in detail-->
                     <h6>Web Design</h6>
                     <h1>Product Layout</h1>
@@ -172,7 +172,7 @@ <h1>Product Layout</h1>
             </div>
             <!--Portfolio Web Apps-->
             <div class="portfolio-item">
-                <div class="portfolio-img">
+                <div class="portfolio-img has-margin-right">
                     <img src="w_images\portitem3.jpeg" alt="Walter with kids near a monument">
                 </div>
                 <div class="portfolio-description">
@@ -254,9 +254,9 @@ <h6>Let's work together</h6>
     <!--Footer-->
     <footer class="copyright">
         <div class="up" id="up">
-            <i class="fas fa-chevron-up"></i>
-            <p>&copy; 2019 Walter S. Valdez</p>
+            <i class="fas fa-chevron-up"></i>            
         </div>
+        <p>&copy; 2019 Walter S. Valdez</p>
     </footer>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

diff --git a/main.css b/main.css
@@ -20,6 +20,10 @@ body{
     background-size: cover;
 }
 
+section{
+    padding: 6rem;
+}
+
 a{
     text-decoration: none;
     color: #eee;
@@ -46,7 +50,6 @@ img{
 
 .section-heading{
     text-align: center;
-    /* might be margin-bottom */
     margin-top: 10rem;    
 }
 
@@ -88,9 +91,9 @@ img{
 
 }
 
-/* .has-margin-right{
+.has-margin-right{
     margin-right: 5rem;
-} */
+}
 /*End reusable*/
 
 /*Start header*/
@@ -137,7 +140,7 @@ li{
     background: linear-gradient(to top, #ffe838, #fd57bf);
     -webkit-background-clip: text;
     /* In case of standardization of this property added standard property for future compatibility */
-    background-clip: text;
+    /* background-clip: text; */
     -webkit-text-fill-color: transparent;
 
 }
@@ -217,7 +220,7 @@ li{
     background: linear-gradient(to top, #ffe838, #fd57bf);
     -webkit-background-clip: text;
     /* In case of standardization of this property added standard property for future compatibility */
-    background-clip: text;
+    /* background-clip: text; */
     -webkit-text-fill-color: transparent;
     padding: 1rem;
     user-select: none;
@@ -338,32 +341,186 @@ li{
     margin-bottom: 0;
 }
 
-.profile-img{
+.portfolio-img{
     flex: 1;
 }
 
 .portfolio-description{
     flex: 1;
 }
 
+.portfolio-description h1{
+    font-size: 3rem;
+    font-weight: 300;
+    margin: 1rem;
+}
+
 .portfolio-description h6{
     font-size: 1.5rem;
     text-transform: uppercase;
     font-weight: 300;
     opacity: 0.3;
 }
+
+.portfolio-description .cta{
+    display: inline-block;
+    margin-top: 2.5rem;
+    font-size: 1.5rem;
+    text-transform: uppercase;
+    color: #3883ff;
+    transition: color 650ms;
+}
+
+.portfolio-description .cta:hover{
+    color: #2f67cd;
+}
 /*End services*/
 
 /*Start timeline*/
+.timeline ul{
+    border-left: 4px solid #ffe838;
+    border-radius: .8rem;
+    background-color: rgba(0,0,0,0.05);
+    margin: 0 auto;
+    position: relative;
+    padding: 5rem;
+    list-style: none;
+    text-align: left;
+    width: 70%;  
+}   
+
+.timeline h1{
+    font-size: 2rem;
+    text-transform: uppercase;
+    font-weight: 300;
+    margin-bottom: 1rem;
+    opacity: .3;    
+}
+
+.timeline .date{
+    border-bottom: 1px solid rgba(255,255,155, 0.1);
+    margin-bottom: 1rem;
+    padding-bottom:1rem;
+    position: relative;
+}
+
+.timeline .date:last-of-type{
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border: none;
+}
+
+.timeline .date::before,
+.timeline .date::after{
+    position: absolute;
+    display: block;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.timeline .date::before{
+    content: attr(data-date);
+    left: -21rem;
+    text-align: right;
+    min-width: 12rem;
+    font-size: 1.5rem;
+}
+
+.timeline .date::after{
+    content: '';
+    box-shadow: 0 0 0 4px #fd57bf;
+    border-radius: 100%;
+    left: -8rem;
+    height: 1.5rem;
+    width: 1.5rem;
+    background-color: #313534;
+}
 /*End timeline*/
 
 /*Start contact*/
+.contact{
+    background-color: #221e3f;
+}
+
+form{
+    width: 70%;
+    margin: 0 auto;
+}
+
+form label{
+    font-size: 1.5rem;
+}
+
+input,
+select,
+textarea{
+    width: 100%;
+    padding: 1rem;
+    margin-bottom: 5px;
+    border: none;
+    outline-color: #fd57bf;
+}
+
+input[type="submit"]{
+    width: initial;
+    background-color: #fd57bf;
+    color: #eee;
+    padding: 1rem 2rem;
+    border-radius: .8rem;
+    cursor: pointer;
+    transition: background-color 650ms;
+}
+
+input[type="submit"]:hover{   
+    color: #221e3f;
+    background-color: #ffe838;    
+}
 /*End contact*/
 
 /*Start footer*/
+.copyright{
+    width: 100%;
+    text-align: center;
+    background-color: #16162d;
+    padding: 2rem 0;
+    position: relative;
+}
+
+.up{
+    position: absolute;
+    width: 5rem;
+    height: 5rem;
+    background-color: #eee;
+    top: -2.5rem;
+    right: 5rem;
+    border-radius: 100%;
+    display: flex;
+    animation: pulse 2s infinite;
+}
+
+.up i{
+    color: #16162d;
+    font-size: 2rem;
+    margin: auto;
+}
+
+.copyright p{
+    font-size: 1.4rem;
+}
 /*End footer*/
 
 /*Start animations*/
+@keyframes pulse{
+    0%{
+        box-shadow: 0 0 0 0 rgba(253, 87, 191, 0.99);
+    }
+    70%{
+        box-shadow: 0 0 0 2rem rgba(253, 87, 191, 0);
+    }
+    100%{
+        box-shadow: 0 0 0 0 rgba(253, 87, 191, 0);
+    }
+}
 /*End animations*/
 
 /*Start media queries*/