Skip to content

Update index.html #3

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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
0330oar wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.html #3

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
190 changes: 51 additions & 139 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@

<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/box.css">

<title>Responsive landing page headphones</title>
<title>SkyRise</title>
</head>
<body>
<!--=============== HEADER ===============-->
Expand Down Expand Up @@ -60,20 +61,19 @@

<div class="home__data">
<div class="home__header">
<h1 class="home__title">On ear</h1>
<h2 class="home__subtitle">Beats 3</h2>
<h1 class="home__title">Sky</h1>
<h2 class="home__subtitle">Rise</h2>
</div>

<div class="home__footer">
<h3 class="home__title-description">Overview</h3>
<p class="home__description">Enjoy award-winning Beats sound with wireless listening freedom and a sleek,
streamlined design with comfortable padded earphones, delivering first-rate playback.
<p class="home__description">Our products help guide your work
</p>
<a href="#" class="button button--flex">
<span class="button--flex">
<i class="ri-shopping-bag-line button__icon"></i></i> Add to Bag
<i class="ri-shopping-bag-line button__icon"></i></i> About Us
</span>
<span class="home__price">$299</span>
<span class="home__price"></span>
</a>
</div>
</div>
Expand All @@ -90,149 +90,61 @@ <h3 class="home__title-description">Overview</h3>
</div>
</section>

<!--=============== SPECS ===============-->
<section class="specs section grid" id="specs">
<h2 class="section__title section__title-gradient">Specs</h2>

<div class="specs__container container grid">
<div class="specs__content grid">
<div class="specs__data">
<i class="ri-bluetooth-line specs__icon"></i>
<h3 class="specs__title">Connection</h3>
<span class="specs__subtitle">Bluetooth v5.2</span>
</div>

<div class="specs__data">
<i class="ri-battery-charge-line specs__icon"></i>
<h3 class="specs__title">Battery</h3>
<span class="specs__subtitle">Duration 40h</span>
</div>

<div class="specs__data">
<i class="ri-plug-line specs__icon"></i>
<h3 class="specs__title">Load</h3>
<span class="specs__subtitle">Fast charge 4.2-AAC</span>
</div>

<div class="specs__data">
<i class="ri-mic-line specs__icon"></i>
<h3 class="specs__title">Microphone</h3>
<span class="specs__subtitle">Supports Apple Siri <br> and Google</span>
</div>
</div>

<div>
<img src="assets/img/specs.png" alt="" class="specs__img">
</div>
</div>
</section>

<!--=============== CASE ===============-->
<section class="case section grid" id="case">
<h2 class="section__title section__title-gradient">Case</h2>

<div class="case__container container grid">
<div>
<img src="assets/img/case.png" alt="" class="case__img">
</div>

<div class="case__data">
<p class="case__description">With a comfortable and adaptable case so that you can
store it whenever you want, and keep your durability forever.
</p>
<a href="#" class="button button--flex">
<i class="ri-information-line button__icon"></i> More info
</a>
</div>
</div>
</section>

<!--=============== DISCOUNT ===============-->
<section class="discount section">
<div class="discount__container container grid">
<div class="discount__animate">
<h2 class="discount__title">Immerse yourself in <br> your music</h2>
<p class="discount__description">Get it now, up to 50% off.</p>
<a href="#" class="button button--flex">
<i class="ri-shopping-bag-line button__icon"></i> Shop Now
<h2 class="discount__title">Expierence<br> Aspect</h2>
<p class="discount__description">Download now</p>
<a href="https://github.com/SkyRise-In/Aspect" class="button button--flex">
<i class="ri-shopping-bag-line button__icon"></i>Download
</a>
</div>

<img src="assets/img/discount.png" alt="" class="discount__img">
<img src="assets/img/chip.svg" alt="" class="discount__img">
</div>
</section>

<!--=============== PRODUCTS ===============-->
<section class="products section" id="products">
<h2 class="section__title section__title-gradient products__line">
Choose <br> Your Style
Our <br> Products
</h2>

<div class="products__container container grid">
<article class="products__card">
<div class="products__content">
<img src="assets/img/product1.png" alt="" class="products__img">

<h3 class="products__title">Black</h3>
<span class="products__price">$249</span>

<button class="button button--flex products__button">
<i class="ri-shopping-bag-line button__icon"></i>
</button>
</div>
</article>
<article class="products__card">
<div class="products__content">
<img src="assets/img/product2.png" alt="" class="products__img">

<h3 class="products__title">Red Black</h3>
<span class="products__price">$249</span>

<button class="button button--flex products__button">
<i class="ri-shopping-bag-line button__icon"></i>
</button>
</div>
</article>
<article class="products__card">
<div class="products__content">
<img src="assets/img/product3.png" alt="" class="products__img">

<h3 class="products__title">Night Black</h3>
<span class="products__price">$249</span>

<button class="button button--flex products__button">
<i class="ri-shopping-bag-line button__icon"></i>
</button>
</div>
</article>
<article class="products__card">
<div class="products__content">
<img src="assets/img/product4.png" alt="" class="products__img">

<h3 class="products__title">Blue</h3>
<span class="products__price">$249</span>

<button class="button button--flex products__button">
<i class="ri-shopping-bag-line button__icon"></i>
</button>
</div>
</article>

<article class="products__card">
<div class="products__content">
<img src="assets/img/product5.png" alt="" class="products__img">

<h3 class="products__title">Twilight gray</h3>
<span class="products__price">$249</span>

<button class="button button--flex products__button">
<i class="ri-shopping-bag-line button__icon"></i>
</button>
</div>
</article>
<div class="container2">
<div class="box">
<div class="bcontent">
<h3>J.A.R.V.I.S.</h3>
<p>An AI System brought to you by SkyRise</p>
<a href="JARVIS.html">Read More</a>
</div>
</div>
<div class="box">
<div class="bcontent">
<h3>Teams Bot</h3>
<p>A bot that specelized in organizing meetings, authorizations, etc</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="bcontent">
<h3>Flow</h3>
<p>THis is a test</p>
<a href="tmsb.html">Read More</a>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/vanilla-tilt.js"></script>
<script type="text/javascript">
VanillaTilt.init(document.querySelectorAll(".box, .bcontent"), {
max: 10,
speed: 1000,
glare: true,
"max-glare": 0.0,
});
</script>
</section>
</main>



<!--=============== FOOTER ===============-->
<footer class="footer section">
Expand All @@ -246,13 +158,13 @@ <h3 class="footer__title">Products</h3>

<ul class="footer__links">
<li>
<a href="#" class="footer__link">Headphones</a>
<a href="#" class="footer__link">Aspect</a>
</li>
<li>
<a href="#" class="footer__link">Earphones</a>
<a href="#" class="footer__link">Teams Bot</a>
</li>
<li>
<a href="#" class="footer__link">Earbuds</a>
<a href="#" class="footer__link">Flow</a>
</li>
<li>
<a href="#" class="footer__link">Accesories</a>
Expand Down Expand Up @@ -302,7 +214,7 @@ <h3 class="footer__title">Support</h3>
</div>

<p class="footer__copy">
<a href="https://www.youtube.com/c/Bedimcode/" target="_blank" class="footer__copy-link">&#169; Bedimcode. All right reserved</a>
<a target="_blank" class="footer__copy-link">&#169;SkyRise. All right reserved</a>
</p>
</footer>

Expand All @@ -317,4 +229,4 @@ <h3 class="footer__title">Support</h3>
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
</body>
</html>
</html>