HTML&CSS Ve Java Script Ile Marvel Tabs Yapımı - Fun For Code

HTML&CSS ve Java Script ile Marvel Tabs Yapımı

@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;
                

            }

        }
    }
}

<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>

 

GÖRÜNÜMÜ;

HTML&CSS ve Java Script ile Marvel Tabs Yapımı 1

KODLAR;

5 Comments

  1. Joseph Scott 26 Mart 2014 Reply
    • john 26 Mart 2014 Reply
  2. maria 26 Mart 2014 Reply
  3. Coen Jacobs 26 Mart 2014 Reply
  4. Cobus Bester 26 Mart 2014 Reply

Leave a Reply