Portfolio Web Page

8/10/2018 - 9:48 PM

body {
  width: 100%;
  margin: 0px;
  background-color: black;
}

body::-webkit-scrollbar { width: 0; }

button:focus { outline: none; }

.img {
  width: 100%;
}

.navBar {
  position: fixed;
  float: left;
  background-color: rgba(0,0,0,0.8);
  overflow: hidden;
  margin-top: 0vh;
  height: 100vh;
  left: -102px;
}

.menu {
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 11px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 5vw;
  color: white;
}

.menu:hover {
  background-color: rgba(0,0,0,0.8);
}

.headText {
  color: white;
  position: absolute;
  top: -10vw;
  font-size: 13vw;
  font-weight: bold;
  width: 74vw;
  margin-left: 13vw;
}

.navButton1,
.navButton2,
.navButton3,
.navButton4 {
  padding: 1vh 10px;
  margin-left: 0px;
  padding-top: 6vh;
  padding-bottom: 6vh;
  margin-right: 0;
  color: white;
  border: none;
  background-color: transparent;
  font-size: 14px;
  line-height: 100%;
  width: 100%;
  font-weight: bold;
  outline: 1px solid rgba(0,0,0,0.8);
}

.links {
  position: absolute;
  top: 19vw;
  width: 70%;
  margin-left: 15%;
}

.introLinks {
  margin-bottom: 50px;
  display: inline-block;
}

.linkButton {
  background: transparent;
  font-size: 2vw;
  font-weight: 900;
  color: white;
  border: 5px solid white;
  border-radius: 10px;
  margin:10px;
  margin-top: 40px;
  outline: none;
  text-decoration: none;
  padding: 10px;
}

.portrait {
  width: 30vw;
  position: absolute;
  top: 59vw;
  right: 20vw;
}

.text {
  position: absolute;
  top: 81vw;
  width: 50%;
  text-align: center;
  font-size: 2.2vw;
  left: 39%;
  border: 4px dotted #FFFEF6;
  background-color: rgba(255, 254, 246, 0.5)
}

table {
  font-size: 2.1vw;
  width: 100%;
}

td {
  padding: 6px;
}

.languages {
  height: 10vw;
}

h2 {
  font-size: 3vw;
}

#Portfolio {
  width: 87vw;
  display: inline-block;
  padding-left: 13vw;
  padding-bottom: 4vw;
  margin-bottom: .5vw;
  background-color: rgba(98, 152, 157,0.9);
}

.portfolioText {
  color: white;
  font-size: 60px;
  font-weight: bold;
  border-bottom: 3px dotted white;
  margin-left: 1vw;
}

.webPage {
  display: inline-block;
  width: 45%;
  margin: 1%;
}

h3 {
  color: white;
  width: 47%;
  display: inline-block;
  text-align: center;
}

h1 {
  position: absolute;
  top: 240vw;
  font-size: 4.5vw;
}

.contactBox {
  margin-left: 12vw;
  width: 40%;
}

#largeIcon {
  font-size: 21vw;
  outline: none;
}

.email {
  background: transparent;
  border: none;
  padding: 1.2vw 3vw;
  transition: background-color 0.5s ease;
}

.hiddenText {
  position: absolute;
  font-size: 6vw;
  top: 250vw;
  color: black;
  display: none;
  left: 6vw;
}

.email:hover,
.linkButton2:hover {background-color: rgba(134,134,132,.3);}

.linkButton:hover {background-color: rgba(0,0,0,.4);}

.imgHover:hover{
    -webkit-filter:  grayscale(20%) brightness(85%);
}

#navHover:hover {background-color: rgb(255,255,255);}

.navButton1:hover,
.navButton2:hover,
.navButton3:hover,
.navButton4:hover {background-color: rgba(134,134,132,.3);}

.bottomLinks {
  width: 30%;
  margin-left: 60%;
  position: absolute;
  top: 243vw;
}

.linkButton2 {
  display: block;
  background: transparent;
  font-size: 2vw;
  font-weight: 900;
  color: black;
  border: 5px solid black;
  border-radius: 10px;
  margin:10px;
  outline: none;
  text-decoration: none;
  padding: 10px;
  margin-bottom: 60px;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

script.js

/*function showEmail () {
  var icon = document.getElementsByClassName("email");
  var hidden = document.getElementsByClassName("hiddenText");
  icon[0].style.display = "none";
  hidden[0].style.display = "block";
}*/

// This function operates the sliding menu

$(".menu").on("click", function() {
  if($(".menu").hasClass("off")) {
    $(".menu")
      .animate({left: "100px"})
      .css("background-color", "rgba(0, 0, 0, 0.8)")
      .removeClass("off")
      .addClass("on");
    $(".navBar")
      .animate({left: "0px"});
    $(".fa-bars").fadeOut(1000).replaceWith("<i class='fa fa-times'></i>").fadeIn(1000);
  } else {
    $(".menu")
      .animate({left: "0px"})
      .css("background-color", "Transparent")
      .removeClass("on")
      .addClass("off");
    $(".navBar")
      .animate({left: "-102px"});
    $(".fa-times").fadeOut(1000).replaceWith("<i class='fa fa-bars'></i>").fadeIn(1000);
  }
});

function onClick1() {
  var active1 = document.getElementsByClassName("active1");
  var active2 = document.getElementsByClassName("active2");
  var active3 = document.getElementsByClassName("active3");
  var active4 = document.getElementsByClassName("active4");
  active1[0].style.backgroundColor="white";
  active1[0].style.color="black";
  active2[0].style.backgroundColor="black";
  active2[0].style.color="white";
  active3[0].style.backgroundColor="black";
  active3[0].style.color="white";
  active4[0].style.backgroundColor="black";
  active4[0].style.color="white";
}




function onClick2() {
  var active1 = document.getElementsByClassName("active1");
  var active2 = document.getElementsByClassName("active2");
  var active3 = document.getElementsByClassName("active3");
  var active4 = document.getElementsByClassName("active4");
  active1[0].style.backgroundColor="black";
  active1[0].style.color="white";
  active2[0].style.backgroundColor="white";
  active2[0].style.color="black";
  active3[0].style.backgroundColor="black";
  active3[0].style.color="white";
  active4[0].style.backgroundColor="black";
  active4[0].style.color="white";
}



function onClick3() {
  var active1 = document.getElementsByClassName("active1");
  var active2 = document.getElementsByClassName("active2");
  var active3 = document.getElementsByClassName("active3");
  var active4 = document.getElementsByClassName("active4");
  active1[0].style.backgroundColor="black";
  active1[0].style.color="white";
  active2[0].style.backgroundColor="black";
  active2[0].style.color="white";
  active3[0].style.backgroundColor="white";
  active3[0].style.color="black";
  active4[0].style.backgroundColor="black";
  active4[0].style.color="white";
}




function onClick4() {
  var active1 = document.getElementsByClassName("active1");
  var active2 = document.getElementsByClassName("active2");
  var active3 = document.getElementsByClassName("active3");
  var active4 = document.getElementsByClassName("active4");
  active1[0].style.backgroundColor="black";
  active1[0].style.color="white";
  active2[0].style.backgroundColor="black";
  active2[0].style.color="white";
  active3[0].style.backgroundColor="black";
  active3[0].style.color="white";
  active4[0].style.backgroundColor="white";
  active4[0].style.color="black";
}



$(".email").click(function() {
  $('#largeIcon').fadeOut(1000);
  $('.hiddenText').fadeIn(1000);
});

portfolio-web-page.markdown

Rendered
Source

Portfolio Web Page

This is a full portfolio Web Page with a navigation bar that is fixed on the side and links that take you to my Code Pen projects, Git Hub account, etc.

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<head>
  <title>HP</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="jquery.localscroll.js" type="text/javascript"></script> 
<script src="jquery.scrollTo.js" type="text/javascript"></script>
</script>
</head>

<body>
  <div class="menu off"><i class="fa fa-bars"></i></div>
  <div class="navBar">
    <a href="#introPage"><button class="navButton1 active1" onclick=onClick1()>HOME</button></a><br>
    <a href="#about"><button class="navButton2 active2" onclick=onClick2()>ABOUT</button></a><br>
    <a href="#Portfolio"><button class="navButton3 active3" onclick=onClick3()>PORTFOLIO</button></a><br>
    <a href="#contactPage"><button class="navButton4 active4" onclick=onClick4()>CONTACT</button></a>
  </div>
  
  <div id="introPage">
    <img class="img" src='http://static-cache.tr.uaprom.net/image/se/busines_head_41.jpg?r=143818'>
    <center><p class="headText">HP</p></center>
    <div class="links">
      <center>
        <div class="introLinks"><a class="linkButton" href="https://codepen.io/harunpehlivan" target="_blank">CODEPEN</a></div>
        <div class="introLinks"><a class="linkButton" href="https://www.freecodecamp.org/harunpehlivan" target="_blank">FREE CODE CAMP</a></div>
        <div  class="introLinks"><a class="linkButton" href="https://github.com/harunpehlivan" target="_blank">GIT HUB</a></div>
        <div class="introLinks"><a class="linkButton" href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank">LINKED IN</a></div>
      </center>
    </div>
  </div>
  <div id="about">
    <img class="img" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b2230e1ab99e.jpg">
    
    <img class="portrait" src="https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg">
    <div class=text>
      <div><a href="http://www.shortcutz.link/harunpehlivan" rel="noopener noreferrer" target="_blank">INFORMATION TECHNOLOGY FOUNDER,CEO BLOGGER</a></div>
      <h2>LANGUAGES & FRAMEWORKS</h2>
      <table class="languages">
      <tr><td>JavaScript</td>
        <td>HTML & CSS</td></tr>
      <tr><td>React</td>
        <td>Node</td></tr>
      <tr><td>SQL</td>
        <td>Angular</td></tr></table>
    </div>
  </div>

   <div id="Portfolio">
    <div class="portfolioText">PORTFOLIO</div>
    <h3>HP IT GROUP</h3>
    <h3>HP IT GROUP</h3>
    <a class="imgHover" href= "https://harunpehlivantebimtebitagem.site123.me/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" class="HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP"/></a>
    <a class="imgHover" href="http://harunpehlivantebimtebitagem.sitem.xyz/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" class="HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP"/></a>
    <h3>IT computer science</h3> 
    <h3>TEBİM TEBİTAGEM</h3>
    <a class="imgHover" href="https://tebim.wordpress.com/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebm.wordpress.com?w=360" class="IT computer science"/></a>    
    <a class="imgHover" href="https://tebim.wordpress.com/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebim.wordpress.com?w=360" class="TEBİM TEBİTAGEM"/></a>
    <h3>TEBİM TEBİTAGEM</h3>
    <h3>HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO Islamic sciences and IT computer science</h3>
    <a class="imgHover" href= "http://tercuman-bilisim-mer.ticiz.com/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" class="TEBİM TEBİTAGEM"/></a>
    <a class="imgHover" href= "https://harunpehlivan.jimdo.com/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360" class="HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO Islamic sciences and IT computer science"/></a>
    <h3>Founder, CEO Blogger E-Cv</h3>
    <h3>TEBİM TEBİTAGEM</h3>
    <a class="imgHover" href= "https://harunpehlivantebimtebitagem.carrd.co/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.carrd.co?w=360" class="Founder, CEO Blogger E-Cv"/></a>
    <a class="imgHover" href= "http://harunpehlivantebimtebitagem.4adim.com/" target="_blank"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.4adim.com?w=360" class="4 ADIM"/></a>
  </div>
  <div id="contactPage">
    <img class="img" src="https://cdn-cms.f-static.com/uploads/1017556/800_5ac0722db8769.jpg"/>
    <div class="contactBox">
      <center><h1>CONNECT WITH <br/>ERIN HALES: <br/><button onclick=showEmail() class="email"><i class="fa fa-envelope-square" id="largeIcon"></i></button></h1>
        <h3 class="hiddenText">mcbridee093<br/>@gmail.com</h3>
      </center>
    </div>
  </div>
  <div class="bottomLinks">
    <div><a class="linkButton2" href="https://codepen.io/harunpehlivan" target="_blank">CODEPEN</a></div>
        <div><a class="linkButton2" href="https://www.freecodecamp.org/harunpehlivan" target="_blank">FREE CODE CAMP</a></div>
        <div><a class="linkButton2" href="https://github.com/harunpehlivan" target="_blank">GIT HUB</a></div>
        <div><a class="linkButton2" href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank">LINKED IN</a></div>
  </div>
</body>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Portfolio Web Page

Portfolio Web Page