Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/index.html

Last active April 15, 2023 16:33
Show Gist options
  • Save prof3ssorSt3v3/a4e50ee4172b74dbd2685d209980a85a to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/a4e50ee4172b74dbd2685d209980a85a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. prof3ssorSt3v3 revised this gist Nov 25, 2022. No changes.
  2. prof3ssorSt3v3 revised this gist Nov 25, 2022. 1 changed file with 12 additions and 12 deletions.
    24 changes: 12 additions & 12 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,7 @@
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
    font-family: "brandon grotesque", sans-serif;
    }
    html {
    font-weight: 300;
    @@ -24,7 +23,6 @@ nav {
    }
    nav a {
    color: currentColor;
    font-family: 'brandon grotesque';
    text-decoration: none;
    letter-spacing: 1px;
    padding: 0 2rem;
    @@ -34,23 +32,27 @@ nav a:hover {
    color: hsl(220, 70%, 90%);
    }
    header {
    background-image: url(https://picsum.photos/id/2/2936/1970?grayscale);
    background-size: cover;
    background-position: center;
    height: 800px;
    display: grid;
    place-content: center;

    background-image: url(https://picsum.photos/id/2/2936/1970?grayscale);
    background-position: center;
    background-size: cover;
    }
    header.tint {
    background-image: linear-gradient(180deg, hsla(200, 60%, 50%, 0.16), hsla(200, 50%, 30%, 0.95) 80%),
    background-image: linear-gradient(
    180deg,
    hsla(200, 60%, 50%, 0.16),
    hsla(200, 50%, 30%, 0.95) 80%
    ),
    url(https://picsum.photos/id/2/2936/1970?grayscale);
    }
    h1 {
    color: white;
    font-family: 'brandon grotesque';
    font-size: 6rem;
    font-weight: 300;
    padding: 1rem;
    color: white;
    }
    main {
    min-height: 400px;
    @@ -60,11 +62,9 @@ main {
    h1 {
    font-size: 3rem;
    }
    nav {
    vertical-align: middle;
    }
    nav a {
    font-size: 1rem;
    padding: 0 1rem;
    }
    }

  3. prof3ssorSt3v3 revised this gist Nov 25, 2022. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,12 +23,12 @@ <h1>High-Techie Tech</h1>
    <main></main>
    <!--
    {
    "id": "20",
    "author": "Aleks Dorohovich",
    "width": 3670,
    "height": 2462,
    "url": "https://unsplash.com/photos/nJdwUHmaY8A",
    "download_url": "https://picsum.photos/id/20/3670/2462"
    "id": "2",
    "author": "Alejandro Escamilla",
    "width": 5000,
    "height": 3333,
    "url": "https://unsplash.com/photos/N7XodRrbzS0",
    "download_url": "https://picsum.photos/id/2/5000/3333"
    }
    -->
    </body>
  4. prof3ssorSt3v3 created this gist Nov 25, 2022.
    35 changes: 35 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tinting Images with CSS</title>
    <link href="https://fonts.cdnfonts.com/css/brandon-grotesque" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
    <script>
    document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('header').addEventListener('click', (ev) => {
    ev.target.classList.toggle('tint');
    });
    });
    </script>
    </head>
    <body>
    <nav><a href="#">Things</a> | <a href="#">Stuff</a> | <a href="#">Places</a></nav>
    <header>
    <h1>High-Techie Tech</h1>
    </header>
    <main></main>
    <!--
    {
    "id": "20",
    "author": "Aleks Dorohovich",
    "width": 3670,
    "height": 2462,
    "url": "https://unsplash.com/photos/nJdwUHmaY8A",
    "download_url": "https://picsum.photos/id/20/3670/2462"
    }
    -->
    </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 @@
    * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
    }
    html {
    font-weight: 300;
    font-size: 20px;
    }
    body {
    min-height: 100vh;
    background-color: hsl(220, 40%, 90%);
    }
    nav {
    padding: 1rem 4rem;
    background-color: #222;
    color: white;
    font-size: 1.4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    }
    nav a {
    color: currentColor;
    font-family: 'brandon grotesque';
    text-decoration: none;
    letter-spacing: 1px;
    padding: 0 2rem;
    }
    nav a:hover {
    text-decoration: underline;
    color: hsl(220, 70%, 90%);
    }
    header {
    background-image: url(https://picsum.photos/id/2/2936/1970?grayscale);
    background-size: cover;
    background-position: center;
    height: 800px;
    display: grid;
    place-content: center;
    }
    header.tint {
    background-image: linear-gradient(180deg, hsla(200, 60%, 50%, 0.16), hsla(200, 50%, 30%, 0.95) 80%),
    url(https://picsum.photos/id/2/2936/1970?grayscale);
    }
    h1 {
    color: white;
    font-family: 'brandon grotesque';
    font-size: 6rem;
    font-weight: 300;
    padding: 1rem;
    }
    main {
    min-height: 400px;
    }

    @media screen and (max-width: 600px) {
    h1 {
    font-size: 3rem;
    }
    nav {
    vertical-align: middle;
    }
    nav a {
    font-size: 1rem;
    padding: 0 1rem;
    }
    }