0

Front End Clone do Netflix

Thiago Silva
Thiago Silva

Um clone front end do Netflix usando owl carousel, jquery e responsivo para dispositivo IOS e para telas grandes, assista um trailer e veja mais informações no IMDB.


Projeto está no GitHUB, deêm uma olhada e aceito sugestões para melhoria.

Link: https://github.com/thiagoviks/Netflix-Clone


Obrigado.

0
0

Comentários (5)

0
Ivisson Ferreira

Ivisson Ferreira

12/07/2021 10:57

Bom dia, estou tendo o mesmo problema, tentei solucionar mais as imagens estão uma em baixo da outra...


// Codigo HTML


<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <base href="/">

    <link rel="stylesheet" href="/style/main.css">

    <link rel="stylesheet" href="style.css">

    

    <!--responsividade-->

    <link rel="stylesheet" href="style/responsive.css">



     <!--owl css-->

     <link rel="stylesheet" href="style/owl/owl.carousel.min.css"> 

     <link rel="stylesheet" href="style/owl/owl.theme.default.min.css">


    <title>NETFLIX CLONE</title>

</head>

<body>

    <header>

        <div class="container">

            <h2 class="logo">NETFLIX</h2>

            <nav>

                <a href="#">Inicio</a>

                <a href="#">Séries</a>

                <a href="#">Filmes</a>

                <a href="#">Documentários</a>

            </nav>

        </div>

    </header>


    <main>

        <div class="filme-principal">

            <div class="container">

                <h3 class="titulo">HOUSE OF CARDS</h3>

                <p class="descricao">Um político inescrupuloso não mede esforços para conquistar o poder nos EUA neste drama vencedor do Emmy e do Globo de Ouro. Assista agora a nova temporada de House of Cards que está imperdível.</p>

                <div class="botoes">

                    <button role="button" class="botao">

                        <i class="fas fa-play"></i>

                        ASSISTA AGORA

                    </button>

                    <button role="button" class="botao">

                        <i class="fas fa-info-circle"></i>

                         MAIS INFORMAÇÕES

                    </button>

                </div> 

            </div>

        </div>

    </main>



    

    <div class="carrosel-filmes">

        <div class="owl-corousel owl-theme">

            <div class="item">

                <img class="box-filme" src="/img/mini1.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini1.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini2.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini3.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini4.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini5.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini6.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini7.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini8.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini9.jpg" alt="" srcset="">

            </div>

            <div class="item">

                <img class="box-filme" src="/img/mini10.jpg" alt="" srcset="">

            </div>

        </div>

    </div>


    <script src="https://kit.fontawesome.com/2c36e9b7b1.js"></script>

    <script src="/js/owl/jquery.min.js"></script>

    <script src="/js/owl/owl.carousel.min.js"></script>

    <script src="/js/owl/setup.js"></script>



</body>

</html>


// Código CSS


:root{

    --vermelho#e50914;

    --preto#141414;

     

}


*{

    margin0;

    padding0;

    box-sizingborder-box;

}


/* Elemento base*/


body{

    backgroundvar(--preto);

    font-family'Arial'Timesserif;

    colorwhite;


}


 

header .container{

    displayflex;

    flex-directionrow;

    align-itemscenter;

    justify-contentspace-between;

}


header .logo{

    margin-left5px;

    colorvar(--vermelho);

    font-family'Arial Black'Times;

    font-size40px;

}


header nav a{

    text-decorationnone;

    color#AAA;

    margin-right10px;

}


header nav a:hover{

    color#fff;

}


/* Filme principal*/


.filme-principal{

    font-size16px;

    backgroundlinear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.50)100%), url('/img/capa-house.jpg');


    height500px;

    background-sizecover;


    displayflex;

    flex-directioncolumn;

    justify-contentcenter;

    align-itemsflex-start;

}


.filme-principal .descricao{

    margin-top15%;

    margin-bottom40px;

   

}


.filme-principal .titulo{

    margin-top15%;

    font-size40px;

    font-family'Trebuchet MS''Lucida Sans Unicode''Lucida Grande''Lucida Sans'Arialsans-serif;

}


.botao{

    background-colorrgba(0,0,0,.50);

    bordernone;

    colorwhite;


    padding15px 30px;

    margin-right15px;

    font-size12px;


    cursorpointer;

    transition.3s ease all;

}


.botao:hover{

    background-colorwhite;

    colorblack

    

}


.botao i{

    margin-right8px;

}


.container{

    margin-left20px;

}


.filme-principal .container{

    width70%;

}


.box-filme{

    height100%;

    width20%;

    displayblock;

}



.carrosel-filmes{

    margin-top:5px;

}


Código Setup


$('.owl-carousel').owlCarousel({

    loop:true,

    margin:10,

    nav:true,

    responsive:{

        0:{

            items:1

        },

        600:{

            items:3

        },

        1000:{

            items:5 

        }

    }

})

0
Renan Vale

Renan Vale

10/07/2021 00:15

Parabéns man

0
Ezequiel Campana

Ezequiel Campana

09/07/2021 21:45

Olá Thiago,

Show de bola.... bons estudos...

Sucesso pra todos nós sempre!

0
Luiz Chaves

Luiz Chaves

09/07/2021 21:16

Show

0
B

Brayam Becker

09/07/2021 21:13

Muito bom

Thiago Silva é um apaixonado por tecnologia e autodidata. Desde que iniciou profissionalmente, notou que essa é sua vocação.

Brasil