<!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>Bootstrap Try</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./css/line-icons.css">
<link rel="stylesheet" href="./css/style.css" />
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top"data-aos="fade-down">
<div class="container-fluid">
<img class="navbar-brand mx-5" src="./images/logo.png" alt="" width="120" height="80" />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-5">
<li>
<a class="nav-link active" href="#Home">Home</a>
</li>
<li>
<a class="nav-link" href="#About-Me">About Me</a>
</li>
<li>
<a class="nav-link" href="#Whats-new">Upcoming</a>
</li>
<li>
<a class="nav-link" href="">Manga</a>
</li>
<li>
<a class="nav-link" href="">Anime</a>
</li>
<li>
<a class="nav-link" href="">Movies</a>
</li>
<li>
<a class="nav-link" href="">TV Shows</a>
</li>
<li>
<a class="nav-link" href="">Novels</a>
</li>
<li>
<a class="nav-link" href="#Contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Hero -->
<section id="Home" class="bg-cover hero-section" >
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row">
<div class="col-12">
<h1 class="display-4" data-aos="zoom-in">My Hub For All Things Content</h1>
<p class="my-4" data-aos="fade-up">Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Harum error reiciendis sapiente vero numquam doloremque!</p>
<a class="btn btn-main" data-aos="fade-up" href="">Click To Know More</a>
</div>
</div>
</div>
</section>
<!-- About Me -->
<section id="About-Me" style="width:100%;overflow:hidden;">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 section-intro" data-aos="fade-up">
<h1>About Me</h1>
<div class="divider"></div>
<p data-aos="zoom-in">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi recusandae porro, est facere vel commodi itaque ratione veritatis corrupti quae atque quos, <br> totam quod perspiciatis numquam dolor deleniti! Excepturi, voluptatum!</p>
</div>
<div class="col-md-8 col-xs-12 intro-images">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" data-aos="zoom-out-left">
<div class="carousel-item active">
<img src="./images/img1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/img4.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Offers -->
<section id="About-Me" class="text-center about">
<div class="container">
<div class="row">
<div class="col-12 section-about text-center" data-aos="fade-down">
<h1>What is this website for?</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="accordion" id="accordionExample" data-aos="fade-up">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima veniam, earum nobis esse suscipit delectus in eum? Repellendus, doloremque quidem amet quos perferendis labore provident ea quas facilis, reiciendis quam vel nemo cupiditate soluta temporibus veritatis sequi delectus, laborum autem!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis a officiis temporibus minima, qui nam odio magni dolor provident nulla illum sit, voluptatem quis cumque, sapiente impedit eligendi explicabo ullam ab iusto!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus incidunt laudantium nesciunt cupiditate, dolore mollitia officiis iste, eaque quibusdam doloremque dolorum assumenda. Est esse velit sit, blanditiis autem libero fugit recusandae eum explicabo sequi suscipit, aspernatur cumque exercitationem accusantium id. Necessitatibus!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Upcoming Video -->
<section id="Whats-new" class="bg-cover upcoming-section" >
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row g-4">
<div class="col-12 section-current text-center" data-aos="zoom-in-right">
<h1>Most Anticipated Content</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
<a href="" class="video-btn"><img src="./images/play-regular-24.png" alt=""></a>
</div>
</div>
</div>
</section>
<!-- Current Watchlist -->
<section id="current" class="text-center">
<div class="container">
<div class="row">
<div class="col-12 section-current text-center" data-aos="zoom-in">
<h1>Current Watch List</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="watchlist" >
<div class="watchlist-img" data-aos="flip-left">
<img src="./images/watch-list-img1.jpg" alt="">
<div class="icon"><i class="icon-tv"></i></div>
</div>
<h5 class="mt-5">Arcane</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
<div class="col-md-4">
<div class="watchlist">
<div class="watchlist-img" data-aos="flip-right">
<img src="./images/watch-list-img2.jpg" alt="">
<div class="icon"><i class="icon-book-open"></i></div>
</div>
<h5 class="mt-5">A Will Eternal</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
<div class="col-md-4">
<div class="watchlist">
<div class="watchlist-img" data-aos="flip-left">
<img src="./images/watch-list-img3.jpg" alt="">
<div class="icon"><i class="icon-book-open"></i></div>
</div>
<h5 class="mt-5">Hajime no Ippo</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
</div>
</div>
</div>
</div>
</section>
<!-- ContactUs -->
<section id="Contact" class="bg-cover contact-us" style="width:100%;overflow:hidden;">
<div class="overlay"></div>
<div class="container text-white text-center">
<div class="row g-4">
<div class="col-12 section-current text-center" data-aos="zoom-out">
<h1>Get in Touch</h1>
<div class="divider"></div>
<p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum, <br> expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto">
<form action="#" class="row g-4" data-aos="fade-up">
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<input type="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" placeholder="Subject">
</div>
<div class="form-group col-md-12">
<textarea name="" id="" cols="30" rows="4" class="form-control" placeholder="Message"></textarea>
</div>
<div>
<button class="btn btn-main" type="submit">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-4">
<div class="container">
<div class="row ">
<div class="col-md-6">
<p class="mb-0">Copyright © 2020-2022. Designed by Akash Pandya</p>
</div>
<div class="col-md-6 icons">
<a href=""><img src="./images/instagram-logo-24.png" alt=""></a>
<a href=""><img src="./images/twitter-logo-24.png" alt=""></a>
<a href=""><img src="./images/facebook-circle-logo-24.png" alt=""></a>
<a href=""><img src="./images/linkedin-square-logo-24.png" alt=""></a>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="app.js"></script>
</body>
</html>