SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>uHost</title>
    <link rel="shortcut icon" href="favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <header class="main-header">
            <div class="main-header__brand">
                <a href="index.html">
                    uHost
                </a>
            </div>
            <nav class="main-nva">
                <ul class="main-nva__items">
                    <li class="main-nva__item">
                        <a href="packages/index.html">Packages</a>
                    </li>
                    <li class="main-nva__item">
                        <a href="customers/index.html">Customers</a>
                    </li>
                    <li class="main-nva__item main-nva__item--bta">
                        <a href="start-hosting/index.html">Start Hosting</a>
                    </li>
                </ul>
            </nav>
        </header>
    <main>
        <section id="product-overview">
            <h1>Get the freedom you deserve.</h1>
        </section>
        <section id="plans">
            <h1 class="section-title">Choose Your Plan</h1>
            <p>Make sure you get the most for your money!</p>
        </section>
    </main>
</body>

</html>

            
* {
    box-sizing: border-box
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0
}

#product-overview {
    background: #ff1b68;
    width: 100%;
    height: 528px;
    padding: 10px
}

.section-title {
    color: #2ddf5c;
}

#product-overview h1 {
    color: white;
    font-family: 'Anton', sans-serif;
}

/* h1 {
    font-family: sans-serif;
} */

.main-header {
    width: 100%;
    background: #2ddf5c;
    padding: 8px 16px
}

.main-header>div {
    display: inline-block;
    vertical-align: middle;
}

.main-header__brand {
    color: #0c4f1f;    
    font-weight: bold;
    font-size: 22px;
}

.main-header__brand > a{
    text-decoration: none;
}

.main-nva {
    display: inline-block;
    text-align: right;
    width: calc(100% - 75px);
    vertical-align: middle
}

.main-nva__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nva__item {
    display: inline-block;
}

.main-nva__item  a {
    color: #0c4f1f;
    text-decoration: none;
    margin: 0 20px;
    font-weight: bold;
    padding: 3px 0
}

.main-nva__item  a:hover,
.main-nva__item  a:active{
    color:white;
    border-bottom: 5px solid white
}

.main-nva__item--bta{

}