Skip to content

first commit #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
honour-dev wants to merge 1 commit into
base: main
Choose a base branch
from
Open

first commit #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 0 additions & 54 deletions CSS/style.css
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const faqs = document.querySelectorAll(".faq");

faqs.forEach(faq => {
faq.addEventListener("click", () => {
faq.classList.toggle("open");

const icon = faq.querySelector(".faq-icon i")
if(icon.className = "uil uil-plus") {
icon.className = "uil uil-times"
} else {
icon.className = "uil uil-plus"
}
})
})
Binary file removed assets/images/bgg.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed assets/images/logoo.png
View file
Open in desktop
Binary file not shown.
139 changes: 116 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<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</title>
<link rel="stylesheet" href="./CSS/style.css" />
</head>
<body>
<div class="netflix-bg" />
<header>
<nav class="navbar">
<div class="navbar-img">
<img src="assets/images/logoo.png" alt="logo" />
</div>

<div class="button">
<button>Sign In</button>
</div>
</nav>
</header>
<section></section>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQs</title>

<!-- google fonts -->
<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=IBM+Plex+Sans:wght@200;400;500;700&family=Instrument+Sans:wght@500;700&display=swap" rel="stylesheet">

<!-- iconscout cdn -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!-- stylesheet -->
<link rel="stylesheet" href="./style.css">
</head>
<body>

<!-- FAQs -->
<section class="section-center faqs">
<h1>frequently asked questions</h1>
<div>
<article class="faq">
<div class="faq-ques-ans">
<h4 class="faq-ques">What is Netflix?
<span class="faq-icon"><i class="uil uil-plus"></i></span>
</h4>
<p class="faq-ans">
Netflix is a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices. <br> <br>
You can watch as much as you want, whenever you want without a single commercial – all for one low monthly price. There's always something new to discover and new TV shows and movies are added every week!
</p>
</div>
</article>

<article class="faq">
<div class="faq-ques-ans">
<h4 class="faq-ques">How much does Netflix cost?
<span class="faq-icon"><i class="uil uil-plus"></i></span>
</h4>
<p class="faq-ans">
Watch Netflix on your smartphone, tablet, Smart TV, laptop, or streaming device, all for one fixed monthly fee. Plans range from ₦1,200 to ₦4,400 a month. No extra costs, no contracts.
</p>
</div>
</article>

<article class="faq">
<div class="faq-ques-ans">
<h4 class="faq-ques">Where can I watch?
<span class="faq-icon"><i class="uil uil-plus"></i></span>
</h4>
<p class="faq-ans">
Watch anywhere, anytime. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles. <br> <br>
You can also download your favorite shows with the iOS, Android, or Windows 10 app. Use downloads to watch while you're on the go and without an internet connection. Take Netflix with you anywhere.
</p>
</div>
</article>

<article class="faq">
<div class="faq-ques-ans">
<h4 class="faq-ques">How do I cancel?
<span class="faq-icon"><i class="uil uil-plus"></i></span>
</h4>
<p class="faq-ans">
Netflix is flexible. There are no pesky contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account anytime.
</p>
</div>
</article>

<article class="faq">
<div class="faq-ques-ans">
<h4 class="faq-ques">What can I watch on Netflix?
<span class="faq-icon"><i class="uil uil-plus"></i></span>
</h4>
<p class="faq-ans">
Netflix has an extensive library of feature films, documentaries, TV shows, anime, award-winning Netflix originals, and more. Watch as much as you want, anytime you want.
</p>
</div>
</article>

<article class="faq">
<div class="faq-ques-ans">
<h4 class="faq-ques">Is Netflix good for kids?
<span class="faq-icon"><i class="uil uil-plus"></i></span>
</h4>
<p class="faq-ans">
The Netflix Kids experience is included in your membership to give parents control while kids enjoy family-friendly TV shows and movies in their own space. <br><br>
Kids profiles come with PIN-protected parental controls that let you restrict the maturity rating of content kids can watch and block specific titles you don’t want kids to see.
</p>
</div>
</article>
</div>
</section>



<!--------- email address ---------->
<section class="section-center">
<div class="email-address">
<article class="email-title" <!-- style="border-collapse: separate;" -->
<h2>Ready to watch? Enter your email to create or restart your membership.</h2>
</article>
<div class="email-form">
<form action="#">
<input type="email" name="email" class="form-control" placeholder="Email address" required>
</form>
<div>
<button class="btn" type="submit">
get started<i class="uil uil-angle-right-b"></i></i>
</button>
</div>
</div>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>
155 changes: 155 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
:root{
--transition: all linear .3s;
}
body{
font-family: 'IBM Plex Sans', sans-serif;
font-family: 'Instrument Sans', sans-serif;
background: #030120;
color: #fff;
}
.section-center{
width: 85%;
margin: 0 auto;
}
@media screen and (min-width:768px){
.section-center{
width: 82%;
}
}


/* ---------- FAQs -------- */
.faqs{
margin-bottom: 16px;
}
.faqs h1{
font-size: 2rem;
text-transform: capitalize;
margin-bottom: 16px;
max-width: 304px;
}
.faq:not(.faq-ans){
background: #2d2d2d;
margin-bottom: 8px;
padding: 16px;
cursor: pointer;
}
.faq:hover{
background: hsl(0, 0%, 30%);
transition: var(--transition);
}
.faq-icon{
position: absolute;
right: 0;
font-size: 1.3rem;
font-weight: 400;
}
.faq-ques{
position: relative;
padding: 8px;
/* border-bottom: 1px solid #030120;
border-width: 20%; */
}
.faq-ans{
margin-top: 16px;
padding: 16px 8px;
display: none;
}
.faq h4, p{
font-weight: 400;
font-size: 1.07rem;
line-height: 24px;
}
.faq.open .faq-ans{
display: block;
}
/* bg #132144
on hover #223362 */

@media screen and (min-width:678px){
.faqs h1{
font-size: 2.5rem;
max-width: 100%;
}
.faq .faq-ques, .faq .faq-ans{
font-size: 1.5rem;
}
.faq-ques{
padding: 10px;
}
.faq-ans{
line-height: 30px;
}
.faq-icon{
font-size: 1.9rem;
}
}



/* ---------- email address -------- */
/* .email-address{
border: 4px solid transparent;
border-radius: 1rem;
border-image: linear-gradient(to right, red, blue) 1;
padding: 1rem 1rem;
} */
.email-title h2{
font-weight: 100;
font-size: 1.2rem;
padding-bottom: 16px;
}
.form-control{
padding: 15px;
width: 380px;
background: hsl(0, 0%, 7%);
border: 1px solid #8a817c;
border-radius: 5px;
margin-bottom: 13px;
color: #fff;
font-weight: 600;
}
input::placeholder{
font-size: 1rem;
color: #b2beb5;
font-weight: 600;
}
.btn{
text-transform: capitalize;
padding: 13px;
font-size: 1rem;
background: red;
color: #fff;
font-weight: 600;
border: 1px solid red;
border-radius: 5px;
cursor: pointer;
}
.btn:hover{
background: #dd1a1a;
transition: var(--transition);
}

@media screen and (min-width: 768px){
.hero-text{
font-size: 3.7rem;
max-width: 912px;
}
.email-form{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.form-control{
min-width: 384;
}
.btn{
margin-left: 8px;
}
}