Personal Portfolio Webpage

Tutorials of (Personal portfolio webpage) by Moraru vlad

<!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/ */
/* 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;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Personal Portfolio Webpage ) is write by Moraru Vlad, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Moraru Vlad