Basic header and background changes + tabs

4 年之前 · 9d624b61fb
--- a/css/style.css
+++ b/css/style.css
@@ -17,17 +17,55 @@ body {
    font-weight: 700;
 }

 .background {
    position: absolute;
    background-color: #161616;
    width: 100%;
    height: 60vh;
    overflow: hidden;
 }

 .background::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: -20%;
    width: 140%;
    height: 60px;
    background: white;
    border-radius: 50%;
 }

 .foreground {
    position: relative;
    padding: 1px;
 }

 header{
    text-align: center;
    color : white;
    margin: 110px auto 20px;
 }

 .tabs-holder {
    width: 75%;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    background-color : #222222;
    color: white;
    border-radius: 500px;

    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
 }

 .tab {
    border-radius : 4px;
    background-color : green;
    color : white;
    padding: 10px;
    border-radius: 500px;
    font-size: 13px;
 }

 .tab.active {
    background-color : #59c692;
 }
--- a/index.html
+++ b/index.html
@@ -10,15 +10,21 @@
    <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
    
    <header>
        <h1>Work With Us</h1>
        <h4>Totally we have 11 job openings</h4>
    </header>

    <div class="tabs-holder">
        <section class="tab">Employment</section>
    <div class="background"></div>

    <div class="foreground">
        <header>
            <h1>Work With Us</h1>
            <h4>Totally we have 11 job openings</h4>
        </header>
    
        <div class="tabs-holder">
            <section class="tab active">Employment</section>
            <section class="tab">Internship</section>
        </div>
    </div>
    

 </body>
 </html>