<html>
    <head>
        <link rel="stylesheet" href="basic.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <header>
            <nav id="navbar">
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <h1>my awesome portfolio</h1>
                <div class="grid">
                <div class="item">
                    <h1>project a</h1>
                    <button>learn more</button>
                </div>
                <div class="item">
                    <h1>project b</h1>
                    <button>learn more</button>
                </div>
                <div class="item">
                    <h1>project c</h1>
                    <button>learn more</button>
                </div>
                <div class="item">
                    <h1>project d</h1>
                    <button>learn more</button>
                </div>
            </div>
        </main>
        <footer><p>Made with ☕ in Norway</p></footer>
    </body>
</html>
:root {
    --red: #ff6f69;
    --beige: #ffeead;
    --yellow: #ffcc5c;
    --duplicate-red: var(--red);
}

html, body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

h1 {
    text-align: center;
    font-size: 36px;
}

#navbar {
    padding: 20px 0;
    font-size: 24px;
}

.grid {
    display: grid;
    grid-template-columns: 200px 200px;
    grid-auto-rows: 140px;
    grid-gap: 20px;
    justify-content: center;
}

a {
    font-size: 28px;
}

#navbar > ul {
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}

p {
    text-align: center;
}

h1 {
    font-size: 36px;
}

p {
    font-size: 18px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

footer > p {
    font-size: 12px;
}

button {
    margin: 0px auto;
    display: block;
    padding: 5px 10px;
    border: none;
}

/* CSS variable */
html, body {
    background: var(--beige);
    color: var(--duplicate-red);
}

h1, p {
    color: var(--duplicate-red);
}

#navbar
{
  --duplicate-red: black;
}

#navbar a {
    color: var(--duplicate-red);
}

.item {
    background: var(--yellow);
}

button {
    background: var(--duplicate-red);
    color: var(--yellow);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.