Coder Social home page Coder Social logo

netflixdio's People

Watchers

Tiago Ferreira Cavazin avatar

netflixdio's Issues

index.html 

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

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

<title>Netflix</title>

<!-- href - ícone de aba  -->
<link rel="icon" href="./img/netlogo.png" />

<main>
    <div class="filme-principal">
        <div class="container">
            <img src="./img/black.png" alt="Black Mirror" class="logo">

            <h3 class="titulo">BLACK MIRROR</h3>
            <p class="descricao">Esta série antológica de ficção científica explora um futuro próximo onde a natureza humana e a tecnologia de ponta entram em um perigoso conflito.</p>
            <div class="botoes">
                <button role="button" class="botao">
                    <i class="fas fa-play"></i>
                    ASSITIR 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-carousel owl-theme">
        <div class="item">
            <img class="box-filme" src="img/1.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/2.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/3.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/4.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/5.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/6.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/7.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/8.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/9.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img class="box-filme" src="img/10.jpg" alt="" srcset="">
        </div>
    </div>
</div>

<script src="https://kit.fontawesome.com/0d861c91f5.js" crossorigin="anonymous"></script>
<script src="js/owl/jquery.min.js"></script>
<script src="js/owl/owl.carousel.min.js"></script>
<script src="js/owl/js.js"></script>

owl.theme.default.min.css

/**

  • Owl Carousel v2.3.4
  • Copyright 2013-2018 David Deutsch
  • Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
    /
    .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class    =owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

main.css

:root {
--vermelho: #E50914;
--preta: #000000;
}

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

/Base/

body {
background: var(--preta);
font-family: 'Arial', Times, serif;
color: white;
}

header .container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 55px;
}

header .logo {
margin-left: 5px;
color: var(--yellow);
font-family: 'Arial Black', Times;
font-size: 2px;
width: 110px;
}

header nav a {
text-decoration: none;
color: #333333;
margin-right: 10px;
}

header nav a:hover {
color: #FFF;
}

/filme/

.filme-principal {
font-size: 16px;
background: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)100%), url('/img/capa.jpg');
height: 400px;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.filme-principal .descricao {
margin-top: 10px;
margin-bottom: 40px;
}

.logo {
width: 50%;
height: auto;
}

.titulo {
margin-top: 20px;
font-size: 24px;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
}

.botao {
background-color: rgba(0, 0, 0, .50);
border: none;
color: white;
padding: 15px 30px;
margin-right: 15px;
font-size: 12px;
cursor: pointer;
transition: .3s ease all;
}

.botao:hover {
background-color: white;
color: black;
}

.botao i {
margin-right: 8px;
}

.container {
margin-left: 20px;
}

.filme-principal .container {
width: 70%;
padding-left: 50px;
}

.box-filme {
height: 100%;
width: 100%;
display: block;
}

.carrosel-filmes {
margin-top: 5px;
}

responsive.css

@media screen and (max-width: 700px) {
header .container {
display: flex;
flex-direction: column;
}
.botao {
margin-top: 5px;
width: 300px;
}
}

@media screen and (min-width: 1000px) {
.descricao {
width: 50%;
}
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.