Content changes

Author: samlopez-dev

index.html

@@ -12,7 +12,6 @@
         <ul class="nav">
           <li class="name">Samuel Lopez</li>
           <li><a href="#">Home</a></li>
-          <li><a href="#">Experience</a></li>
         </ul>
     </div>
 
@@ -25,21 +24,22 @@ <h1 class="tag name">Hello, I’m Samuel.</h1>
     <main class="flex">
       <div class="card">
         <h2>Background</h2>
-        <p>I’m an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic looking websites.</p>
-        <p>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</p>
+        <p>I’m an aspiring front-end web developer who loves everything about the web. I'm very excited to start my web developmet journey. I have a passion for simple, clean, and minimalistc design.</p>
+        <p>I've been working as an IT professional for about 8 years now. Looking forward to bring my computer skills into practice to make my programming learning experience a better experience. </p>
       </div> 
 
       <div class="card">
         <h2>Goals</h2>
-        <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
+        <p>I hope to learn an master the tools neccesary to build beautiful and functional websites for the world.</p>
+        <p>Some of my favorites languages are:</p>
         <ul class="skills">
           <li>HTML</li>
           <li>CSS</li>
-          <li>JavaScript</li>
+          <li>JavaScript</li>  
           <li>Ruby</li>
           <li>Rails</li>
         </ul>
-        <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
+        <p>I’d like to switch carreers and work for a web design firm or become a freelancer to help clients create an impressive online presence.</p>
       </div> 
 
     </main>

styles.css

@@ -6,16 +6,16 @@
 body {
   margin: 0;
   padding: 0;
+  background: #f7f5f0;
+  color: #222;
   text-align: center;
   font-family: 'Roboto', sans-serif;
-  color: #222;
-  background: #f7f5f0;
 }
 /* Link Styles */
 
 a {
-  text-decoration: none;
   color: #999;
+  text-decoration: none;
 }
 a:hover {
   color: #6633ff;
@@ -24,20 +24,21 @@ a:hover {
 /* Section Styles */
 
 .main-nav {
+  position: fixed;
+  padding: 10px;
+  min-height: 30px;
   width: 100%;
   background: black;
-  min-height: 30px;
-  padding: 10px;
-  position: fixed;
   text-align: center;
 }
 .nav {
   display: flex;
-  justify-content: space-around;
-  font-weight: 700;
-  list-style-type: none;
   margin: 0 auto;
   padding: 0;
+  list-style-type: none;
+  font-weight: 700;
+
+  justify-content: space-around;
 }
 
 .nav .name {
@@ -56,11 +57,11 @@ a:hover {
 }
 
 header {
-  text-align: center;
-  background: url('images/orange.jpeg') no-repeat top center ;
-  background-size: cover;
   overflow: hidden;
   padding-top: 60px;
+  background: url('images/orange.jpeg') no-repeat top center ;
+  background-size: cover;
+  text-align: center;
 }
 header {
   line-height: 1.5;
@@ -69,20 +70,22 @@ header .profile-image {
   margin-top: 50px;
   width: 150px;
   height: 150px;
-  border-radius: 50%;
   border: 3px solid white;
+  border-radius: 50%;
+  opacity: 0.8;
   transition: all .5s;
 }
 header .profile-image:hover {
+  opacity: 1;    
   transform: scale(1.2) rotate(5deg);
 }
 .tag {
-  background-color: #efefef;
-  color: black;
-  padding: 10px;
-  border-radius: 5px;
   display: table;
   margin: 10px auto;
+  padding: 10px;
+  border-radius: 5px;
+  background-color: #efefef;
+  color: black;
 } 
 .location {
   background-color: #222;
@@ -92,10 +95,10 @@ header .profile-image:hover {
   margin: 30px;
   padding: 20px 40px 40px;
   max-width: 500px;
-  text-align: left;
-  background: #fff;
   border-bottom: 4px solid #ccc;
   border-radius: 6px;
+  background: #fff;
+  text-align: left;
   transition: all .5s;
 }
 .card:hover {
@@ -108,41 +111,44 @@ ul.skills {
 }
 
 .skills li {
-  border-radius: 6px;
   display: inline-block;
+  margin: 2px;
+  padding: 5px 10px;
+  border-radius: 6px;
   background: sandybrown;
   color: white;
-  padding: 5px 10px;
-  margin: 2px;
 }
 
 .skills li:nth-child(odd) {
   background: #0399ff;
 }
 
 footer {
-  width: 100%;
-  min-height: 30px;
   padding: 20px 0 40px 20px;
+  min-height: 30px;
+  width: 100%;
 }
 
 footer ul {
-  list-style-type: none;
   margin: 0;
   padding: 0;
+  list-style-type: none;
 }
+    footer .copyright {
+      top: -8px;
+      font-size: .75em;
+    }
 
 footer ul li {
   display: inline-block;
 }
-
 a.social {
   display: inline-block;
-  text-indent: -9999px;
   margin-left: 5px;
   width: 30px;
   height: 30px;
   background-size: 30px 30px;
+  text-indent: -9999px;
   opacity: .4;
   transition: all .5s;
 }
@@ -162,30 +168,26 @@ a.social:hover {
   clear: both;
 }
 
-footer .copyright {
-  top: -8px;
-  font-size: .75em;
-}
-
 /* Styles for larger screens */
 @media screen and (min-width: 720px) {
 
   .flex {
       display: -ms-flexbox;      /* TWEENER - IE 10 */
       display: flex; 
-      max-width: 1200px;
       -ms-flex-pack: distribute;
-      justify-content: space-around;
       margin: 0 auto;
+      max-width: 1200px;
+
+      justify-content: space-around;
   }
 
   header {
     min-height: 470px;
   }
 
   .nav {
-    max-width: 1200px;
     padding: 0 30px;
+    max-width: 1200px;
   }
 
 
@@ -198,9 +200,9 @@ footer .copyright {
   }
 
   footer {
-    font-size: 1.3em;
-    max-width: 1200px;
     margin: 40px auto;
+    max-width: 1200px;
+    font-size: 1.3em;
   }
 
 }