Menna0Allah
diff --git a/‎copy.png
11.4 KB b/‎copy.png
11.4 KB
diff --git a/‎index.html
+12-2 b/‎index.html
+12-2
diff --git a/‎light.png
10.1 KB b/‎light.png
10.1 KB
diff --git a/‎style.css
+68 b/‎style.css
+68
@@ -8,8 +8,18 @@
 </head>
 <body>
 
-    
-
+    <section class="main">
+        <section class="title">
+            <h1>Generate <br><span>a Random Password</span></h1>
+        </section>
+        <section class="password">
+            <input type="text" id="password" placeholder="Password">
+            <img src="copy.png" alt="">
+        </section>
+        <section class="btn">
+            <button><img src="light.png" alt="">Generate Password</button>
+        </section>
+    </section>
 
 
 
 
@@ -0,0 +1,68 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: sans-serif;
+}
+
+body{
+    background-color: #002339;
+    max-height: 100vh;
+    color:aliceblue
+}
+
+.main{
+    margin:12%;
+    width: 90%;
+    max-width: 700px;
+}
+
+.password{
+    width: 100%;
+    margin-top: 50px;
+    margin-bottom: 30px;
+    background: #fff;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26px 20px;
+    border-radius: 5px;
+}
+img{
+    width: 30px;
+    cursor: pointer;
+}
+.title h1{
+    font-weight: 500;
+    font-size: 45px;
+}
+.title h1 span{
+    color: #019f55;
+    border-bottom: 4px solid #019f55;
+    padding-bottom: 7px;
+}
+.password input{
+    border: 0;
+    outline: 0;
+    font-size: 24px;
+}
+
+.btn button{
+    border:0;
+    outline: 0;
+    background-color: #019f55;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 26px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.btn button img{
+    width: 25px;
+    margin-right: 10px;
+}