asdf

2017-10-26 01:19:37 -07:00
parent cdc4748830
commit 8064506d63
4 changed files with 114 additions and 189 deletions
@@ -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 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>

+      <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">
-
-                            <p class="phoneText" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">
-                              phone
-                            </p>
-        </div>
-
-        <div class="col-xs-6 email">
-
-                            <p class="emailText">
-                              email
-                            </p>
+      <a id="contactForm" href="">
+        <div class="col-xs-3 getStarted">
+          <p id="contact">Contact Me</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">
+          <div class="row contactInfo">

                <div class="col-xs-12 info">

-                  <font size="4">Arjun Patel</font>
-                  <font size="2">&copy;</font>
+                  <font size="4">Arjun Patel</font><br>
+                  <font size="2" color="grey">handmade by me &copy; 2017</font>

                </div>

@@ -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;
-  padding:5px;
-  color: white;
+  margin-bottom: 0;
  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 {
-  color: #cfeff0;
-  font-size: 20px;
-  text-align: right;
+.skillListCont {
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  margin-bottom: 40px;
 }
-p.professionalSide2 {
-  color: #cfeff0;
-  font-size: 20px;
-  text-align: left;
+button.skillList {
+  padding: 0px 15px 0px 15px;
+  margin: 5px 5px 5px 5px;
+  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;
-}
-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%;
+  height: 80px;
  position: absolute;
-  left: 50%;
-  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%);
+  bottom: 0;
 }
@@ -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("patel.arjun50@gmail.com");
-    }, function() {
-      $(this).fadeTo( "fast", .6 );
-      $('.emailText').css("color", "#069ea0");
-      $('.emailText').html("email");
-    });
-
-
 }); // end on Window ready