Skip to content

Commit 425d7ac

Browse files
xurxorguezzxurxorguezz
authored
Add files via upload
0 parents  commit 425d7ac

File tree

8 files changed

+425
-0
lines changed

8 files changed

+425
-0
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# El mejor reloj online del mundo
2+
## Hecho por el mejor programador del mundo
3+
### Para la mejor gente del mundo
4+
5+
###### Reloj simple para gente simple

‎audio/music.mp3

8.28 MB
Binary file not shown.

‎css/style.css

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
2+
3+
* {
4+
font-family: "Poppins", sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
/*──────────────────
11+
social media
12+
──────────────────*/
13+
14+
.social-media{
15+
padding: 10px;
16+
display: flex;
17+
position: center;
18+
align-items: space-around;
19+
justify-content:center;
20+
}
21+
22+
.social-media a {
23+
margin: 10px;
24+
font-size: 2rem;
25+
text-align:center;
26+
display: inline-block;
27+
color: var(--main-fonts-color);
28+
}
29+
30+
.social-media a i{
31+
cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1149.png),pointer;
32+
}
33+
34+
.social-media a:hover {
35+
color: var(--main-decor-color);
36+
text-shadow: 0 0 50px var(--main-decor-color);
37+
}
38+
body {
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
min-height: 100vh;
43+
background:/*-image url(url)*/ #e8cb7dff
44+
background-position: center;
45+
-webkit-background-clip: text;
46+
}
47+
48+
49+
#time {
50+
display: flex;
51+
gap: 40px;
52+
color: #000000;
53+
}
54+
55+
#time .circle {
56+
position: relative;
57+
width: 150px;
58+
height: 150px;
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
}
63+
64+
#time .circle svg {
65+
position: relative;
66+
width: 150px;
67+
height: 150px;
68+
transform: rotate(270deg);
69+
}
70+
71+
#time .circle svg circle {
72+
width: 100%;
73+
height: 100%;
74+
fill: transparent;
75+
stroke: #000000;
76+
stroke-width: 4;
77+
transform: translate(5px, 5px);
78+
}
79+
#time .circle svg circle:nth-child(2) {
80+
stroke: var(--crl);
81+
stroke-dasharray: 440;
82+
}
83+
#time div {
84+
position: absolute;
85+
text-align: center;
86+
font-weight: 500;
87+
font-size: 1.5em;
88+
}
89+
#time div span {
90+
position: absolute;
91+
font-size: 0.35em;
92+
font-weight: 300;
93+
letter-spacing: 0.1em;
94+
text-transform: uppercase;
95+
transform: translateX(-50%) translateY(-10px);
96+
}
97+
#time .ap {
98+
position: relative;
99+
font-size: 1em;
100+
transform: translateX(-20px);
101+
}
102+
.dots {
103+
position: absolute;
104+
width: 100%;
105+
height: 100%;
106+
z-index: 10;
107+
display: flex;
108+
justify-content: center;
109+
}
110+
/**html{
111+
cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1149.png),progress;
112+
}
113+
a:hover{
114+
cursor: url(https://ani.cursors-4u.net/set/2/set151_rainbow_pinwheel.zip), progress;
115+
} **/
116+
.dots::before {
117+
content: "";
118+
position: absolute;
119+
top: -3px;
120+
width: 15px;
121+
height: 15px;
122+
background: var(--crl);
123+
border-radius: 50%;
124+
box-shadow: 0 0 20px var(--crl), 0 0 30px var(--crl), 0 0 40px var(--crl),
125+
0 0 50px var(--crl);
126+
}
127+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Oswald&display=swap");
128+
129+
body {
130+
background-color: #ffffff;
131+
}
132+
#hero img {
133+
height: 100vh;
134+
width: 100%;
135+
background-position: absolute;
136+
z-index: 10;
137+
object-fit: cover;
138+
}
139+
140+
#hero .content {
141+
background: rgba(0, 0, 0, 0.7);
142+
height: 100%;
143+
width: 100%;
144+
z-index: 20;
145+
position: absolute;
146+
top: 0;
147+
left: 0;
148+
}
149+
150+
.switch {
151+
position: absolute;
152+
display: inline-block;
153+
width: 60px;
154+
height: 34px;
155+
left: 5%;
156+
top: 3%;
157+
}
158+
159+
.switch input {
160+
opacity: 0;
161+
width: 0;
162+
height: 0;
163+
}
164+
165+
.slider {
166+
position: absolute;
167+
cursor: pointer;
168+
top: 0;
169+
left: 0;
170+
right: 0;
171+
bottom: 0;
172+
background-color: #ccc;
173+
-webkit-transition: 0.4s;
174+
}
175+
176+
.slider:before {
177+
position: absolute;
178+
content: "";
179+
height: 26px;
180+
width: 26px;
181+
left: 4px;
182+
bottom: 4px;
183+
background-color: rgb(102, 101, 101);
184+
-webkit-transition: 0.4s;
185+
}
186+
187+
input:checked + .slider {
188+
background-color: white;
189+
}
190+
191+
input:focus + .slider {
192+
box-shadow: 0 0 20px #2b78c2;
193+
}
194+
input:checked + .slider:before {
195+
transform: translateX(26px);
196+
}
197+
.slider.round {
198+
border-radius: 34px;
199+
}
200+
.slider.round:before {
201+
border-radius: 50%;
202+
}
203+
204+
#clickme {
205+
color: #d9ddde;
206+
position: absolute;
207+
display: inline-block;
208+
width: 60px;
209+
height: 34px;
210+
left: 5%;
211+
top: 3%;
212+
text-indent: 12em;
213+
font-size: 18px;
214+
}
215+
216+
@import url("https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap");
217+
#center {
218+
font-family: "PT Sans Narrow", sans-serif;
219+
}
220+
221+
#button-text {
222+
font-family: "Open Sans Condensed", sans-serif;
223+
}
224+
225+
#block {
226+
margin-left: 3px;
227+
margin-right: 3px;
228+
}
229+
.icons {
230+
font-size: 1.5rem;
231+
}
232+
.buton {
233+
text-shadow: 0px 0px 30px #2b78c2;
234+
}
235+
.judul {
236+
text-shadow: 0px 0px 30px #2b78c2;
237+
}

‎gif/gif.gif

407 KB
Loading

‎index.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<head>
2+
<meta charset="UTF-8">
3+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Reloj de Xurxo | La Hora de Xurxo</title>
6+
<link rel="stylesheet" href="./css/style.css">
7+
<link rel="stylesheet" href="./css/toggle.css">
8+
</head>
9+
<style type="text/css">
10+
* {
11+
cursor: url(https://cur.cursors-4u.net/user/use-1/use149.ani), url(https://cur.cursors-4u.net/user/use-1/use149.png), auto !important;
12+
}
13+
</style><a href="https://www.cursors-4u.com/cursor/2011/02/06/umbrella-lemming.html" target="_blank"
14+
title="Umbrella Lemming"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Umbrella Lemming"
15+
style="position:absolute; top: 0px; right: 0px;" /></a>
16+
17+
</script>
18+
<link rel="icon" href="https://media.area-gourmet.com/product/reloj-aluminio-25-cm-diametro-800x800.jpg">
19+
<div>
20+
<p id="button-text" class="switch" style="color:#d9ddde; margin-left:6px; margin-top: 45px;">Música </p>
21+
<label class="switch">
22+
<input type="checkbox">
23+
<span class="slider round"></span>
24+
<audio id="myaudio">
25+
<source src="./audio/music.mp3" type="audio/mpeg" loop="true">
26+
</audio>
27+
</label>
28+
<label class="switch">
29+
<input type="checkbox">
30+
<span class="slider round"></span>
31+
<audio id="myaudio">
32+
<source src="audio/music.mp3" type="audio/mp3" loop="true">
33+
</audio>
34+
</label>
35+
36+
</div>
37+
38+
</div>
39+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
40+
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
41+
42+
<script>
43+
$(document).ready(function () {
44+
var myAudio = document.getElementById("myaudio");
45+
var more = 0;
46+
$('.round').click(function () {
47+
if (more % 2 == 0) {
48+
$(myAudio)[0].play();
49+
more++;
50+
}
51+
else if (more % 2 != 0) {
52+
$(myAudio)[0].pause();
53+
more++;
54+
}
55+
});
56+
});
57+
$(".buton").hover(
58+
function () {
59+
$(this).removeClass("flipInX");
60+
$(this).addClass("swing");
61+
},
62+
function () {
63+
$(this).removeClass("swing");
64+
// $(this).addClass('flipInX')
65+
}
66+
);
67+
</script>
68+
69+
</body>
70+
<a href="https://www.Instagram.com/xurxorguezz_" rel="noreferrer" target="_blank"><i class='fab fa-instagram'></i></a>
71+
72+
<body>
73+
<div id="time">
74+
<div class="circle" style="--crl: #a333a3;">
75+
<div class="dots hr_dot"></div>
76+
<svg>
77+
<circle cx="70" cy="70" r="70"></circle>
78+
<circle cx="70" cy="70" r="70" id="hh"></circle>
79+
</svg>
80+
<div id="hours">00</div>
81+
</div>
82+
<div class="circle" style="--crl: #87dffa;">
83+
<div class="dots min_dot"></div>
84+
<svg>
85+
<circle cx="70" cy="70" r="70"></circle>
86+
<circle cx="70" cy="70" r="70" id="mm"></circle>
87+
</svg>
88+
<div id="minutes">00</div>
89+
</div>
90+
<div class="circle" style="--crl: #c9b163;">
91+
<div class="dots sec_dot"></div>
92+
<svg>
93+
<circle cx="70" cy="70" r="70"></circle>
94+
<circle cx="70" cy="70" r="70" id="ss"></circle>
95+
</svg>
96+
<div id="seconds">00</div>
97+
</div>
98+
<div class="ap">
99+
<div id="ampm">AM
100+
101+
<body>
102+
103+
</div>
104+
105+
106+
</div>
107+
</div>
108+
</div>
109+
110+
<script src="./js/index.js"></script>
111+
<script>src = "./js/script.js"</script>
112+
</body>
113+
114+
</html>

‎js/Script.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
console.log("Initiating css animator...");
2+
3+
$(".buton").hover(
4+
function () {
5+
$(this).removeClass("flipInX");
6+
$(this).addClass("swing");
7+
},
8+
function () {
9+
$(this).removeClass("swing");
10+
11+
}
12+
);
13+
14+
console.log("Initiating particles.js...");
15+
16+
particlesJS.load("particles", "../particlesjs-config.json", function () {
17+
console.log("particles.js config loaded");
18+
});
19+
var typed = new Typed(".typing", {
20+
strings: ["YouTuber", "Developer", "Designer"],
21+
typeSpeed: 100,
22+
backSpeed: 60,
23+
loop: true,
24+
});

0 commit comments

Comments
 (0)