<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/oXPiMgHUnM8?si=ksJWPimOJOYsoVy4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/oXPiMgHUnM8?si=ksJWPimOJOYsoVy4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Create a Personal Portfolio Website using HTML and CSS | Codehal</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css</a>"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    @import‎ url('<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');</a></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-family: 'Poppins', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>header { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: fixed; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 30px 100px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: space-between; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    z-index: 100; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.logo { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 2em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #555; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    cursor: default; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.logo span { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.navigation { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-left: -300px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.navigation a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1.1em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #555; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-right: 40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-weight: 500; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: .3s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.navigation a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn-talk { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 8px 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: 2px solid #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-weight: 500; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: .3s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn-talk:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: url('background.jpg'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-size: cover; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-position: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 30px 100px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    max-width: 500px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #555; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 3em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h2 span { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content h4 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 2em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.content p { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 10px 0 40px 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn-group a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 10px 40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: 2px solid #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-weight: 500; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: .3s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn-group a:hover:nth-child(1) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn-group a:nth-child(2) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-left: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 10px 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.btn-group a:hover:nth-child(2) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.social-icons { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    bottom: 50px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.social-icons a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: inline-block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-right: 22px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    line-height: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: 1px solid #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    outline: 2px solid #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: .3s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.social-icons a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transform: translateY(-5px); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.social-icons a i { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <header> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <h2 class="logo"><span>J</span>oe.</h2> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <nav class="navigation"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#">Home</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#">About</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#">Portfolio</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#">Blog</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#">Contact</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </nav> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a href="#" class="btn-talk">Let's Talk</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </header> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section class="home"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h2>Hi, I'm <span>Joe Greyson</span></h2> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h4>Frontend Developer</h4> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A esse totam provident voluptas similique. </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                Impedit incidunt atque recusandae rem quam.</p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="btn-group"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#">Hire Me</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#">See Projects</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="social-icons"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#"><i class="fa-brands fa-facebook-f"></i></a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#"><i class="fa-brands fa-twitter"></i></a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p> </p><p>홈  포토폴리오 소개  블로그      연락처   이야기 하자   저는</p><p> </p><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이야기하자 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>안녕하세요, 저는 조 그레이슨 입니다 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>프론트엔드 개발자 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Lorem ipsum dolor sit amet consectetur adipisicing elit. A esse totam Provident voluptas similique. Impedit incidunt atque recusandae rem quam.</b></span></p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML tag</b></span></p>
<!-- -->
]]>
첫댓글 https://codehalweb.com/personal-portfolio-website-html-css/
https://www.youtube.com/watch?v=oXPiMgHUnM8
PLAY