Skip to content

Commit a15521b

Browse files
ajaflorez-coderajaflorez-coder
committed
added new examples
1 parent 385fda6 commit a15521b

19 files changed

+659
-1
lines changed

‎index.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
<div>
2727
<div>
2828
<ul>
29+
<li><a href="the-verse">The verse</a></li>
30+
<li><a href="login-form-design">Login design</a></li>
2931
<li><a href="acme-landing-page/public">Acme Landing-page</a></li>
3032
<li><a href="acme-studio-basic-landing">Acme studio basic</a></li>
3133
<li><a href="acme-global-dashboard/public">Acme global dashboard</a></li>
@@ -50,7 +52,9 @@
5052
<div class="content">
5153
<h2>Bienvenido</h2>
5254
<p>Ejemplos de HTML, CSS, Landing Page, Bootstrap, Charts y otros del curso de IHC y Tecnologías Móviles </p>
53-
<p>Haga click en el Hamburger Menu para ver los ejemplos </p>
55+
<br>
56+
<p>Haga click en el Hamburger Menu para ver los ejemplos. </p>
57+
<br>
5458
<p>Haga click en el Boton <strong>View Repository in GitHub</strong> para ver el repositorio con los ejemplos. </p>
5559
<a href="https://github.com/upc-is/ihc-front" class="btn">View Repository in GitHub</a>
5660
</div>

‎login-form-design/css/style.css

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
background: url(../img/pic1.jpg);
5+
background-size: cover;
6+
background-position: center;
7+
font-family: sans-serif;
8+
}
9+
10+
.loginbox{
11+
width: 320px;
12+
height: 420px;
13+
background: #000;
14+
color: #fff;
15+
top: 50%;
16+
left: 50%;
17+
position: absolute;
18+
transform: translate(-50%,-50%);
19+
box-sizing: border-box;
20+
padding: 70px 30px;
21+
}
22+
23+
.avatar{
24+
width: 100px;
25+
height: 100px;
26+
border-radius: 50%;
27+
position: absolute;
28+
top: -50px;
29+
left: calc(50% - 50px);
30+
}
31+
32+
h1{
33+
margin: 0;
34+
padding: 0 0 20px;
35+
text-align: center;
36+
font-size: 22px;
37+
}
38+
39+
.loginbox p{
40+
margin: 0;
41+
padding: 0;
42+
font-weight: bold;
43+
}
44+
45+
.loginbox input{
46+
width: 100%;
47+
margin-bottom: 20px;
48+
}
49+
50+
.loginbox input[type="text"], input[type="password"]
51+
{
52+
border: none;
53+
border-bottom: 1px solid #fff;
54+
background: transparent;
55+
outline: none;
56+
height: 40px;
57+
color: #fff;
58+
font-size: 16px;
59+
}
60+
.loginbox input[type="submit"]
61+
{
62+
border: none;
63+
outline: none;
64+
height: 40px;
65+
background: #fb2525;
66+
color: #fff;
67+
font-size: 18px;
68+
border-radius: 20px;
69+
}
70+
.loginbox input[type="submit"]:hover
71+
{
72+
cursor: pointer;
73+
background: #ffc107;
74+
color: #000;
75+
}
76+
.loginbox a{
77+
text-decoration: none;
78+
font-size: 12px;
79+
line-height: 20px;
80+
color: darkgrey;
81+
}
82+
83+
.loginbox a:hover
84+
{
85+
color: #ffc107;
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+
117+
118+
119+
120+
121+
122+
123+
124+
125+
126+
127+
128+
129+
130+
131+
132+
133+
134+
135+
136+
137+
138+
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
149+
150+
151+

‎login-form-design/img/avatar.png

3.72 KB
Loading

‎login-form-design/img/pic1.jpg

421 KB
Loading

‎login-form-design/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<html>
2+
<head>
3+
<!-- Global site tag (gtag.js) - Google Analytics -->
4+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GNJJMF8KL8"></script>
5+
<script>
6+
window.dataLayer = window.dataLayer || [];
7+
function gtag(){dataLayer.push(arguments);}
8+
gtag('js', new Date());
9+
gtag('config', 'G-GNJJMF8KL8');
10+
</script>
11+
<title>Login Form Design</title>
12+
<link rel="stylesheet" type="text/css" href="css/style.css">
13+
<body>
14+
<div class="loginbox">
15+
<img src="img/avatar.png" class="avatar">
16+
<h1>Login Here</h1>
17+
<form>
18+
<p>Username</p>
19+
<input type="text" name="" placeholder="Enter Username">
20+
<p>Password</p>
21+
<input type="password" name="" placeholder="Enter Password">
22+
<input type="submit" name="" value="Login">
23+
<a href="#">Lost your password?</a><br>
24+
<a href="#">Don't have an account?</a>
25+
</form>
26+
27+
</div>
28+
29+
</body>
30+
</head>
31+
</html>

‎signup-social-login/Thumbs.db

13 KB
Binary file not shown.

‎signup-social-login/image1.jpg

101 KB
Loading

‎signup-social-login/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<html>
2+
<head>
3+
<title> Signup Form Design Tutorial </title>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
</head>
6+
<body>
7+
8+
<div id="login-box">
9+
<div class="left-box">
10+
<h1> Sign Up</h1>
11+
12+
<input type="text" name="username" placeholder="Username"/>
13+
<input type="text" name="email" placeholder="Email"/>
14+
<input type="password" name="password" placeholder="Password"/>
15+
16+
<input type="password" name="password2" placeholder="Retype password"/>
17+
18+
<input type="submit" name="signup-button" value="Sign Up"/>
19+
20+
</div>
21+
<div class="right-box">
22+
<span class="signinwith">Sign in with<br/>Social Network </span>
23+
24+
<button class="social facebook">Log in with Facebook</button>
25+
<button class="social twitter">Log in with Twitter</button>
26+
<button class="social google">Log in with Google+</button>
27+
28+
29+
</div>
30+
<div class="or">OR</div>
31+
</div>
32+
33+
</body>
34+
</html>

‎signup-social-login/style.css

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
body
2+
{
3+
margin: 0;
4+
padding: 0;
5+
background: #efefef;
6+
font-size: 16px;
7+
color: #777;
8+
font-family: sans-serif;
9+
font-weight: 300;
10+
}
11+
12+
#login-box
13+
{
14+
position: relative;
15+
margin: 5% auto;
16+
height: 400px;
17+
width: 600px;
18+
background: #fff;
19+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
20+
}
21+
22+
.left-box
23+
{
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
box-sizing: border-box;
28+
padding: 40px;
29+
width: 300px;
30+
height: 400px;
31+
}
32+
33+
h1
34+
{
35+
margin: 0 0 20px 0;
36+
font-weight: 300;
37+
font-size: 28px;
38+
}
39+
40+
input[type="text"],
41+
input[type="password"]
42+
{
43+
display: block;
44+
box-sizing: border-box;
45+
margin-bottom: 20px;
46+
padding: 4px;
47+
width: 220px;
48+
height: 32px;
49+
border: none;
50+
outline: none;
51+
border-bottom: 1px solid #aaa;
52+
font-family: sans-serif;
53+
font-weight: 400;
54+
font-size: 15px;
55+
transition: 0.2s ease;
56+
}
57+
58+
input[type="submit"]
59+
{
60+
margin-bottom: 28px;
61+
width: 120px;
62+
height: 32px;
63+
background: #f44336;
64+
border: none;
65+
border-radius: 2px;
66+
color: #fff;
67+
font-family: sans-serif;
68+
font-weight: 500;
69+
text-transform: uppercase;
70+
transition: 0.2s ease;
71+
cursor: pointer;
72+
73+
}
74+
75+
input[type="submit"]:hover,
76+
input[type="submit"]:focus
77+
{
78+
background: #ff5722;
79+
transition: 0.2s ease;
80+
}
81+
82+
.right-box
83+
{
84+
position: absolute;
85+
top: 0;
86+
right: 0;
87+
box-sizing: border-box;
88+
padding: 40px;
89+
width: 300px;
90+
height: 400px;
91+
background-image: url(image1.jpg);
92+
background-size: cover;
93+
background-position: center;
94+
}
95+
96+
.or
97+
{
98+
position: absolute;
99+
top: 180px;
100+
left: 280px;
101+
width: 40px;
102+
height: 40px;
103+
background: #efefef;
104+
border-radius: 50%;
105+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
106+
line-height: 40px;
107+
text-align: center;
108+
}
109+
110+
.right-box .signinwith
111+
{
112+
display: block;
113+
margin-bottom: 40px;
114+
font-size: 28px;
115+
color: #fff;
116+
text-align: center;
117+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
118+
}
119+
120+
121+
button.social
122+
{
123+
margin-bottom: 20px;
124+
width: 220px;
125+
height: 36px;
126+
border: none;
127+
border-radius: 2px;
128+
color: #fff;
129+
font-family: sans-serif;
130+
font-weight: 500;
131+
transition: 0.2s ease;
132+
cursor: pointer;
133+
}
134+
135+
.facebook
136+
{
137+
background: #32508e;
138+
}
139+
.twitter
140+
{
141+
background: #55acee;
142+
}
143+
.google
144+
{
145+
background: #dd4b39;
146+
}
147+
148+
149+
150+
151+
152+

0 commit comments

Comments
 (0)