Skip to content

Commit

Permalink
Made styling chandes
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiksonIvySon
DiksonIvySon committed Oct 17, 2023
1 parent 33debaf commit 27324d4
Show file tree
Hide file tree
Showing 4 changed files with 258 additions and 133 deletions.
26 changes: 16 additions & 10 deletions landingPage/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,22 @@ <h2 class="section-header">ABOUT</h2>
(also marked "H" or "HP") saxophones tuned sharper than the (concert) A = 440 Hz standard
were produced into the early twentieth century for sonic qualities suited for outdoor use, </P>
</section>
<footer class="footer">
<div class="band-name">
<h3>The IvySon Sax</h3>
<footer>
<div class="footer-icons">
<a target="_blank" href="https://github.com/DiksonIvySon">
<i class="fa-brands fa-github"></i>
</a>
<a target="_blank" href="https://www.linkedin.com/in/dikson-manganye-a8b773213/">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<div class="social-icons">
<i class="fa-brands fa-facebook fa-fade"></i>
<i class="fa-brands fa-twitter fa-fade"></i>
<i class="fa-brands fa-instagram fa-fade"></i>
<i class="fa-brands fa-tiktok fa-fade"></i>
</div>
</footer>
<p>
Copyright © 2023 <a target="_blank" href="https://diksonivyson.github.io/My_Portfolio/" class="web-author">Dikson Manganye</a>. All rights reserved
</p>
<p>
I had a lot of fun building this website and since i love cooking,
this is a website that i will be using a lot to prepare my meals.
</p>
</footer>
</body>
</html>
46 changes: 21 additions & 25 deletions landingPage/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,8 @@
<h1 class="band-name band-name-large">The IvySon Sax</h1>
</header>

<section class="video">
<div>
<video autoplay loop muted plays-inline>
<source src="videos/pexels-big-bag-films-8513598 (2160p).mp4" type="video/mp4">
</video>
</div>
<div>
<video autoplay loop muted plays-inline>
<source src="videos/pexels-big-bag-films-8513570 (2160p).mp4" type="video/mp4">
</video>
</div>
</section>
<section class="content-section container">
<h2 class="section-header slideInLeft">TOURS</h2> <!-- added an animation to slide the "Tours" title from the left -->
<div>
<h2 class="section-header slideInLeft">TOURS</h2>
<div class="tour-row">
<span class="tour-item tour-date">JUL 16</span>

Expand Down Expand Up @@ -99,16 +86,25 @@ <h2 class="section-header slideInLeft">TOURS</h2> <!-- added an animation to sl
</div>

</section>
<footer class="footer">
<div class="band-name">
<h3>The IvySon Sax</h3>
</div>
<div class="social-icons">
<i class="fa-brands fa-facebook fa-fade"></i>
<i class="fa-brands fa-twitter fa-fade"></i>
<i class="fa-brands fa-instagram fa-fade"></i>
<i class="fa-brands fa-tiktok fa-fade"></i>
</div>
</footer>
<footer>
<div class="footer-icons">
<a target="_blank" href="https://github.com/DiksonIvySon">
<i class="fa-brands fa-github"></i>
</a>
<a target="_blank" href="https://www.linkedin.com/in/dikson-manganye-a8b773213/">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<p>
Copyright © 2023 <a target="_blank" href="https://diksonivyson.github.io/My_Portfolio/" class="web-author">Dikson Manganye</a>. All rights reserved
</p>
<p>
I can still remember how much fun and overwhelming it was building this project
("YES, all at the same time!").
This was one of the first web development projects that I built,
back then I was still learning CSS, HTML and JavaScript.
What a time.
</p>
</footer>
</body>
</html>
175 changes: 138 additions & 37 deletions landingPage/store.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
<li><a href="about.html">ABOUT</a></li>
</ul>
</nav>

<h1 class="band-name band-name-large">The IvySon Sax</h1>
</header>
<section class="store">
Expand All @@ -27,7 +26,9 @@ <h2>MUSIC</h2>
<div>
<strong>Album 1</strong>
</div>
<img src="IMAGES/darksax3 images.jpg" >
<div>
<img src="IMAGES/darksax3 images.jpg">
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
Expand All @@ -37,7 +38,9 @@ <h2>MUSIC</h2>
<div>
<strong>Album 2</strong>
</div>
<img src="IMAGES/darksax4 images.jpg" >
<div>
<img src="IMAGES/darksax4 images.jpg" >
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
Expand All @@ -47,7 +50,9 @@ <h2>MUSIC</h2>
<div>
<strong>Album 3</strong>
</div>
<img src="IMAGES/darksax5 images.jpg" >
<div>
<img src="IMAGES/darksax5 images.jpg" >
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
Expand All @@ -57,22 +62,26 @@ <h2>MUSIC</h2>
<div>
<strong>Album 4</strong>
</div>
<img src="IMAGES/darksax6 images.jpg" >
<div>
<img src="IMAGES/darksax6 images.jpg" >
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
</div>
</div>
</div>
</section>
<section>
<section class="store">
<h2>MERCH</h2>
<div class="store-items">
<div>
<div>
<strong>Dark Saxophone 1</strong>
</div>
<img src="IMAGES/darksax1 images.jpg" >
<div>
<img src="IMAGES/darksax1 images.jpg" >
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
Expand All @@ -82,7 +91,9 @@ <h2>MERCH</h2>
<div>
<strong>Dark Saxophone 2</strong>
</div>
<img src="IMAGES/darksax2 images.jpg" >
<div>
<img src="IMAGES/darksax2 images.jpg" >
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
Expand All @@ -92,7 +103,9 @@ <h2>MERCH</h2>
<div>
<strong>Dark Saxophone 1</strong>
</div>
<img src="IMAGES/darksax1 images.jpg" >
<div>
<img src="IMAGES/darksax1 images.jpg" >
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
Expand All @@ -102,7 +115,9 @@ <h2>MERCH</h2>
<div>
<strong>Dark Saxophone 2</strong>
</div>
<img src="IMAGES/darksax2 images.jpg" >
<div>
<img src="IMAGES/darksax2 images.jpg" >
</div>
<div>
<span>R500</span>
<button role="button">ADD TO CART</button>
Expand All @@ -113,47 +128,133 @@ <h2>MERCH</h2>
<section class="cart">
<div>
<h2>CART</h2>
<div class="cart-item">
<div class="cart-item-img">
<img src="IMAGES/darksax1 images.jpg" >
<div class="cart-items-container">
<div class="cart-item">
<div class="cart-item-img">
<img src="IMAGES/darksax1 images.jpg" >
</div>
<div class="cart-item-info">
<div>
<span><strong>ITEM: </strong>Dark Saxophone 1</span>
</div>
<div>
<label for="qualities"><strong>Quality: </strong></label>
<input type="number" value="1">
</div>
<div>
<span><strong>PRICE: </strong>R500</span>
</div>
<button role="button" class="remove-btn">REMOVE</button>
</div>
</div>
<div class="cart-item-info">
<div>
<span><strong>ITEM: </strong>Dark Saxophone 1</span>
<div class="cart-item">
<div class="cart-item-img">
<img src="IMAGES/darksax1 images.jpg" >
</div>
<div class="cart-item-info">
<div>
<span><strong>ITEM: </strong>Dark Saxophone 1</span>
</div>
<div>
<label for="qualities"><strong>Quality: </strong></label>
<input type="number" value="1">
</div>
<div>
<span><strong>PRICE: </strong>R500</span>
</div>
<button role="button" class="remove-btn">REMOVE</button>
</div>
</div>
<div class="cart-item">
<div class="cart-item-img">
<img src="IMAGES/darksax1 images.jpg" >
</div>
<div class="cart-item-info">
<div>
<span><strong>ITEM: </strong>Dark Saxophone 1</span>
</div>
<div>
<label for="qualities"><strong>Quality: </strong></label>
<input type="number" value="1">
</div>
<div>
<span><strong>PRICE: </strong>R500</span>
</div>
<button role="button" class="remove-btn">REMOVE</button>
</div>
<div>
<label for="qualities"><strong>Quality: </strong></label>
<input type="number" value="1">
</div>
<div class="cart-item">
<div class="cart-item-img">
<img src="IMAGES/darksax1 images.jpg" >
</div>
<div class="cart-item-info">
<div>
<span><strong>ITEM: </strong>Dark Saxophone 1</span>
</div>
<div>
<label for="qualities"><strong>Quality: </strong></label>
<input type="number" value="1">
</div>
<div>
<span><strong>PRICE: </strong>R500</span>
</div>
<button role="button" class="remove-btn">REMOVE</button>
</div>
</div>
<div class="cart-item">
<div class="cart-item-img">
<img src="IMAGES/darksax1 images.jpg" >
</div>
<div>
<span><strong>PRICE: </strong>R500</span>
<div class="cart-item-info">
<div>
<span><strong>ITEM: </strong>Dark Saxophone 1</span>
</div>
<div>
<label for="qualities"><strong>Quality: </strong></label>
<input type="number" value="1">
</div>
<div>
<span><strong>PRICE: </strong>R500</span>
</div>
<button role="button" class="remove-btn">REMOVE</button>
</div>
<button role="button" class="remove-btn">REMOVE</button>
</div>
</div>

<hr>

<div>
<strong>Total</strong>
<span>R1 000</span>
</div>
<div>
<button role="button">PURCHASE</button>
<div>
<strong>Items</strong>
<span>4</span>
</div>
<div>
<strong>Total</strong>
<span>R1 000</span>
</div>
<div>
<button role="button">PURCHASE</button>
</div>
</div>
</div>
</section>

<footer class="footer">
<div class="band-name">
<h3>The IvySon Sax</h3>
</div>
<div class="social-icons">
<i class="fa-brands fa-facebook fa-fade"></i>
<i class="fa-brands fa-twitter fa-fade"></i>
<i class="fa-brands fa-instagram fa-fade"></i>
<i class="fa-brands fa-tiktok fa-fade"></i>
<footer>
<div class="footer-icons">
<a target="_blank" href="https://github.com/DiksonIvySon">
<i class="fa-brands fa-github"></i>
</a>
<a target="_blank" href="https://www.linkedin.com/in/dikson-manganye-a8b773213/">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
</footer>
<p>
Copyright © 2023 <a target="_blank" href="https://diksonivyson.github.io/My_Portfolio/" class="web-author">Dikson Manganye</a>. All rights reserved
</p>
<p>
I had a lot of fun building this website and since i love cooking,
this is a website that i will be using a lot to prepare my meals.
</p>
</footer>
</body>
</html>
Loading

0 comments on commit 27324d4

Please sign in to comment.