harunpehlivan
8/10/2018 - 6:52 AM

Portfolio Page

Portfolio Page

style.css
content_copyfile_download
/* ------global------ */

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-family: "Helvetica Neue", sans-serif;
    color: white;
    list-style: none;
    text-decoration: none;
}

body {
    position: relative;
    height: 100vh;
    min-height: 800px;
    background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b222e34a727c.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ------nav------ */

nav {
    position: absolute;
    left: 7.7%;
    right: 50.3%;
    top: 4.3%;
}

.logo {
    font-weight: 400;
    font-size: 2em;
}

nav ul {
    float: right;
}

nav ul li {
    display: inline-block;
    margin-left: 2em;
}

nav a {
    line-height: 100px;
}

/* ------.name------ */

.name {
    position: absolute;
    left: 7.7%;
    top: 24.9%;
}

.name .line1 {
    font-size: 3.6em;
    font-weight: 200; 
}

.name .line2 {
    font-size: 8.4em; 
}

.name .line3 {
    font-size: 1.8em; 
    font-weight: 100; 
    letter-spacing: 0.5em;
    
}

/* ------.btn-hire------ */

.btn-hire {
    position: absolute;
    left: 7.7%;
    top: 61.7%;
    background: white;
    border-radius: 100px; 
    padding: 0.7em 2em; 
    -webkit-box-shadow: 0px 1px 10px 0px rgba(92,103,101,1);
    -moz-box-shadow: 0px 1px 10px 0px rgba(92,103,101,1);
    box-shadow: 0px 1px 10px 0px rgba(92,103,101,1);
}

.btn-hire a {
    font-size: 1.2em;
    letter-spacing: 0.2em;
    background: #00bdc1; /* Old Browsers */
    background: -webkit-linear-gradient(left,#00bdc1,#76e3b7); /*Safari 5.1-6*/
    background: -o-linear-gradient(left,#00bdc1,#76e3b7); /*Opera 11.1-12*/
    background: -moz-linear-gradient(left,#00bdc1,#76e3b7); /*Fx 3.6-15*/   
    background: linear-gradient(to right, #00bdc1, #76e3b7); /*Standard*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ------.social------ */

.social {
    position: absolute;
    left: 7.7%;
    top: 87.7%;
    display: flex;
    font-size: 1.5em;
}

.social li {
    margin-right: 1em;
}
portfolio-page.markdown
content_copyfile_download
  • Rendered
  • Source

Portfolio Page

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html
content_copyfile_download
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <title>Portfolio Page</title>
</head>
<body>
    <nav>
        <a href="https://harunpehlivantebimtebitagem.carrd.co/" class="logo">HP</a>
        <ul>
            <li><a href="http://www.doyoubuzz.com/harun-pehlivan">E-CV</a></li>
            <li><a href="https://zeef.com/profile/harun.pehlivan">Portfolio</a></li>
        </ul>
    </nav>
    <div class="name">
        <p class="line1">HARUN</p>
        <p class="line2">PEHLİVAN</p>
        <p class="line3">IT FOUNDER CEO BLOGGER INITIATIVE ARGE</p>
    </div>
    <div class="btn-hire">
        <a href="https://harunpehlivantebimtebitagem.site123.me/">HP IT GROUP GLOBAL PROFESYONEL IT GROUP</a>
    </div>
    <ul class="social">
        <li><a href="https://dribbble.com/harunpehlivan"><i class="fab fa-dribbble"></i></a></li>
        <li><a href="https://www.behance.net/harunpehlivan"><i class="fab fa-behance"></i></a></li>
        <li><a href="https://instagram.com/harunpehlivantebimtebitagem"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://facebook.com/100008152065270"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252"><i class="fab fa-linkedin-in"></i></a></li>
    </ul>
</body>
</html>