Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Ayuda con este codigo

HTML - Ayuda con este codigo

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de eunha

Ayuda con este codigo

Publicado por eunha (3 intervenciones) el 02/04/2018 14:23:08
Hola! espero encontrar ayuda aqui.

Necesito codigo tenga 3 o 2 en horizontal y no solo sea vertical.

Ejemplo el codigo original es asi

a8y3CLK

y lo quiero poner asi

b2eZaOJ

Este es el codigo si me pueden ayudar gracias.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Modern essentials -->
<title>delta</title>
<link rel="icon" href="https://png.icons8.com/metro/1600/settings.png">
<meta charset="UTF-8">
<meta name="description" content="How to count up to a specified number using JavaScript.">
<meta name="keywords" content="HTML, CSS, JavaScript, counter">
<meta name="author" content="Nishita Wojnar">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
 
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>date</h1>
<div class="profile">
<img class="profile-photo" src="https://i.imgur.com/Va6m7Zj.jpg" alt="Profile photo">
<div class="counting-container">
<div class="counting-box" id="encounter">
<img src="https://thumbs.dreamstime.com/b/skull-guitars-rock-hand-symbol-logo-rock-band-log-lovers-music-60726209.jpg" alt="Image 1">
<h4 class="count-this">1582</h4>
<p>Score</p>
</div>
<div class="counting-box" id="battles">
<img src="https://s3.envato.com/files/227845070/preview.jpg" alt="Image 2">
<h4 class="count-this">57</h4>
<p>win</p>
</div>
<div class="counting-box" id="locations">
<img src="https://art.ngfiles.com/images/561000/561156_darquebasylisk_green-skull.jpg?f1510090613" alt="Image 13">
<h4 class="count-this">312</h4>
<p>Loser</p>
</div>
</div>
</div>
 
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/counter.js"></script>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con este codigo

Publicado por Lopez (271 intervenciones) el 02/04/2018 15:16:02
Hola compadre,

Imagino había un CSS para todo ese código, pero bueno es tema simple.
Te dejo un ejemplo con su demo y código fuente para que veas y entiendas como funcionaria:

https://codepen.io/lowpez/pen/ZvRXwO

Cuéntanos como te va,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pedro
Val: 277
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con este codigo

Publicado por Pedro (74 intervenciones) el 02/04/2018 22:03:38
Buenos días || tardes || noches tengo que decir que me ha parecido atractivo el tema y he cogido y te he codeado mi versión de lo que has pedido.

He utilizado bootstrap y he disfrutado muchísimo haciéndolo, sólo me queda decir que aquí lo tenéis para visualizarlo online.

Mi versión de lo que pides




A continuación te adjunto el proyecto terminado, sólo a falta que cambies imágenes en general.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de eunha

Ayuda con este codigo

Publicado por eunha (3 intervenciones) el 03/04/2018 04:10:11
Hola gracias,si se cambiaron las imagenes en tu codigo pero no se mueve el counter por que??

El que tengo si se mueven sus numeros asi

1
https://i.imgur.com/5W8sdz3.gif

Este es el css y el js mas abajo que fue lo que olvide poner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
body{
	background-color: #000;

	margin: 0;
	padding: 0;
}
#container{

	background-color: #000;

	margin: 0 auto;
	width: 100%;
}
h1, h4{
	font-family: 'Press Start 2P', right;
	color: #fff;

	text-align: right;
}
h1{
	text-transform: uppercase;
	letter-spacing: 8px;
	font-size: 15px;
}
.profile{
	padding: 100px;
}
.profile img{
	display: block;
	margin: 0 auto;
	padding: 10px;
}
.profile-photo{
	background-color: #D1C2BA;

	width: 70%;
	border-radius: 50%;
	border: 5px solid white;
}
.counting-container{
	display: flex;
}
.counting-box{
	border: 1px solid #D1C2BA;

	text-align: right;
	width: 25%;
	margin: 10px;
	padding: 12px;
	flex: auto;
}
.counting-box img{
	width: 40%;
}
.counting-box p{
	font-family: 'Roboto Condensed', sans-serif;
	color: #525252;

}
#encounter{

	border-bottom: 2px solid #3185E8;

}
#battles{

	border-bottom: 2px solid #D9884D;

}
#locations{

	border-bottom: 2px solid #D95E4D;

}
@media (min-width: 600px) {
	body{
		padding-top: 5px;
		background-color: #fff;

		background-image: url(https://cdn.dribbble.com/users/25514/screenshots/1032931/skull-3d-ramotion.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	#container{

		background-color: rgba(13, 24, 33, 0.84);
		padding: 10px;
		border-radius: 50px;
		width: 360px;
	}
}

Este el js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Always test to check for a connection!
// console.log("Testing - JavaScript file has been linked correctly!");
 
// Find the 'count this' class on the page and animate it
$('.count-this').each(function () {
 
	// Start the counting from a specified number - in this case, 0!
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
    	// Speed of counter in ms, default animation style
        duration: 2000,
        easing: 'swing',
        step: function (now) {
        	// Round up the number
            $(this).text(Math.ceil(now));
        }
    });
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pedro
Val: 277
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda con este codigo

Publicado por Pedro (74 intervenciones) el 03/04/2018 19:51:59
Bueno ya te he añadido el código javascript para que te funcione el count-this

El cambio de imágenes, backgrounds , etc , ya lo adaptas a tu gusto wink
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de eunha

Ayuda con este codigo

Publicado por eunha (3 intervenciones) el 04/04/2018 04:58:01
Si me sirvio gracias,aun que cuando pongo abajo otras lineas de 3
no se por que se desemparejan tratare de solucionarlo pueden cerrar tema
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar