soundsinc.github.io/2.html at main · Senuka-Deneth/soundsinc.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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">
    <title>Document</title>

    <style>
        html {
            height : 100% ;
        }

        body {
            margin : 0 ;
            padding : 0 ;
            font-family : "segoe UI Light" ;
            background : #4e4e50 ;
        }

        .login-box {
            position : absolute ;
            top : 50% ;
            left : 50% ;
            width : 400px ;
            padding : 40px ;
            transform : translate(-50%, -50%) ;
            background : rgba(0,0,0,.5) ;
            box-sizing : border-box ;
            box-shadow : 0 15px 25px rgba(0,0,0,.6) ;
            border-radius : 10px ;
        }

        .login-box h2 {
            margin : 0 0 36px ;
            padding : 30px ;
            color : #fff ;
            text-align : center ;
        }

        .login-box .user-box {
            position : relative ;
        }

        .login-box .user-box input {
            width : 100% ;
            padding : 10px 0 ;
            font-size : 16px ;
            color : #fff ;
            margin-bottom : 36px ;
            border : none ;
            border-bottom : 1px solid #fff ;
            outline : none ;
            background : transparent ;
        }

        .login-box .user-box label {
            position : absolute ;
            top : 0 ;
            left : 0 ;
            padding : 10px 0 ;
            font-size : 16px ;
            color : #fff ;
            pointer-events : none ;
            transition : .5s ;
        }

        .login-box .user-box input:focus ~ label ,
        .login-box .user-box input:valid ~ label {
            top : -20px ;
            left : 0 ;
            color : #03e9f4 ;
            font-size : 12px ;
        }

        .login-box form a {
            position : relative ;
            display : inline-block ;
            padding : 10px 20px ;
            color : #ff4d4d ;
            font-size : 16px ;
            text-decoration : none ;
            text-transform : uppercase ;
            overflow : hidden ;
            transition : .5s ;
            margin-top : 40px ;
            letter-spacing : 4px ;
            background-color: rgba(159, 246, 246, 0.355) ;
            border-radius : 10px ;
        }

    </style>
</head>
<body>
    <div class = "login-box">
        <h2>Log In</h2>
        <form>
            <div class ="user-box">
                <input type = "text" name = ""required="">
                <lable>Username</lable>
            </div>
            <div class = "user-box">
                <input type = "password" name = ""required="">
                <lable>password</lable>
            </div>
            <a herf = "#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                submit
            </a>
        </form>
    </div>
</body>
</html>