diff --git a/abel-mqa/challenge-one/css/style.css b/abel-mqa/challenge-one/css/style.css new file mode 100644 index 0000000..3cd628c --- /dev/null +++ b/abel-mqa/challenge-one/css/style.css @@ -0,0 +1,123 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} +ul { + list-style: none; +} +a { + text-decoration: none; + color: unset; +} +.container { + padding: 0 15px; + margin: 0 auto; +} +@media (min-width: 768px) { + .container { + width: 750px; + } +} +@media (min-width: 992px) { + .container { + width: 970px; + } +} +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} +body { + color: #fff; + font-family: "Karla", sans-serif; +} +.landing-page { + height: 100vh; + background-image: url(../images/background.jpg); + background-size: cover; + background-repeat: no-repeat; + background-color: #000; +} +header { + padding-top: 20px; + padding-bottom: 20px; + background-color: rgba(255, 255, 255, 0.056); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); + -moz-backdrop-filter: blur(3px); +} +header .container { + display: flex; + justify-content: space-between; + align-items: center; +} +.logo img { + width: 90px; + height: 60px; +} +header ul { + display: flex; + justify-content: space-between; + flex-basis: 50%; +} +header ul li { + transition-duration: .3s; + font-weight: bold; + font-size: 20px; +} +header ul li:hover { + color: #3dac17; +} +.hero { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + animation-name: drop-down; + animation-duration: 2s; + animation-delay: .3s; +} +.hero h1 { + margin-bottom: 60px; + font-size: 55px; +} +.hero p { + font-size: 22px; + padding: 30px 60px; + line-height: 2.3; + letter-spacing: 2px; + font-weight: bold; + background-color: rgba(255, 255, 255, 0.056); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + -moz-backdrop-filter: blur(5px); +} +@media (max-width: 767px) { + header ul { + flex-basis: 70%; + } + .hero { + width: 100%; + padding-left: 15px; + padding-right: 15px; + } + .hero h1 { + font-size: 20px; + } + .hero p { + font-size: 13px; + } +} +@keyframes drop-down { + from { + top: -50%; + } + to { + top: 50%; + } +} \ No newline at end of file diff --git a/abel-mqa/challenge-one/images/background.jpg b/abel-mqa/challenge-one/images/background.jpg new file mode 100644 index 0000000..29e12ea Binary files /dev/null and b/abel-mqa/challenge-one/images/background.jpg differ diff --git a/abel-mqa/challenge-one/images/logo.png b/abel-mqa/challenge-one/images/logo.png new file mode 100644 index 0000000..be82a7a Binary files /dev/null and b/abel-mqa/challenge-one/images/logo.png differ diff --git a/abel-mqa/challenge-one/index.html b/abel-mqa/challenge-one/index.html new file mode 100644 index 0000000..e9a7153 --- /dev/null +++ b/abel-mqa/challenge-one/index.html @@ -0,0 +1,34 @@ + + + + + + + + + + Matrix Landing Page + + +
+
+
+ + +
+
+
+
+

Welcome To The Matrix

+

This is your last chance. After this, there is no turning back. You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes.

+
+
+
+ + \ No newline at end of file diff --git a/abel-mqa/challenge-three/css/style.css b/abel-mqa/challenge-three/css/style.css new file mode 100644 index 0000000..7404d7d --- /dev/null +++ b/abel-mqa/challenge-three/css/style.css @@ -0,0 +1,75 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} +body { + background-color: #002706; + background-image: url(../images/background.jpg); + background-size: cover; + font-family: "Karla", sans-serif; +} +.container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 600px; + background-color: #ffffff; + border-radius: 20px; + padding: 40px 80px; + display: flex; + flex-direction: column; + color: #006b17; +} +.container label { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.container input { + font-size: 14px; + height: 30px; + margin-bottom: 20px; + padding-left: 5px; + padding-right: 5px; + border: 1px solid black; +} +.container textarea { + border: 1px solid black; + resize: vertical; + padding: 12px 5px; +} +.container input:focus, +textarea:focus { + border: none; + outline-color: #99d6a6; +} +.container input[type=submit] { + background-color: #99d6a6; + width: 300px; + border-radius: 10px; + border: none; + margin: 50px auto 0; + font-weight: bold; + font-size: 18px; + height: 40px; + transition-duration: .3s; + cursor: pointer; +} +.container input[type=submit]:hover { + background-color: #002706; + color: #fff; +} +@media (max-width: 767px) { + .container { + padding: 40px 30px; + width: 95%; + margin: 0 auto; + } + .container input[type=submit] { + width: 100%; + } +} \ No newline at end of file diff --git a/abel-mqa/challenge-three/images/background.jpg b/abel-mqa/challenge-three/images/background.jpg new file mode 100644 index 0000000..29e12ea Binary files /dev/null and b/abel-mqa/challenge-three/images/background.jpg differ diff --git a/abel-mqa/challenge-three/index.html b/abel-mqa/challenge-three/index.html new file mode 100644 index 0000000..83824f6 --- /dev/null +++ b/abel-mqa/challenge-three/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + Matrix - Contact form + + +
+ + + + + + + + + + +
+ + \ No newline at end of file diff --git a/abel-mqa/challenge-two/css/style.css b/abel-mqa/challenge-two/css/style.css new file mode 100644 index 0000000..5c2e804 --- /dev/null +++ b/abel-mqa/challenge-two/css/style.css @@ -0,0 +1,55 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} +body { + background-color: #002706; + font-family: "Karla", sans-serif; +} +.wrapper { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-image: url(../images/neo.png); + background-size: cover; + background-repeat: no-repeat; + background-color: #ffffffcf; + border-radius: 15px; + padding: 20px 30px; + width: 500px; + height: 700px; +} +.wrapper h1 { + color: #000000; + font-weight: bold; + text-align: center; + margin-top: 100px; + margin-bottom: 30px; + background-color: #ffffffa7; + border-radius: 15px; + padding: 10px 15px; +} +.wrapper p { + color: #002706; + font-weight: bold; + line-height: 2.3; + text-align: center; + font-size: 20px; + letter-spacing: 1.5px; + background-color: #ffffffa7; + border-radius: 15px; + padding: 50px; +} +@media (max-width: 767px) { + .wrapper { + width: 95%; + margin: 0 auto; + } + .wrapper p { + line-height: 1; + } +} \ No newline at end of file diff --git a/abel-mqa/challenge-two/images/neo.png b/abel-mqa/challenge-two/images/neo.png new file mode 100644 index 0000000..466fd9f Binary files /dev/null and b/abel-mqa/challenge-two/images/neo.png differ diff --git a/abel-mqa/challenge-two/index.html b/abel-mqa/challenge-two/index.html new file mode 100644 index 0000000..6432496 --- /dev/null +++ b/abel-mqa/challenge-two/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + NEO CARD + + +
+

Neo - YOU'RE THE ONE

+

I know you're out there. I can feel you now. I know that you're afraid... you're afraid of us. You're afraid of change.

+
+ + \ No newline at end of file