Function-List.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>FUNCTIONS LIST</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./css/Function List.css">
    </head>

    <body>
        <header>
            <h1><a href="./index.html">YUTO YAMAMOTO</a></h1>
            <nav>
                <ul>
                    <li><a href="./About.html">ABOUT</a></li>
                    <li><a href="./Contact.html">CONTACT</a></li>
                    <li><a href="./Function-List.html">FUNCTIONS LIST</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <p class="text1">Headerを<span class="under">position: fixed;</span>と<span class="under">top: 0;</span>で画面上部に固定し、<span class="under">box-shadow</span>で影を付けました。</p>
            <div class="gif"><img src="./img/header.gif"></div>
            
            <p class="text2">Profileの画像を<span class="under">border-radius</span>で円形にしました。</p>
            <div class="img"><img src="./img/profile.jpg"></div>

            <p class="text3"><span class="under">疑似クラス</span>の<span class="under">:hover</span>を使ってHeaderの要素にマウスカーソルを合わせるとアンダーラインが下からフェードインするようにしました。</p>
            <div class="gif"><img src="./img/hover.gif"></div>
        </main>

        <footer id="footer">
            <p>&copy; YUTO YAMAMOTO</p>
        </footer>
    </body>
</html>