Skip to content

Commit 265d390

Browse files
httpsad3httpsad3
committed
plantila html
1 parent f891e82 commit 265d390

File tree

2 files changed

+154
-0
lines changed

2 files changed

+154
-0
lines changed

‎docs/assets/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
body {
2+
width: 100wh;
3+
height: 90vh;
4+
color: #fff;
5+
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
6+
background-size: 400% 400%;
7+
-webkit-animation: Gradient 15s ease infinite;
8+
-moz-animation: Gradient 15s ease infinite;
9+
animation: Gradient 15s ease infinite;
10+
}
11+
12+
@-webkit-keyframes Gradient {
13+
0% {
14+
background-position: 0% 50%
15+
}
16+
50% {
17+
background-position: 100% 50%
18+
}
19+
100% {
20+
background-position: 0% 50%
21+
}
22+
}
23+
24+
@-moz-keyframes Gradient {
25+
0% {
26+
background-position: 0% 50%
27+
}
28+
50% {
29+
background-position: 100% 50%
30+
}
31+
100% {
32+
background-position: 0% 50%
33+
}
34+
}
35+
36+
@keyframes Gradient {
37+
0% {
38+
background-position: 0% 50%
39+
}
40+
50% {
41+
background-position: 100% 50%
42+
}
43+
100% {
44+
background-position: 0% 50%
45+
}
46+
}
47+
48+
h1,
49+
h6 {
50+
font-family: 'Open Sans';
51+
font-weight: 300;
52+
text-align: center;
53+
position: absolute;
54+
top: 45%;
55+
right: 0;
56+
left: 0;
57+
}
58+
59+
.shake {
60+
animation: shake-animation 4.72s ease infinite;
61+
transform-origin: 50% 50%;
62+
}
63+
.element {
64+
margin: 0 auto;
65+
width: 150px;
66+
height: 150px;
67+
background: red;
68+
}
69+
@keyframes shake-animation {
70+
0% { transform:translate(0,0) }
71+
1.78571% { transform:translate(5px,0) }
72+
3.57143% { transform:translate(0,0) }
73+
5.35714% { transform:translate(5px,0) }
74+
7.14286% { transform:translate(0,0) }
75+
8.92857% { transform:translate(5px,0) }
76+
10.71429% { transform:translate(0,0) }
77+
100% { transform:translate(0,0) }
78+
}
79+
80+
.backdrop {
81+
-moz-box-shadow: 0px 6px 5px #111;
82+
-webkit-box-shadow: 0px 6px 5px #111;
83+
box-shadow: 0px 2px 10px #111;
84+
-moz-border-radius:190px;
85+
-webkit-border-radius:190px;
86+
border-radius:190px;
87+
}
88+
89+
.linktree {
90+
width: 120px;
91+
height: 120px;
92+
background-image: url("https://avatars.githubusercontent.com/u/106186354?v=4");
93+
background-size: cover;
94+
background-repeat: no-repeat;
95+
background-position: 50% 50%;
96+
}

‎docs/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
4+
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
5+
6+
<title>Mi plantilla</title>
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="assets/style.css">
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
<div class="col-xs-12">
16+
<div class="text-center" style="padding-top: 30px; padding-bottom: 30px;">
17+
<img class="backdrop linktree">
18+
<h2 style="color: #ffffff; padding-top: 20px;">Mi curso de Git y Github</h2>
19+
</div>
20+
</div>
21+
</div>
22+
23+
24+
<div class="container">
25+
<div class="col-xs-12">
26+
<div class="text-center">
27+
<div style="padding-bottom: 30px;">
28+
<button onclick="location.href='https://platzi.com/cursos/docker-fundamentos/'" type="button" class="btn btn-outline-light shake" style="width: 80%; padding-top:10px; padding-bottom:10px; font-weight: 800;">Mi curso de Docker</button>
29+
</div>
30+
<div style="padding-bottom: 30px;">
31+
<button onclick="location.href='http://aminespinoza.com'" type="button" class="btn btn-outline-light" style="width: 80%; padding-top:10px; padding-bottom:10px; font-weight: 600;">Mi sitio web</button>
32+
</div>
33+
<div style="padding-bottom: 30px;">
34+
<button onclick="location.href='https://www.linkedin.com/in/aminespinoza/'" type="button" class="btn btn-outline-light" style="width: 80%; padding-top:10px; padding-bottom:10px; font-weight: 600;">Conecta en mi perfil de LinkedIn</button>
35+
</div>
36+
<div style="padding-bottom: 30px;">
37+
<button onclick="location.href='https://www.instagram.com/aminespinoza10/'" type="button" class="btn btn-outline-light" style="width: 80%; padding-top:10px; padding-bottom:10px; font-weight: 600;">Visitame en Instagram</button>
38+
</div>
39+
<div style="padding-bottom: 30px;">
40+
<button onclick="location.href='https://www.youtube.com/aminespinoza'" type="button" class="btn btn-outline-light" style="width: 80%; padding-top:10px; padding-bottom:10px; font-weight: 600;">Mira mi canal de Youtube</button>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<div class="text-center">
47+
<a href="https://codepen.io/nightcl4w/pen/dEjreJ" style="color: #34312f;" target="_blank">Creado por OrderMerch</a>
48+
</div>
49+
50+
51+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
52+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
53+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
54+
<!-- This pre-lander was created by Brandon Nilsson -->
55+
<!-- You're welcome to edit, reproduce and change this template as long as original contributation stays present on the website at all times. -->
56+
</body>
57+
58+
</html>

0 commit comments

Comments
 (0)