Portfolio

In this example below you will see how to do a Portfolio with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by przemek2907, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright przemek2907 ©

Technologies

  • HTML
  • CSS
  • JavaScript
    
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lobster'>
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <script src="https://use.fontawesome.com/785be4fa1c.js"></script>



      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <body>
  <div class="container-fluid">
  <nav class="navbar navbar-fixed-top" id="menu">
  <div class="container-fluid">
  <div class="container-header">
    <a class="navbar-brand text-primary" href="#">Przemysław Żochowski</a>
    </div>
    <ul class="nav text-primary navbar-nav navbar-right">
      <li><a href="#">About me</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    </div>
  </nav>
  <div id="aboutme" class="jumbotron">
    <p>My name is Przemysław and I am a system analyst with a previous experience as a software tester. My current goal is to become a full-stack developer and obtain a vast knwoledge around web applicaion development to serve business needs. I have an economical background. I have graduated from Warsaw School of Economics as a bachelor of Finance and Accounting with majors in Investment Banking. Afterwards, I have finished Master's in Quantitative Methods in Economics and Information Systems. Fluent English speaker. Good command of German. Technologies that I study and practice now:</p>
    <img id="picture" class="col-md-2 img-responsive" src="https://res.cloudinary.com/dqxmtvabq/image/upload/v1468868457/Zdj%C4%99cie2_r5wcll.jpg" alt="Picture not visible"/>
     <img id="picture1" class="col-md-1 img-responsive" src="http://html5readiness.com/assets/HTML5_Logo.svg"/>
      <img id = "picture2" class="col-md-2 img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"/>
      <img id ="picture3" class="cold-md-3 img-responsive" src ="http://www.vectorsland.com/imgd/l12866-java-eps-logo-99090.png"/>
  </div>
  <div id="portfolio">
    <h3 id='portfoliotitle'> PORTFOLIO</h3>
      <!-- tutaj linki do projektów-->
      <div id="projects" class="row col-md-12">
      <div id="project1" class="col-md-4">
          <img id="JMpic" class="col-md-8 img-responsive" src = "https://pbs.twimg.com/profile_images/822251283406934016/pQC2vwZT.jpg" alt= "Picture not  visible"/>
          <h4 id="header" class="col-md-12 text-responsive"><strong>John Mayer - tribute page</strong></h4>
          <h4 class="col-md-12 text-responsive">My first project devoted to my gretaest idol - still under development</h4>
          </div>
           <div id="project1" class="col-md-4">
          <img id="Agapic" class="col-md-10 img-responsive" src = "http://res.cloudinary.com/dqxmtvabq/image/upload/v1511713244/IMG-1520_ktxpei.jpg" alt= "Picture not visible"/>
          <h4 id="header" class="col-md-12 text-responsive"><strong>Aga - webpage</strong></h4>
          <h4 class="col-md-12 text-responsive">The greatest girlfriend on the Earth!</h4>
          </div>
            <div id="project1" class="col-md-4">
          <img id="Javapic" class="col-md-10 img-responsive" src = "https://static.pexels.com/photos/597331/pexels-photo-597331.jpeg" alt= "Picture not  visible"/>
          <h4 id="header" class="col-md-12 text-responsive"><strong>Java projects</strong></h4>
          <h4 class="col-md-12 text-responsive">Under development</h4>
          </div>

      </div>
  </div>
  </div>
      <div>
      <div id="contact">
    <h3 id="contacttitle"> CONTACT</h3>
      <div id="contacttext" class="row col-md-6">
          <h4> If you are interested in my experience and would like to cooperate with me, reach out to me via:</h4>
          <i class="fa fa-linkedin-square" aria-hidden="true"></i>
          <i class="fa fa-github" aria-hidden="true"></i>


          </div>
          <div id="contactform" class=" row col-md-5"><h4> Or via contact form:</h4>
          <form id="form" action="" method="post">
              <span class="col-xs-12"><input type="text" placeholder="Name and Surname"></span>
              <span class="col-xs-12"><input type="text" placeholder="Your email"></span>
              <p class = "row col-md-12">
              <textarea name="" id="" cols="80" rows="7" placeholder="Your query"></textarea>
              </p>
              <input type="submit" value="Send" class="btn-primary"> 
          
          </form>
          </div>
  </div>
      </div>
    </body>
</body>
</html>


/*Downloaded from https://www.codeseek.co/przemek2907/portfolio-EyQaaw */
    #menu{
  list-style-type:none;
  background-color:#517B65; #FF4C4F
}
.navbar-brand{
  font-size:20px;
  font-weight:bold;
  color:#041733;
}
a{
  font-size:22px;
  color:black !important;
  font-family:Lobster;
  letter-spacing:1.5px;
}

#aboutme{
  background-color:#ededfc;
  height:580px;
}

p{
padding: 40px 280px 15px 180px;
width: 80%;
font-size:60%;
text-align:justify;
text-justify: distribute;
  
}
#picture{
  position:absolute;
    float: right;
    top:80px;
    right: 80px;
  border-radius:90px;
}
#picture1{
  position:absolute;
  top:473px;
  left:270px; 
}
#picture2{
    top: 472px;
    left: 370px;
    position: absolute;
    float: left;
    width:  100px;
    height: 85px;
}

#picture3{
    top: 470px;
    left: 460px;
    position: absolute;
    float: left;
    width:  110px;
    height: 95px;
}

/*Porfolio*/
#portfolio{
  background-color:#cfcfd1;
  height:450px;
  text-align:center;
  font-family:Lobster;
  letter-spacing:1.5px;
  margin-top:-1cm;
}
#portfoliotitle{
  padding-top: 40px;
  font-size:40px;
  
}

#project1{
    font-family: Cambria;
    width:270px;
    height: 300px;
    margin-top: 25px;
    margin-left:115px;
    margin-right: 0px;
    text-align: center;
}

#project1 img{
    margin-top: 25px;
    margin-left: 40px;
    border-radius: 50%;
}
#project1 header{
    font-family: Cambria;
    padding-top: 195px;
}
#project1 h4{
    font-family: Cambria;
    font-size: 16px;
    padding-top: 10px;
}

#Agapic{
    height: 43%;
    width: 75%;
    border-radius:90%;
}

#Javapic{
      height: 43%;
    width: 75%;
    border-radius:90%;
}

/*Contact*/
#contact{
    background-color:#efdf8d;
  height:450px;
  text-align:center;
  font-family:Lobster;
  letter-spacing:1.5px;
  margin-top:-1cm;
    margin-left: 15px;
    margin-right: 15px;
}
#contacttitle{
padding-top: 40px;
  font-size:40px;
}
#contacttext{
    margin: 25px 0 0 5px;
    font-family: Cambria;
    font-size: 20px;
    text-align: justify
    
}
#contactform{
    margin: 25px 0 0 5px;
    float: right;
    font-family: Cambria;
    font-size:20px;
    text-align: justify
}

#contacttext i{
    font-size: 60px;
    margin: 5px;
}

#form span{
   padding: 5px;
}
#form p{
    padding: 5px;
    margin-left: 0px;
}
    
    



/*Downloaded from https://www.codeseek.co/przemek2907/portfolio-EyQaaw */
    

Comments