Skip to content

17-amber - done #1

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
thomasrouiller wants to merge 20 commits into
base: main
Choose a base branch
from
Open

17-amber - done #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
d673150
starter done, fonts loaded, svg loaded
thomasrouiller May 13, 2022
a8c190a
did the animation and started coding the header
thomasrouiller May 13, 2022
262793b
started coding main - html
thomasrouiller May 13, 2022
b133efb
html finished coding main
thomasrouiller May 13, 2022
3da85f6
main - html done
thomasrouiller May 13, 2022
656eb6b
header - css done
thomasrouiller May 13, 2022
4f40738
button nav styled
thomasrouiller May 14, 2022
04f6f04
presentation card done
thomasrouiller May 14, 2022
d6c7e15
product card and link done
thomasrouiller May 14, 2022
1b703f4
added padding to shop now button
thomasrouiller May 14, 2022
9fb66dc
reseller card done
thomasrouiller May 14, 2022
b00dcf8
tried to code the footer but it may change
thomasrouiller May 14, 2022
75d3c22
started coding the footer, changes in html and css
thomasrouiller May 15, 2022
d51897c
finished stylized the footer
thomasrouiller May 15, 2022
9375777
presentation page done
thomasrouiller May 15, 2022
49c19af
coding 50s (product) page in html
thomasrouiller May 16, 2022
638adf3
coded the first product page in css
thomasrouiller May 16, 2022
96027ed
site done
thomasrouiller May 16, 2022
c688fd3
cleaned the comments
thomasrouiller May 18, 2022
599b5be
corrected the "products" button from resellers to products
thomasrouiller May 18, 2022
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
122 changes: 122 additions & 0 deletions 50s.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.typekit.net/txz6jyf.css">
<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=Rubik+Mono+One&family=Source+Sans+Pro:ital,wght@0,200;0,400;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>AMBER™</title>
</head>
<body>
<header>
<div class="header-container">
<div class="amber-logo">
<img src="img/logo_amber_main.svg" alt="logo de la marque amber">
</div>
<div class="horror-logo">
<img src="img/logo_amber_wide.svg" alt="logo de l'édition spéciale">
</div>
</div>
<div class="defiling-container">
<span class="defiling-text">/ amber moving music™ / amber moving music™
/ amber moving music™/ amber moving music™&nbsp;</span>
<span class="defiling-text">/ amber moving music™ / amber moving music™
/ amber moving music™/ amber moving music™&nbsp;</span>
</div>
</header>
<main>
<div class="box-card">
<img src="img/50s_lines.svg"
alt="dégrader de couleurs de jaune à orange">
<img class="icone" src="img/shopping_cart_icone.svg"
alt="icone d'un panier">
<h1>50’s edition</h1>
<h2>presented by AMBER™</h2>
<img class="img-sizing" src="img/fiftiesbox.webp"
alt="packaging de la boîte année 50">
</div>
<div class="price-card">
<div class="price-card-flex">
<h5>ONLY<br>99,95CHF<span class="symbol">*</span></h5>
<h6>*Taxes included</h6>
</div>
<a class="button-rectangle" href="">ADD TO CART!</a>
<a class="button-rectangle" href="60s.html">NEXT PRODUCT!</a>
<a class="button-rectangle" href="index.html#products">PRODUCTS!</a>
</div>
<div class="technical-info-card">
<div class="title-container-light">
<img class="arrow" src="img/arrow_black.svg"
alt="une flèche vectorisée">
<h3 id="resellers">TECHNICAL INFORMATIONS</h3>
<img class="arrow" src="img/arrow_black.svg"
alt="une flèche vectorisée">
</div>
<ul>
<li>Wireless : Bluetooth 5.2</li>
<li>Reach : 10 m</li>
<li>Connectic : USB-C</li>
<li>Microphone : Yes</li>
<li>Color : Black</li>
<li>Weight : 4 g</li>
<li>Battery life : 5 h</li>
<li>SKU : 14404071</li>
</ul>
</div>
<div class="homepage-button-card">
<a class="button-rectangle-light" href="index.html">
BACK TO THE HOMEPAGE!</a>
</div>
</main>
<footer id="contact">
<div class="footer-info-container">
<img src="img/logo_amber_horror.svg" alt="logo de l'horror edition">
<div class="footer-nav">
<a class="footer-link" href="">Shop Now</a>
<a class="footer-link" href="">Find Us</a>
<a class="footer-link" href="">Contact</a>
<a class="footer-link" href="">Help / FAQ</a>
<a class="footer-link" href="">Terms & Privacy</a>
</div>
</div>
<div class="footer-flex-container">
<div class="social-media-container">
<div class="flex-social-media">
<a href="https://www.instagram.com" target="_blank">
<img src="img/instagram_icone.svg" alt="logo d'instragram">
</a>
<h4>@amber_europe</h4>
</div>
<div class="flex-social-media">
<a href="https://www.facebook.com" target="_blank">
<img src="img/facebook_icone.svg" alt="logo de facebook">
</a>
<h4>Amber Europe</h4>
</div>
<div class="flex-social-media">
<a href="https://www.twitter.com" target="_blank">
<img src="img/twitter_icone.svg" alt="logo de twitter">
</a>
<h4>@amber_europe</h4>
</div>
</div>
<div class="adress">
<p>
AMBER™ <br>
P.O. BOX 4 GENEVA <br>
SWITZERLAND <br>
contact@amber.ch
</p>
</div>
<div class="site-credit">
<p>© 2022 TRIBAL industries <br> <span>Site Credits</span></p>
</div>
</div>
</footer>
</body>
</html>
122 changes: 122 additions & 0 deletions 60s.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.typekit.net/txz6jyf.css">
<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=Rubik+Mono+One&family=Source+Sans+Pro:ital,wght@0,200;0,400;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>AMBER™</title>
</head>
<body>
<header>
<div class="header-container">
<div class="amber-logo">
<img src="img/logo_amber_main.svg" alt="logo de la marque amber">
</div>
<div class="horror-logo">
<img src="img/logo_amber_wide.svg" alt="logo de l'édition spéciale">
</div>
</div>
<div class="defiling-container">
<span class="defiling-text">/ amber moving music™ / amber moving music™
/ amber moving music™/ amber moving music™&nbsp;</span>
<span class="defiling-text">/ amber moving music™ / amber moving music™
/ amber moving music™/ amber moving music™&nbsp;</span>
</div>
</header>
<main>
<div class="box-card">
<img src="img/60s_lines.svg"
alt="dégrader de couleurs de bleu à rose">
<img class="icone" src="img/shopping_cart_icone.svg"
alt="icone d'un panier">
<h1>60’s edition</h1>
<h2>presented by AMBER™</h2>
<img class="img-sizing" src="img/sixtiesbox.webp"
alt="packaging de la boîte année 60">
</div>
<div class="price-card">
<div class="price-card-flex">
<h5>ONLY<br>99,95CHF<span class="symbol">*</span></h5>
<h6>*Taxes included</h6>
</div>
<a class="button-rectangle" href="">ADD TO CART!</a>
<a class="button-rectangle" href="70s.html">NEXT PRODUCT!</a>
<a class="button-rectangle" href="index.html#products">PRODUCTS!</a>
</div>
<div class="technical-info-card">
<div class="title-container-light">
<img class="arrow" src="img/arrow_black.svg"
alt="une flèche vectorisée">
<h3 id="resellers">TECHNICAL INFORMATIONS</h3>
<img class="arrow" src="img/arrow_black.svg"
alt="une flèche vectorisée">
</div>
<ul>
<li>Wireless : Bluetooth 5.2</li>
<li>Reach : 10 m</li>
<li>Connectic : USB-C</li>
<li>Microphone : Yes</li>
<li>Color : Black</li>
<li>Weight : 4 g</li>
<li>Battery life : 5 h</li>
<li>SKU : 14404071</li>
</ul>
</div>
<div class="homepage-button-card">
<a class="button-rectangle-light" href="index.html">
BACK TO THE HOMEPAGE!</a>
</div>
</main>
<footer id="contact">
<div class="footer-info-container">
<img src="img/logo_amber_horror.svg" alt="logo de l'horror edition">
<div class="footer-nav">
<a class="footer-link" href="">Shop Now</a>
<a class="footer-link" href="">Find Us</a>
<a class="footer-link" href="">Contact</a>
<a class="footer-link" href="">Help / FAQ</a>
<a class="footer-link" href="">Terms & Privacy</a>
</div>
</div>
<div class="footer-flex-container">
<div class="social-media-container">
<div class="flex-social-media">
<a href="https://www.instagram.com" target="_blank">
<img src="img/instagram_icone.svg" alt="logo d'instragram">
</a>
<h4>@amber_europe</h4>
</div>
<div class="flex-social-media">
<a href="https://www.facebook.com" target="_blank">
<img src="img/facebook_icone.svg" alt="logo de facebook">
</a>
<h4>Amber Europe</h4>
</div>
<div class="flex-social-media">
<a href="https://www.twitter.com" target="_blank">
<img src="img/twitter_icone.svg" alt="logo de twitter">
</a>
<h4>@amber_europe</h4>
</div>
</div>
<div class="adress">
<p>
AMBER™ <br>
P.O. BOX 4 GENEVA <br>
SWITZERLAND <br>
contact@amber.ch
</p>
</div>
<div class="site-credit">
<p>© 2022 TRIBAL industries <br> <span>Site Credits</span></p>
</div>
</div>
</footer>
</body>
</html>
122 changes: 122 additions & 0 deletions 70s.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.typekit.net/txz6jyf.css">
<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=Rubik+Mono+One&family=Source+Sans+Pro:ital,wght@0,200;0,400;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>AMBER™</title>
</head>
<body>
<header>
<div class="header-container">
<div class="amber-logo">
<img src="img/logo_amber_main.svg" alt="logo de la marque amber">
</div>
<div class="horror-logo">
<img src="img/logo_amber_wide.svg" alt="logo de l'édition spéciale">
</div>
</div>
<div class="defiling-container">
<span class="defiling-text">/ amber moving music™ / amber moving music™
/ amber moving music™/ amber moving music™&nbsp;</span>
<span class="defiling-text">/ amber moving music™ / amber moving music™
/ amber moving music™/ amber moving music™&nbsp;</span>
</div>
</header>
<main>
<div class="box-card">
<img src="img/70s_lines.svg"
alt="dégrader de couleurs de vert à orange">
<img class="icone" src="img/shopping_cart_icone.svg"
alt="icone d'un panier">
<h1>70’s edition</h1>
<h2>presented by AMBER™</h2>
<img class="img-sizing" src="img/seventiesbox.webp"
alt="packaging de la boîte année 70">
</div>
<div class="price-card">
<div class="price-card-flex">
<h5>ONLY<br>99,95CHF<span class="symbol">*</span></h5>
<h6>*Taxes included</h6>
</div>
<a class="button-rectangle" href="">ADD TO CART!</a>
<a class="button-rectangle" href="50s.html">NEXT PRODUCT!</a>
<a class="button-rectangle" href="index.html#products">PRODUCTS!</a>
</div>
<div class="technical-info-card">
<div class="title-container-light">
<img class="arrow" src="img/arrow_black.svg"
alt="une flèche vectorisée">
<h3 id="resellers">TECHNICAL INFORMATIONS</h3>
<img class="arrow" src="img/arrow_black.svg"
alt="une flèche vectorisée">
</div>
<ul>
<li>Wireless : Bluetooth 5.2</li>
<li>Reach : 10 m</li>
<li>Connectic : USB-C</li>
<li>Microphone : Yes</li>
<li>Color : Black</li>
<li>Weight : 4 g</li>
<li>Battery life : 5 h</li>
<li>SKU : 14404071</li>
</ul>
</div>
<div class="homepage-button-card">
<a class="button-rectangle-light" href="index.html">
BACK TO THE HOMEPAGE!</a>
</div>
</main>
<footer id="contact">
<div class="footer-info-container">
<img src="img/logo_amber_horror.svg" alt="logo de l'horror edition">
<div class="footer-nav">
<a class="footer-link" href="">Shop Now</a>
<a class="footer-link" href="">Find Us</a>
<a class="footer-link" href="">Contact</a>
<a class="footer-link" href="">Help / FAQ</a>
<a class="footer-link" href="">Terms & Privacy</a>
</div>
</div>
<div class="footer-flex-container">
<div class="social-media-container">
<div class="flex-social-media">
<a href="https://www.instagram.com" target="_blank">
<img src="img/instagram_icone.svg" alt="logo d'instragram">
</a>
<h4>@amber_europe</h4>
</div>
<div class="flex-social-media">
<a href="https://www.facebook.com" target="_blank">
<img src="img/facebook_icone.svg" alt="logo de facebook">
</a>
<h4>Amber Europe</h4>
</div>
<div class="flex-social-media">
<a href="https://www.twitter.com" target="_blank">
<img src="img/twitter_icone.svg" alt="logo de twitter">
</a>
<h4>@amber_europe</h4>
</div>
</div>
<div class="adress">
<p>
AMBER™ <br>
P.O. BOX 4 GENEVA <br>
SWITZERLAND <br>
contact@amber.ch
</p>
</div>
<div class="site-credit">
<p>© 2022 TRIBAL industries <br> <span>Site Credits</span></p>
</div>
</div>
</footer>
</body>
</html>
Loading