Skip to content
Advertisements

Tab Header – Tesla Cars

CODEPEN

Tab Header – Tesla Cars

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Tab%20-%20Tesla%20Car%20Models


HTML

  <div class="container">
        <h2></h2>
        <div class="model model_x"  id="model_x">
          <h2>Tesla Model X</h2>
        </div>
        
        <div class="model model_s" id="model_s" >
            <h2>Tesla Model S</h2>
        </div>

        <div class="model model_y" id="model_y">
            <h2>Tesla Model Y</h2>
        </div>

        <div class="bottom_tabs">
            <div class="tab" onclick="tesla_car(event,'model_x')">Model X</div>
            <div class="tab" onclick="tesla_car(event,'model_s')">Model S</div>
            <div class="tab" onclick="tesla_car(event,'model_y')">Model Y</div>
        </div>


    </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body{
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Roboto Condensed', sans-serif;
    

    .container{
        width: 750px;
        height: 450px;
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0px 40px 100px 3px black;
    }
    .model_x{
        position: absolute;
        background: url("https://4-images.motorcar.com/portals/blog/motorcar/244/1024/1903.jpg");
        background-size: cover;
        width: 100%;
        height: 90%;
    }
    .model_s{
        position: absolute;
        background: url("https://www.tesla.com/tesla_theme/assets/img/models/v1.0/section-hero-background.jpg?20180111");
        background-size: cover;
        width: 100%;
        height: 90%;
        background-position: center;
    }
    .model_y{
        position: absolute;
        background: url("https://cdn.motor1.com/images/mgl/LEKjM/s3/tesla-model-y.jpg");
        background-size: cover;
        width: 100%;
        height: 90%;
    }
    h2{
        position: absolute;
        bottom: 30px;
        left: 30px;
        color: #fff;
        text-shadow: 0px 0px 5px black;
    }
    .bottom_tabs{
        position: absolute;
        bottom: 0px;
        width: 100%;

        div{
            position: relative;
            display: block;
            float: left;
            width: 33.333%;
            text-align: center;
            background: #fff;
            padding: 15px;
            box-sizing: border-box;
            color: #262626;
            font-weight: bold;
            cursor: pointer;
            transition: .5s;

            &:hover{
                background: rgb(226, 226, 226);
            }
            &:before{
                content: "";
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 0px;
                background:#262626;
                transition: .5s;
            }
            &.active:before{
                height: 50px;
                opacity: .7;
            }
        }
    }
}

JS

    function tesla_car(evt,car){

      let model = document.getElementsByClassName("model");
      for(let i=0; i < model.length; i++){
         model[i].style.display = "none";
      }
      
      let tab = document.getElementsByClassName("tab");
      for(let i=0; i < tab.length; i++){
         tab[i].className = tab[i].className.replace(" active","");
      }
      document.getElementById(car).style.display = "block";
      evt.currentTarget.className += " active";

    }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: