Skip to content

J'ai fini #5

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

J'ai fini #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e0014f2
J'ai mis toutes les images dont j'aurai besoin au bon format dans le …
TafaniM May 23, 2022
8ee96c9
J'ai fais la page d'accueil
TafaniM May 23, 2022
fdfca06
J'ai fais la page 50.html
TafaniM May 23, 2022
dc2ded2
développement css essaies
TafaniM May 23, 2022
f1ece6b
développement css
TafaniM May 24, 2022
83e45a6
J'ai finis de CSS
TafaniM May 24, 2022
f906c53
développement HTML année 60
TafaniM May 24, 2022
114ca23
développement HTML année 70
TafaniM May 24, 2022
45ba134
finalisation css
TafaniM May 24, 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
49 changes: 49 additions & 0 deletions 50.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css">
<title>Amber</title>
</head>
<body>
<header>
<img class="logo-amber" src="img/logo-amber.svg" alt="logo Amber">
<img class="music" src="img/musique50s.webp" alt="photo elvis presley">
</header>
<main>
<h1>Elvis Presley</h1>
<p>La boîte 50’s vous propose des écouteurs sans fils avec connexion
Bluetooth. Le thème Elvis Presley avec sa citation
"I know absolutely nothing about music. For what I do, I don't need it!"</p>
<img class="description" src="img/description50s.webp" alt="infos ecouteurs">
<img src="img/boite50s.webp" alt="boite années 50">
<a class="button" href="index.html" >acheter</a>
<h1>autres produits</h1>
<div class="other-products">
<img src="img/boite60s.webp" alt="boite années 60">
<img src="img/boite70s.webp" alt="boite années 70">
<p>
<a class="button" href="60.html" >voir le produit</a>
</p>
<p>
<a class="button" href="70.html" >voir le produit</a>
</p>
</div>
</main>
<footer>
<h1>contacts</h1>
<nav>
<p>
<a href="amber@gmail.com">amber@gmail.com</a>
</p>
<p>
<a href="tel:0041791234567">079/123.45.67</a>
</p>
<p>
<a href="https://amber.ch">https://amber.ch</a>
</p>
</nav>
</footer>
</body>
</html>
49 changes: 49 additions & 0 deletions 60.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css">
<title>Amber</title>
</head>
<body>
<header>
<img class="logo-amber" src="img/logo-amber.svg" alt="logo Amber">
<img class="music" src="img/musique60s.webp" alt="photo Johnny Hallyday">
</header>
<main>
<h1>Johnny Hallyday</h1>
<p>La boîte 60’s vous propose des écouteurs sans fils avec connexion
Bluetooth. Le thème Johnny Hallyday avec sa citation
"I will stop singing the day I death."</p>
<img class="description" src="img/description60s.webp" alt="infos ecouteurs">
<img src="img/boite60s.webp" alt="boite années 60">
<a class="button" href="index.html" >acheter</a>
<h1>autres produits</h1>
<div class="other-products">
<img src="img/boite50s.webp" alt="boite années 50">
<img src="img/boite70s.webp" alt="boite années 70">
<p>
<a class="button" href="50.html" >voir le produit</a>
</p>
<p>
<a class="button" href="70.html" >voir le produit</a>
</p>
</div>
</main>
<footer>
<h1>contacts</h1>
<nav>
<p>
<a href="amber@gmail.com">amber@gmail.com</a>
</p>
<p>
<a href="tel:0041791234567">079/123.45.67</a>
</p>
<p>
<a href="https://amber.ch">https://amber.ch</a>
</p>
</nav>
</footer>
</body>
</html>
49 changes: 49 additions & 0 deletions 70.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css">
<title>Amber</title>
</head>
<body>
<header>
<img class="logo-amber" src="img/logo-amber.svg" alt="logo Amber">
<img class="music" src="img/musique70s.webp" alt="photo David Bowie">
</header>
<main>
<h1>David Bowie</h1>
<p>La boîte 70’s vous propose des écouteurs sans fils avec connexion
Bluetooth. Le thème David Bowie avec sa citation
"I want my music to awaken the ghosts that are inside me. Not the demons."</p>
<img class="description" src="img/description70s.webp" alt="infos ecouteurs">
<img src="img/boite70s.webp" alt="boite années 70">
<a class="button" href="index.html" >acheter</a>
<h1>autres produits</h1>
<div class="other-products">
<img src="img/boite50s.webp" alt="boite années 50">
<img src="img/boite60s.webp" alt="boite années 60">
<p>
<a class="button" href="50.html" >voir le produit</a>
</p>
<p>
<a class="button" href="60.html" >voir le produit</a>
</p>
</div>
</main>
<footer>
<h1>contacts</h1>
<nav>
<p>
<a href="amber@gmail.com">amber@gmail.com</a>
</p>
<p>
<a href="tel:0041791234567">079/123.45.67</a>
</p>
<p>
<a href="https://amber.ch">https://amber.ch</a>
</p>
</nav>
</footer>
</body>
</html>
84 changes: 84 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
body {
width: 380px;
margin: auto;
text-align: center;
}

img {
width: 350px;
margin: 25px;
}

.button {
background-color: #000;
text-decoration: none;
color: #ffffff;
font-size: 20px;
align-items: center;
border-radius: 10px;
padding: 10px;
}

.description {
width: 200%;
transform: translate(-25%);
margin: 0px;
}

.logo-container {
display: flex;
flex-wrap: wrap;
justify-content:center;
padding-bottom: 50px;
}

.logo-container img {
width: 100px;
}

.other-products {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.other-products img {
width: 130px;
margin-bottom: -40px;
}

.other-products .button {
font-size: 10px;
}

.logo-amber {
width: 200px;
margin: 50px;
}

.music {
width: 110%;
margin: 0px;
}

p {
margin: 50px;
}

h1 {
margin: 50px;
}

footer {
background-color: #000;
padding-top: 10px;
padding-bottom: 10px;
}

footer h1 {
color: #ffffff;
}

nav a {
color: #ffffff;
}
Binary file added img/boite50s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/boite60s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/boite70s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/description50s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/description60s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/description70s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/logo-amber.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/logo-fnac.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/logo-interdiscount.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/logo-manor.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/logo-mediamarkt.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/musique50s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/musique60s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/musique70s.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 39 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,44 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="css/styles.css">
<title>Amber</title>
</head>
<body></body>
<body>
<header>
<img class="logo-amber" src="img/logo-amber.svg" alt="logo Amber">
<p>AMBER est une marque qui vends des écouteurs sans fils avec connexion
Bluetooth dans le thème de la musique et du vintage.</p>
</header>
<main>
<h1>produits</h1>
<img src="img/boite50s.webp" alt="boite années 50">
<a class="button" href="50.html" >voir le produit</a>
<img src="img/boite60s.webp" alt="boite années 60">
<a class="button" href="60.html" >voir le produit</a>
<img src="img/boite70s.webp" alt="boite années 70">
<a class="button" href="70.html" >voir le produit</a>
<h1>revendeurs</h1>
<div class="logo-container">
<img src="img/logo-mediamarkt.svg" alt="logo mediamarkt">
<img src="img/logo-fnac.svg" alt="logo fnac">
<img src="img/logo-interdiscount.svg" alt="logo interdiscount">
<img src="img/logo-manor.svg" alt="logo manor">
</div>
</main>
<footer>
<h1>contacts</h1>
<nav>
<p>
<a href="amber@gmail.com">amber@gmail.com</a>
</p>
<p>
<a href="tel:0041791234567">079/123.45.67</a>
</p>
<p>
<a href="https://amber.ch">https://amber.ch</a>
</p>
</nav>
</footer>
</body>
</html>