Hugging Face's logo

Spaces:
chartManD
/
pageRed
Sleeping

App Files Community
chartManD commited on
Commit
d428e3f
·
1 Parent(s): 3858bb4

nuevo login

Browse files
Files changed (2) hide show
  1. app/css/login.css +8 -12
  2. app/login.php +33 -80
app/css/login.css CHANGED
@@ -1,17 +1,13 @@
1
- .divider:after,
2
- .divider:before {
3
- content: "";
4
- flex: 1;
5
- height: 1px;
6
- background: #eee;
7
  }
8
 
9
- .h-custom {
10
- height: calc(100% - 73px);
11
- }
12
-
13
- @media (max-width: 450px) {
14
- .h-custom {
15
  height: 100%;
16
  }
17
  }
 
1
+ .bg-image-vertical {
2
+ position: relative;
3
+ overflow: hidden;
4
+ background-repeat: no-repeat;
5
+ background-position: right center;
6
+ background-size: auto 100%;
7
  }
8
 
9
+ @media (min-width: 1025px) {
10
+ .h-custom-2 {
 
 
 
 
11
  height: 100%;
12
  }
13
  }
app/login.php CHANGED
@@ -11,101 +11,54 @@
11
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
  <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
13
  rel="stylesheet">
 
14
  </head>
15
 
16
  <body>
17
  <section class="vh-100">
18
- <div class="container-fluid h-custom">
19
- <div class="row d-flex justify-content-center align-items-center h-100">
20
- <div class="col-md-9 col-lg-6 col-xl-5">
21
- <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
22
- class="img-fluid" alt="Sample image">
23
- </div>
24
- <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
25
- <form>
26
- <div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
27
- <p class="lead fw-normal mb-0 me-3">Sign in with</p>
28
- <button type="button" data-mdb-button-init data-mdb-ripple-init
29
- class="btn btn-primary btn-floating mx-1">
30
- <i class="fab fa-facebook-f"></i>
31
- </button>
32
 
33
- <button type="button" data-mdb-button-init data-mdb-ripple-init
34
- class="btn btn-primary btn-floating mx-1">
35
- <i class="fab fa-twitter"></i>
36
- </button>
37
 
38
- <button type="button" data-mdb-button-init data-mdb-ripple-init
39
- class="btn btn-primary btn-floating mx-1">
40
- <i class="fab fa-linkedin-in"></i>
41
- </button>
42
- </div>
43
 
44
- <div class="divider d-flex align-items-center my-4">
45
- <p class="text-center fw-bold mx-3 mb-0">Or</p>
46
- </div>
47
 
48
- <!-- Email input -->
49
- <div data-mdb-input-init class="form-outline mb-4">
50
- <input type="email" id="form3Example3" class="form-control form-control-lg"
51
- placeholder="Enter a valid email address" />
52
- <label class="form-label" for="form3Example3">Email address</label>
53
- </div>
54
 
55
- <!-- Password input -->
56
- <div data-mdb-input-init class="form-outline mb-3">
57
- <input type="password" id="form3Example4" class="form-control form-control-lg"
58
- placeholder="Enter password" />
59
- <label class="form-label" for="form3Example4">Password</label>
60
- </div>
61
 
62
- <div class="d-flex justify-content-between align-items-center">
63
- <!-- Checkbox -->
64
- <div class="form-check mb-0">
65
- <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
66
- <label class="form-check-label" for="form2Example3">
67
- Remember me
68
- </label>
69
  </div>
70
- <a href="#!" class="text-body">Forgot password?</a>
71
- </div>
72
 
73
- <div class="text-center text-lg-start mt-4 pt-2">
74
- <button type="button" data-mdb-button-init data-mdb-ripple-init
75
- class="btn btn-primary btn-lg"
76
- style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
77
- <p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="#!"
78
- class="link-danger">Register</a></p>
79
- </div>
80
 
81
- </form>
82
- </div>
83
- </div>
84
- </div>
85
- <div
86
- class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary">
87
- <!-- Copyright -->
88
- <div class="text-white mb-3 mb-md-0">
89
- Copyright © 2020. All rights reserved.
90
- </div>
91
- <!-- Copyright -->
92
 
93
- <!-- Right -->
94
- <div>
95
- <a href="#!" class="text-white me-4">
96
- <i class="fab fa-facebook-f"></i>
97
- </a>
98
- <a href="#!" class="text-white me-4">
99
- <i class="fab fa-twitter"></i>
100
- </a>
101
- <a href="#!" class="text-white me-4">
102
- <i class="fab fa-google"></i>
103
- </a>
104
- <a href="#!" class="text-white">
105
- <i class="fab fa-linkedin-in"></i>
106
- </a>
107
  </div>
108
- <!-- Right -->
109
  </div>
110
  </section>
111
  </body>
 
11
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
  <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
13
  rel="stylesheet">
14
+ <link rel="stylesheet" href="/css/login.css">
15
  </head>
16
 
17
  <body>
18
  <section class="vh-100">
19
+ <div class="container-fluid">
20
+ <div class="row">
21
+ <div class="col-sm-6 text-black">
 
 
 
 
 
 
 
 
 
 
 
22
 
23
+ <div class="px-5 ms-xl-4">
24
+ <i class="fas fa-crow fa-2x me-3 pt-5 mt-xl-4" style="color: #709085;"></i>
25
+ <span class="h1 fw-bold mb-0">Logo</span>
26
+ </div>
27
 
28
+ <div class="d-flex align-items-center h-custom-2 px-5 ms-xl-4 mt-5 pt-5 pt-xl-0 mt-xl-n5">
 
 
 
 
29
 
30
+ <form style="width: 23rem;">
 
 
31
 
32
+ <h3 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Log in</h3>
 
 
 
 
 
33
 
34
+ <div data-mdb-input-init class="form-outline mb-4">
35
+ <input type="email" id="form2Example18" class="form-control form-control-lg" />
36
+ <label class="form-label" for="form2Example18">Email address</label>
37
+ </div>
 
 
38
 
39
+ <div data-mdb-input-init class="form-outline mb-4">
40
+ <input type="password" id="form2Example28" class="form-control form-control-lg" />
41
+ <label class="form-label" for="form2Example28">Password</label>
 
 
 
 
42
  </div>
 
 
43
 
44
+ <div class="pt-1 mb-4">
45
+ <button data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-lg btn-block"
46
+ type="button">Login</button>
47
+ </div>
 
 
 
48
 
49
+ <p class="small mb-5 pb-lg-2"><a class="text-muted" href="#!">Forgot password?</a></p>
50
+ <p>Don't have an account? <a href="#!" class="link-info">Register here</a></p>
51
+
52
+ </form>
53
+
54
+ </div>
 
 
 
 
 
55
 
56
+ </div>
57
+ <div class="col-sm-6 px-0 d-none d-sm-block">
58
+ <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/img3.webp"
59
+ alt="Login image" class="w-100 vh-100" style="object-fit: cover; object-position: left;">
60
+ </div>
 
 
 
 
 
 
 
 
 
61
  </div>
 
62
  </div>
63
  </section>
64
  </body>