<html>

<head>
    <title>HOME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style type="text/css">
        body {
            background-image: url("https://raw.githubusercontent.com/loveandbubble/natthaporn.github.io/master/images/1C8967B1-D07A-457B-BE16-4D571A105EF1.jpg");
            margin: 0%;
        }

        div#head {
            text-align: center;
            font-family: Verdana;
            color: white;
        }

        p#hi {
            font-size: 88pt;
            margin-bottom: 0%;
        }

        p#welcome {
            font-size: 30pt;
            margin-top: 5%;
        }

        img.pic {
            width: 400px;
            border-radius: 60%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: 5px solid white;
            margin-bottom: 3em;
        }

        div#about-me {
            text-align: left;
            font-family: DIN Condensed;
            font-size: 22pt;
            letter-spacing: 0.5px;
            background-color: whitesmoke;
            padding: 5%;
            opacity: 80%;

        }

        img#youtube {
            width: 300px;

        }

        p#ab {
            font-size: 40pt;
            font-family: serif;
        }

        p#h {
            font-size: 40pt;
            font-family: serif;
            margin-left: 30pt;
            margin-top: 10pt;
            text-align: center;
        }

        table{
            width: 100%;
        }

        td {
            margin-left: auto;
            margin-right: auto;
        }

        td#net {
            text-align: center;
        }

        td#you {
            text-align: center;
        }
    </style>
</head>


<body>
    <div class="w3-bar w3-light-grey">
        <a href="homepage.html" class="w3-bar-item w3-button">Home</a>
        <a href="port.html" class="w3-bar-item w3-button">Portfolio</a>
        <a href="pet.html" class="w3-bar-item w3-button">Pet</a>
        <div class="w3-dropdown-hover">
            <button class="w3-button">Galleries</button>
            <div class="w3-dropdown-content w3-bar-block w3-card-4">
                <a href="uk.html" class="w3-bar-item w3-button">UK</a>
                <a href="jp.html" class="w3-bar-item w3-button">Japan</a>
            </div>
        </div>
        <a href="contact.html" class="w3-bar-item w3-button">Contact</a>
    </div>
    <div id="head">
        <p id="hi">HI</p>
        <p id="welcome">WECOME TO MY PAGE</p>
    </div>
    <img src="https://raw.githubusercontent.com/loveandbubble/natthaporn.github.io/master/images/S__127221762.jpg" class="pic">
    <div id="about-me">
        <p id="ab">ABOUT ME</p>
        <p id="Name">NAME: NATTHAPORN YAMMEN</p>
        <p id="NICK NAME">NICK NAME: JAMMY</p>
        <p id="Uni">UNIVERSITY: KHON KAEN</p>
        <p id="depart">DEPARTMENT: DIGITAL MEDIA ENGINEERING</p>

    </div>
    <div id="hob">
        <p id="h">MY HOBBIES</p>
    </div>

    <table>
        <tr>
            <td id="net"><img src="https://raw.githubusercontent.com/loveandbubble/natthaporn.github.io/master/images/netflix-logo-circle-png-5.png" id="netflix"></td>
            <td id="you"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1280px-YouTube_full-color_icon_%282017%29.svg.png" id="youtube"></td>
        </tr>
    </table>

</body></html>