[ADD] - Adicionando novos arquivos e desenvolvendo todo o conteudo do…

… site
JoaoFernandesXD · May 24, 2024 · 1b29010 · 1b29010
1 parent 78feaea
commit 1b29010
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -3,9 +3,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="./media/css/style.css" rel="stylesheet" />
+    <script src="./media/js/index.js"></script>
     <title>select netflix profile</title>
 </head>
 <body>
 
+    <section id="container" class="hidden">
+       <h1>Quem está assistindo?</h1>
+       <div class="list-profile">
+            <article class="list-profile__box">
+               <img src="https://i.pinimg.com/564x/61/54/76/61547625e01d8daf941aae3ffb37f653.jpg">
+               <h3>Thais</h3>
+            </article>
+
+            <article class="list-profile__box">
+                <img src="https://i.pinimg.com/564x/a4/c6/5f/a4c65f709d4c0cb1b4329c12beb9cd78.jpg">
+                <h3>Toni</h3>
+             </article>
+
+             <article class="list-profile__box">
+                <img src="https://i.pinimg.com/736x/92/b4/e7/92b4e7c57de1b5e1e8c5e883fd915450.jpg">
+                <h3>Juaum</h3>
+             </article>
+
+             <article class="list-profile__box">
+                <img src="https://i.pinimg.com/originals/c0/8e/6c/c08e6c9595e03202a46a95f66578799f.png">
+                <h3>Andreya</h3>
+             </article>
+
+             <article class="list-profile__box">
+                <img src="./media/image/profile/img_profile_kids.png">
+                <h3>Samuel</h3>
+             </article>
+
+       </div>
+       <button>Gerenciar perfils</button>
+    </section>
 </body>
 </html>
diff --git a/media/css/style.css b/media/css/style.css
@@ -0,0 +1,97 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+:root {
+    --color-back: #141414;
+    --color-white: #FFFFFF;
+    --color-gray: #7B7B7B;
+}
+body {
+    background-color: var(--color-back);
+    font-family: 'Roboto', sans-serif;
+}
+h1 {
+    color: var(--color-white);
+    font-size: 3.5vw;
+    font-weight:lighter;
+    text-align: center;
+    margin-bottom: 3%;
+}
+article h3 {
+    color: var(--color-gray);
+    font-weight:bolder;
+    text-align: center; 
+}
+article button {
+    align-items: center;
+}
+section {
+    width: 100%;
+    max-width: 1155px;
+    margin: 244px auto 0px auto;
+    height: 100%;
+    padding-left: 20px; 
+    padding-right: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+}
+.list-profile {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10%;
+}
+.list-profile__box {
+    max-width: 16.78%;
+    cursor: pointer;
+}
+article img {
+    width: 100%;
+    max-width: 194px;
+    max-height: 194px;
+    border-radius: 3%;
+    margin-bottom: 10px;
+}
+article:hover img {
+    border: solid 4px var(--color-white);
+}
+article:hover h3 {
+    transition: 5ms;
+    color: var(--color-white);
+}
+button {
+    width: 100%;
+    max-width: 270px;
+    height: 55px;
+    background-color: transparent;
+    border: solid  2px var(--color-gray);
+    font-family: 'Roboto', sans-serif;
+    font-size: 25px;
+    font-weight: 500;
+    color: var(--color-gray);
+    cursor: pointer;
+}
+
+button:hover{
+    color: var(--color-white);
+    border: solid  2px var(--color-white);
+    transition: 0.2s;
+}
+.hidden {
+    opacity: 0;
+    visibility: hidden; 
+    transition: opacity 1s;
+}
+
+.visible {
+    opacity: 1;
+    visibility: visible;
+    transition: 1s;
+}
+
diff --git a/media/image/profile/img_profile_kids.png b/media/image/profile/img_profile_kids.png
diff --git a/media/js/index.js b/media/js/index.js
@@ -0,0 +1,8 @@
+//Efeito Delay list profile
+document.addEventListener("DOMContentLoaded", function() {
+    var container = document.getElementById('container');
+    setTimeout(function() {
+        container.classList.remove('hidden');
+        container.classList.add('visible'); 
+    }, 100); 
+});