Untitled


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- index.html -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="custom-padding">
        <nav>
            <div class="logo">Profile</div>

            <ul class="menu-area">
                <li><a href="index.html">Profile</a></li>
                <li><a href="eronh.html">Eronh</a></li>
                <li><a href="hans.html">Tobi</a></li>
            </ul>
        </nav>
    </div>
    <div class="backalax">
        <h1 id="wel">Welcome</h1>
    </div>
    <div class="profile1">
        <h1>Francis Eronh Ong</h1>
        <br>
        <p>Francis Eronh is a 17 year old student at University of the East Manila Campus</p>
        <br>
        <p>He currently lives in Manila with his family and has 2 siblings</p>
        <br>
        <a href="eronh.html" class="profilebtn">Portfolio</a>
        <img src="img/eronh.jpg" alt="">
    </div>

    <div class="backalax2"></div>
    <div class="profile2">
        <h1>Hans Tobi Regoniel</h1>
        <br>
        <p>Hans Tobi is a 17 year old student at University of the East Manila Campus</p>
        <br>
        <p>He is a martial artist with great talent</p>
        <br>
        <a href="hans.html" class="profilebtn">Portfolio</a>
        <img src="img/hans.jpg" alt="">
    </div>
    <footer>All rights reserved Eronh, 2019</footer>
    <script src="index.js"></script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- eronh.html -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="custom-padding">
        <nav>
            <div class="logo">Profile</div>

            <ul class="menu-area">
                <li><a href="index.html">Profile</a></li>
                <li><a href="eronh.html">Eronh</a></li>
                <li><a href="hans.html">Tobi</a></li>
            </ul>
        </nav>
    </div>
        <embed class="pdff" src="pdff/Eronh1.pdf" type="application/pdf" height="700px" width="500px">
        <embed src="pdff/Eronh2.pdf" type="application/pdf" height="700px" width="500px">
    <script src="index.js"></script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- hans.html -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="custom-padding">
        <nav>
            <div class="logo">Profile</div>

            <ul class="menu-area">
                <li><a href="index.html">Profile</a></li>
                <li><a href="eronh.html">Eronh</a></li>
                <li><a href="hans.html">Tobi</a></li>
            </ul>
        </nav>
    </div>
        <embed class="pdff" src="pdff/hans1.pdf" type="application/pdf" height="700px" width="500px">
        <embed src="pdff/hans2.pdf" type="application/pdf" height="700px" width="500px">
    <script src="index.js"></script>
</body>
</html>


// style.css

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    background-image: url(img/1.jpg);
    -webkit-background-size:cover;
    background-attachment: fixed;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}
.menu-area li a {
    text-decoration: none;
}

.menu-area li {
    list-style-type: none;
}

.custom-padding{
    padding-top: 25px;
}

nav {
    position: relative;
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 10px 0;
    background: #4F6367;
    z-index: 1;
    text-align: right;
    padding-right: 2%;
}

.logo {
    width: 15%;
    float: left;
    text-transform: uppercase;
    color: #fff;
    font-size: 25px;
    text-align: left;
    padding-left: 2%;
}

.menu-area li {
    display: inline-block;
}

.menu-area a {
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    padding: 0 25px;
    font-size: 14px;
    line-height: 30px;
    position: relative;
    z-index: 1;
}
.menu-area a:hover {
    background: #B8D8D8;
    color: black;
}

.menu-area a:hover:after {
    transform: translateY(-50%) rotate(-35deg);
}

nav:before {
    position: absolute;
    content: '';
    border-top: 10px solid rgb(46, 56, 58);
    border-right: 10px solid rgb(46, 56, 58);
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
    top: 100%;
    left: 0;
}

nav:after {
    position: absolute;
    content: '';
    border-top: 10px solid rgb(46, 56, 58);
    border-left: 10px solid rgb(46, 56, 58);
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    top: 100%;
    right: 0;
}

.pdff{
    margin-left: 200px;
}