diff --git a/css/styles.css b/css/styles.css index e69de29..38b01c4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,482 @@ +@font-face { + font-family: mash; + src: url(../fonts/Mash-VariableVF.woff); + src: url(../fonts/Mash-VariableVF.woff2); +} + +@font-face { + font-family: albam; + src: url(../fonts/ALBAM___.woff); + src: url(../fonts/ALBAM___.woff2); +} + +@font-face { + font-family: eckmann; + src: url(../fonts/Eckmannpsych-Medium.woff); + src: url(../fonts/Eckmannpsych-Medium.woff2); +} + +@font-face { + font-family: Kohinoor; + src: url(../fonts/KohinoorDevanagari-Regular-01.woff); + src: url(../fonts/KohinoorDevanagari-Regular-01.woff2); +} + +@font-face { + font-family: jassin; + src: url(../fonts/Jassin.woff); +} + +body { + margin: auto; + max-width : 100%; + background-color: #c5d3eb; +} + +main { + border: 0; +} + +.box-airpods { + width: 375px ; +} + +.header-accueil { + margin: 0; + height: 661px; + background-image: url(../img/nuage.png); + background-size: cover; +} + + +header nav { + display: flex; + justify-content: space-around; + padding-top: 20px; +} + +header nav img { + height: 30px; + margin: 0; + flex-direction: row; +} + +header p { + text-align: center; + font-family: Kohinoor; + color: #6082f7; + font-size: 15px; + margin:0 37px ; + line-height: 18px; +} + +h1 { + margin: 169px 0 0 0; + font-family: mash; + color: #6082f7; + text-align: center; + font-weight: 400; + font-size: 47px; +} + +h2 { + margin: 0 0 28px 0; + font-family: mash; + color: #6082f7; + text-align: center; + font-weight: 400; + font-size: 27px; +} + +.scroll-text { + overflow: hidden; + width: 100%; + padding: 19px 0 19px 0; + position: absolute; + background-color: #eaebef; + border: solid 2px #ffff; +} + +.container { + white-space: nowrap; + font-family: mash; + color: #6082f7; + font-size: 47px; + animation: scrolltext1 5s cubic-bezier(0.01, 0.8, 0.53, -0.13) infinite; +} + +.container-2 { + animation: scrolltext2 6s cubic-bezier(0.13, -0.16, 1, -0.65) infinite; +} + +@keyframes scrolltext1 { + 0%{ + transform: translate(0,0); + } + 100%{ + transform: translate(-100%,0); + } +} + +@keyframes scrolltext2 { + 0%{ + transform: translate(-100%,0); + } + 100%{ + transform: translate(0%,0); + } +} + +.airpods-model { + width: 205px; + transform: translate(0%, -40px); +} + +.background-model-airpods { + margin:250px 0 107px 0; + background-color: #4c83fb; + position: relative; + height: 200px; + text-align: center; +} + + + + + + + + +.airpods-model-year { + position: relative; + height: 214px; +} + +.s70 { + background-color: #cf9f7f; +} + +.s60 { + background-color: #bed8e8; +} + +.s50 { + background-color: #e8b5c6; +} + +.aipods-year { + width: 375px; + position:absolute; + top: -100px; + left: -100px; +} + +.link-produit { + width: 178px; + position: absolute; + bottom: 8px; + right: 1px; +} + +.airpods-model-year p { + font-size: 47px; + color: white; + position: absolute; +} + +.s70 p { + font-family: albam; +} + +.s60 p { + font-family: eckmann; +} + +.s50 p { + font-family: jassin; +} + +.card-link-airpods p { + top: -40px; + right: 10px; +} + +.card-link-airpods { + margin: 0 0 130px 0; +} + +.retailer { + margin-bottom: 206px; +} + +.retailer img { + background-color: #5f80f7; + margin-bottom: 8px; +} + +footer { + display: flex; + justify-content: flex-end; +} + + +.footer-accueil { + background-color: #5f80f7; + padding: 0 0 0 247px; +} + +footer img { + flex-direction: row; + width: 30px; + margin: 10px 10px 10px 0; +} + +.accueil { + margin: 0; + width: 375px; + height: 620px; + background-size: cover; + position: relative; +} + +.seventeen-back { + background-image: url(../img/\ kareem-abdul.webp); +} + +.sixteen-back { + background-image: url(../img/jerry-lucas.webp); +} + +.fifteen-back { + background-image: url(../img/paul-arizin.webp); +} + + +.button-flower { + width: 150px; + position: absolute; + bottom: 0px; + right: 40px; +} + +.button-flower { + animation-duration: 3s; + animation-name: flower-rotate; + animation-iteration-count: infinite; +} + +@keyframes flower-rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.kareem-seventen{ + background-color: #fcd472; + font-family: albam; + font-size: 36px; +} + +.jerry-sixteen{ + background-color: #f0afc7; + font-family: eckmann; + font-size: 36px; +} + +.paul-fifteen{ + background-color: #f0afc7; + font-family: jassin; + font-size: 28px; +} + +.text { + color: white; + white-space:nowrap; + text-align: center; + line-height: 35px; + padding: 20px 0 10px 0; +} + +.text span { + font-size: 23px; +} + +.airpods { + max-width: 375px; +} + +.orange-70s { + background-color: #f9c973; +} + +.bleu-60s { + background-color: #5ddaff; +} + +.rose-50s { + background-color: #f6a4ae; +} + + +.box { + padding: 88px; + width: 200px; +} + +.seventeen { + font-family: albam; + background-color: #f7a348; +} + +.fifteen { + font-family: jassin; + background-color: #f67ab1; +} + +.sixteen { + font-family: eckmann; + background-color: #2eb2e2; +} + +.card-buy img { + width: 90px; +} + +.card-buy { + display: flex; + font-size: 47px; + color: white; + flex-direction: row; + justify-content: space-between; + padding: 0 11px 0 33px; + margin: 0px; +} + +.view { + display: flex; + flex-direction: column; + text-align: center; + color: white; + font-size: 47px; + padding: 0 0 47px 0; +} + +.view img{ + transform: rotate(90deg); + height: 178px; +} + +.details-seventeen { + background-color: #dcaa44; + font-family: albam; +} + +.details-fifteen { + background-color: #f6c7e4; + font-family: jassin; +} + +.details-sixteen { + background-color: #75c3d8; + font-family: eckmann; +} + +.details img { + width: 50px; +} + +.icone-detail { + display: flex; + flex-direction: row; + text-align: center; + justify-content: center +} + +.details { + text-align: center; + color: white; + padding: 100px 90px 130px 90px; + font-size: 21px; +} + +.card-seventeen { + font-family: albam; + background-color: #d9a050; +} + +.card-sixteen { + font-family: eckmann; + background-color: #73d0da; +} + +.card-fifteen { + font-family: jassin; + background-color: #ecbad8; +} + + +.autres { + font-size: 36px; + text-align: center; + padding: 25px 0 45px 0; +} + +.autres p { + color: white; + margin: 0 0 30px 0; +} + +.autres img { + width: 200px; +} + +.kareem { + background-color: #a03e2e; +} + +.jerry { + background-color: #0098bf; +} + +.paul { + background-color: #f66b80; +} + +.icone { + width: 80px; + padding: 20px 148px 20px 147px; + text-align: center; +} + +.produits-seventeen { + font-family: albam; + background-color: #c46a26; +} + +.produits-fifteen { + font-family: jassin; + background-color: #ef99c4; +} + +.produits-sixteen { + font-family: eckmann; + background-color: #05b7d5; +} + +.footer-seventeen { + padding: 0 0 0 247px; + background-color: #561d04; +} + +.footer-sixteen { + background-color: #024d75; + padding: 0 0 0 247px; +} + +.footer-fifteen { + background-color: #b44957; + padding: 0 0 0 247px; +} \ No newline at end of file diff --git a/fifteen.html b/fifteen.html new file mode 100644 index 0000000..988be9a --- /dev/null +++ b/fifteen.html @@ -0,0 +1,62 @@ + + + + + + + + + +
+
+ + +
+
+
+
BOUNCE BACK IN LIFE LIKE
PAUL ARIZIN WITH OUR AIRPODS
+
+ +
+ +
+

200$

+ +
+
+

VIEW DETAILS

+ +
+
+
+ + + +
+

+ Fingertip control
+ water resistance
+ 27 Hour Battery Life +

+
+
+

AUTRES PRODUITS

+ +
+
+ +
+
+ + + diff --git a/fonts/ALBAM___.woff b/fonts/ALBAM___.woff new file mode 100644 index 0000000..121646b Binary files /dev/null and b/fonts/ALBAM___.woff differ diff --git a/fonts/ALBAM___.woff2 b/fonts/ALBAM___.woff2 new file mode 100644 index 0000000..2b26b3c Binary files /dev/null and b/fonts/ALBAM___.woff2 differ diff --git a/fonts/Eckmannpsych-Medium.woff b/fonts/Eckmannpsych-Medium.woff new file mode 100644 index 0000000..b06ab4f Binary files /dev/null and b/fonts/Eckmannpsych-Medium.woff differ diff --git a/fonts/Eckmannpsych-Medium.woff2 b/fonts/Eckmannpsych-Medium.woff2 new file mode 100644 index 0000000..5cb84f1 Binary files /dev/null and b/fonts/Eckmannpsych-Medium.woff2 differ diff --git a/fonts/Eckmannpsych-Small.woff b/fonts/Eckmannpsych-Small.woff new file mode 100644 index 0000000..0e2d040 Binary files /dev/null and b/fonts/Eckmannpsych-Small.woff differ diff --git a/fonts/Eckmannpsych-Small.woff2 b/fonts/Eckmannpsych-Small.woff2 new file mode 100644 index 0000000..9f49ac8 Binary files /dev/null and b/fonts/Eckmannpsych-Small.woff2 differ diff --git a/fonts/Jassin.woff b/fonts/Jassin.woff new file mode 100644 index 0000000..61458b8 Binary files /dev/null and b/fonts/Jassin.woff differ diff --git a/fonts/Jassin.woff2 b/fonts/Jassin.woff2 new file mode 100644 index 0000000..a81f21a Binary files /dev/null and b/fonts/Jassin.woff2 differ diff --git a/fonts/KohinoorDevanagari-Regular-01.woff b/fonts/KohinoorDevanagari-Regular-01.woff new file mode 100644 index 0000000..7b13d5e Binary files /dev/null and b/fonts/KohinoorDevanagari-Regular-01.woff differ diff --git a/fonts/KohinoorDevanagari-Regular-01.woff2 b/fonts/KohinoorDevanagari-Regular-01.woff2 new file mode 100644 index 0000000..26094d6 Binary files /dev/null and b/fonts/KohinoorDevanagari-Regular-01.woff2 differ diff --git a/fonts/Mash-VariableVF.woff b/fonts/Mash-VariableVF.woff new file mode 100644 index 0000000..88aaf75 Binary files /dev/null and b/fonts/Mash-VariableVF.woff differ diff --git a/fonts/Mash-VariableVF.woff2 b/fonts/Mash-VariableVF.woff2 new file mode 100644 index 0000000..c120426 Binary files /dev/null and b/fonts/Mash-VariableVF.woff2 differ diff --git a/img/ kareem-abdul.webp b/img/ kareem-abdul.webp new file mode 100644 index 0000000..76bbbde Binary files /dev/null and b/img/ kareem-abdul.webp differ diff --git a/img/airpods-bleu-60s.png b/img/airpods-bleu-60s.png new file mode 100644 index 0000000..7b18dc1 Binary files /dev/null and b/img/airpods-bleu-60s.png differ diff --git a/img/airpods-orange-70s.png b/img/airpods-orange-70s.png new file mode 100644 index 0000000..10c589e Binary files /dev/null and b/img/airpods-orange-70s.png differ diff --git a/img/airpods-rose-50s.png b/img/airpods-rose-50s.png new file mode 100644 index 0000000..9c5ab5c Binary files /dev/null and b/img/airpods-rose-50s.png differ diff --git a/img/batteris-icone.svg b/img/batteris-icone.svg new file mode 100644 index 0000000..7e583dd --- /dev/null +++ b/img/batteris-icone.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + diff --git a/img/box-50s-360deg.gif b/img/box-50s-360deg.gif new file mode 100644 index 0000000..496e97a Binary files /dev/null and b/img/box-50s-360deg.gif differ diff --git a/img/box-50s.webp b/img/box-50s.webp new file mode 100644 index 0000000..1a87b7b Binary files /dev/null and b/img/box-50s.webp differ diff --git a/img/box-60s-360deg.gif b/img/box-60s-360deg.gif new file mode 100644 index 0000000..e86322e Binary files /dev/null and b/img/box-60s-360deg.gif differ diff --git a/img/box-60s.webp b/img/box-60s.webp new file mode 100644 index 0000000..dcedb4d Binary files /dev/null and b/img/box-60s.webp differ diff --git a/img/box-70s-360deg.gif b/img/box-70s-360deg.gif new file mode 100644 index 0000000..5fe0b3b Binary files /dev/null and b/img/box-70s-360deg.gif differ diff --git a/img/box-70s.webp b/img/box-70s.webp new file mode 100644 index 0000000..b103f22 Binary files /dev/null and b/img/box-70s.webp differ diff --git a/img/button-50s-flower.svg b/img/button-50s-flower.svg new file mode 100644 index 0000000..3daf047 --- /dev/null +++ b/img/button-50s-flower.svg @@ -0,0 +1,30 @@ + + + + + + + + +50’s + diff --git a/img/button-60s-flower.svg b/img/button-60s-flower.svg new file mode 100644 index 0000000..fef8011 --- /dev/null +++ b/img/button-60s-flower.svg @@ -0,0 +1,28 @@ + + + + + + + + + +60’s + diff --git a/img/button-70s-flower.svg b/img/button-70s-flower.svg new file mode 100644 index 0000000..fd32c97 --- /dev/null +++ b/img/button-70s-flower.svg @@ -0,0 +1,30 @@ + + + + + + + + +70’s + diff --git a/img/button-basket-buy-50s.svg b/img/button-basket-buy-50s.svg new file mode 100644 index 0000000..57ef8d9 --- /dev/null +++ b/img/button-basket-buy-50s.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + diff --git a/img/button-basket-buy-60s.svg b/img/button-basket-buy-60s.svg new file mode 100644 index 0000000..9916248 --- /dev/null +++ b/img/button-basket-buy-60s.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + diff --git a/img/button-basket-buy.svg b/img/button-basket-buy.svg new file mode 100644 index 0000000..9e8c6c6 --- /dev/null +++ b/img/button-basket-buy.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + diff --git a/img/clic-icone.svg b/img/clic-icone.svg new file mode 100644 index 0000000..641cd51 --- /dev/null +++ b/img/clic-icone.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/img/facebook-icone.svg b/img/facebook-icone.svg new file mode 100644 index 0000000..325fd5e --- /dev/null +++ b/img/facebook-icone.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/img/fleche.svg b/img/fleche.svg new file mode 100644 index 0000000..635bb7a --- /dev/null +++ b/img/fleche.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/img/galaxus.svg b/img/galaxus.svg new file mode 100644 index 0000000..818d64d --- /dev/null +++ b/img/galaxus.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/gmail-icone.svg b/img/gmail-icone.svg new file mode 100644 index 0000000..b059993 --- /dev/null +++ b/img/gmail-icone.svg @@ -0,0 +1,27 @@ + + + + + + + + + + diff --git a/img/icone-panier.svg b/img/icone-panier.svg new file mode 100644 index 0000000..3d1e1f8 --- /dev/null +++ b/img/icone-panier.svg @@ -0,0 +1,26 @@ + + + + + + + + + + diff --git a/img/jerry-logo.svg b/img/jerry-logo.svg new file mode 100644 index 0000000..b42f09e --- /dev/null +++ b/img/jerry-logo.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/img/jerry-lucas.webp b/img/jerry-lucas.webp new file mode 100644 index 0000000..adf2d36 Binary files /dev/null and b/img/jerry-lucas.webp differ diff --git a/img/kareem-logo.svg b/img/kareem-logo.svg new file mode 100644 index 0000000..1587624 --- /dev/null +++ b/img/kareem-logo.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/img/logo-amber.svg b/img/logo-amber.svg new file mode 100644 index 0000000..5f86053 --- /dev/null +++ b/img/logo-amber.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/main-airpods.jpg b/img/main-airpods.jpg new file mode 100644 index 0000000..d1755c5 Binary files /dev/null and b/img/main-airpods.jpg differ diff --git a/img/manor.svg b/img/manor.svg new file mode 100644 index 0000000..241b282 --- /dev/null +++ b/img/manor.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/img/media-markt.svg b/img/media-markt.svg new file mode 100644 index 0000000..ef13347 --- /dev/null +++ b/img/media-markt.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + diff --git a/img/menu-burger .svg b/img/menu-burger .svg new file mode 100644 index 0000000..5bee45d --- /dev/null +++ b/img/menu-burger .svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/img/model-airpods.png b/img/model-airpods.png new file mode 100644 index 0000000..68d5670 Binary files /dev/null and b/img/model-airpods.png differ diff --git a/img/nuage.png b/img/nuage.png new file mode 100644 index 0000000..eebef87 Binary files /dev/null and b/img/nuage.png differ diff --git a/img/paul-arizin.webp b/img/paul-arizin.webp new file mode 100644 index 0000000..89616f8 Binary files /dev/null and b/img/paul-arizin.webp differ diff --git a/img/paul-logo.svg b/img/paul-logo.svg new file mode 100644 index 0000000..ed51278 --- /dev/null +++ b/img/paul-logo.svg @@ -0,0 +1,33 @@ + + + + + + + + diff --git a/img/twitter-icone.svg b/img/twitter-icone.svg new file mode 100644 index 0000000..d0fe23a --- /dev/null +++ b/img/twitter-icone.svg @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/img/water-resisantance-icone.svg b/img/water-resisantance-icone.svg new file mode 100644 index 0000000..9554349 --- /dev/null +++ b/img/water-resisantance-icone.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/index.html b/index.html index 7520850..b893aa0 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,68 @@ + - + +
+
+ +

New
collection

+

AMBER X NBA

+

Amber vous rapprochent des meuilleures époque du basket avec la nouvelle collection vintage, peu importe où vous vous trouvez ou ce que vous faites.

+
+
+
+ deux main qui tienne des airpods +
+
+ VINTAGE - VINTAGE - VINTAGE  + VINTAGE - VINTAGE - VINTAGE  +
+
+ AMBER X NBA - AMBER X NBA - AMBER X NBA  + AMBER X NBA - AMBER X NBA - AMBER X NBA  +
+
+
+ model airpods +
+
+
+ +

70's

+ +
+
+ +

60's

+ +
+
+ +

50's

+ +
+
+
+ + + + +
+
+ + diff --git a/seventeen.html b/seventeen.html new file mode 100644 index 0000000..4e100e4 --- /dev/null +++ b/seventeen.html @@ -0,0 +1,62 @@ + + + + + + + + + +
+
+ + +
+
+
+
BOUNCE BACK IN LIFE LIKE
KAREEM ABDUL WITH OUR AIRPODS
+
+ +
+ +
+

200$

+ +
+
+

VIEW DETAILS

+ +
+
+
+ + + +
+

+ Fingertip control
+ water resistance
+ 27 Hour Battery Life +

+
+
+

AUTRES PRODUITS

+ +
+
+ +
+
+ + + diff --git a/sixteen.html b/sixteen.html new file mode 100644 index 0000000..06e1891 --- /dev/null +++ b/sixteen.html @@ -0,0 +1,62 @@ + + + + + + + + + +
+
+ + +
+
+
+
BOUNCE BACK IN LIFE LIKE
JERRY LUCAS WITH OUR AIRPODS
+
+ +
+ +
+

200$

+ +
+
+

VIEW DETAILS

+ +
+
+
+ + + +
+

+ Fingertip control
+ water resistance
+ 27 Hour Battery Life +

+
+
+

AUTRES PRODUITS

+ +
+
+ +
+
+ + +