diff --git a/index.html b/index.html index 7181398..29f03c1 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,42 @@ + + select netflix profile + \ No newline at end of file diff --git a/media/css/style.css b/media/css/style.css index e69de29..f9a9bf3 100644 --- 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 new file mode 100644 index 0000000..e6b3ce0 Binary files /dev/null and b/media/image/profile/img_profile_kids.png differ diff --git a/media/js/index.js b/media/js/index.js index e69de29..02f7baa 100644 --- 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); +});