diff --git a/Final/assets/bg.jpg b/Final/assets/bg.jpg new file mode 100644 index 0000000..91bfd5c Binary files /dev/null and b/Final/assets/bg.jpg differ diff --git a/Final/assets/img/background.jpg b/Final/assets/img/background.jpg new file mode 100644 index 0000000..5992ad7 Binary files /dev/null and b/Final/assets/img/background.jpg differ diff --git a/Final/assets/img/background2.jpg b/Final/assets/img/background2.jpg new file mode 100644 index 0000000..500eef6 Binary files /dev/null and b/Final/assets/img/background2.jpg differ diff --git a/Final/assets/img/dbz.png b/Final/assets/img/dbz.png new file mode 100644 index 0000000..e2a5cd1 Binary files /dev/null and b/Final/assets/img/dbz.png differ diff --git a/Final/assets/img/facebook.png b/Final/assets/img/facebook.png new file mode 100644 index 0000000..bebbb5b Binary files /dev/null and b/Final/assets/img/facebook.png differ diff --git a/Final/assets/img/fb.png b/Final/assets/img/fb.png new file mode 100644 index 0000000..670030f Binary files /dev/null and b/Final/assets/img/fb.png differ diff --git a/Final/assets/img/goku2.gif b/Final/assets/img/goku2.gif new file mode 100644 index 0000000..60bd1be Binary files /dev/null and b/Final/assets/img/goku2.gif differ diff --git a/Final/assets/img/instagram.png b/Final/assets/img/instagram.png new file mode 100644 index 0000000..674d898 Binary files /dev/null and b/Final/assets/img/instagram.png differ diff --git a/Final/assets/img/kids.png b/Final/assets/img/kids.png new file mode 100644 index 0000000..f0fbe47 Binary files /dev/null and b/Final/assets/img/kids.png differ diff --git a/Final/assets/img/lupa.png b/Final/assets/img/lupa.png new file mode 100644 index 0000000..ed38496 Binary files /dev/null and b/Final/assets/img/lupa.png differ diff --git a/Final/assets/img/mais.png b/Final/assets/img/mais.png new file mode 100644 index 0000000..27ab457 Binary files /dev/null and b/Final/assets/img/mais.png differ diff --git a/Final/assets/img/mobile.png b/Final/assets/img/mobile.png new file mode 100644 index 0000000..6809e7d Binary files /dev/null and b/Final/assets/img/mobile.png differ diff --git a/Final/assets/img/pc.png b/Final/assets/img/pc.png new file mode 100644 index 0000000..52c55e5 Binary files /dev/null and b/Final/assets/img/pc.png differ diff --git a/Final/assets/img/perfil01.png b/Final/assets/img/perfil01.png new file mode 100644 index 0000000..a7d8dee Binary files /dev/null and b/Final/assets/img/perfil01.png differ diff --git a/Final/assets/img/perfil02.png b/Final/assets/img/perfil02.png new file mode 100644 index 0000000..ea91676 Binary files /dev/null and b/Final/assets/img/perfil02.png differ diff --git a/Final/assets/img/perfil03.png b/Final/assets/img/perfil03.png new file mode 100644 index 0000000..c68c650 Binary files /dev/null and b/Final/assets/img/perfil03.png differ diff --git a/Final/assets/img/presente.png b/Final/assets/img/presente.png new file mode 100644 index 0000000..c72fefa Binary files /dev/null and b/Final/assets/img/presente.png differ diff --git a/Final/assets/img/sino.png b/Final/assets/img/sino.png new file mode 100644 index 0000000..04b6ea9 Binary files /dev/null and b/Final/assets/img/sino.png differ diff --git a/Final/assets/img/tv.png b/Final/assets/img/tv.png new file mode 100644 index 0000000..9076187 Binary files /dev/null and b/Final/assets/img/tv.png differ diff --git a/Final/assets/img/twitter.png b/Final/assets/img/twitter.png new file mode 100644 index 0000000..c5abce7 Binary files /dev/null and b/Final/assets/img/twitter.png differ diff --git a/Final/assets/img/youtube.png b/Final/assets/img/youtube.png new file mode 100644 index 0000000..f275e8d Binary files /dev/null and b/Final/assets/img/youtube.png differ diff --git a/Final/intro/introduce.css b/Final/intro/introduce.css new file mode 100644 index 0000000..29dcfd2 --- /dev/null +++ b/Final/intro/introduce.css @@ -0,0 +1,530 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +:root{ + --red: #ff0000; + --white: #FFFFFF; + --black: #000000; + --gray: gray; +} + +.container-main{ + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1)), url('/Final/assets/bg.jpg'); + /* background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)), url('/assets/bg.jpg'); */ + opacity: 0.9; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 100vh; + width: 100vw; +} + +.container-main header { + display: flex; + justify-content: space-between; + width: 100%; + padding: 20px 50px; +} + +.container-main header img{ + width: 140px; + height: 50px; +} + +.container-main header nav{ + display: flex; + justify-content: flex-end; +} + +.container-main header nav ul{ + display: flex; + justify-content: flex-end; + align-items: center; +} + +.container-main header nav ul li{ + width: 100%; + list-style: none; +} + +.container-main header nav ul li a{ + text-decoration: none; + padding: 8px 15px; + background-color: var(--red); + color: var(--white); + border-radius: 4px; +} + +.container-main header nav ul li select{ + margin-right: 40px; + height: 30px; + width: 100px; + padding: 5px; + background-color: rgba(0, 0, 0, 1); + border: 1px solid var(--white); + color: var(--white); + border-radius: 2px; +} + +.container-main header nav ul li select option{ + background-color: var(--gray); +} + +.content-main{ + display: flex; + flex-direction: column; + text-align: center; + height: 70%; +} + +.logo { + font-size: 35px; + color: #ff0000; + font-weight: 700; + font-family: "Lato",sans-serif; +} + +.title-main{ + color: var(--white); + font-size: 24px; + max-width: 640px; +} + +.title-main h2{ + margin-top: 20px; + font-size: 25px; +} + +.content-main h3{ + margin: 30px auto 5px auto; + color: var(--white); + font-size: 18px; +} + +form{ + color: var(--white); + text-align: center; + width: 100%; +} + +form input{ + height: 60px; + width: 450px; + margin: 20px -4px auto auto; + font-size: 24px; + padding: 10px; + outline: none; + border: none; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} + +form button{ + height: 60px; + width: 185px; + font-size: 24px; + background-color: var(--red); + color: var(--white); + border: none; + outline: none; + cursor: pointer; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; +} + +.devices, +.faq{ + background-color: var(--black); + border-bottom: 10px solid #222; +} + +.device{ + display: flex; + justify-content: center; + align-items: center; + border-top: 10px solid #222; + color: var(--white); + padding: 40px; +} + +.device-title{ + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + width: 80%; + height: 100%; + padding: 50px; +} + +.device-title h1{ + font-size: 50px; + margin-bottom: 20px; +} + +.device-title h2{ + font-size: 24px; + font-weight: 200; + width: 90%; +} + +.images{ + display: flex; + align-items: center; + justify-content: center; + width: 50%; +} + +.container-faq{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: var(--white); + margin-bottom: 100px; +} + +.container-faq h2{ + margin: 70px 0 50px 0; + font-size: 50px; +} + +.container-faq ul{ + margin-bottom: 50px; +} + +.container-faq ul li{ + display: flex; + justify-content: space-between; + background-color: #303030; + list-style: none; + margin-bottom: 10px; + padding: 25px; + width: 815px; + font-size: 26px; + cursor: pointer; +} + +.container-faq ul li img{ + height: 26px; +} + +footer{ + background-color: var(--black); + color: #757575; +} + +.container-footer{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 50px 150px; +} + +.container-footer p:nth-child(1){ + margin-bottom: 10px; +} + +.container-footer p:nth-child(4){ + font-size: 14px; +} + +footer .listas{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + line-height: 40px; + width: 90%; + font-size: 14px; +} + +footer .listas ul li{ + list-style: none; +} + +footer .listas ul li a{ + text-decoration: none; + color: #757575; +} + +.container-footer select{ + height: 50px; + width: 150px; + padding: 5px; + background-color: rgba(0, 0, 0, 1); + border: 1px solid #757575; + color: #757575; + border-radius: 2px; + margin-bottom: 15px; +} + +.container-footer select option{ + background-color: var(--black); +} + +/* @media (max-width: 450px){ + .container-main{ + background-position: center; + height: 100vh; + } + + .container-main header { + padding: 20px 15px; + } + + .container-main header img { + width: 100px; + height: 35px; + } + + .container-main header nav ul li select { + margin-right: 20px; + } + + .content-main { + justify-content: end; + height: 80%; + } + + .content-main h3 { + font-size: 17px; + text-align: center; + width: 60%; + } + + .title-main h1 { + font-size: 32px; + } + + .title-main h2 { + margin-top: 20px; + font-size: 18px; + } + + form input { + height: 45px; + width: 90%; + margin: 20px 0px 10px auto; + font-size: 18px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } + + form button { + height: 45px; + width: 140px; + font-size: 18px; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + } + + .device{ + flex-direction: column; + } + + .device-title { + align-items: center; + text-align: center; + height: 100%; + width: 100%; + padding: 0; + } + + .device-title h1 { + font-size: 28px; + } + + .device-title h2 { + font-size: 18px; + text-align: center; + } + + .images{ + width: 100%; + } + + .tv-device{ + width: 360px; + margin-top: 20px; + } + + .device:nth-child(2), + .device:nth-child(4){ + flex-direction: column-reverse; + } + + .mobile-device{ + width: 290px; + margin-top: 20px; + } + + .pc-device{ + width: 290px; + margin-top: 20px; + } + + .container-faq h2 { + font-size: 28px; + } + + .container-faq ul { + width: 100%; + } + + .container-faq ul li{ + width: 100%; + font-size: 18px; + } + + .container-faq ul li img { + height: 18px; + } + + .container-faq h3 { + font-size: 17px; + text-align: center; + font-weight: 100; + width: 60%; + } + + .container-footer { + padding: 38px 38px; + font-size: 14px; + } + +} + +@media (min-width: 451px) and (max-width: 875px){ + .content-main { + height: 80%; + } + + .content-main h3 { + width: 60%; + } + + .title-main h1 { + font-size: 34px; + } + + .title-main h2 { + margin-top: 20px; + font-size: 22px; + } + + form input { + height: 45px; + width: 80%; + margin: 20px 0px 10px auto; + font-size: 18px; + } + + form button { + height: 45px; + width: 140px; + font-size: 18px; + } + + .device{ + flex-direction: column; + } + + .device-title { + align-items: center; + text-align: center; + height: 100%; + width: 80%; + padding: 0; + } + + .device-title h1 { + font-size: 30px; + } + + .device-title h2 { + font-size: 22px; + text-align: center; + } + + .images{ + width: 80%; + } + + .tv-device{ + width: 430px; + margin-top: 20px; + } + + .device:nth-child(2), + .device:nth-child(4){ + flex-direction: column-reverse; + } + + .mobile-device{ + width: 290px; + margin-top: 20px; + } + + .pc-device{ + width: 390px; + margin-top: 20px; + } + + .container-faq h2 { + font-size: 28px; + } + + .container-faq ul { + width: 80%; + } + + .container-faq ul li{ + width: 100%; + font-size: 18px; + } + + .container-faq ul li img { + height: 18px; + } + + .container-faq h3 { + font-size: 17px; + text-align: center; + font-weight: 100; + width: 60%; + } + + .container-faq form{ + width: 80%; + } + + .container-faq form input { + height: 45px; + width: 80%; + margin: 20px 0px 10px auto; + font-size: 18px; + } + + .container-faq form button { + height: 45px; + width: 140px; + font-size: 18px; + } + + .container-footer { + padding: 38px 38px; + font-size: 16px; + } + + .container-footer .listas { + font-size: 14px; + } +} */ diff --git a/Final/intro/introduce.html b/Final/intro/introduce.html new file mode 100644 index 0000000..ccbcc94 --- /dev/null +++ b/Final/intro/introduce.html @@ -0,0 +1,161 @@ + + + + + + + + + + + FireWatch with introduce + + + +
+
+ + + +
+ +
+ +
+

Unlimited movies, TV shows, and more.

+ +
+ +

Ready to watch? Enter your email to create or restart your membership

+ +
+ + +
+ +
+
+ +
+
+
+

Enjoy on your TV.

+

Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players and more.

+
+
+ +
+
+
+
+ +
+
+

Dowload your shows to watch offline.

+

Save your favorites easily and always have something to watch.

+
+
+
+
+

Watch everywhere.

+

Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.

+
+ +
+ +
+
+
+
+ +
+
+

Create profiles for kids

+

Send kids on adventures with their favorite characters in a space made just for them—free with your membership.

+
+
+
+ +
+
+ +

Frequently Asked Questions

+ + + +

Ready to watch? Enter your email to create or restart your membership.

+ +
+ + +
+
+
+ + + + + + diff --git a/Final/login/loginsignup.css b/Final/login/loginsignup.css new file mode 100644 index 0000000..ae625a1 --- /dev/null +++ b/Final/login/loginsignup.css @@ -0,0 +1,242 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +:root{ + --red: #E50914; + --white: #FFFFFF; + --black: #000000; +} + +.container{ + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1)), url(/Final/assets/bg.jpg); + /* background-image: url('bg.jpg'); */ + + background-size: cover; + + display: flex; + flex-direction: column; + align-items: center; +} + +.container header { + align-self: baseline; + padding: 20px 30px; +} + +.nav_logo { + font-size: 35px; + color: #ff0000; + font-weight: 700; + font-family:'Lato', sans-serif; + text-decoration: none; +} + +.container header img{ + width: 180px; + height: 60px; +} + +.container-login{ + background-color: rgba(0, 0, 0, .8); + border-radius: 4px; + max-width: 450px; + height: 100%; + padding: 60px; + margin-bottom: 100px; +} + +.container-login h1{ + color: var(--white); + margin-bottom: 20px; +} + +.container-login form{ + display: flex; + flex-direction: column; + border-radius: 4px; +} + +.container-login form input{ + background-color: #333; + color: var(--white); + border: none; + border-radius: 4px; + outline: none; + height: 50px; + padding: 10px; + font-size: 16px; + margin-bottom: 10px; +} + +.container-login form input::placeholder{ + color: gray; +} + +.container-login form button{ + margin-top: 20px; + height: 50px; + cursor: pointer; + background-color: var(--red); + color: var(--white); + border: none; + border-radius: 4px; + font-size: 16px; + font-weight: bold; +} + +.help{ + display: flex; + justify-content: space-between; + color: #b3b3b3; + margin-top: 20px; + font-size: 14px; +} + +.help a{ + text-decoration: none; + color: #b3b3b3; +} + +.help a:hover{ + text-decoration: underline; +} + +.connect{ + display: flex; + flex-direction: column; + justify-content: space-between; + color: #b3b3b3; + margin: 20px 0 40px 0; + height: 70px; +} + +.container-login .facebook{ + text-decoration: none; + color: #b3b3b3; + font-size: 14px; +} + +.icon{ + margin-top: 50px; + width: 20px; + border-radius: 2px; +} + +.connect p:nth-child(2){ + text-decoration: none; + font-size: 14px; +} + +#span01, +#span02{ + color: var(--white); + cursor: pointer; +} + +#span02{ + color: #0071eb; +} + +#span01:hover, +#span02:hover{ + text-decoration: underline; +} + +footer{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background-color: var(--black); +} + +.container-footer{ + color: #8c8c8c; + opacity: .5; + height: 280px; + padding: 30px 100px; + font-weight: 600; + width: 100%; +} + +.container-footer a{ + text-decoration: none; + color: #8c8c8c; + font-weight: 600; +} + +.container-footer a:hover{ + text-decoration: underline; +} + +.listas ul{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + list-style: none; + height: 100px; + width: 80%; + font-size: 12px; +} + +.container-footer select{ + margin-right: 40px; + height: 50px; + width: 110px; + padding: 5px; + background-color: rgba(0, 0, 0, 1); + border: 1px solid #8c8c8c; + color: var(--white); + border-radius: 2px; +} + +.container-footer select option{ + background-color: gray; +} + + +@media (max-width: 735px){ + .container{ + background-image: none; + background-color: var(--black); + } + + .container header { + padding: 10px 0px 15px 10px; + } + + .container-login { + max-width: 90%; + padding: 60px 0; + } + + footer { + border-top: 2px solid #b3b3b3; + } + + .container-footer { + color: #8c8c8c; + opacity: 1; + padding: 30px 20px; + } + + .container-footer select{ + border-radius: 2px; + color: #8c8c8c; + } + + .container-footer select option{ + background-color: var(--black); + } +} + +@media (min-width: 1200px){ + .container-footer{ + max-width: 1200px; + } +} diff --git a/Final/login/loginsignup.html b/Final/login/loginsignup.html new file mode 100644 index 0000000..423b7dd --- /dev/null +++ b/Final/login/loginsignup.html @@ -0,0 +1,85 @@ + + + + + + + + + + + + Netflix-clone + + + +
+
+ + +
+ +
+

Sign In

+ +
+ + + + + +
+ +
+
+ + +
+ + Need help? +
+ + + +
+

New to FireWatch? Sign up now.

+

This page is protected by Google reCAPTCHA to ensure you're not a bot. Learn more.

+
+
+ + +
+ + + + diff --git a/Final/login/script.js b/Final/login/script.js new file mode 100644 index 0000000..a3bab31 --- /dev/null +++ b/Final/login/script.js @@ -0,0 +1,32 @@ +const formOpenBtn = document.querySelector("#form-open"), + home = document.querySelector(".home"), + formContainer = document.querySelector(".form_container"), + formCloseBtn = document.querySelector(".form_close"), + signupBtn = document.querySelector("#signup"), + loginBtn = document.querySelector("#login"), + pwShowHide = document.querySelectorAll(".pw_hide"); + +formOpenBtn.addEventListener("click", () => home.classList.add("show")); +formCloseBtn.addEventListener("click", () => home.classList.remove("show")); + +pwShowHide.forEach((icon) => { + icon.addEventListener("click", () => { + let getPwInput = icon.parentElement.querySelector("input"); + if (getPwInput.type === "password") { + getPwInput.type = "text"; + icon.classList.replace("uil-eye-slash", "uil-eye"); + } else { + getPwInput.type = "password"; + icon.classList.replace("uil-eye", "uil-eye-slash"); + } + }); +}); + +signupBtn.addEventListener("click", (e) => { + e.preventDefault(); + formContainer.classList.add("active"); +}); +loginBtn.addEventListener("click", (e) => { + e.preventDefault(); + formContainer.classList.remove("active"); +}); \ No newline at end of file diff --git a/Final/login/style.css b/Final/login/style.css new file mode 100644 index 0000000..5aec886 --- /dev/null +++ b/Final/login/style.css @@ -0,0 +1,209 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} +a { + text-decoration: none; +} +.header { + position: fixed; + height: 50px; + width: 100%; + z-index: 100; + padding: 0 20px; + background-color: rgba(0, 0, 0, 0.7); +} +.nav { + max-width: 1100px; + width: 100%; + margin: 0 auto; +} +.nav, +.nav_item { + display: flex; + height: 100%; + align-items: center; + justify-content: space-between; +} +.nav_logo, +.nav_link, +.button { + color: #fff; + font-weight: 300; + +} +.nav_logo { + font-size: 35px; + color: #ff0000; + font-weight: 700; + font-family:'Lato', sans-serif; +} +.nav_item { + column-gap: 25px; +} +.nav_link:hover { + color: #d9d9d9; +} +.button { + padding: 6px 24px; + border: 2px solid #fff; + background: transparent; + border-radius: 10px; + cursor: pointer; +} +.button:active { + transform: scale(0.98); +} + +/* Home */ +.home { + position: relative; + height: 100vh; + width: 100%; + background-image: url("bg.jpg"); + opacity: 0.9; + background-size: cover; + background-position: center; +} + +.home::before { + content: ""; + position: absolute; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 100; + opacity: 0; + pointer-events: none; + transition: all 0.5s ease-out; +} +.home.show::before { + opacity: 1; + pointer-events: auto; +} +/* From */ +.form_container { + position: fixed; + max-width: 320px; + width: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(1.2); + z-index: 101; + background: #fff; + padding: 25px; + border-radius: 12px; + box-shadow: rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.4s ease-out; +} +.home.show .form_container { + opacity: 1; + pointer-events: auto; + transform: translate(-50%, -50%) scale(1); +} +.signup_form { + display: none; +} +.form_container.active .signup_form { + display: block; +} +.form_container.active .login_form { + display: none; +} +.form_close { + position: absolute; + top: 10px; + right: 20px; + color: #0b0217; + font-size: 22px; + opacity: 0.7; + cursor: pointer; +} +.form_container h2 { + font-size: 22px; + color: #0b0217; + text-align: center; +} +.input_box { + position: relative; + margin-top: 30px; + width: 100%; + height: 40px; +} +.input_box input { + height: 100%; + width: 100%; + border: none; + outline: none; + padding: 0 30px; + color: #333; + transition: all 0.2s ease; + border-bottom: 1.5px solid #aaaaaa; +} +.input_box input:focus { + border-color: #ff0000; +} +.input_box i { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 20px; + color: #707070; +} +.input_box i.email, +.input_box i.password { + left: 0; +} +.input_box input:focus ~ i.email, +.input_box input:focus ~ i.password { + color: #ff0000; +} +.input_box i.pw_hide { + right: 0; + font-size: 18px; + cursor: pointer; +} +.option_field { + margin-top: 14px; + display: flex; + align-items: center; + justify-content: space-between; +} +.form_container a { + color: #ff0000; + font-size: 12px; +} +.form_container a:hover { + text-decoration: underline; +} +.checkbox { + display: flex; + column-gap: 8px; + white-space: nowrap; +} +.checkbox input { + accent-color: #ff0000; +} +.checkbox label { + font-size: 12px; + cursor: pointer; + user-select: none; + color: #0b0217; +} +.form_container .button { + background: #ff0000; + margin-top: 30px; + width: 100%; + padding: 10px 0; + border-radius: 10px; +} +.login_signup { + font-size: 12px; + text-align: center; + margin-top: 15px; +} \ No newline at end of file diff --git a/html/bg.jpg b/html/bg.jpg new file mode 100644 index 0000000..91bfd5c Binary files /dev/null and b/html/bg.jpg differ diff --git a/html/facebook.png b/html/facebook.png new file mode 100644 index 0000000..bebbb5b Binary files /dev/null and b/html/facebook.png differ diff --git a/html/form_login.html b/html/form_login.html index 151e2c4..f367889 100644 --- a/html/form_login.html +++ b/html/form_login.html @@ -1,96 +1,84 @@ - - - - - - FireWatch with Login & Registration Form - - - - - -
- -
+ + + + + + + - -
-
- - -
- - + + + + + diff --git a/html/introduce.css b/html/introduce.css new file mode 100644 index 0000000..889c03c --- /dev/null +++ b/html/introduce.css @@ -0,0 +1,530 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +:root{ + --red: #ff0000; + --white: #FFFFFF; + --black: #000000; + --gray: gray; +} + +.container-main{ + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1)), url('bg.jpg'); + /* opacity: 0.8; */ + background-size: cover; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 100vh; + width: 100vw; +} + +.container-main header { + display: flex; + justify-content: space-between; + width: 100%; + padding: 20px 50px; +} + +.container-main header img{ + width: 140px; + height: 50px; +} + +.container-main header nav{ + display: flex; + justify-content: flex-end; +} + +.container-main header nav ul{ + display: flex; + justify-content: flex-end; + align-items: center; +} + +.container-main header nav ul li{ + width: 100%; + list-style: none; +} + +.container-main header nav ul li a{ + text-decoration: none; + padding: 8px 15px; + background-color: var(--red); + color: var(--white); + border-radius: 4px; +} + +.container-main header nav ul li select{ + margin-right: 40px; + height: 30px; + width: 100px; + padding: 5px; + background-color: rgba(0, 0, 0, 1); + border: 1px solid var(--white); + color: var(--white); + border-radius: 2px; +} + +.container-main header nav ul li select option{ + background-color: var(--gray); +} + +.content-main{ + display: flex; + flex-direction: column; + text-align: center; + height: 70%; +} + +.logo { + font-size: 35px; + color: #ff0000; + font-weight: 900; + font-family:'Lato', sans-serif; +; +} + +.title-main{ + color: var(--white); + font-size: 24px; + max-width: 640px; +} + +.title-main h2{ + margin-top: 20px; + font-size: 25px; +} + +.content-main h3{ + margin: 30px auto 5px auto; + color: var(--white); + font-size: 18px; +} + +form{ + color: var(--white); + text-align: center; + width: 100%; +} + +form input{ + height: 60px; + width: 450px; + margin: 20px -4px auto auto; + font-size: 24px; + padding: 10px; + outline: none; + border: none; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} + +form button{ + height: 60px; + width: 185px; + font-size: 24px; + background-color: var(--red); + color: var(--white); + border: none; + outline: none; + cursor: pointer; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; +} + +.devices, +.faq{ + background-color: var(--black); + border-bottom: 10px solid #222; +} + +.device{ + display: flex; + justify-content: center; + align-items: center; + border-top: 10px solid #222; + color: var(--white); + padding: 40px; +} + +.device-title{ + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + width: 80%; + height: 100%; + padding: 50px; +} + +.device-title h1{ + font-size: 50px; + margin-bottom: 20px; +} + +.device-title h2{ + font-size: 24px; + font-weight: 200; + width: 90%; +} + +.images{ + display: flex; + align-items: center; + justify-content: center; + width: 50%; +} + +.container-faq{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: var(--white); + margin-bottom: 100px; +} + +.container-faq h2{ + margin: 70px 0 50px 0; + font-size: 50px; +} + +.container-faq ul{ + margin-bottom: 50px; +} + +.container-faq ul li{ + display: flex; + justify-content: space-between; + background-color: #303030; + list-style: none; + margin-bottom: 10px; + padding: 25px; + width: 815px; + font-size: 26px; + cursor: pointer; +} + +.container-faq ul li img{ + height: 26px; +} + +footer{ + background-color: var(--black); + color: #757575; +} + +.container-footer{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 50px 150px; +} + +.container-footer p:nth-child(1){ + margin-bottom: 10px; +} + +.container-footer p:nth-child(4){ + font-size: 12px; +} + +footer .listas{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + line-height: 40px; + width: 90%; + font-size: 12px; +} + +footer .listas ul li{ + list-style: none; +} + +footer .listas ul li a{ + text-decoration: none; + color: #757575; +} + +.container-footer select{ + height: 50px; + width: 150px; + padding: 5px; + background-color: rgba(0, 0, 0, 1); + border: 1px solid #757575; + color: #757575; + border-radius: 2px; + margin-bottom: 15px; +} + +.container-footer select option{ + background-color: var(--black); +} + +/* @media (max-width: 450px){ + .container-main{ + background-position: center; + height: 100vh; + } + + .container-main header { + padding: 20px 15px; + } + + .container-main header img { + width: 100px; + height: 35px; + } + + .container-main header nav ul li select { + margin-right: 20px; + } + + .content-main { + justify-content: end; + height: 80%; + } + + .content-main h3 { + font-size: 17px; + text-align: center; + width: 60%; + } + + .title-main h1 { + font-size: 32px; + } + + .title-main h2 { + margin-top: 20px; + font-size: 18px; + } + + form input { + height: 45px; + width: 90%; + margin: 20px 0px 10px auto; + font-size: 18px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } + + form button { + height: 45px; + width: 140px; + font-size: 18px; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + } + + .device{ + flex-direction: column; + } + + .device-title { + align-items: center; + text-align: center; + height: 100%; + width: 100%; + padding: 0; + } + + .device-title h1 { + font-size: 28px; + } + + .device-title h2 { + font-size: 18px; + text-align: center; + } + + .images{ + width: 100%; + } + + .tv-device{ + width: 360px; + margin-top: 20px; + } + + .device:nth-child(2), + .device:nth-child(4){ + flex-direction: column-reverse; + } + + .mobile-device{ + width: 290px; + margin-top: 20px; + } + + .pc-device{ + width: 290px; + margin-top: 20px; + } + + .container-faq h2 { + font-size: 28px; + } + + .container-faq ul { + width: 100%; + } + + .container-faq ul li{ + width: 100%; + font-size: 18px; + } + + .container-faq ul li img { + height: 18px; + } + + .container-faq h3 { + font-size: 17px; + text-align: center; + font-weight: 100; + width: 60%; + } + + .container-footer { + padding: 38px 38px; + font-size: 14px; + } + +} + +@media (min-width: 451px) and (max-width: 875px){ + .content-main { + height: 80%; + } + + .content-main h3 { + width: 60%; + } + + .title-main h1 { + font-size: 34px; + } + + .title-main h2 { + margin-top: 20px; + font-size: 22px; + } + + form input { + height: 45px; + width: 80%; + margin: 20px 0px 10px auto; + font-size: 18px; + } + + form button { + height: 45px; + width: 140px; + font-size: 18px; + } + + .device{ + flex-direction: column; + } + + .device-title { + align-items: center; + text-align: center; + height: 100%; + width: 80%; + padding: 0; + } + + .device-title h1 { + font-size: 30px; + } + + .device-title h2 { + font-size: 22px; + text-align: center; + } + + .images{ + width: 80%; + } + + .tv-device{ + width: 430px; + margin-top: 20px; + } + + .device:nth-child(2), + .device:nth-child(4){ + flex-direction: column-reverse; + } + + .mobile-device{ + width: 290px; + margin-top: 20px; + } + + .pc-device{ + width: 390px; + margin-top: 20px; + } + + .container-faq h2 { + font-size: 28px; + } + + .container-faq ul { + width: 80%; + } + + .container-faq ul li{ + width: 100%; + font-size: 18px; + } + + .container-faq ul li img { + height: 18px; + } + + .container-faq h3 { + font-size: 17px; + text-align: center; + font-weight: 100; + width: 60%; + } + + .container-faq form{ + width: 80%; + } + + .container-faq form input { + height: 45px; + width: 80%; + margin: 20px 0px 10px auto; + font-size: 18px; + } + + .container-faq form button { + height: 45px; + width: 140px; + font-size: 18px; + } + + .container-footer { + padding: 38px 38px; + font-size: 16px; + } + + .container-footer .listas { + font-size: 14px; + } +} */ diff --git a/html/introduce.html b/html/introduce.html new file mode 100644 index 0000000..6d7f358 --- /dev/null +++ b/html/introduce.html @@ -0,0 +1,164 @@ + + + + + + + + + + + + + FireWatch with introduce + + + +
+
+ + + + +
+ +
+ +
+

Unlimited movies, TV shows, and more.

+

Watch anywhere. Cancel anytime.

+
+ +

Ready to watch? Enter your email to create or restart your membership

+ +
+ + +
+ +
+
+ +
+
+
+

Enjoy on your TV.

+

Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more.

+
+
+ +
+
+
+
+ +
+
+

Download your shows to watch offline.

+

Save your favorites easily and always have something to watch.

+
+
+
+
+

Watch everywhere.

+

Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.

+
+ +
+ +
+
+
+
+ +
+
+

Create profiles for kids

+

Send kids on adventures with their favorite characters in a space made just for them—free with your membership.

+
+
+
+ +
+
+ +

Frequently Asked Questions

+ + + +

Ready to watch? Enter your email to create or restart your membership.

+ +
+ + +
+
+
+ + + + + + diff --git a/html/kids.png b/html/kids.png new file mode 100644 index 0000000..f0fbe47 Binary files /dev/null and b/html/kids.png differ diff --git a/html/mobile.png b/html/mobile.png new file mode 100644 index 0000000..6809e7d Binary files /dev/null and b/html/mobile.png differ diff --git a/html/pc.png b/html/pc.png new file mode 100644 index 0000000..52c55e5 Binary files /dev/null and b/html/pc.png differ diff --git a/html/style.css b/html/style.css index d97e4bb..fe0cf6e 100644 --- a/html/style.css +++ b/html/style.css @@ -1,208 +1,242 @@ -/* Import Google font - Poppins */ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Poppins", sans-serif; -} -a { - text-decoration: none; -} -.header { - position: fixed; - height: 50px; - width: 100%; - z-index: 100; - padding: 0 20px; - background-color: rgba(0, 0, 0, 0.3); -} -.nav { - max-width: 1100px; - width: 100%; - margin: 0 auto; -} -.nav, -.nav_item { - display: flex; - height: 100%; - align-items: center; - justify-content: space-between; -} -.nav_logo, -.nav_link, -.button { - color: #fff; - font-weight: 300; - +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; } + +:root{ + --red: #E50914; + --white: #FFFFFF; + --black: #000000; +} + +.container{ + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1)), url('bg.jpg'); + /* background-image: url('bg.jpg'); */ + + background-size: cover; + + display: flex; + flex-direction: column; + align-items: center; +} + +.container header { + align-self: baseline; + padding: 20px 30px; +} + .nav_logo { - font-size: 35px; - color: #ff0000; - font-weight: 1000; -} -.nav_item { - column-gap: 25px; -} -.nav_link:hover { - color: #d9d9d9; -} -.button { - padding: 6px 24px; - border: 2px solid #fff; - background: transparent; - border-radius: 10px; - cursor: pointer; -} -.button:active { - transform: scale(0.98); -} - -/* Home */ -.home { - position: relative; - height: 100vh; - width: 100%; - background-image: url("bg.jpg"); - opacity: 0.9; - background-size: cover; - background-position: center; -} -.home::before { - content: ""; - position: absolute; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.6); - z-index: 100; - opacity: 0; - pointer-events: none; - transition: all 0.5s ease-out; -} -.home.show::before { - opacity: 1; - pointer-events: auto; -} -/* From */ -.form_container { - position: fixed; - max-width: 320px; - width: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(1.2); - z-index: 101; - background: #fff; - padding: 25px; - border-radius: 12px; - box-shadow: rgba(0, 0, 0, 0.1); - opacity: 0; - pointer-events: none; - transition: all 0.4s ease-out; -} -.home.show .form_container { - opacity: 1; - pointer-events: auto; - transform: translate(-50%, -50%) scale(1); -} -.signup_form { - display: none; -} -.form_container.active .signup_form { - display: block; -} -.form_container.active .login_form { - display: none; -} -.form_close { - position: absolute; - top: 10px; - right: 20px; - color: #0b0217; - font-size: 22px; - opacity: 0.7; - cursor: pointer; -} -.form_container h2 { - font-size: 22px; - color: #0b0217; - text-align: center; -} -.input_box { - position: relative; - margin-top: 30px; - width: 100%; - height: 40px; -} -.input_box input { - height: 100%; - width: 100%; - border: none; - outline: none; - padding: 0 30px; - color: #333; - transition: all 0.2s ease; - border-bottom: 1.5px solid #aaaaaa; -} -.input_box input:focus { - border-color: #ff0000; -} -.input_box i { - position: absolute; - top: 50%; - transform: translateY(-50%); - font-size: 20px; - color: #707070; -} -.input_box i.email, -.input_box i.password { - left: 0; -} -.input_box input:focus ~ i.email, -.input_box input:focus ~ i.password { - color: #ff0000; -} -.input_box i.pw_hide { - right: 0; - font-size: 18px; - cursor: pointer; -} -.option_field { - margin-top: 14px; - display: flex; - align-items: center; - justify-content: space-between; -} -.form_container a { - color: #ff0000; - font-size: 12px; -} -.form_container a:hover { - text-decoration: underline; -} -.checkbox { - display: flex; - column-gap: 8px; - white-space: nowrap; -} -.checkbox input { - accent-color: #ff0000; -} -.checkbox label { - font-size: 12px; - cursor: pointer; - user-select: none; - color: #0b0217; -} -.form_container .button { - background: #ff0000; - margin-top: 30px; - width: 100%; - padding: 10px 0; - border-radius: 10px; -} -.login_signup { - font-size: 12px; - text-align: center; - margin-top: 15px; + font-size: 35px; + color: #ff0000; + font-weight: 700; + font-family:'Lato', sans-serif; + text-decoration: none; +} + +.container header img{ + width: 180px; + height: 60px; +} + +.container-login{ + background-color: rgba(0, 0, 0, .8); + border-radius: 4px; + max-width: 450px; + height: 100%; + padding: 60px; + margin-bottom: 100px; +} + +.container-login h1{ + color: var(--white); + margin-bottom: 20px; +} + +.container-login form{ + display: flex; + flex-direction: column; + border-radius: 4px; +} + +.container-login form input{ + background-color: #333; + color: var(--white); + border: none; + border-radius: 4px; + outline: none; + height: 50px; + padding: 10px; + font-size: 16px; + margin-bottom: 10px; +} + +.container-login form input::placeholder{ + color: gray; +} + +.container-login form button{ + margin-top: 20px; + height: 50px; + cursor: pointer; + background-color: var(--red); + color: var(--white); + border: none; + border-radius: 4px; + font-size: 16px; + font-weight: bold; +} + +.help{ + display: flex; + justify-content: space-between; + color: #b3b3b3; + margin-top: 20px; + font-size: 14px; +} + +.help a{ + text-decoration: none; + color: #b3b3b3; +} + +.help a:hover{ + text-decoration: underline; +} + +.connect{ + display: flex; + flex-direction: column; + justify-content: space-between; + color: #b3b3b3; + margin: 20px 0 40px 0; + height: 70px; +} + +.container-login .facebook{ + text-decoration: none; + color: #b3b3b3; + font-size: 14px; +} + +.icon{ + margin-top: 50px; + width: 20px; + border-radius: 2px; +} + +.connect p:nth-child(2){ + text-decoration: none; + font-size: 14px; +} + +#span01, +#span02{ + color: var(--white); + cursor: pointer; +} + +#span02{ + color: #0071eb; +} + +#span01:hover, +#span02:hover{ + text-decoration: underline; +} + +footer{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background-color: var(--black); +} + +.container-footer{ + color: #8c8c8c; + opacity: .5; + height: 280px; + padding: 30px 100px; + font-weight: 600; + width: 100%; +} + +.container-footer a{ + text-decoration: none; + color: #8c8c8c; + font-weight: 600; +} + +.container-footer a:hover{ + text-decoration: underline; +} + +.listas ul{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + list-style: none; + height: 100px; + width: 80%; + font-size: 12px; +} + +.container-footer select{ + margin-right: 40px; + height: 50px; + width: 110px; + padding: 5px; + background-color: rgba(0, 0, 0, 1); + border: 1px solid #8c8c8c; + color: var(--white); + border-radius: 2px; +} + +.container-footer select option{ + background-color: gray; +} + + +@media (max-width: 735px){ + .container{ + background-image: none; + background-color: var(--black); + } + + .container header { + padding: 10px 0px 15px 10px; + } + + .container-login { + max-width: 90%; + padding: 60px 0; + } + + footer { + border-top: 2px solid #b3b3b3; + } + + .container-footer { + color: #8c8c8c; + opacity: 1; + padding: 30px 20px; + } + + .container-footer select{ + border-radius: 2px; + color: #8c8c8c; + } + + .container-footer select option{ + background-color: var(--black); + } +} + +@media (min-width: 1200px){ + .container-footer{ + max-width: 1200px; + } } diff --git a/html/tv.png b/html/tv.png new file mode 100644 index 0000000..9076187 Binary files /dev/null and b/html/tv.png differ diff --git a/kids.png b/kids.png new file mode 100644 index 0000000..f0fbe47 Binary files /dev/null and b/kids.png differ diff --git a/mobile.png b/mobile.png new file mode 100644 index 0000000..6809e7d Binary files /dev/null and b/mobile.png differ diff --git a/pc.png b/pc.png new file mode 100644 index 0000000..52c55e5 Binary files /dev/null and b/pc.png differ diff --git a/tv.png b/tv.png new file mode 100644 index 0000000..9076187 Binary files /dev/null and b/tv.png differ