learnwithahmed · BlackGhost3 · Apr 6, 2018 · Apr 6, 2018 · Apr 7, 2018 · Apr 7, 2018
diff --git a/README.md b/README.md
diff --git a/Tasks/1.png b/Tasks/1.png
diff --git a/Tasks/10.png b/Tasks/10.png
diff --git a/Tasks/12.png b/Tasks/12.png
diff --git a/Tasks/13.jpg b/Tasks/13.jpg
diff --git a/Tasks/14.png b/Tasks/14.png
diff --git a/Tasks/15.png b/Tasks/15.png
diff --git a/Tasks/16.png b/Tasks/16.png
diff --git a/Tasks/17.png b/Tasks/17.png
diff --git a/Tasks/2.png b/Tasks/2.png
diff --git a/Tasks/3.jpg b/Tasks/3.jpg
diff --git a/Tasks/4.png b/Tasks/4.png
diff --git a/Tasks/5.png b/Tasks/5.png
diff --git a/Tasks/6.png b/Tasks/6.png
diff --git a/Tasks/7.png b/Tasks/7.png
diff --git a/Tasks/8.png b/Tasks/8.png
diff --git a/Tasks/9.png b/Tasks/9.png
diff --git a/karam-karim/task-1/index.html b/karam-karim/task-1/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>task 1</title>
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <body>
+
+    <div class="container">
+
+      <div class="header">
+        <h2>Select youre preferred language</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum eveniet enim quos amet molestias, harum?</p>
+      </div>
+
+      <div class="body">
+
+            <div class="langs">
+
+                <span>
+                    <input type="checkbox" name="" id="php">
+                    <label for="php">php</label>
+                </span>
+
+                <span>
+                    <input type="checkbox" name="" id="c">
+                    <label for="c">c</label>
+                </span>
+
+                <span>
+                    <input type="checkbox" name="" id="cpp">
+                    <label for="cpp">c++</label>
+                </span>
+
+                <span>
+                    <input type="checkbox" name="" id="python">
+                    <label for="python">python</label>
+                </span>
+
+                <span>
+                    <input type="checkbox" name="" id="javascript">
+                    <label for="javascript">javascript</label>
+                </span>
+
+                <span>
+                    <input type="checkbox" name="" id="csharp">
+                    <label for="csharp">c#</label>
+                </span>
+
+                <span>
+                    <input type="checkbox" name="" id="java">
+                    <label for="java">java</label>
+                </span>
+
+                <span>
+                    <input type="checkbox" name="" id="r">
+                    <label for="r">r</label>
+                </span>
+
+            </div>
+
+            <div class="buttons">
+                <a href="#">go back</a>
+                <a href="#">procced</a>
+            </div>
+
+      </div>
+
+    </div>
+
+  </body>
+
+</html>
diff --git a/karam-karim/task-1/style.css b/karam-karim/task-1/style.css
@@ -0,0 +1,100 @@
+body{
+    margin: 0;
+    padding: 0;
+    background-color: rgb(228,229,231);
+    font-family: monospace;
+    font-size: 1.5em;
+}
+
+.container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.header{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px;
+}
+
+.header > h2, .header > p{
+    color: rgb(83,82,82);
+    font-weight: bold;
+}
+
+.header > p {
+    font-size: 0.7em;
+    width: 70%;
+}
+
+
+.body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.langs {
+    display: flex;
+    flex-wrap: wrap;
+    width: 70%;
+}
+
+.langs > span {
+    display: block;
+    margin: .5em 1em;
+}
+
+.langs > span > label{
+    display: block;
+    background-color: rgb(241,242,241);
+    color: #000;
+    padding: .8em 2em;
+    border-radius: 5px;
+    transition: all ease-in .2s;
+    cursor: pointer;
+}
+
+.langs > span > input[type="checkbox"]:checked + label{
+    background-color: rgb(20,223,223);
+    color: #fff;
+    transition: all ease-in .2s;
+}
+
+.buttons{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 2em 1em;
+}
+
+.buttons > a{
+    color: rgb(167,167,167);
+    text-decoration: none;
+    padding: 1em 3.5em;
+    border: 1px solid rgb(161,196,139);
+    margin: 0 1em;
+    border-radius: 30px;
+    outline: none;
+    transition: background-color linear .2s;
+}
+
+.buttons > a:active{
+    background-color: rgb(161,196,139);
+    color:#fff;
+}
+
+.buttons > a:nth-child(1){
+    text-transform: capitalize;
+}
+
+.buttons > a:nth-child(2){
+    text-transform: uppercase;
+}
+
+input[type="checkbox"]{
+    display: none;
+}
diff --git a/karam-karim/task-2/arrow-down.png b/karam-karim/task-2/arrow-down.png
diff --git a/karam-karim/task-2/index.html b/karam-karim/task-2/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>task 2</title>
+        <link rel="stylesheet" href="./style.css">
+    </head>
+    <body>
+    <div class="container">
+        <h2 class="header">Sign up</h2>
+
+        <div class="input">
+            <p>First name</p>
+            <input type="text" placeholder="John...">
+        </div>
+
+        <div class="input">
+            <p>Last name</p>
+            <input type="text" placeholder="Doe...">
+        </div>
+
+        <div class="input">
+            <p>E-mail</p>
+            <input type="email" placeholder="[email protected]">
+        </div>
+
+        <div class="input">
+            <p>Country</p>
+            <select name="" id="">
+                <option value="" disabled selected> Select </option>
+                <option value="">country 1</option>
+                <option value="">country 2</option>
+                <option value="">country 3</option>
+                <option value="">country 4</option>
+                <option value="">country 5</option>
+                <option value="">country 6</option>
+                <option value="">country 7</option>
+                <option value="">country 8</option>
+            </select>
+        </div>
+        <div class="input">
+            <p>Timezone</p>
+            <select name="" id="">
+                <option value="" disabled selected> Select </option>
+                <option value="">timezone 1</option>
+                <option value="">timezone 2</option>
+                <option value="">timezone 3</option>
+                <option value="">timezone 4</option>
+            </select>
+        </div>
+
+    </div>
+    <!-- <script src="../reload.js" charset="utf-8"></script> -->
+    </body>
+</html>
diff --git a/karam-karim/task-2/style.css b/karam-karim/task-2/style.css
@@ -0,0 +1,63 @@
+body{
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 3em;
+    font-family: Open Sans;
+}
+
+
+.container {
+    padding: 2em;
+}
+
+.header{
+    font-size: 2em;
+    margin: 0;
+}
+
+.input {
+    display: flex;
+    margin: 2em 0;
+    justify-content: space-between;
+}
+
+.input > p{
+    text-align: left;
+    font-weight: bold;
+    margin: 0 1em;
+    line-height: 2.8em;
+    align-items: center;
+}
+
+.input > input[type="text"] ,
+.input > input[type="email"]{
+    border: none;
+    padding: 1em;
+    padding-left: 0 !important;
+    background-color: transparent;
+    border-bottom: 2px solid lightgrey;
+    transition: all linear .3s;
+}
+
+.input > input[type="text"]:focus ,
+.input > input[type="email"]:focus{
+    border-color: grey;
+}
+
+.input > select{
+    width: 69%;
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid lightgrey;
+    color: grey;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url(arrow-down.png);
+    background-position: right;
+    background-repeat: no-repeat;
+    background-size: 10px;
+}
diff --git a/karam-karim/task-3/arrow-down.png b/karam-karim/task-3/arrow-down.png
diff --git a/karam-karim/task-3/france.png b/karam-karim/task-3/france.png
diff --git a/karam-karim/task-3/germany.png b/karam-karim/task-3/germany.png
diff --git a/karam-karim/task-3/index.html b/karam-karim/task-3/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>task 3</title>
+        <link rel="stylesheet" href="./style.css">
+    </head>
+    <body>
+
+        <div class="container">
+            <ul class="dropdown" data-text="Select Language">
+
+                <li class="option">france</li>
+                <li class="option">germany</li>
+                <li class="option">united kingdom</li>
+                <li class="option">poland</li>
+
+            </ul>
+        </div>
+
+    </body>
+</html>
diff --git a/karam-karim/task-3/poland.png b/karam-karim/task-3/poland.png