ISSUE E-Cell-VSSUT#2 SOLVED

Amitkumarsatapathy645 · Oct 6, 2022 · e0f2a04 · e0f2a04
1 parent b935491
commit e0f2a04
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/Amit Kumar Satapathy/index.html b/Amit Kumar Satapathy/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+    <title>LOGIN FORM</title>
+</head>
+
+<body>
+    <div class="loginbox">
+        <h1>LOGIN</h1>
+        <div class="textbox">
+            <i class="fa-solid fa-user"></i>
+
+            <input type="Text" placeholder="Username">
+        </div>
+        <div class="textbox">
+            <i class="fa-solid fa-key"></i>
+            <input type="password" placeholder="Password">
+        </div>
+        <input type="button" class="btn" value="sign in">
+        <p class="link">Don't have an account<br>
+        <a href="#">Sign up</a>here<a/></p>
+        <p class="liw">Log in with</p>
+        <div class="container">
+        <a href="#"><i class="fa-brands fa-facebook"></i></a>
+        <a href="#"><i class="fa-brands fa-instagram"></i></a>
+        <a href="#"><i class="fa-brands fa-twitter"></i></a>
+        <a href="#"><i class="fa-brands fa-google"></i></a>
+        </div>
+
+    </div>
+</body>
+
+</html>
diff --git a/Amit Kumar Satapathy/style.css b/Amit Kumar Satapathy/style.css
@@ -0,0 +1,84 @@
+
+body{
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    background:url(wp7453711.jpg) no-repeat;
+}
+.loginbox{
+    width: 280px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    color: black;
+}
+.loginbox h1{
+    float: left;
+    font-size: 35px;
+    border-bottom: 6px solid #000000;
+    margin-top: 50px;
+    padding: 13px 0;
+}
+.textbox{
+    width: 100%;
+    overflow: hidden;
+    font-size: 20px;
+    padding: 8px 0;
+    margin: 8px 0;
+    border-bottom: 1px solid #000000;
+}
+.textbox i{
+    width: 26px;
+    float: left;
+    text-align: center;
+}
+.textbox input{
+    border: none;
+    outline: none;
+
+    font-size: 18px;
+    width: 80%;
+    float: left;
+    margin: 0 10px;
+
+}
+.btn{
+    width: 100%;
+    background: none;
+    border: 2px solid white;
+    color: white;
+    padding: 5px;
+    font-size: 18px;
+    cursor: pointer;
+    margin: 12px 0;
+    border-radius: 10px;
+}
+.link{
+    font-size: 22px;
+}
+.link a{
+    position: relative;
+
+}
+.liw{
+    font-size: 20px;
+    text-decoration: underline;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    text-align: center;
+}
+.container a{
+    text-decoration: none;
+    color: #fff;
+}
+.container i{
+    color: #fff;
+    font-size: 40px;
+    padding-left: 26px;
+    padding-top: 5px;
+
+}
+.container i:hover{
+    color: rgb(8, 17, 98);
+}
diff --git a/Amit Kumar Satapathy/wp7453711.jpg b/Amit Kumar Satapathy/wp7453711.jpg