asdf

index.html

@@ -51,14 +51,13 @@
 
 
 <!-- profile section -->
-<div class="entireBG">
 <a name="two">
   <div class="container profileContainer">
 
         <div class="row">
             <div class="col-xs-12 profileBanner">
                 <p class="profile">Profile</p>
-                <p class="dev profFade">Hello World! I'm Arjun - <font color="green" size="5">designer</font> and <font color="green" size="5">coder</font></p>
+                <p class="dev profFade">I'm Arjun - <font color="#3ca1c3" size="5">designer</font> and <font color="#3ca1c3" size="5">coder</font></p>
             </div>
         </div>
 
@@ -67,7 +66,7 @@
             <div class="col-md-4 col-xs-12 aboutMe">
                 <p class="adtitle1">About Me</p>
                 <p class="summary">Professional web-designing with responsive layouts is my expertise in the development world. However, my interests in other
-                disciplines such Android and hardware allows me to continue learning. I'm up for a coffee shop conversation anytime, so contact me below.</p>
+                disciplines such back-end and Android drives me to continue learning. I'm up for a coffee shop chat anytime, so contact me below.</p>
             </div>
 
             <div class="col-md-4 col-xs-12 avatar">
@@ -93,7 +92,7 @@
 
   </div>
 </a>
-</div>
+
 
 
 
@@ -102,53 +101,40 @@
 <a name="three" class="skill">
     <div class="container-fluid skills">
 
-    <div class="row">
+      <div class="row">
 
             <div class="col-xs-12 col-md-12">
-              <p class="skillsBanner"></p>
+              <p class="skillsBanner">My Expertise</p>
             </div>
 
           <!--  <div class="col-xs-12 col-md-6 profFade">
               <p class="professionalBanner">Skills</p>
             </div>
           -->
+      </div>
 
-    </div>
+      <div class="row">
-
-    <div class="row">
             <div class="col-xs-12">
                 <p class="skillsSummary"></p>
                 <p class="Linus profFade">- Linus Torvalds</p>
             </div>
-    </div>
+      </div>
-
-        <div class"row skillsRow">
-<!--
-            <div class="col-xs-0 col-md-6 skillsContainer">
-              <p class="allskills"></p>
-            </div> -->
-
-            <div class="col-xs-6 col-md-5">
-              <p class="professionalSide1"></p>
-            </div>
-
-            <div class="col-xs-6 col-md-1 professionalStars1 profFade">
-              &starf;&starf;&starf;&starf;&starf;<br><br>&starf;&starf;&starf;&starf;&star;<br><br>
-              &starf;&starf;&starf;&star;&star;<br><br>&starf;&starf;&starf;&starf;&star;
-            </div>
-
-            <div class="col-xs-6 col-md-1 professionalStars1 profStars2 profFade">
-                          &starf;&starf;&starf;&star;&star;<br><br>&starf;&starf;&starf;&starf;&star;<br><br>
-                          &starf;&starf;&starf;&star;&star;<br><br>&starf;&starf;&starf;&star;&star;
-            </div>
-
-
-            <div class="col-xs-6 col-md-5">
-              <p class="professionalSide2"></p>
-            </div>
-
 
+      <div class="row">
+        <div class="col-xs-8 skillListCont">
+          <button class="primary skillList">HTML</button>
+          <button class="primary skillList">CSS</button>
+          <button class="primary skillList">Less</button>
+          <button class="primary skillList">Jade</button>
+          <button class="primary skillList">JavaScript</button>
+          <button class="primary skillList">React.js</button>
+          <button class="primary skillList">Node.js</button>
+          <button class="primary skillList">Python</button>
+          <button class="primary skillList">Java</button>
         </div>
+      </div>
+
+
 
     </div>
 </a>
@@ -203,29 +189,24 @@
 
     </div>
 
-    <div class="row">
+    <div class="row getStartedCont icons">
 
-        <div class="col-xs-6 phone">
+      <a id="contactForm" href="">
-
+        <div class="col-xs-3 getStarted">
-                            <p class="phoneText" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">
+          <p id="contact">Contact Me</p>
-                              phone
-                            </p>
-        </div>
-
-        <div class="col-xs-6 email">
-
-                            <p class="emailText">
-                              email
-                            </p>
         </div>
+      </a>
 
     </div>
+<!---div for contact form--->
+<div class="form">
 
+</div>
     <div class="row goToTop">
 
           <div class="col-xs-12">
             <a href="#one">
-              <img class="top" src="Images/topnormal.png" onmouseover="this.src='Images/tophover.png" onmouseout="this.src='Images/topnormal.png">
+              <img class="top" src="Images/topnormal.png" onmouseover="this.src='Images/tophover.png'" onmouseout="this.src='Images/topnormal.png'">
             </a>
           </div>
 
@@ -239,16 +220,14 @@
 </div>
 
 <div class="entireBGInfo">
-    <div class="container-fluid contactInfo">
+    <div class="container-fluid">
 
-
+          <div class="row contactInfo">
-
-          <div class="row">
 
                 <div class="col-xs-12 info">
 
-                  <font size="4">Arjun Patel</font>
+                  <font size="4">Arjun Patel</font><br>
-                  <font size="2">&copy;</font>
+                  <font size="2" color="grey">handmade by me &copy; 2017</font>
 
                 </div>
 

main.css

@@ -117,16 +117,10 @@ font.intro2 {
 
 
 
-
-
-div.entireBG {
-  background-color: #eff0f2;
-}
 div.profileContainer {
     background-color: white;
     height: auto;
     text-align: center;
-    background-color: #eff0f2;
 }
 p.profile {
     font-size: 50px;
@@ -213,18 +207,15 @@ p.adtitle2{
 
 
 div.skills {
-    height: auto;
-    overflow: hidden;
     font-family: 'Raleway', sans-serif;
     text-align: left;
     background-image: url(Images/dark_embroidery.png);
-    background-size: cntain;
+    position: relative;
+    color: white;
 }
 p.skillsBanner {
   margin-top:30px;
-  margin-bottom: 20px;
+  margin-bottom: 0;
-  padding:5px;
-  color: white;
   font-size: 50px;
   text-align: center;
 /*  border-bottom: 1px solid #069ea0;*/
@@ -232,7 +223,6 @@ p.skillsBanner {
 p.skillsSummary {
   margin:0;
   text-align: center;
-  /*color: #cfeff0; */
   color:#069ea0;
   font-size: 20px;
   font-style: italic;
@@ -240,33 +230,26 @@ p.skillsSummary {
 }
 p.Linus {
   margin: 0;
-  margin-bottom: 50px;
+  margin-bottom: 60px;
   text-align: center;
   color: #cfeff0;
   font-style: italic;
   font-family: 'Raleway', sans-serif;
 }
-p.professionalSide1 {
+.skillListCont {
-  color: #cfeff0;
+  top: 50%;
-  font-size: 20px;
+  left: 50%;
-  text-align: right;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  margin-bottom: 40px;
 }
-p.professionalSide2 {
+button.skillList {
-  color: #cfeff0;
+  padding: 0px 15px 0px 15px;
-  font-size: 20px;
+  margin: 5px 5px 5px 5px;
-  text-align: left;
+  background-color: transparent;
+  border: 1px solid white;
 }
-div.professionalStars1 {
-  color: #069ea0;
-  font-size: 20px;
-  text-align: left;
-  margin-bottom: 20px;
-}
-div.profStars2 {
-  text-align: right;
-  margin-bottom: 100px;
-}
-
 
 
 
@@ -274,14 +257,14 @@ div.profStars2 {
 div.parallax {
   margin:0;
   padding:0;
-  height: 700px;
+  height: 500px;
   width: 100%;
   position: relative;
   font-family: 'Bubbler One', sans-serif;
   overflow: hidden;
 }
 p.parallaxImg {
-  height: 100%;
+  height: 500px;
   width: 100%;
   position: absolute;
   background-image: url(Images/parallax.jpg);
@@ -306,13 +289,15 @@ p.connect {
 
 
 
-
+div.entireBG {
+  background-color: #eff0f2;
+}
 div.contactMe {
   background-color: #eff0f2;
   text-align: center;
 }
 div.iconsRow div.col-md-3 {
-  height: 400px;
+  height: 300px;
 }
 img.icons {
   height: 80px;
@@ -327,60 +312,62 @@ img.icons:hover {
   height:85px;
   width:85px;
 }
+div.goToTop {
+  height: 50px;
+}
+img.top {
+  height: 30px;
+  width: 30px;
+  margin: 20px 0px 20px 0px;
+}
+
+
+div.getStartedCont {
+  position: relative;
+  height: 50px;
+}
+div.getStarted {
+  height: 50px;
+  opacity: .75;
+  background-image: url(Images/phoneEmail.jpg);
+  background-size: cover;
+  border-radius: 15px;
+  top: 50%;
+  position: absolute;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+}
+.getStarted p {
+  color: white;
+  top: 50%;
+  position: absolute;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  font-size: 20px;
+  font-family: 'Raleway', sans-serif;
+}
+div.form {
+  height: 100%;
+}
+
+
 
 div.entireBGInfo {
   background-color: #3b3c3d;
 }
 div.contactInfo {
   background-color: #3b3c3d;
+  border: 1px solid green;
+  height: 100px;
+  position: relative;
 }
-div.goToTop {
-  height: 50px;
-}
-img.top {
-  display: block;
-  height: 50px;
-  width: 50px;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
 div.info {
   font-family: 'Raleway', sans-serif;
-  text-align: right;
+  text-align: center;
   color: white;
-}
+  height: 80px;
-div.phone {
-  height: 100px;
-  margin: 0 0 50px 0;
-  opacity: .75;
-  background-image: url(Images/phone.jpg);
-  border-radius: 10px 0 0 10px;
-}
-p.phoneText {
-  font-family: 'Raleway', sans-serif;
-  color:#069ea0;
-  font-size: 18px;
-  top: 50%;
   position: absolute;
-  left: 50%;
+  bottom: 0;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
-}
-div.email {
-  height: 100px;
-  margin: 0 0 50px 0;
-  opacity: .75;
-  background-image: url(Images/phoneEmail.jpg);
-  border-radius: 0 10px 10px 0;
-}
-p.emailText {
-  font-family: 'Raleway', sans-serif;
-  color:#069ea0;
-  font-size: 18px;
-  top: 50%;
-  position: absolute;
-  left: 50%;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
 }

mainJs.js

@@ -11,6 +11,16 @@ $(document).ready( function() {
 }); // end on doc ready
 
 
+$('.getStarted').hover( function () {
+  $('#contact').css("color","black").fadeIn();
+  $('.getStarted').css({"height":"50px","background-image":"url(Images/phone.jpg)"}).fadeIn(500);
+},
+function () {
+  $('#contact').css("color","white").fadeIn();
+  $('.getStarted').css({"height":"50px","background-image":"url(Images/phoneEmail.jpg)"}).fadeIn(500);
+});
+
+
 $(window).on("load",function() {
 
   $(".intro1").delay(800).fadeIn(400);
@@ -39,39 +49,12 @@ $(window).on("load",function() {
 
   }).scroll(); //invoke scroll-handler on page-load
 
-
-
-
-      $('.skillsBanner').typeIt({
-       strings: ["System.out.println('Skills'):", "Skills"],
-       speed: 60,
-       breakLines: false,
-       autoStart: false
-     });
-/*
-     $('.allskills').typeIt({
-     strings: ["1| if (language = html)", " 2|.....int level = 10", " 3| if (language = css)", " 4|.....int level = 9", " 5| if (language = javascript)", " 6|.....int level = 6", " 7| if (language = Java)", " 8|.....int level = 6", " 9| if (language = Android)", "10|.....int level = 9", "11| if (language = Node.js)", "12|.....int level = 4"],
-     speed: 10,
-     autoStart: false
-   }); */
      $('.skillsSummary').typeIt({
      strings: ["'Talks is cheap. Show me the code.'"],
      speed: 20,
      autoStart: false
    });
 
-     $('.professionalSide1').typeIt({
-     strings: ["HTML ", " ", "CSS ", " ", "Javascript ", " ", "JQuery"],
-     speed: 20,
-     autoStart: false
-   });
-
-   $('.professionalSide2').typeIt({
-   strings: ["Java ", " ", "Android ", " ", "Node.js ", " ", "Arduino"],
-   speed: 20,
-   autoStart: false
-  });
-
 //icons fade others when hovering over one
     var elems = $('.icons');
     elems.on('mouseenter mouseleave', function(e) {
@@ -80,28 +63,4 @@ $(window).on("load",function() {
 
 
 
-//phone div hover
-    $('.phone').hover( function() {
-      $(this).fadeTo( "medium", 1 );
-      $('.phoneText').css("color", "black");
-      $('.phoneText').html("(949)923-0445");
-    }, function() {
-      $(this).fadeTo( "fast", .6 );
-      $('.phoneText').css("color", "#069ea0");
-      $('.phoneText').html("phone");
-    });
-
-
-//email hover
-    $('.email').hover( function() {
-      $(this).fadeTo( "medium", 1 );
-      $('.emailText').css("color", "white");
-      $('.emailText').html("[email protected]");
-    }, function() {
-      $(this).fadeTo( "fast", .6 );
-      $('.emailText').css("color", "#069ea0");
-      $('.emailText').html("email");
-    });
-
-
 }); // end on Window ready