be-hacking-hyf · maflooty · Sep 25, 2019 · Sep 25, 2019 · Sep 26, 2019 · Sep 26, 2019
diff --git a/homework/week-1-project/0-blank-page-setup/index.html b/homework/week-1-project/0-blank-page-setup/index.html
@@ -1,15 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="./style.css">
-</head>
-
-<body>
-
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+
+</html>
diff --git a/homework/week-1-project/0-blank-page-setup/style.css b/homework/week-1-project/0-blank-page-setup/style.css
@@ -0,0 +1 @@
+blank
diff --git a/homework/week-1-project/1-head-and-header/index.html b/homework/week-1-project/1-head-and-header/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale 1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>tictactoe board</title>
+    </head>
+    <body>
+        <!--Header-->
+        <div class="header">
+            <h1>Tic Tac Toe</h1>
+        </div>
+    </body>
+    </html>
+
diff --git a/homework/week-1-project/1-head-and-header/style.css b/homework/week-1-project/1-head-and-header/style.css
@@ -0,0 +1,9 @@
+body {
+    font-family:  Arial, Helvetica, sans-serif;
+    background-color:  aqua;
+}
+.header h1 {
+    color: black;
+    font-size:  5rem;
+    text-align:  center;
+}
diff --git a/homework/week-1-project/2-rules-of-the-game/index.html b/homework/week-1-project/2-rules-of-the-game/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale 1.0">
+        <link rel="stylesheet" href="./style.css">
+        <title>tictactoe board</title>
+    </head>
+    <body>
+<!--Rules of the game-->
+        <div class="rules">
+            <h2>You can either choose to play X or O</h2>
+            <form action="#">
+                <input class="checkbox" type="checkbox">X Player
+                <input class="checkbox" type="checkbox">O Player
+            </form>
+            <a href="Rules.md">Rules of the game</a>
+        </div>
+
+    </body>
+</html>
diff --git a/homework/week-1-project/2-rules-of-the-game/style.css b/homework/week-1-project/2-rules-of-the-game/style.css
@@ -0,0 +1,4 @@
+.rules {
+    margin: 0 auto;
+    text-align:  center;
+}
diff --git a/homework/week-1-project/3-unplayable-board/index.html b/homework/week-1-project/3-unplayable-board/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale 1.0">
+        <link rel="stylesheet" href="./style.css">
+        <title>tictactoe board</title>
+    </head>
+    <body>
+        <!--Header-->
+        <div class="header">
+            <h1>Tic Tac Toe</h1>
+        </div>
+        <!--Rules of the game-->
+        <div class="rules">
+            <form action="#">
+                <input class="checkbox" type="checkbox">X Player
+                <input class="checkbox" type="checkbox">O Player
+            </form>
+            <a href="Rules.md">Rules of the game</a>
+        </div>
+        <!--Board-->
+        <table id="board">
+            <!--First row-->
+            <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+            </tr>
+            <!--Second row-->
+            <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+            </tr>
+            <!--Third row-->
+            <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+            </tr>
+        </table>
+    </body>
+</html>
+
diff --git a/homework/week-1-project/3-unplayable-board/style.css b/homework/week-1-project/3-unplayable-board/style.css
@@ -0,0 +1,29 @@
+body {
+    font-family:  Arial, Helvetica, sans-serif;
+    background-color:  aqua;
+}
+.header h1 {
+    color:  black;
+    font-size:  5rem;
+    text-align:  center;
+}
+.rules {
+    margin: 0 auto;
+    text-align:  center;
+}
+table {
+    width:  100%;
+    border-collapse:  collapse;
+}
+tr {
+    width: 33.333%;
+    border: 6px solid black;
+}
+td {
+border: 6px solid black;
+}
+td::after {
+    content: "";
+    display: block;
+    margin-top:  100%;
+}
diff --git a/homework/week-2-project/0-blank-page-setup/index.html b/homework/week-2-project/0-blank-page-setup/index.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="./style.css">
+  <title>My website</title>
 </head>
 
 <body>

diff --git a/homework/week-2-project/0-blank-page-setup/style.css b/homework/week-2-project/0-blank-page-setup/style.css
@@ -0,0 +1,4 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: aqua;
+}
diff --git a/homework/week-2-project/1-head and header/index.html b/homework/week-2-project/1-head and header/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">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>My website</title>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div id="branding">
+                <h1><span class="highlight">Sheraf</span> Web Design</h1>
+            </div>
+            <nav>
+                <ul>
+                    <li class="current"><a href="index.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="services.html">Services</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+</body>
+</html>
diff --git a/homework/week-2-project/1-head and header/style.css b/homework/week-2-project/1-head and header/style.css
@@ -0,0 +1,54 @@
+body {
+    padding: 0;
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    background-color: aqua;
+}
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+header {
+    background-color: darkslategray;
+    color: white;
+    padding-top: 30px;
+    min-height: 70px;
+    border-top: red solid 3px;
+    border-bottom: red solid 3px;
+}
+header a {
+    color: white;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-size: 16px;
+}
+header ul {
+    padding: 0;
+    margin: 0;
+}
+header li {
+    float: left;
+    display: inline;
+    padding: 0 20px 0 20px;
+}
+header #branding {
+float:left;
+}
+#branding h1 {
+    margin: 0;
+}
+nav {
+    float: right;
+    margin: 10px;
+}
+header .highlight, header .current a {
+    color: red;
+    font-weight: bold;
+}
+header a:hover {
+    color: gray;
+    font-weight: bold;
+}
diff --git a/homework/week-2-project/2-showcase/index.html b/homework/week-2-project/2-showcase/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">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>My website</title>
+</head>
+<body>
+    <section id="showcase">
+        <div class="container">
+            <h1>Affordable Professional Web Design</h1>
+            <p>Contact me for your affordable professional web design,web maintenance,and all other web development issues. Also don't forget to subscribe to our weekly newsletter below!</p>
+        </div>
+      </section>
+</body>
+</html>
diff --git a/homework/week-2-project/2-showcase/style.css b/homework/week-2-project/2-showcase/style.css
@@ -0,0 +1,26 @@
+body {
+    padding: 0;
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    background-color: aqua;
+}
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+#showcase {
+    min-height: 400px;
+    background:url("../img/showcase.jpg") no-repeat 0 -400px;
+    text-align: center;
+    color: white;
+}
+#showcase h1 {
+    margin-top: 100px;
+    font-size: 55px;
+    margin-bottom: 10px;
+}
+#showcase p {
+    font-size: 20px;
diff --git a/homework/week-2-project/3-newsletter/index.html b/homework/week-2-project/3-newsletter/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>My website</title>
+</head>
+<body>
+    <section id="newsletter">
+        <div class="container">
+            <h1>Subscribe To Our Newsletter</h1>
+            <form action="#">
+                <input type="email" placeholder="Enter email">
+                <button type="submit" class="button">Subscribe</button>
+            </form>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/homework/week-2-project/3-newsletter/style.css b/homework/week-2-project/3-newsletter/style.css
@@ -0,0 +1,37 @@
+body {
+    padding: 0;
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    background-color: aqua;
+}
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+#newsletter {
+    padding: 15px;
+    color: white;
+    background-color: darkslategray;
+}
+#newsletter h1 {
+    float: left;
+}
+#newsletter form {
+    float: right;
+    margin-top: 20px;
+}
+#newsletter input[type="email"] {
+    padding: 4px;
+    height: 25px;
+    width: 250px;
+}
+.button {
+    height: 36px;
+    background: red;
+    color: white;
+    border: 0;
+    padding: 0 20px 0 20px;
+}