Skip to content

Marvel Tabs

CODEPEN

marvel tabs

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Marvel%20Tabs


HTML

  <div class="container">
    <div class="vertical_tabs">
        <div class="tab" onclick="tabFunction(event, 'spider')" id="defaultOpen">Spider-Man</div>
        <div class="tab" onclick="tabFunction(event, 'captian')">Captain America</div>
        <div class="tab" onclick="tabFunction(event, 'hulk')">Hulk</div>
        <div class="tab" onclick="tabFunction(event, 'thor')">Thor</div>
        <div class="tab" onclick="tabFunction(event, 'war_machine')">War Machine</div>
        <div class="tab" onclick="tabFunction(event, 'ironMan')">Iron Man</div>
        <div class="tab" onclick="tabFunction(event, 'antMan')">Ant Man</div>
        <div class="tab" onclick="tabFunction(event, 'blackPanther')">Black Panther</div>
    </div>
    <div class="show_box">
      <!-- BOX 1 -->
        <div class="show" id="spider">
          <div class="image image_1"></div>
          <p class="date"></p>
          <h2>Spider-Man</h2>
          <p class="info">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore 
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores 
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
            est Lorem ipsum dolor sit amet.
          </p>
        </div>

        <!-- BOX 2 -->
        <div class="show" id="captian">
            <div class="image image_2"></div>
            <h2>Captian America</h2>
            <p class="info">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
              sed diam nonumy eirmod tempor invidunt ut labore et dolore 
              magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
              et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
              sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
              dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
              eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
              sed diam voluptua. At vero eos et accusam et justo duo dolores 
              et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
              est Lorem ipsum dolor sit amet.
            </p>
          </div>

        <!-- BOX 3 -->
        <div class="show" id="hulk">
          <div class="image image_3"></div>
          <h2>Hulk</h2>
          <p class="info">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore 
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores 
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
            est Lorem ipsum dolor sit amet.
          </p>
        </div>

        <!-- BOX 4 -->
        <div class="show" id="thor">
          <div class="image image_4"></div>
          <h2>Thor</h2>
          <p class="info">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore 
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores 
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
            est Lorem ipsum dolor sit amet.
          </p>
        </div>

        <!-- BOX 5 -->
        <div class="show" id="war_machine">
          <div class="image image_5"></div>
          <h2>War Machine</h2>
          <p class="info">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore 
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores 
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
            est Lorem ipsum dolor sit amet.
          </p>
        </div>

        <!-- BOX 6 -->
        <div class="show" id="ironMan">
          <div class="image image_6"></div>
          <h2>Iron Man</h2>
          <p class="info">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore 
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores 
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
            est Lorem ipsum dolor sit amet.
          </p>
        </div>

        <!-- BOX 7 -->
        <div class="show" id="antMan">
          <div class="image image_7"></div>
          <h2>Ant Man</h2>
          <p class="info">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore 
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores 
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
            est Lorem ipsum dolor sit amet.
          </p>
        </div>

        <!-- BOX 8 -->
        <div class="show" id="blackPanther">
          <div class="image image_8"></div>
          <h2>Black Panther</h2>
          <p class="info">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
            sed diam nonumy eirmod tempor invidunt ut labore et dolore 
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores 
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
            est Lorem ipsum dolor sit amet.
          </p>
        </div>
    </div>
  </div>

CSS(sass)

@import url('https://fonts.googleapis.com/css?family=Oswald:400,500');
body{
    padding: 0;
    margin: 0;
    font-family: 'Oswald', sans-serif;
    background: url("https://wallpaperplay.com/walls/full/0/3/d/163882.jpg");
    background-repeat: no-repeat;

    .container{
        display: grid;
        width: 750px;
        height: 420px;
        background: rgba(0,0,0,.2);
        margin: 150px auto;
        border-radius: 15px;
        overflow: hidden;
        grid-template-columns: 1.5fr 5fr;
        grid-template-areas: 
            "tabs boxes";

        .vertical_tabs{
            grid-area: tabs;
            background: #262626;
            box-shadow: inset 0px 0px 15px rgba(0,0,0,.7);
            color: #faf7f5;
        }
        .tab{
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            transition: .5s cubic-bezier(.57,.21,.69,3.25);
            &:hover{
                transform: scale(1.1);
            }
            &.active{
                background: #F6EEE3;
                color: #262626;
                transform: scale(1.2);
                font-size: 18px;
                font-weight: bold;
            }
        }


        .show_box{
            grid-area: boxes;
            background: #F6EEE3;
            box-shadow: inset 0px 0px 15px rgba(0,0,0,.7);
            position: relative;

            .show{
                position: absolute;
                width: 90%;
                left: 50%;
                top: 40px;
                transform: translateX(-50%);

                .image{
                    width: 50%;
                    height: 200px;
                    float: left;
                    margin: 0px 15px 0px 0px;
                    border-radius: 10px 0px;
                }
                .image_1{
                    background: url("https://images.alphacoders.com/927/927310.jpg");
                    background-position: right;
                    background-size: cover;
                }
                .image_2{
                    background: url("https://images.alphacoders.com/660/thumb-1920-660254.jpg");
                    background-size: cover;
                    background-position: center;
                }
                .image_3{
                    background: url("https://images5.alphacoders.com/403/thumb-1920-403369.jpg");
                    background-size: cover;
                    background-position: center;
                }
                .image_4{
                    background: url("https://images3.alphacoders.com/674/674048.jpg");
                    background-size: cover;
                    background-position: center;
                }
                .image_5{
                    background: url("https://www.sideshow.com/product-asset/902831/feature");
                    background-size: cover;
                    background-position: right;
                }
                .image_6{
                    background: url("https://images2.alphacoders.com/971/971653.jpg");
                    background-size: cover;
                    background-position: center;
                }
                .image_7{
                    background: url("http://www.laprensalibre.cr/files/noticias/images/detail/656086486_ant_man_hd_wallpapers.jpg");
                    background-size: cover;
                    background-position: center;
                }
                .image_8{
                    background: url("https://stmed.net/sites/default/files/black-panther-wallpapers-29427-7479210.png");
                    background-size: cover;
                    background-position: center;
                }
                h2{
                    font-size: 28px;
                    color: #262626;
                    margin-top: 0px;
                }
                .info{
                    font-size: 15px;
                }
            }
        }
    }
}

@media only screen and (max-width:750px){
    body{

        .container{
            display: grid;
            width: 100%;
            min-height: 850px;
            grid-template-rows: 1.5fr 5fr;
            grid-template-columns: 1fr;
            border-radius: 15px;
            overflow: hidden;
            grid-template-areas: 
                "tabs"
                "boxes";

            .vertical_tabs{
                grid-area: tabs;
                height: 410px;
            }
            .show_box{
                grid-area: boxes;
                position: relative;
                

            }

        }
    }
}

JS

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

    document.getElementById("defaultOpen").click();

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: