diff --git a/index.html b/index.html index b3a58c5..0b4a1d6 100644 --- a/index.html +++ b/index.html @@ -1,431 +1,283 @@ - + + My Portfolio - + - +
-
- TATAW CLARKSON profile picture -
-
-

Hello, I'm

-

TATAW CLARKSON

-
- I'm - +
+ TATAW CLARKSON profile picture
- -
- - +
+
+ My LinkedIn profile + My Github profile +
-
- My LinkedIn profile - My Github profile -
-
+
-

Get To Know More

-

About Me

-
-
- Profile picture -
-
-
-
- Experience icon -

Experience

-

1+ years
Frontend Development

+

Get To Know More

+

About Me

+
+
+ Profile picture
-
- Education icon -

Education

-

B.Sc. Bachelors Degree
in Computer Science

+
+
+
+ Experience icon +

Experience

+

1+ years
Frontend Development

+
+
+ Education icon +

Education

+

B.Sc. Bachelors Degree
in Computer Science

+
+
+
+

+ Frontend Dev, Computer programmer, video editor, hardware technician and open source enthusiast...
I am also a Computer Science major at the University of Buea with a particular proclivity towards programming concepts, problem + solving and birthing creative and innovative ideas and solutions to said problems... +

+
-
-
-

- Frontend Dev, Computer programmer, video editor, hardware - technician and open source enthusiast...
I am also a - Computer Science major at the University of Buea with a particular - proclivity towards programming concepts, problem solving and - birthing creative and innovative ideas and solutions to said - problems... -

-
-
- Arrow icon + Arrow icon
+
-

Explore My

-

Experience

-
-
-
-

Frontend Development

-
-
- Experience icon -
-

HTML

-

Experienced

-
-
-
- Experience icon -
-

CSS

-

Experienced

-
-
-
- Experience icon -
-

Git/GitHub

-

Intermediate

+

Explore My

+

Experience

+
+
+
+

Frontend Development

+
+
+ Experience icon +
+

HTML

+

Experienced

+
+
+
+ Experience icon +
+

CSS

+

Experienced

+
+
+
+ Experience icon +
+

Git/GitHub

+

Intermediate

+
+
+
+ Experience icon +
+

JavaScript

+

Basic

+
+
+
+ Experience icon +
+

TypeScript

+

Basic

+
+
+
+ Experience icon +
+

React.js

+

Basic

+
+
+
-
-
- Experience icon -
-

JavaScript

-

Basic

+
+

Other Languages

+
+
+ Experience icon +
+

C programming Developement

+

Intermediate

+
+
+
+ Experience icon +
+

Python Developement

+

Intermediate

+
+
+
+ Experience icon +
+

Java Developement

+

Basic

+
+
+
+ Experience icon +
+

Node js

+

Basic

+
+
+
-
-
- Experience icon -
-

TypeScript

-

Basic

-
-
-
- Experience icon -
-

React.js

-

Basic

-
-
-
-
-

Other Languages

-
-
- Experience icon -
-

C programming Developement

-

Intermediate

-
-
-
- Experience icon -
-

Python Developement

-

Intermediate

-
-
-
- Experience icon -
-

Java Developement

-

Basic

-
-
-
- Experience icon -
-

Node js

-

Basic

-
-
-
-
-
- Arrow icon + Arrow icon
+
-

Browse My Recent

-

Projects

-
-
-
-
- Project 1 -
-

- Expense Tracking site in React -

-
- - -
-
-
-
- Project 2 -
-

- Image to sketch in Python -

-
-
+
+
+
+ Project 2 +
+

+ Image to sketch in Python +

+
+ - -
-
-
-
- Project 3 -
-

- Simple Python Translation App -

-
-
+
+
+
+ Project 3 +
+

+ Simple Python Translation App +

+
+ - +
+
-
- - Arrow icon + Arrow icon
+
-

Get in Touch

-
-

Contact Me

- -
-
-
- - - - - - - - - -
-
+

Get in Touch

+
+

Contact Me

+ +
+
+
+ + + + + + + + + +
+
- - + + + \ No newline at end of file diff --git a/style.css b/style.css index ed18ed1..e0c86bc 100644 --- a/style.css +++ b/style.css @@ -2,791 +2,812 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } body { - font-family: "Poppins", sans-serif; + font-family: "Poppins", sans-serif; } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } p { - color: rgb(85, 85, 85); + color: rgb(85, 85, 85); } + /* TRANSITION */ a, .btn { - transition: all 300ms ease; + transition: all 300ms ease; } + /* DESKTOP NAV */ nav, .nav-links { - display: flex; + display: flex; } nav { - justify-content: space-around; - align-items: center; - height: 17vh; + justify-content: space-around; + align-items: center; + height: 17vh; } .nav-links { - gap: 2rem; - list-style: none; - font-size: 1.5rem; + gap: 2rem; + list-style: none; + font-size: 1.5rem; } a { - color: black; - text-decoration: none; - text-decoration-color: white; + color: black; + text-decoration: none; + text-decoration-color: white; } a:hover { - color: grey; - text-decoration: underline; - text-underline-offset: 1rem; - text-decoration-color: rgb(60, 228, 60); + color: grey; + text-decoration: underline; + text-underline-offset: 1rem; + text-decoration-color: rgb(60, 228, 60); } .logo { - color: #4fab45; - font-size: 3rem; + color: #4fab45; + font-size: 3rem; } .logo:hover { - cursor: default; + cursor: default; } + /* HAMBURGER MENU */ #hamburger-nav { - display: none; + display: none; } .hamburger-menu { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } .hamburger-icon { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 24px; - width: 30px; - cursor: pointer; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 24px; + width: 30px; + cursor: pointer; } .hamburger-icon span { - width: 100%; - height: 2px; - background-color: black; - transition: all 0.3 ease-in-out; + width: 100%; + height: 2px; + background-color: black; + transition: all 0.3 ease-in-out; } .menu-links { - position: absolute; - top: 100%; - right: 0; - background-color: white; - width: fit-content; - max-height: 0; - overflow: hidden; - transition: all 0.3 ease-in-out; + position: absolute; + top: 100%; + right: 0; + background-color: white; + width: fit-content; + max-height: 0; + overflow: hidden; + transition: all 0.3 ease-in-out; } .menu-links a { - display: block; - padding: 10px; - text-align: center; - font-size: 1.5rem; - color: black; - text-decoration: none; - transition: all 0.3 ease-in-out; + display: block; + padding: 10px; + text-align: center; + font-size: 1.5rem; + color: black; + text-decoration: none; + transition: all 0.3 ease-in-out; } .menu-links li { - list-style: none; + list-style: none; } .menu-links.open { - max-height: 300px; + max-height: 300px; } .hamburger-icon.open span:first-child { - transform: rotate(45deg) translate(10px, 5px); + transform: rotate(45deg) translate(10px, 5px); } .hamburger-icon.open span:nth-child(2) { - opacity: 0; + opacity: 0; } .hamburger-icon.open span:last-child { - transform: rotate(-45deg) translate(10px, -5px); + transform: rotate(-45deg) translate(10px, -5px); } .hamburger-icon span:first-child { - transform: none; + transform: none; } .hamburger-icon span:first-child { - opacity: 1; + opacity: 1; } .hamburger-icon span:first-child { - transform: none; + transform: none; } + /* SECTIONS */ section { - padding-top: 4vh; - height: 96vh; - margin: 0 10rem; - box-sizing: border-box; - min-height: fit-content; + padding-top: 4vh; + height: 96vh; + margin: 0 10rem; + box-sizing: border-box; + min-height: fit-content; } .section-container { - display: flex; + display: flex; } + /* PROFILE SECTION */ #profile { - display: flex; - justify-content: center; - gap: 5rem; - height: 80vh; + display: flex; + justify-content: center; + gap: 5rem; + height: 80vh; } .section__pic-container { - display: flex; - height: 300px; - width: 300px; - margin: auto 0; + display: flex; + height: 300px; + width: 300px; + margin: auto 0; } .section__pic-container img { - border-radius: 5rem; + border-radius: 5rem; } .section__pic-container2 { - display: flex; - height: 400px; - width: 400px; - margin: auto 0; + display: flex; + height: 400px; + width: 400px; + margin: auto 0; } .section__pic-container2 img { - height: 300px; - width: 300px; - animation: floatImage 4s ease-in-out infinite; + height: 300px; + width: 300px; + animation: floatImage 4s ease-in-out infinite; } @keyframes floatImage { - 0% { - transform: translateY(0); - } - 50% { - transform: translateY(-2.4rem); - } - 100% { - transform: translateY(0); - } + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-2.4rem); + } + 100% { + transform: translateY(0); + } } .section__text { - align-self: center; - text-align: center; + align-self: center; + text-align: center; } .section__text p { - font-weight: 600; + font-weight: 600; } .section__text__p1 { - text-align: center; + text-align: center; } .section__text__p2 { - font-size: 1.75rem; - margin-bottom: 1rem; + font-size: 1.75rem; + margin-bottom: 1rem; +} + +hr { + border-top: 3px dotted #000000; + height: 2px; + /* background-color: #000; */ } .title { - color: #4fab45; - font-size: 3rem; - text-align: center; + color: #4fab45; + font-size: 3rem; + text-align: center; } #socials-container { - display: flex; - justify-content: center; - margin-top: 1rem; - gap: 1rem; + display: flex; + justify-content: center; + margin-top: 1rem; + gap: 1rem; } + /* ICONS */ .icon { - cursor: pointer; - height: 2rem; + cursor: pointer; + height: 2rem; } .icon:hover { - transform: scale(1.5); + transform: scale(1.5); } + /* BUTTONS */ .btn-container { - display: flex; - justify-content: center; - gap: 1rem; + margin-top: 7%; + display: flex; + justify-content: center; + gap: 1rem; } .btn { - font-weight: 600; - transition: all 300ms ease; - padding: 1rem; - width: 8rem; - border-radius: 2rem; + font-weight: 600; + transition: all 300ms ease; + padding: 1rem; + width: 8rem; + border-radius: 2rem; } .btn-color-1, .btn-color-2 { - border: rgb(53, 53, 53) 0.1rem solid; + border: rgb(53, 53, 53) 0.1rem solid; } .btn-color-1:hover, .btn-color-2:hover { - cursor: pointer; + cursor: pointer; } .btn-color-1, .btn-color-2:hover { - background: rgb(53, 53, 53); - color: white; + background: rgb(53, 53, 53); + color: white; } .btn-color-1:hover { - background: #56d448; + background: #56d448; } .btn-color-2 { - background: none; + background: none; } .btn-color-2:hover { - border: rgb(255, 255, 255) 0.1rem solid; - background: #56d448; + border: rgb(255, 255, 255) 0.1rem solid; + background: #56d448; } .btn-container { - gap: 1rem; + gap: 1rem; } + /* ABOUT SECTION */ #about { - position: relative; + position: relative; } .about-containers { - gap: 2rem; - margin-bottom: 2rem; - margin-top: 2rem; + gap: 2rem; + margin-bottom: 2rem; + margin-top: 2rem; } .about-details-container { - justify-content: center; - flex-direction: column; + justify-content: center; + flex-direction: column; } .about-containers, .about-details-container { - display: flex; + display: flex; } .about-pic { - border-radius: 2rem; + border-radius: 2rem; } .arrow { - position: absolute; - right: -5rem; - bottom: 2.5rem; + position: absolute; + right: -5rem; + bottom: 2.5rem; } .details-container { - padding: 1.5rem; - flex: 1; - background: white; - border-radius: 2rem; - border: rgb(53, 53, 53) 0.1rem solid; - border-color: rgb(163, 163, 163); - text-align: center; + padding: 1.5rem; + flex: 1; + background: white; + border-radius: 2rem; + border: rgb(53, 53, 53) 0.1rem solid; + border-color: rgb(163, 163, 163); + text-align: center; } .section-container { - gap: 4rem; - height: 80%; + gap: 4rem; + height: 80%; } .section__pic-container { - height: 400px; - width: 400px; - margin: auto 0; + height: 400px; + width: 400px; + margin: auto 0; } + /* EXPERIENCE SECTION */ #experience { - position: relative; + position: relative; } .experience-sub-title { - color: rgb(85, 85, 85); - font-weight: 600; - font-size: 1.75rem; - margin-bottom: 2rem; + color: rgb(85, 85, 85); + font-weight: 600; + font-size: 1.75rem; + margin-bottom: 2rem; } .experience-details-container { - display: flex; - justify-content: center; - flex-direction: column; + display: flex; + justify-content: center; + flex-direction: column; } .article-container-x { - width: 100%; - height: 80%; - display: flex; - text-align: initial; - flex-wrap: wrap; - flex-direction: row; - gap: 2.5rem; - justify-content: space-around; + width: 100%; + height: 80%; + display: flex; + text-align: initial; + flex-wrap: wrap; + flex-direction: row; + gap: 2.5rem; + justify-content: space-around; } .article-container { - width: 100%; - height: 80%; - display: flex; - text-align: initial; - flex-wrap: wrap; - flex-direction: row; - gap: 2.5rem; - justify-content: space-around; - margin-bottom: -30%; + width: 100%; + height: 80%; + display: flex; + text-align: initial; + flex-wrap: wrap; + flex-direction: row; + gap: 2.5rem; + justify-content: space-around; + margin-bottom: -30%; } article { - display: flex; - width: 10rem; - justify-content: space-around; - gap: 0.5rem; + display: flex; + width: 10rem; + justify-content: space-around; + gap: 0.5rem; } article .icon { - cursor: default; + cursor: default; } + /* PROJECTS SECTION */ #projects { - width: 75%; - height: 100%; - position: relative; + width: 75%; + height: 100%; + position: relative; } .color-container { - border-color: rgb(163, 163, 163); - background: rgb(250, 250, 250); + border-color: rgb(163, 163, 163); + background: rgb(250, 250, 250); } .project-img { - border-radius: 2rem; - width: 80%; - height: 80%; + border-radius: 2rem; + width: 80%; + height: 80%; } .project-title { - margin: 1rem; - color: black; + margin: 1rem; + color: black; } .project-btn { - color: black; - border-color: rgb(163, 163, 163); + color: black; + border-color: rgb(163, 163, 163); } + /* CONTACT */ #contact { - display: flex; - justify-content: center; - flex-direction: column; - height: 85vh; + margin: 2% 2%; + display: flex; + justify-content: center; + flex-direction: column; + height: 85vh; } .icon-wrapper { - display: flex; - justify-content: center; - flex-direction: row; + display: flex; + justify-content: center; + flex-direction: row; } .contact-info-upper-container { - display: flex; - justify-content: center; - border-radius: 2rem; - border: rgb(53, 53, 53) 0.1rem solid; - border-color: rgb(163, 163, 163); - background: (250, 250, 250); - margin: 2rem auto; - padding: 0.5rem; + display: flex; + justify-content: center; + border-radius: 2rem; + border: rgb(53, 53, 53) 0.1rem solid; + border-color: rgb(163, 163, 163); + background: (250, 250, 250); + margin: 2rem auto; + padding: 0.5rem; } .contact-info-container { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - margin: 1rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + margin: 1rem; } .contact-info-container p { - font-size: larger; + font-size: larger; } .contact-icon { - cursor: default; + cursor: default; } .email-icon { - margin-left: 2%; - height: 3rem; - width: 3rem; + margin-left: 2%; + height: 3rem; + width: 3rem; } .contact_me { - display: flex; - align-items: center; - flex-direction: column; - gap: 20px; + display: flex; + align-items: center; + flex-direction: column; + gap: 20px; } .contact_me input, .contact_me textarea { - text-align: center; - letter-spacing: 0.5; - margin: 10px 10px; + text-align: center; + letter-spacing: 0.5; + margin: 10px 10px; } .button { - border-radius: 10px; - width: 120px; - height: 30px; - font-size: 16px; - border: none; - background-color: #56d448; - color: #fff; - cursor: pointer; + border-radius: 10px; + width: 120px; + height: 30px; + font-size: 16px; + border: none; + background-color: #56d448; + color: #fff; + cursor: pointer; } #entry { - width: 500px; - border-radius: 30px; + width: 500px; + border-radius: 30px; } #num { - width: 8cm; - height: 40px; + width: 8cm; + height: 40px; } #email { - border-radius: 30px; - width: 7cm; - height: 30px; + border-radius: 30px; + width: 7cm; + height: 30px; } + /* FOOTER SECTION */ footer { - height: 26vh; - margin: 0 1rem; + height: 26vh; + margin: 0 1rem; } footer p { - text-align: center; + text-align: center; } .container { - overflow: hidden; - width: 800px; + overflow: hidden; + width: 800px; } .container .text { - position: relative; - color: rgb(85, 85, 85); - font-size: 3.1rem; - font-weight: 600; + position: relative; + color: rgb(85, 85, 85); + font-size: 3.1rem; + font-weight: 600; } .text.sec-text::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: #fff; - border-left: 5px solid #56d448; - animation: typing 4s steps(12) infinite; + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: #fff; + border-left: 5px solid #56d448; + animation: typing 4s steps(12) infinite; } @keyframes typing { - 40%, - 60% { - left: calc(100% + 4px); - } - 100% { - left: 0; - } + 40%, + 60% { + left: calc(100% + 4px); + } + 100% { + left: 0; + } } + /*media queries*/ @media screen and (max-width: 1400px) { - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - #profile { - height: 83vh; - margin-bottom: 6rem; - } - .about-containers { - flex-wrap: wrap; - } - #contact, - #projects { - height: fit-content; - } + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + #profile { + height: 83vh; + margin-bottom: 6rem; + } + .about-containers { + flex-wrap: wrap; + } + #contact, + #projects { + height: fit-content; + } } @media screen and (max-width: 1200px) { - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - #desktop-nav { - display: none; - } - #hamburger-nav { - display: flex; - } - #experience, - .experience-details-container { - margin-top: 2rem; - } - #profile, - .section-container { - display: block; - } - .arrow { - display: none; - } - section, - .section-container { - height: fit-content; - } - section { - margin: 0 5%; - } - .section__pic-container { - width: 275px; - height: 275px; - margin: 0 auto 2rem; - } - .section__pic-container2 { - width: 275px; - height: 275px; - margin: 0 auto 2rem; - } - .section__pic-container2 img { - height: 250px; - width: 200px; - margin-top: 10%; - } - .about-containers { - margin-top: 0; - } - .icon { - height: 1.5rem; - } - .article-container img { - height: 80%; - width: 60%; - } - .flex-container { - /* margin-top: 2%; */ - display: flex; - flex-direction: row; - align-items: center; - } - .color-container { - height: 100%; - width: 100%; - } - .color-container h2 { - margin-top: 25%; - } + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + #desktop-nav { + display: none; + } + #hamburger-nav { + display: flex; + } + #experience, + .experience-details-container { + margin-top: 2rem; + } + #profile, + .section-container { + display: block; + } + .arrow { + display: none; + } + section, + .section-container { + height: fit-content; + } + section { + margin: 0 5%; + } + .section__pic-container { + width: 275px; + height: 275px; + margin: 0 auto 2rem; + } + .section__pic-container2 { + width: 275px; + height: 275px; + margin: 0 auto 2rem; + } + .section__pic-container2 img { + height: 250px; + width: 200px; + margin-top: 10%; + } + .about-containers { + margin-top: 0; + } + .icon { + height: 1.5rem; + } + .article-container img { + height: 80%; + width: 60%; + } + .flex-container { + /* margin-top: 2%; */ + display: flex; + flex-direction: row; + align-items: center; + } + .color-container { + height: 100%; + width: 100%; + } + .color-container h2 { + margin-top: 25%; + } } @media screen and (max-width: 600px) { - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - body { - width: 100%; - } - #contact, - footer { - height: 40vh; - } - #profile { - height: 83vh; - margin-bottom: 0; - } - article { - font-size: 1rem; - } - footer nav { - height: fit-content; - margin-bottom: 2rem; - } - .about-containers, - .contact-info-upper-container, - .btn-container { - flex-wrap: wrap; - } - .contact-info-container { - margin: 0; - } - .contact-info-container p, - .nav-links li a { - font-size: 1rem; - } - .experience-sub-title { - font-size: 1.25rem; - } - .logo { - font-size: 1.5rem; - } - .nav-links { - flex-direction: row; - gap: 1.2rem; - text-align: center; - text-decoration: underline; - } - .section__pic-container { - width: auto; - height: 46vw; - justify-content: center; - } - .section__text__p2 { - font-size: 1.25rem; - } - .title { - font-size: 2rem; - } - .text-container { - text-align: justify; - } - #about { - margin-top: 5rem; - } - .section__pic-container2 { - width: auto; - height: 46vw; - justify-content: center; - } - .section__pic-container2 img { - height: 180px; - width: 150px; - } - #projects { - padding: 2% 0; - width: 90%; - } - .project-img { - width: 100%; - height: 100%; - margin-bottom: 10%; - } - #contact { - display: flex; - justify-content: center; - flex-direction: column; - height: 100%; - width: 100%; - } - .contact-info-upper-container { - justify-content: center; - height: 30rem; - width: 80%; - } - #num { - width: 80%; - height: 40px; - } - #entry { - width: 80%; - } - .container { - overflow: hidden; - width: 80%; - margin: 0 auto; - } - .container .text { - position: relative; - color: rgb(85, 85, 85); - font-size: 1rem; - font-weight: 500; - } - .text.sec-text::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - border-left: 3px solid rgb(104, 255, 10); - animation: typing 5s steps(12) infinite; - background-color: #fff; - } - @keyframes typing { - 40%, - 60% { - left: calc(100% + 4px); + * { + margin: 0; + padding: 0; + box-sizing: border-box; } - 100% { - left: 0; + body { + width: 100%; } - } -} + #contact, + footer { + height: 40vh; + } + #profile { + height: 83vh; + margin-bottom: 0; + } + article { + font-size: 1rem; + } + footer nav { + height: fit-content; + margin-bottom: 2rem; + } + .about-containers, + .contact-info-upper-container, + .btn-container { + flex-wrap: wrap; + } + .contact-info-container { + margin: 0; + } + .contact-info-container p, + .nav-links li a { + font-size: 1rem; + } + .experience-sub-title { + font-size: 1.25rem; + } + .logo { + font-size: 1.5rem; + } + .nav-links { + flex-direction: row; + gap: 1.2rem; + text-align: center; + text-decoration: underline; + } + .section__pic-container { + width: auto; + height: 46vw; + justify-content: center; + } + .section__text__p2 { + font-size: 1.25rem; + } + .title { + font-size: 2rem; + } + .text-container { + text-align: justify; + } + #about { + margin-top: 5rem; + } + .section__pic-container2 { + width: auto; + height: 46vw; + justify-content: center; + } + .section__pic-container2 img { + height: 180px; + width: 150px; + } + #projects { + padding: 2% 0; + width: 90%; + } + .project-img { + width: 100%; + height: 100%; + margin-bottom: 10%; + } + #contact { + display: flex; + justify-content: center; + flex-direction: column; + height: 100%; + width: 100%; + } + .contact-info-upper-container { + justify-content: center; + height: 30rem; + width: 80%; + } + #num { + width: 80%; + height: 40px; + } + #entry { + width: 80%; + } + .container { + overflow: hidden; + width: 80%; + margin: 0 auto; + } + .container .text { + position: relative; + color: rgb(85, 85, 85); + font-size: 1rem; + font-weight: 500; + } + .text.sec-text::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + border-left: 3px solid rgb(104, 255, 10); + animation: typing 5s steps(12) infinite; + background-color: #fff; + } + @keyframes typing { + 40%, + 60% { + left: calc(100% + 4px); + } + 100% { + left: 0; + } + } +} \ No newline at end of file