-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit aa003d7
Showing
23 changed files
with
381 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| /* L'étoile donne du style à TOUS les éléments */ | ||
| * { | ||
| /* border: 2px solid red; */ | ||
| /* permet de ne pas élargir la largeur de la box quand on applique un padding à une box */ | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| margin: 0; | ||
| font-family: "Open Sans", sans-serif; | ||
| min-height: 100vh; | ||
| } | ||
| #home { | ||
| background: url(../assets/img/background.jpg) center/cover; | ||
| } | ||
| #profil-page, | ||
| #films-page { | ||
| background: #141414; | ||
| } | ||
| nav { | ||
| min-height: 100px; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| nav img { | ||
| width: 150px; | ||
| } | ||
| .nav-bar a { | ||
| margin-left: 10px; | ||
| font-weight: 400; | ||
| transition: all 0.3s; | ||
| -webkit-transition: all 0.3s; | ||
| -moz-transition: all 0.3s; | ||
| -ms-transition: all 0.3s; | ||
| -o-transition: all 0.3s; | ||
| } | ||
| .nav-bar a:hover{ | ||
| border-bottom: 2px solid #fff; | ||
|
|
||
| } | ||
| h1 { | ||
| color: white; | ||
| font-size: 3rem; | ||
| } | ||
| h2{ | ||
| color: white; | ||
| } | ||
| .content { | ||
| margin: 0 10%; | ||
| margin-top: 150px; | ||
| } | ||
| .row { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .profil img { | ||
| border: 2px solid transparent; | ||
| width: 100%; | ||
| } | ||
| .profil img, | ||
| .profil p { | ||
| transition: all 0.3s; | ||
| -webkit-transition: all 0.3s; | ||
| -moz-transition: all 0.3s; | ||
| -ms-transition: all 0.3s; | ||
| -o-transition: all 0.3s; | ||
| } | ||
| .profil:hover img { | ||
| border: 2px solid #fff; | ||
| } | ||
| .profil:hover p { | ||
| color: #fff; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| } | ||
| .btn { | ||
| text-transform: uppercase; | ||
| border: 1px solid #808080; | ||
| padding: 0.5em 1.5em; | ||
| color: #808080; | ||
| margin-top: 50px; | ||
| font-size: 0.9rem; | ||
| transition: 0.3s; | ||
| -webkit-transition: 0.3s; | ||
| -moz-transition: 0.3s; | ||
| -ms-transition: 0.3s; | ||
| -o-transition: 0.3s; | ||
| } | ||
| .btn:hover { | ||
| border: 1px solid #fff; | ||
| color: #fff; | ||
| } | ||
| .space-between { | ||
| justify-content: space-between; | ||
| } | ||
| video { | ||
| width: 100%; | ||
| } | ||
| #video { | ||
| height: 600px; | ||
| overflow: hidden; | ||
| } | ||
| #films-page nav{ | ||
| position:absolute; | ||
| width: 100%; | ||
| top:0; | ||
| left:0; | ||
| z-index: 9; | ||
| } | ||
| #films-page .row{ | ||
| margin-top: 10px; | ||
| } | ||
| #films-page .content { | ||
| margin-top:10px; | ||
| } | ||
| .row div{ | ||
| width: 100%; | ||
| } | ||
| .pl-5{ | ||
| padding-left: 50px; | ||
| } | ||
| button{ | ||
| background: rgba(51, 51, 51, 0.8); | ||
| border: none; | ||
| color:#fff; | ||
| padding: 12px 20px; | ||
| font-size: 1rem; | ||
| font-weight: 600; | ||
| border-radius: 5px; | ||
| -webkit-border-radius: 5px; | ||
| -moz-border-radius: 5px; | ||
| -ms-border-radius: 5px; | ||
| -o-border-radius: 5px; | ||
| transition: all 0.3s; | ||
| -webkit-transition: all 0.3s; | ||
| -moz-transition: all 0.3s; | ||
| -ms-transition: all 0.3s; | ||
| -o-transition: all 0.3s; | ||
| } | ||
| button i{ | ||
| margin-right: 5px; | ||
| } | ||
| button:hover{ | ||
| background: rgba(51, 51, 51, 1); | ||
| cursor:pointer; | ||
| } | ||
| form { | ||
| background: rgba(0, 0, 0, 0.75); | ||
| color: #fff; | ||
| width: 400px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 20px; | ||
| } | ||
| input { | ||
| padding: 16px 20px; | ||
| margin: 5px 0; | ||
| border: none; | ||
| background: #333; | ||
| font-size: 1rem; | ||
| color: white; | ||
| border-radius: 4px; | ||
| -webkit-border-radius: 4px; | ||
| -moz-border-radius: 4px; | ||
| -ms-border-radius: 4px; | ||
| -o-border-radius: 4px; | ||
| opacity: 0.8; | ||
| outline: none; | ||
| } | ||
| input[type="submit"] { | ||
| background: rgb(211, 8, 18); | ||
| font-weight: 700; | ||
| text-transform: uppercase; | ||
| } | ||
| input[type="submit"]:hover { | ||
| cursor: pointer; | ||
| background: rgb(173, 7, 15); | ||
| } | ||
| input[type="email"]:focus, | ||
| input[type="password"]:focus, | ||
| input[type="email"]:hover, | ||
| input[type="password"]:hover { | ||
| opacity: 1; | ||
| background: rgb(34, 34, 34); | ||
| } | ||
| label { | ||
| color: white; | ||
| margin-left: 10px; | ||
| } | ||
| p { | ||
| color: #737373; | ||
| } | ||
| a { | ||
| color: white; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="fr"> | ||
|
|
||
| <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" /> | ||
| <title>Netflix Clone : Library</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> | ||
| <link rel="stylesheet" href="./css/style.css" /> | ||
| </head> | ||
|
|
||
| <body id="films-page"> | ||
| <nav> | ||
| <a href="index.html"> | ||
| <img src="./assets/img/logo-netflix.png" alt="logo netflix" /> | ||
| </a> | ||
| <div class="nav-bar"> | ||
| <a href="">Home</a> | ||
| <a href="">TV Shows</a> | ||
| <a href="">Movies</a> | ||
| </div> | ||
| </nav> | ||
| <div id="video"> | ||
| <video autoplay muted> | ||
| <source src="./assets/videos/casa-de-papel.mp4" type="video/mp4" /> | ||
| </video> | ||
| </div> | ||
| <section class="content"> | ||
| <h2>My List</h2> | ||
| <div class="row space-between"> | ||
| <img src="./assets/img/thumbnails/thumb-1.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-2.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-3.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-4.jpg" alt="" /> | ||
| </div> | ||
| <div class="row space-between"> | ||
| <img src="./assets/img/thumbnails/thumb-5.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-6.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-7.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-8.jpg" alt="" /> | ||
| </div> | ||
| </section> | ||
| <section class="content"> | ||
| <div class="row"> | ||
| <div> | ||
| <video autoplay muted> | ||
| <source src="./assets/videos/elite.mp4" type="video/mp4" /> | ||
| </video> | ||
| </div> | ||
| <div class="pl-5"> | ||
| <h2>#2 In France</h2> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, | ||
| debitis excepturi dolore eius sunt beatae fuga dolores sequi | ||
| deserunt totam magnam eaque consequatur, blanditiis quis eveniet | ||
| rerum! Iusto, at odio! A ut sint laudantium unde sed delectus at | ||
| repellat dolore mollitia voluptas. Inventore, dicta nam et aliquid | ||
| voluptatem similique, quo dolorum ab quia aut dolorem, iusto rem | ||
| nesciunt quam itaque. Pariatur laudantium quas eos vitae | ||
| perspiciatis expedita commodi vero, dolore a nulla consequatur, | ||
| tenetur beatae aspernatur. Cupiditate quisquam nulla quibusdam amet | ||
| placeat voluptates aliquid nihil, sit facilis esse libero iste! | ||
| Dicta eius tenetur doloremque numquam vel officia similique facilis | ||
| magnam deleniti sunt voluptate provident error unde non totam | ||
| eligendi nam expedita odio consequuntur, commodi omnis. Ut velit | ||
| cupiditate consequuntur sed. sdfsdfsfsf. | ||
| </p> | ||
| <button> | ||
| <i class="fa-solid fa-play"></i> | ||
| Play | ||
| </button> | ||
| <button><i class="fa-solid fa-info"></i>More Info</button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="content"> | ||
| <h2>My List</h2> | ||
| <div class="row space-between"> | ||
| <img src="./assets/img/thumbnails/thumb-1.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-2.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-3.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-4.jpg" alt="" /> | ||
| </div> | ||
| <div class="row space-between"> | ||
| <img src="./assets/img/thumbnails/thumb-5.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-6.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-7.jpg" alt="" /> | ||
| <img src="./assets/img/thumbnails/thumb-8.jpg" alt="" /> | ||
| </div> | ||
| </section> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="fr"> | ||
|
|
||
| <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" /> | ||
| <title>Netflix Clone : Home</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="./css/style.css" /> | ||
| </head> | ||
|
|
||
| <body id="home"> | ||
| <nav><a href="index.html"> | ||
| <img src="./assets/img/logo-netflix.png" alt="logo netflix" /> | ||
| </a></nav> | ||
| <div class="content"> | ||
| <div class="row"> | ||
| <form action="profil.html"> | ||
| <h2>S'identifier</h2> | ||
| <input type="email" placeholder="Entrez votre E-mail" /> | ||
| <input type="password" placeholder="Entrez votre password" /> | ||
| <input type="submit" value="connexion" /> | ||
| <p> | ||
| <input type="checkbox" id="save" /> | ||
| <label for="save">Se souvenir de moi</label> | ||
| </p> | ||
| <p>Première visite sur Netflix ? <a href="#">Inscrivez-vous</a></p> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="fr"> | ||
|
|
||
| <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" /> | ||
| <title>Netflix Clone : Manage Profils</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="./css/style.css" /> | ||
| </head> | ||
|
|
||
| <body id="profil-page"> | ||
| <nav><a href="index.html"> | ||
| <img src="./assets/img/logo-netflix.png" alt="logo netflix" /> | ||
| </a></nav> | ||
| <section class="content"> | ||
| <h1>Who's watching ?</h1> | ||
| <div class="row space-between"> | ||
| <div class="profil"> | ||
| <a href="films.html"> | ||
| <img src="./assets/img/avatars/avatar-1.png" alt="" /> | ||
| <p>Julien</p> | ||
| </a> | ||
| </div> | ||
| <div class="profil"> | ||
| <a href="films.html"> | ||
| <img src="./assets/img/avatars/avatar-2.png" alt="" /> | ||
| <p>Marc</p> | ||
| </a> | ||
| </div> | ||
| <div class="profil"> | ||
| <a href="films.html"> | ||
| <img src="./assets/img/avatars/avatar-3.png" alt="" /> | ||
| <p>Sophie</p> | ||
| </a> | ||
| </div> | ||
| <div class="profil"> | ||
| <a href="films.html"> | ||
| <img src="./assets/img/avatars/avatar-4.png" alt="" /> | ||
| <p>Fabrice</p> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <a class="btn" href="">Manage Profils</a> | ||
| </div> | ||
| </> | ||
| </body> | ||
|
|
||
| </html> |