Skip to content

Instantly share code, notes, and snippets.

@gitdagray

gitdagray/index.html

Created November 21, 2021 23:17
Show Gist options
  • Save gitdagray/dbe70d25d897662c1dc4f4c179883e01 to your computer and use it in GitHub Desktop.
Save gitdagray/dbe70d25d897662c1dc4f4c179883e01 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gitdagray created this gist Nov 21, 2021.
    113 changes: 113 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,113 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

    body {
    min-height: 100vh;
    }

    main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    width: 100vw;
    height: 48px;
    position: fixed;
    top: 0;
    border-bottom: 1px solid #fff;
    z-index: 2;
    background-color: #000;
    color: #fff;
    }

    section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    padding-top: 48px;
    }

    .view1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: lightgray;
    color: #000;
    }

    .view1 > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #000;
    color: #fff;
    margin: 10px;
    }

    .view2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
    background-color: darkblue;
    color: #fff;
    }
    </style>
    <script defer src="js/main.js"></script>
    </head>
    <body>
    <nav>
    <h1>My Page</h1>
    </nav>
    <main>
    <section id="view1" class="view view1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    </section>
    <section id="view2" class="view view2">
    <h2>My 2nd View</h2>
    </section>
    </main>
    </body>
    </html>