diff --git a/src/App.css b/src/App.css index 06ba9f9..d564b83 100644 --- a/src/App.css +++ b/src/App.css @@ -7,17 +7,24 @@ Dark green: #28b485 */ -* { +*, +*::after, +*::before { margin: 0; padding: 0; - box-sizing: border-box; + box-sizing: inherit; +} + +html { + font-size: 62.5%; } body { font-family: "Lato", sans-serif; font-weight: 400; - font-size: 16px; line-height: 1.7; color: #777; - padding: 30px; + padding: 3rem; + + box-sizing: border-box; } diff --git a/src/commons/header/header.css b/src/commons/header/header.css index acb9fee..8c206a0 100644 --- a/src/commons/header/header.css +++ b/src/commons/header/header.css @@ -22,12 +22,12 @@ .logo-box { position: absolute; - top: 40px; - left: 40px; + top: 4rem; + left: 4rem; } .logo { - height: 35px; + height: 3.5rem; } .heading-primary { @@ -35,41 +35,35 @@ text-transform: uppercase; backface-visibility: hidden; - margin-bottom: 60px; + margin-bottom: 6rem; } .heading-primary-main { display: block; - font-size: 60px; + font-size: 6rem; font-weight: 400; - letter-spacing: 35px; + letter-spacing: 3.5rem; animation: moveInLeft 1s ease-out; } .heading-primary-sub { display: block; - font-size: 20px; + font-size: 2rem; font-weight: 700; - letter-spacing: 17.4px; + letter-spacing: 1.75rem; animation: moveInRight 1s ease-out; } -#header-button { - animation: moveInBottom 1s ease-out; - animation-delay: 2s; - opacity: 0; -} - @keyframes moveInLeft { 0% { opacity: 0; - transform: translateX(-100px); + transform: translateX(-10rem); } 80% { - transform: translateX(10px); + transform: translateX(1rem); } 100% { @@ -81,23 +75,11 @@ @keyframes moveInRight { 0% { opacity: 0; - transform: translateX(100px); + transform: translateX(10rem); } 80% { - transform: translateX(-10px); - } - - 100% { - opacity: 1; - transform: translate(0); - } -} - -@keyframes moveInBottom { - 0% { - opacity: 0; - transform: translateY(100px); + transform: translateX(-1rem); } 100% { diff --git a/src/components/button/button.css b/src/components/button/button.css index 7165d70..b6f0bf6 100644 --- a/src/components/button/button.css +++ b/src/components/button/button.css @@ -2,25 +2,27 @@ .btn:visited { text-transform: uppercase; text-decoration: none; - padding: 15px 40px; + padding: 1.5rem 4rem; display: inline-block; - border-radius: 100px; + border-radius: 10rem; transition: all 0.2s; position: relative; + font-size: 1.6rem; } .move-in-bottom { - animation: moveInBottom 1s ease-out; + animation: moveInBottom 0.5s ease-out 0.75s; + animation-fill-mode: backwards; } .btn:hover { - transform: translateY(-3px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); + transform: translateY(-0.3rem); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } .btn:active { - transform: translateY(-1px); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + transform: translateY(-0.1rem); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); } .btn-white { @@ -33,7 +35,7 @@ display: inline-block; height: 100%; width: 100%; - border-radius: 100px; + border-radius: 10rem; position: absolute; top: 0; left: 0; @@ -53,11 +55,7 @@ @keyframes moveInBottom { 0% { opacity: 0; - transform: translateY(250px); - } - - 50% { - opacity: 0; + transform: translateY(10rem); } 100% { diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx index 0b475c8..f2d886c 100644 --- a/src/components/button/button.jsx +++ b/src/components/button/button.jsx @@ -1,16 +1,17 @@ import "./button.css"; function Button(props) { + const { text, animationName, link } = props; return ( - {props.text} + {text} ); }