From 8dbc23ff3a6eba395837653b3e68be7022105b5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Wed, 12 Feb 2020 15:57:44 +0900 Subject: [PATCH 1/4] css transform is not end --- index.html | 43 ++++++++++++++++++++++++++++++ index.js | 0 style.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 119 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..a6d8ce2a --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + +
+
+ +
+
+
+ fisrtDog + secondDog + thirdDog + fourthDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..8dddf3bb --- /dev/null +++ b/style.css @@ -0,0 +1,76 @@ +.carousel-wrapper { + width:1000px; + +} +.carousel { + width:100%; +} + +.menu__list>a { + text-decoration: none; +} + +.menu__list>li:first-child { + background-color: #2591C0; +} + +.menu__list>li:nth-child(2) { + background-color: #A90067; +} + +.menu__list>li:nth-child(3) { + background-color: #008577; +} + +.menu__list>li:nth-child(4 ) { + background-color:#E65D16; +} + +.carousel__photo { + opacity:1; + +} + +.carousel__photo.initial { + opacity:1; + transition: .5s opacity; +} + +.carousel__button--prev, +.carousel__button--next { + position: absolute; + top:50%; + width: 3rem; + height: 3rem; + background-color: #FFF; + transform: translateY(-50%); + border-radius: 50%; + background-color:beige; + cursor: pointer; + z-index: 1001; /* Sit on top of everything */ +} +.carousel__button--prev { + left:0; +} + +.carousel__button--next { + right:0; +} + +.carousel__button--prev::after, +.carousel__button--next::after { + content: " "; + position: absolute; + width: 10px; + height: 10px; + top: 50%; + left: 54%; + border-right: 2px solid black; + border-bottom: 2px solid black; + transform: translate(-50%, -50%) rotate(135deg); +} + +.carousel__button--next::after { + left: 47%; + transform: translate(-50%, -50%) rotate(-45deg); +} \ No newline at end of file From 4f4f240cd0cb7cc322b5ecf79bd6ec65be7544c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Wed, 19 Feb 2020 17:36:33 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=EC=95=84=EB=A7=88=EC=A1=B4=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9Cui=20=EC=99=84=EC=84=B1/=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=20=EB=AF=B8=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes README.md | 2 - index.html | 91 ++++++++++++++++++++++------ index.js | 59 ++++++++++++++++++ style.css | 173 +++++++++++++++++++++++++++++++++++++---------------- 5 files changed, 251 insertions(+), 74 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..4a1aa310097bbcd0682e77e49d2bfe282ccf050b GIT binary patch literal 6148 zcmeH~yH3ME5Jm4miU3VID7U1FL``ENr=XyLA3%9X0U1&lB#G+Ai3yaL$=dKeDl;K-w|)sCWF|cKi=;jX5q*;)*&Yp;b3Rj(ZU` zNxqWgn*K}Fy*b_$duvU)uCO2w1cE>i2m(J5;F+y9J~E9w2n2y3@J&GXhs2~>xHhJF z>tL3j093t3XJc8f%Nmnh3)jY!Jv6aUs)dR_F~q{zp4_i+ZA>j3;*SsUnZF({l4s}m zDZ4`o)5wEB5a<%vx9UXC|2cn|!AE{KBx*q*2>dewGAeJ%89&O;*52poS(}({nbg#; p(E^R-&Lw~q-A7Jxr}ZZ-)30!COm!4(&*9X#2xK6U1%Y26@CkM?L2>{9 literal 0 HcmV?d00001 diff --git a/README.md b/README.md index e70983a3..e69de29b 100644 --- a/README.md +++ b/README.md @@ -1,2 +0,0 @@ -# javascript-amazon -레벨3 diff --git a/index.html b/index.html index a6d8ce2a..1bf02e63 100644 --- a/index.html +++ b/index.html @@ -4,40 +4,93 @@ +
-
+
-
+
+
-
- fisrtDog - secondDog - thirdDog - fourthDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
+
+ +
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
+
+ fisrtDog +
+
+

Enjoy exclusive savings and rewards

+
    +
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • +
  • Save 20% off diapers, baby food, and more
    • +
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • +
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • +
+
+
+
-
-
+ + +
+ +
+
+ +
+ - \ No newline at end of file diff --git a/index.js b/index.js index e69de29b..d2ece4c4 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,59 @@ +const menuNav =document.querySelector('.menu__list'); +const carouselSlider = document.querySelector('.carousel__container') +const prevBtn = document.querySelector('.carousel__button--prev'); +const nextBtn = document.querySelector('.carousel__button--next'); + +const menuList = Array.from(menuNav.children); +const menuListWidth = menuList[0].getBoundingClientRect().width; + +const sliderList = Array.from(carouselSlider.children); +const sliderListWidth= sliderList[0].getBoundingClientRect().width; + + +let targetIndex; + +class Carousel { + constructor(targetIndex) { + this.targetIndex = targetIndex; + this.moveCarouselMenu(this.targetIndex); + this.btnHandler(); + } + moveCarouselTarget =(index)=>{ + carouselSlider.style.transform = `translateX(-${sliderListWidth*index}px)`; + } + moveCarouselMenu =(targetIndex)=>{ + this.moveMenuItem(targetIndex); + menuList.forEach((li,index)=>{ + li.addEventListener('click',()=>{ + this.moveMenuItem(index) + this.moveCarouselTarget(index); + }); + }); + } + moveMenuItem = (targetIndex)=>{ + menuList.forEach((item)=>{ + item.style.transform='scale(1)'; + }) + menuList[targetIndex].style.transform = 'scale(1.1)'; + } + btnHandler() { + prevBtn.addEventListener('click',(e)=>{ + this.targetIndex--; + if (this.targetIndex <0) this.targetIndex=3; + this.moveCarouselTarget(this.targetIndex); + this.moveMenuItem(this.targetIndex); + }) + nextBtn.addEventListener('click',(e)=>{ + this.targetIndex++; + if (this.targetIndex>3) this.targetIndex=0; + this.moveCarouselTarget(this.targetIndex) + this.moveMenuItem(this.targetIndex) + }) + } +} +window.addEventListener('DOMContentLoaded',(e)=>{ + targetIndex=Math.floor(Math.random()*menuList.length); + carouselSlider.style.transform=`translateX(-${sliderListWidth*targetIndex}px)`; + menuList[targetIndex].style.transform ='scale(1.1)'; + new Carousel(targetIndex); +}) \ No newline at end of file diff --git a/style.css b/style.css index 8dddf3bb..0130a1f1 100644 --- a/style.css +++ b/style.css @@ -1,76 +1,143 @@ -.carousel-wrapper { - width:1000px; - +* { + box-sizing: border-box; + margin:0; + padding:0; } -.carousel { - width:100%; +body,html { + margin: 0; + padding:0; } -.menu__list>a { - text-decoration: none; +.carousel__menu { + padding-top: 50px; + display: flex; +} +.carousel { + margin: 0 auto; + height: 270px; + width: 600px; + overflow: hidden; + position: relative; +} +.carousel__container { + position: relative; + display: flex; + margin-top: 40px; + width: 2450px; + height: 200px; + transition:transform .5s ease-in-out; + -webkit-transition:transform .5s ease-in-out; } - -.menu__list>li:first-child { - background-color: #2591C0; +.carousel__contents { + display: flex; + width: 600px; + height: 200px; + position: relative; + justify-content: center; + align-items: center; } - -.menu__list>li:nth-child(2) { - background-color: #A90067; +.carousel__container .carousel__text { + width: 400px; + display: inline-block; } - -.menu__list>li:nth-child(3) { - background-color: #008577; +.carousel__img { + display: inline-block; + width: 180px; } - -.menu__list>li:nth-child(4 ) { - background-color:#E65D16; +.carousel__img > img { + width: 60%; + height: 60%; + border-radius: 50%; } - -.carousel__photo { - opacity:1; - +.carousel__container .carousel__text { + width: 50%; + line-height: 1.3; } - -.carousel__photo.initial { - opacity:1; - transition: .5s opacity; +.carousel__container .carousel__text > ul { + list-style: none; } - -.carousel__button--prev, -.carousel__button--next { +.carousel__button--prev { + width: 30px; + height: 30px; + font-size: 20px; position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 10px; top:50%; - width: 3rem; - height: 3rem; - background-color: #FFF; + transform: translateY(-50%); +} +.carousel__button--next { + width: 40px; + height: 40px; + font-size: 20px; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + right: 20%; + top: 40%; + border: 1px solid black; transform: translateY(-50%); border-radius: 50%; - background-color:beige; - cursor: pointer; - z-index: 1001; /* Sit on top of everything */ + color: white; + background: gray; } .carousel__button--prev { - left:0; + width: 40px; + height: 40px; + font-size: 20px; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 20%; + top: 40%; + border: 1px solid black; + transform: translateY(-50%); + border-radius: 50%; + color: white; + background: gray; +} +.menu__list { + margin:0 auto; + display: flex; + justify-content: space-between; + -webkit-transition: transform .5s; + transition:transform .5s; +} +.menu__list > li { + text-align: center; + width:23%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 80px; + -webkit-transition: transform .5s; + transition:transform .5s; +} +.menu__list >li:last-child { + margin-right:0; +} +.menu__list>li>a { + text-decoration: none; + color:black } -.carousel__button--next { - right:0; +.menu__list>li:first-child { + background-color: #2591C0; } -.carousel__button--prev::after, -.carousel__button--next::after { - content: " "; - position: absolute; - width: 10px; - height: 10px; - top: 50%; - left: 54%; - border-right: 2px solid black; - border-bottom: 2px solid black; - transform: translate(-50%, -50%) rotate(135deg); +.menu__list>li:nth-child(2) { + background-color: #A90067; } -.carousel__button--next::after { - left: 47%; - transform: translate(-50%, -50%) rotate(-45deg); +.menu__list>li:nth-child(3) { + background-color: #008577; +} + +.menu__list>li:nth-child(4 ) { + background-color:#E65D16; } \ No newline at end of file From 6eddfad9389262824dce8879f9b075fd5353f66f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Thu, 20 Feb 2020 16:01:00 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index d2ece4c4..ad51ef64 100644 --- a/index.js +++ b/index.js @@ -56,4 +56,4 @@ window.addEventListener('DOMContentLoaded',(e)=>{ carouselSlider.style.transform=`translateX(-${sliderListWidth*targetIndex}px)`; menuList[targetIndex].style.transform ='scale(1.1)'; new Carousel(targetIndex); -}) \ No newline at end of file +}) From 9ff0265ca849a3a5621a58fed1be226029146637 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8A=B9=EC=B0=AC?= Date: Wed, 26 Feb 2020 15:58:12 +0900 Subject: [PATCH 4/4] =?UTF-8?q?end.=20=ED=81=B4=EB=9E=98=EC=8A=A4=20?= =?UTF-8?q?=ED=95=98=EB=82=98=EB=A1=9C=20=EC=B9=B4=EB=93=9C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 68 ++---------------------------- index.js | 110 +++++++++++++++++++++++++++---------------------- localData.json | 35 ++++++++++++++++ style.css | 21 ++++++---- 4 files changed, 113 insertions(+), 121 deletions(-) create mode 100644 localData.json diff --git a/index.html b/index.html index 1bf02e63..1a32a32a 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - @@ -13,73 +12,13 @@
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
-
-
- fisrtDog -
-
-

Enjoy exclusive savings and rewards

-
    -
  • Save on groceries and get an additional 10% off select sale items in all US Whole Food Market stores
    • -
  • Save 20% off diapers, baby food, and more
    • -
  • Earn 5% back at AMazon.com with the Amazon Prime Rewards Visa Card
    • -
  • Get exclusive deals and discounts and 30-minute early access to Lightning Deals
    • -
-
-
- +
@@ -91,6 +30,7 @@

Enjoy exclusive savings and rewards

- + + - \ No newline at end of file + diff --git a/index.js b/index.js index ad51ef64..5755226a 100644 --- a/index.js +++ b/index.js @@ -1,59 +1,71 @@ -const menuNav =document.querySelector('.menu__list'); -const carouselSlider = document.querySelector('.carousel__container') -const prevBtn = document.querySelector('.carousel__button--prev'); -const nextBtn = document.querySelector('.carousel__button--next'); - -const menuList = Array.from(menuNav.children); -const menuListWidth = menuList[0].getBoundingClientRect().width; - -const sliderList = Array.from(carouselSlider.children); -const sliderListWidth= sliderList[0].getBoundingClientRect().width; - - -let targetIndex; - class Carousel { - constructor(targetIndex) { - this.targetIndex = targetIndex; - this.moveCarouselMenu(this.targetIndex); + constructor (menuData,contentData) { + this.menuData=menuData; + this.contentData=contentData; + this.makingMenuList(); + this.makingSlider(); this.btnHandler(); + this.count = 0; } - moveCarouselTarget =(index)=>{ - carouselSlider.style.transform = `translateX(-${sliderListWidth*index}px)`; + changeLocation (element,index) { + this.count = index; + const width = element.children[0].getBoundingClientRect().width; + element.style.transform = `translateX(${-this.count*width}px)`; } - moveCarouselMenu =(targetIndex)=>{ - this.moveMenuItem(targetIndex); - menuList.forEach((li,index)=>{ - li.addEventListener('click',()=>{ - this.moveMenuItem(index) - this.moveCarouselTarget(index); - }); - }); + scaleMenu (element,index) { + this.count = index; + Array.from(element.parentNode.children).forEach((element)=>element.style.transform=`scale(0.99)`) + element.parentNode.children[this.count].style.transform = 'scale(1.1)'; } - moveMenuItem = (targetIndex)=>{ - menuList.forEach((item)=>{ - item.style.transform='scale(1)'; + btnHandler () { + const left =document.querySelector('div.carousel__button--prev'); + const right =document.querySelector('div.carousel__button--next'); + [left,right].forEach((btn,index)=>{ + btn.addEventListener('click',()=>{ + index === 0 ? this.count-- : this.count++; + if (this.count >3) this.count =0; + if (this.count<0) this.count =3; + const el = document.querySelector('.carousel__container'); + this.changeLocation(el,this.count); + this.scaleMenu(document.querySelector('.menu__list>li'),this.count); + }); }) - menuList[targetIndex].style.transform = 'scale(1.1)'; - } - btnHandler() { - prevBtn.addEventListener('click',(e)=>{ - this.targetIndex--; - if (this.targetIndex <0) this.targetIndex=3; - this.moveCarouselTarget(this.targetIndex); - this.moveMenuItem(this.targetIndex); + } + makingMenuList () { + const menuConatiner=document.querySelector('.menu__list') + this.menuData.forEach((data)=>{ + menuConatiner.innerHTML +=` +
  • ${data}
    • ` }) - nextBtn.addEventListener('click',(e)=>{ - this.targetIndex++; - if (this.targetIndex>3) this.targetIndex=0; - this.moveCarouselTarget(this.targetIndex) - this.moveMenuItem(this.targetIndex) + Array.from(menuConatiner.children).forEach((li,index)=>{ + li.addEventListener('click',()=>{ + this.scaleMenu(li,index); + this.changeLocation(document.querySelector('.carousel__container'),index); + }) }) } + makingSlider () { + const carouselContainer = document.querySelector('.carousel__container'); + carouselContainer.innerHTML=this.contentData.map((data,index)=>` +
    +
    +
      +

      ${data.title}

      + ${data.desc.map((desc)=>`
    • ${desc}
      • `).join('')} +
    +
    +
    + +
    +
    `).join(''); + } } -window.addEventListener('DOMContentLoaded',(e)=>{ - targetIndex=Math.floor(Math.random()*menuList.length); - carouselSlider.style.transform=`translateX(-${sliderListWidth*targetIndex}px)`; - menuList[targetIndex].style.transform ='scale(1.1)'; - new Carousel(targetIndex); -}) + +window.addEventListener('DOMContentLoaded',()=>{ + fetch('./localData.json') + .then((data)=>data.json()) + .then((data)=>{ + const {menuData,contentData}=data; + const carousel=new Carousel(menuData,contentData); + }) +}); \ No newline at end of file diff --git a/localData.json b/localData.json new file mode 100644 index 00000000..7d0ef075 --- /dev/null +++ b/localData.json @@ -0,0 +1,35 @@ +{ + "menuData" : [ + "Fast, Free Delivery", + "Exclusive deals and offers", + "Prime Originals, movies and TV shows", + "Over 2 million song ad free" + ], + "contentData" : [{ + "id" : "1", + "imgUrl" : "https://placedog.net/200/250?id=8", + "title" :"Enjoy exclusive savings and rewards", + "desc" : ["Fast, Free Delivery", + "Exclusive deals and offers","Prime Originals, movies and TV shows","Over 2 million song ad free"] + },{ + "id" : "2", + "imgUrl" : "https://placedog.net/200/250?id=12", + "title" :"Code Squad is awesome place", + "desc" : ["Code, Feel JS", + "Do you want to be Front Engeneer?","Come to us Master,Good People","Waiting For you!"] + },{ + "id" : "3", + "imgUrl" :"https://placedog.net/200/250?id=14", + "title" :"Learning With practice and enthusiastic people", + "desc" : ["React to ur Mind", + "Es6 class is good for you","We will find answer","As we've done so far"] + },{ + "id" : "4", + "imgUrl" : "https://placedog.net/200/250?id=15", + "title" :"Watching Dog makes inner-peace", + "desc" : ["It was hard Day.", + "Do you feel exhausted?","Come to Our good puppy","puppy would be with you"] + } + ] +} + \ No newline at end of file diff --git a/style.css b/style.css index 0130a1f1..68b88bb1 100644 --- a/style.css +++ b/style.css @@ -24,14 +24,14 @@ body,html { display: flex; margin-top: 40px; width: 2450px; - height: 200px; + height: 220px; transition:transform .5s ease-in-out; -webkit-transition:transform .5s ease-in-out; } .carousel__contents { display: flex; width: 600px; - height: 200px; + height: 220px; position: relative; justify-content: center; align-items: center; @@ -40,21 +40,25 @@ body,html { width: 400px; display: inline-block; } +.carousel__container .carousel__text >ul>li { + margin: 3px 0; + font-size: 18px; +} .carousel__img { display: inline-block; - width: 180px; + width: 220px; } .carousel__img > img { - width: 60%; - height: 60%; + width: 70%; + height: 70%; border-radius: 50%; } .carousel__container .carousel__text { - width: 50%; - line-height: 1.3; + line-height: 1.4; } .carousel__container .carousel__text > ul { list-style: none; + font-weight: 500; } .carousel__button--prev { width: 30px; @@ -109,12 +113,13 @@ body,html { } .menu__list > li { text-align: center; - width:23%; + width:24%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80px; + padding:0 3px; -webkit-transition: transform .5s; transition:transform .5s; }