├── Login Form.css
├── README.md
└── bb.html
/Login Form.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .container {
8 | height: 100vh;
9 | margin: 0 auto;
10 | position: relative;
11 | background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
12 | }
13 |
14 | .container .form-1 {
15 | display: flex;
16 | flex-direction: column;
17 | position: absolute;
18 | top: 50%;
19 | left: 50%;
20 | transform: translate(-50%, -50%);
21 | background: #fff;
22 | width: 40%;
23 | box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3);
24 | }
25 |
26 | .form-1 h1 {
27 | text-align: center;
28 | margin-top: 0.7rem;
29 | margin-bottom: 1.5rem;
30 | }
31 |
32 | input[type="email"],
33 | input[type="password"] {
34 | border: none;
35 | outline: none;
36 | border-bottom: 1px solid;
37 | background: none;
38 | margin: 0.9rem 2rem;
39 | font-size: 1rem;
40 | }
41 |
42 | label {
43 | margin: 0 2rem;
44 | }
45 |
46 | span {
47 | margin: 0 2rem;
48 | color: rgb(8, 236, 122);
49 | cursor: pointer;
50 | }
51 |
52 | button {
53 | margin: 2rem;
54 | margin-bottom: 1.5rem;
55 | padding: 0.5rem;
56 | cursor: pointer;
57 | border-radius: 1rem;
58 | border: none;
59 | font-size: 1.1rem;
60 | font-weight: bolder;
61 | color: #fff;
62 | background: linear-gradient(to right, #1e3c49, #4481eb, #04befe, #3f86ed);
63 | }
64 |
65 | /* ........///Sign-Up///......... */
66 |
67 | p {
68 | text-align: center;
69 | font-weight: bolder;
70 | }
71 |
72 | .icons {
73 | display: flex;
74 | justify-content: center;
75 | margin-bottom: 3rem;
76 | margin-top: 0.5rem;
77 | }
78 |
79 | .icons a {
80 | text-decoration: none;
81 | font-size: 1rem;
82 | margin: 0.2rem;
83 | }
84 |
85 | .icons .fa-facebook-f {
86 | border-radius: 50%;
87 | background: #0a4ae0;
88 | color: #fff;
89 | padding: 1rem;
90 | }
91 |
92 | .icons .fa-twitter {
93 | border-radius: 50%;
94 | background: #1da1f2;
95 | color: white;
96 | padding: 1rem;
97 | }
98 |
99 | .icons .fa-google {
100 | border-radius: 50%;
101 | background: #da2c18;
102 | color: #fff;
103 | padding: 1rem;
104 | }
105 |
106 | /* ....///Media query///..... */
107 |
108 | @media (max-width: 501px) {
109 | html {
110 | font-size: 15px;
111 | }
112 |
113 | .container .form-1 {
114 | width: 300px;
115 | }
116 | }
117 |
118 | @media (min-width: 501px) and (max-width: 768px) {
119 | html {
120 | font-size: 14px;
121 | }
122 |
123 | .container .form-1 {
124 | width: 450px;
125 | }
126 | }
127 |
128 | @media (min-width: 765px) and (max-width: 1200px) {
129 | html {
130 | font-size: 18px;
131 | }
132 |
133 | .container .form-1 {
134 | width: 540px;
135 | height: 550px;
136 | }
137 | }
138 |
139 | @media (orientation: landscape) and (max-height: 500px) {
140 | .container {
141 | height: 100vmax;
142 | }
143 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML-CSS
--------------------------------------------------------------------------------
/bb.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Login Form
7 |
11 |
12 |
13 |
14 |
40 |
41 |
--------------------------------------------------------------------------------