Skip to content

Instantly share code, notes, and snippets.

@awesomephant

awesomephant/index.html

Created February 9, 2020 17:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save awesomephant/334d719b43762c307b4e5fb171bbec73 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save awesomephant/334d719b43762c307b4e5fb171bbec73 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. awesomephant created this gist Feb 9, 2020.
    27 changes: 27 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kat's cool websiteee</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <h1 class='name'>Kat Mcgrath</h1>
    <h2 class='job'>Designer</h2>
    <nav class='site-nav'>
    <a href="#1">One</a>
    <a href="#1">Two</a>
    <a href="#1">Three</a>
    </nav>
    <main>
    <div><img src="./img/home_engage.png" alt=""></div>
    <div><img src="./img/home_engage.png" alt=""></div>
    <div><img src="./img/home_engage.png" alt=""></div>
    <div><img src="./img/home_engage.png" alt=""></div>
    <div><img src="./img/home_engage.png" alt=""></div>
    <div><img src="./img/home_engage.png" alt=""></div>
    <div><img src="./img/home_engage.png" alt=""></div>
    </main>
    </body>
    </html>
    70 changes: 70 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    :root {
    --gutter: 72px
    }

    * {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    }

    body {
    display: grid;
    padding-top: calc(var(--gutter) / 2);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    grid-template-columns: repeat(24, 1fr);
    grid-auto-rows: min-content;
    column-gap: 5px;
    }

    .name {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    }

    .job {
    grid-column-start: 6;
    grid-column-end: 8;
    grid-row-start: 1;
    }

    .site-nav {
    display: contents;
    grid-column-start: 6;
    grid-column-end: 8;
    }

    .site-nav a:nth-child(1) {
    grid-column-start: 10;

    }

    .site-nav a:nth-child(2) {

    grid-column-start: 11;
    }

    .site-nav a:nth-child(3) {
    grid-column-start: 12;
    }

    main {
    display: contents;
    }

    main div {
    grid-column-end: span 4;
    padding-bottom: calc(var(--gutter) / 2);
    }

    main div:nth-child(2n) {
    grid-column-end: span 8;
    }

    img {
    display: block;
    width: 100%;
    }