Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Eouhrich #4

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Eouhrich #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e051ea2
initial
Jun 1, 2024
f3788a4
initial
Jun 1, 2024
38fd9ef
backup
Jun 1, 2024
b103897
adding last touchs
Jun 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions eouhrich/challenge 1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/The-matrix-logo.svg" alt="logo">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Contents</li></a>
<a href="#"><li>More</li></a>
</ul>
<button id="header_login"> LOGIN </button>
<button id="header_humburger"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg" alt=""></button>
</header>
<div id="matrix_div">
<h1>Welcome to the Matrix</h1>
</div>
<div id="pills">
<p>if you had to choose betweent two choices , <span style="color: red;">living the rest of your life in a lie</span> or <span style="color: green;">join us and become one of us</span>, CHOOSE WISELY </p>
<!-- <div id="pills_img"> -->
<img src="https://wearearmadillo.com/wp-content/uploads/2019/10/the-matrix-red-or-blue-pill_original-1.jpg" alt="">
<button id="red_btn">leave</button>
<button id="green_btn">join</button>
<!-- </div> -->
</div>

<footer>
<ul>
contact us:
<a href="#"><li>FaceBook</li></a>
<a href="#"><li>blabla</li></a>
<a href="#"><li>blabla</li></a>
<a href="#"><li>blabla</li></a>

</ul>
<ul>
our other things:
<a href="#"><li>Services</li></a>
<a href="#"><li>blabla</li></a>
<a href="#"><li>blabla</li></a>
<a href="#"><li>blabla</li></a>

</ul>
<ul>
hmm idk:
<a href="#"><li>I have</li></a>
<a href="#"><li>No Idea</li></a>
<a href="#"><li>What</li></a>
<a href="#"><li>I'm doing</li></a>

</ul>
</footer>


<script src="script.js"></script>
</body>
</html>
Empty file added eouhrich/challenge 1/script.js
View file
Open in desktop
Empty file.
162 changes: 162 additions & 0 deletions eouhrich/challenge 1/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
* {
padding: 0;
margin: 0;
color: white;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 1.15em;
}

body {
background-color: rgb(0, 0, 0);
}


div#matrix_div
{
background-image: url("https://i.pinimg.com/originals/c5/9a/d2/c59ad2bd4ad2fbacd04017debc679ddb.gif");
background-size: 700px;
background-repeat: round;
height: 1000px;
text-align: center;
position: relative;
}
div#matrix_div h1 {
/* position: absolute;
top: 40%;
left: 10%; */
padding: 300px;
text-shadow: 10px 10px 5px green;
color: rgb(0, 0, 0);
font-size: 5em;
/* background-color: red; */
}


header {
background-color: rgb(0, 34, 1);
padding: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}

header img {
width: 400px;
}

header ul
{
display: flex;
list-style: none;
}

header ul li {
padding: 40px;
}

#header_login {
background-color: rgb(47, 163, 20);
/* border: 2px solid rgb(5, 106, 5); */
border: none;
border-radius: 10px;
padding: 20px;
}

#header_humburger {
/* background-color: black; */
/* border: 2px solid white; */
display: none;
border-radius: 20px;
padding: 20px;
}

#header_humburger img{
width: 50px;
height: 50px;
}

div#pills {
max-width: 2000px;
min-width: 1000px;
width: 70%;
margin: auto;
font-size: 1.5em;
/* background-color: red; */
text-align: center;
justify-content: center;
position: relative;
}

div#pills img {
width: 100%;
}

#red_btn {
position: absolute;
top: 65%;
left: 57%;

background-color: red;
border: none;
border-radius: 20px;
padding: 10px;
}

#green_btn {
position: absolute;
top: 65%;
left: 35%;
background-color: green;
border: none;
border-radius: 20px;
padding: 10px;
}

#red_btn:hover
{
background-color: rgb(97, 0, 0);
}

#green_btn:hover
{
background-color: rgb(95, 234, 95);
}

footer {
background-color: rgb(6, 37, 6);
padding: 50px;
margin: 20px;
/* flex-wrap: wrap; */
display: flex;
justify-content: space-evenly;
}

footer ul
{
/* background-color: red; */
margin: 10px;
}

@media (max-width : 1200px)
{
header ul
{
display: none;
}

#header_humburger {
display: block;
}
footer ul
{
margin: auto;
width: 20%;
padding: 20px;
}
footer
{
display: block;
}

}
16 changes: 16 additions & 0 deletions eouhrich/challenge 2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="card">
<img src="https://www.tomsguide.fr/content/uploads/sites/2/2020/08/morpheus-matrix.jpg" alt="">
<h1><b>morpheus</b> - your personal server</h1>
<p>from here now morpheus is your loyal maid, he is the who will provide you with all info you seek.</p>
<button>more details</button>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions eouhrich/challenge 2/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
* {
padding: 0;
margin: 0;
color: white;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 1.15em;
}

body {
background-color: rgb(0, 0, 0);
background-image: url("https://i.pinimg.com/originals/c5/9a/d2/c59ad2bd4ad2fbacd04017debc679ddb.gif");
background-size: 800px;
}

#card {
width: 600px;
height: 1000px;
padding: 50px;
text-align: center;
margin: auto;
background-color: rgb(0, 57, 8);
border-radius: 30px;
box-shadow: 10px 10px 1000px black inset;
}

#card img
{
margin: 50px;
width: 400px;
height: 450px;
border-radius: 60%;
}

#card h1 {
margin: 40px;
}

#card button {
background-color: green;
border: none;
margin: 80px;
width: 500px;
border-radius: 10px;
height: 50px;
}
24 changes: 24 additions & 0 deletions eouhrich/challenge 3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix-Themed Form Design</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="card">
<form action="">
<label for="username">username:</label> <br>
<input name="username" type="text"> <br>

<label for="email">email:</label> <br>
<input name="email" type="email"> <br>

<label for="message">message:</label> <br>
<textarea name="message" id=""></textarea> <br>

<input id="submit" type="submit">
</form>
</div>
</body>
</html>
53 changes: 53 additions & 0 deletions eouhrich/challenge 3/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
#card {
width: 600px;
height: 700px;
padding: 50px;
text-align: center;
margin: auto;
background-color: rgb(0, 70, 9);
border-radius: 30px;
box-shadow: 10px 10px 1000px black inset;
padding: 100px;
}

#card input {
width: 500px;
height: 50px;
margin-bottom:70px;
}

#card label {
color: white;
font: 3em sans-serif;
font-family: 'Courier New', Courier, monospace;
}

#submit {
background-color: green;
border: none;
color: white;
width: 200px;
height: 150px;
transition: 0.5s;

}

#card textarea {
width: 600px;
height: 150px;
margin-bottom:70px;

}

#submit:hover
{
color: black;
background-color: white;
border-radius: 30px;
transition: 1s;
}
body {
background-color: rgb(0, 0, 0);
background-image: url("https://i.pinimg.com/originals/c5/9a/d2/c59ad2bd4ad2fbacd04017debc679ddb.gif");
background-size: 800px;
}