윤채원.html

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>Home</title>
       <style>
        body{
            background-color: #201e1b;
            color:rgb(255, 248, 242);
        }
        
        .background{
            background-image:url('./picture_file/chaewon_picture/cwBg.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
        }
        
        .big{
            text-align: center;
            padding-top:8%;
            padding-bottom:500px;
            font-size: 800%;
        }

        .info{
            padding-left: 15%;
            text-align:left;
            font-size:100%;
            line-height:200%;
        }

        .nav-container{
            display: flex;
            flex-direction: row;
            width: 100%;
            margin:0;
            padding:0;
            background-color: rgb(0,0,0,0.5);
            list-style-type: none;
            position:fixed;
            top: 0;
            left:0;
        }

        .nav-item{
            margin:1vw auto;
            cursor:pointer;
        }

        .nav-item a{
            font-size:80%;
            text-align:center;
            text-decoration:none;
            color:rgb(255, 248, 242);
        }

        .more{
            list-style-type: none;
            text-align:center;
        }
       </style>
       
    </head>
    <body>
        <nav>
           <ul class="nav-container">
            <li class="nav-item"> <a href="윤채원.html" style="color: #9f7f51;">Chaewon Yoon</a></li>
            <li class="nav-item"> <a href="윤채원introduce.html">Introduce</a></li>
            <li class="nav-item"> <a href="윤채원Past&Future.html">Past&Future</a></li>
            <li class="nav-item"> <a href="윤채원SNS.html">SNS</a></li>
            <li class="nav-item"> <a href="index.html">Team5</a></li>
           </ul>
        </nav>
        <div class="background" style="background-attachment:fixed;">
            <br>
            <p class="big">Chaewon Yoon</p>
            <span class="info">Name: Chaewon Yoon</span><br>
            <span class="info">Gender: Woman</span><br>
            <span class="info">Nationality: National Republic of Korea</span><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <div class="more">
            <p style="color: #9f7f51;">more about her...</p>
            <li class="nav-item"> <a href="윤채원introduce.html">Introduce</a></li>
            <li class="nav-item"> <a href="윤채원Past&Future.html">Past&Future</a></li>
            <li class="nav-item"> <a href="윤채원SNS.html">SNS</a></li>
        </div>
        <br><br><br><br><br><br><br><br>
        <div style="color: #9f7f51; text-align:center;" >
            <p style="font-size: 50%; margin-bottom:200px;">@made by Chaewon Yoon</p>
        </div>

    </body>

</html>