Github Main Page

by harambae

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link type="text/css" rel="stylesheet" href="style.css">
        <title>Github Main Page</title>
    </head>
    <body>
        <header>
            <nav>
                <ul class="navigation">
                    <li class="navigation__left">
                        <a href="https://github.com">
                            <img src="github.png" alt="logo">
                        </a>
                    </li>
                    <li class="navigation__left">
                        <a href="#">Why Github?</a>
                        <ul class="navigation__left__dropdown">
                            <li>Dropdown 1</li>
                            <li>Dropdown 2</li>
                        </ul>
                    </li>
                    <li class="navigation__left">
                        <a href="#">Enterprise</a>
                    </li>
                    <li class="navigation__left">
                        <a href="#">Explore</a>
                        <ul class="navigation__left__dropdown">
                            <li>Dropdown 1</li>
                            <li>Dropdown 2</li>
                        </ul>
                    </li>
                    <li class="navigation__left">
                        <a href="#">Marketplace</a>
                    </li>
                    <li class="navigation__left">
                        <a href="#">Pricing</a>
                        <ul class="navigation__left__dropdown">
                            <li>Dropdown 1</li>
                            <li>Dropdown 2</li>
                        </ul>
                    </li>
                    <li class="navigation__right">
                        <input type="text" placeholder="Search GitHub">
                    </li>
                    <li class="navigation__right">
                        <a...

CSS

html { box-sizing: border-box }
*,*:before,*:after { 
    box-sizing: inherit;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
body { font: 16px; line-height: 1.5; background-color: black;}
a { text-decoration: none; color: inherit; }

.navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    background-color: black;
}

.navigation__left {
    border: 2px solid red;
    float: left;
}

.navigation__right {
    border: 2px solid blue;
    float: right;
}

.navigation__left,.navigation__right {
    cursor: pointer;
    color: white;
    padding: 1rem;
}

.navigation__left img {
    height: 4vh;
}

.navigation__left__dropdown {
    position: absolute;
    margin-top: 1rem;
    display: none;
    color: black;
    background-color: white;
    padding: 20px;
    border-radius: 3%;
}

.navigation__left:hover {
    color: gray;
}

.navigation__left:nth-child(even):hover .navigation__left__dropdown {
    display: block;
}

.navigation__right:last-child a {
    border: 1px solid white;
    padding: 0.5vw 1vw 0.5vw 1vw;
    border-radius: 3%;
}

input {
    height: 3vh;
    width: 15vw;
    background-color: gray;
    border: 0;
    border-radius: 3%;
    padding: 10px;
}

input::placeholder {
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
}