Personal Portfolio Webpage

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

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

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Personal Portfolio Webpage</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
  <div class="topnav" id="myTopnav">
    <a href="#contact">CONTACT</a>
    <a href="#portofolio">PORTFOLIO</a>
    <a href="#about">ABOUT</a>
    <a href="#title" id="title">Moraru Vlad</a>
  </div>
  <div class="About">
    <img src='https://images.unsplash.com/photo-1474962558142-9ca83af74bb7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=4fa3dc21935b0147f1dfa09dd64811b4' class="img1" alt='' width="280" height="250" align="right">
    <p class="p-About">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</p>
    <hr class="star-bright"></hr>
  <p class="p-About">Web Developer - User Experience Designer - Graphic Artist</p>
  </div>
<div class="Portofolio">
  <h1 class="title-portofolio">PORTFOLIO</h1>
  <hr class="star-bright2"></hr>
  <div class="sep">            
                <div class="image-hover img-shadow-1">
                    <img src="http://www.plici.ro/images/4-1386110379.jpg">
                </div>
    <div class="image-hover img-shadow-1">
                    <img src="http://www.plici.ro/images/4-1386110379.jpg">
                </div>
    <div class="image-hover img-shadow-1">
                    <img src="http://www.plici.ro/images/4-1386110379.jpg">
                </div>
    <div class="image-hover img-shadow-1">
                    <img src="http://www.plici.ro/images/4-1386110379.jpg">
                </div>
                
          	</div>
</div>
</div>
<div class="Contact">
  <h1 class="title-contact">CONTACT</h1>
  <hr class="star-bright2"></hr>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/moraruvlad/personal-portfolio-webpage-xXMdaK */
/* Add a black background color to the top navigation */
body {
  background-color: #757575;
  background-image:
url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

.topnav {
    background-color: purple;
    overflow: hidden;
    /padding : 0px;
    /boreder : 0px;
    /margin : 0px;
    /width : 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: Montserrat;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

#title {
  float:left;
  margin-left:50px;
  font-size:18px;
}

.About {
  background-color: #9E9E9E;
  margin-left:100px;
  margin-right:100px;
  border: thin solid grey;
  overflow: hidden;
  padding-top: 60px;
  padding-bottom: 60px;
}
.p-About {
  font-family:Inconsolata;
  font-weight:bold;
  font-size:23px;
  color:#E0F2F1;
  margin:40px auto 30px;
  text-align:center;
}

.img1 {
  border-radius:50%;
  padding-top:20px;
  padding-right:15px;
}

.img2 {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

.img3 {
  position: relative;
  right: 30px;
  border: 3px solid #73AD21;
}

.star-bright {
  margin:40px auto 30px;
  padding:0;
  max-width:512px;
  border:0;
  border-top:solid 5px;
  text-align:center;
  color:#E0F2F1;
}

.Portofolio {
  background-color: #E0E0E0;
  margin-left:100px;
  margin-right:100px;
  border: thin solid grey;
  overflow: hidden;
}

.title-portofolio {
  text-align: center;
  color:#9FA8DA;
}

.star-bright2 {
  margin:40px auto 30px;
  padding:0;
  max-width:512px;
  border:0;
  border-top:solid 5px;
  text-align:center;
  color:#9E9E9E;
}

.Contact {
  background-color: #E0E0E0;
  margin-left:100px;
  margin-right:100px;
  border: thin solid grey;
  overflow: hidden;
}

.title-contact {
  text-align: center;
  color:#9E9E9E;
}
/*images*/

.sep {width:100%;text-align:center}
.sep .image-hover {margin:20px 20px 20px 0px}

/****** image hover ******/

.image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.image-hover {position:relative;width:450px;height:200px;display:inline-block;overflow:hidden;background:#fff;border:10px solid #fff;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)}
.image-hover a {text-decoration:none}

.image-hover img {margin:-100px 0px 0px -100px}

/*** effect - shadow 1 ***/


.img-shadow-1
{
-webkit-box-shadow: 0 28px 16px -26px black;
-moz-box-shadow: 0 28px 16px -26px black;
box-shadow: 0 28px 16px -26px black;
}

.img-shadow-1:hover
{
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);

-webkit-box-shadow: 0 58px 36px -56px black;
-moz-box-shadow: 0 58px 36px -56px black;
box-shadow: 0 58px 36px -56px black;
}

.img-shadow-1
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}

.img-shadow-1:hover
{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}

Comments