FSW_10_July/form_css.html at main · CodeKul/FSW_10_July · 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
<html>
    <head>
        <title>Form CSS</title>
        <style>
            form{
                background-color: thistle;
                padding: 5rem;
                height: 20rem;
            }
            .main{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                font-size: 1.5rem;
                color: rgb(43, 6, 43);
                font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                font-weight: 500;
                margin: 1rem;
            }
            .forlabel{
                width: 20rem;
            }
            .forinput{
                width: 30rem;
            }
            input{
                width: 70%;
                padding: 1%;
                background-color: rgba(240, 248, 255, 0);
                border: none;
                border-bottom: 1px solid rgb(32, 5, 32);
            }
            input:focus{
                outline:none;
                /* background-color: beig; */
                /* border: none; */
                /* border-top: 2px solid saddlebrown; */
            }
            input[type=email]{
                background-image: url(https://www.freepnglogos.com/uploads/email-logo-png-27.png);
                background-size: contain;
                background-repeat: no-repeat;
                /* background-position-x: 100%; */
                padding-left: 2rem;
            }
            input[type=radio]{
                width: 10%;
            }
            input[type=submit]{
                width: 10%;
                background-color: rgb(60, 6, 60);
                color: white;
                font-weight: 900;
                transition-duration: 2s;
                transition-timing-function: ease-in-out;
            }
            input[type=submit]:hover{
                box-shadow: 5px 5px 0px rgb(92, 21, 92);
                /* margin: -0.1rem; */
                transform: scale(1.1);
            }
        </style>
    </head>
    <body>
        <form action="" method="post">
            <div class="main">
                <div class="forlabel">
                    <label>User Name : </label>
                </div>
                <div class="forinput">
                    <input type="text" name="username"><br>
                </div>
            </div>
            <div class="main">
                <div class="forlabel">
                    <label>User Email : </label>
                </div>
                <div class="forinput">
                    <input type="email" name="username"><br>
                </div>
            </div>
            <div class="main">
                <div class="forlabel">
                    <label>User Address : </label>
                </div>
                <div class="forinput">
                    <input type="text" name="username"><br>
                </div>
            </div>
            <div class="main">
                <div class="forlabel">
                    <label>Contact Number : </label>
                </div>
                <div class="forinput">
                    <input type="tel" name="username"><br>
                </div>
            </div>
            <div class="main">
                <div class="forlabel">
                    <label>Gender :</label>
                </div>
                <div class="forinput">
                    <input type="radio" name="gender">Male
                    <input type="radio" name="gender">Female
                    <input type="radio" name="gender">Other
                </div>
            </div>
            <div class="main">
                <input type="submit"/>
            </div>
        </form>
    </body>
</html>