1337WebDev · belmqadem · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024
diff --git a/abel-mqa/challenge-one/css/style.css 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%;
+ }
+}
diff --git a/abel-mqa/challenge-one/images/background.jpg b/abel-mqa/challenge-one/images/background.jpg
diff --git a/abel-mqa/challenge-one/images/logo.png b/abel-mqa/challenge-one/images/logo.png
diff --git a/abel-mqa/challenge-one/index.html b/abel-mqa/challenge-one/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="./css/style.css">
+ <title>Matrix Landing Page</title>
+ </head>
+ <body>
+ <div class="landing-page">
+ <header>
+ <div class="container">
+ <div class="logo">
+ <img src="./images/logo.png" alt="logo">
+ </div>
+ <ul>
+ <a href="#"><li>Home</li></a>
+ <a href="#"><li>About</li></a>
+ <a href="#"><li>Contact</li></a>
+ </ul>
+ </div>
+ </header>
+ <div class="hero">
+ <div class="container">
+ <h1>Welcome To The Matrix</h1>
+ <p>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.</p>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/abel-mqa/challenge-three/css/style.css 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%;
+ }
+}
diff --git a/abel-mqa/challenge-three/images/background.jpg b/abel-mqa/challenge-three/images/background.jpg
diff --git a/abel-mqa/challenge-three/index.html b/abel-mqa/challenge-three/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="./css/style.css">
+ <title>Matrix - Contact form</title>
+ </head>
+ <body>
+ <div class="container">
+ <label for="name">User name</label>
+ <input type="text" name="name">
+
+ <label for="email">Email</label>
+ <input type="email" name="email">
+
+ <label for="message">Leave a message</label>
+ <textarea name="message" rows="15"></textarea>
+
+ <input type="submit">
+ </div>
+ </body>
+</html>
diff --git a/abel-mqa/challenge-two/css/style.css 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;
+ }
+}
diff --git a/abel-mqa/challenge-two/images/neo.png b/abel-mqa/challenge-two/images/neo.png
diff --git a/abel-mqa/challenge-two/index.html b/abel-mqa/challenge-two/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="./css/style.css">
+ <title>NEO CARD</title>
+ </head>
+ <body>
+ <div class="wrapper">
+ <h1>Neo - YOU'RE THE ONE</h1>
+ <p>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.</p>
+ </div>
+ </body>
+</html>