Materialize/helper.html at master · magallon/Materialize · GitHub

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="es">
	<head>
		<meta charset="UTF-8">
		<title>Ejercicio en materialize</title>
		<meta name="viewport" content="width-device-width, initial-scale=1">
		<link rel="stylesheet" href="css/materialize.min.css">
	</head>

		<style>

			.prueba{
				height: 300px;
			}

		</style>

	<body>
		<h1><center>Helpers</center></h1>
		<div class="container">
			<div class="valign-wrapper  prueba green">
				<span class="valign "> Esto es un texto alineado verticalmente utilizando helpers</span>
			</div>
		</div>
		<hr>

		<div class="row">
			<div class=" card-panel hoverable purple col l10 center-align">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quam, culpa rerum beatae illum laudantium. At quisquam aperiam pariatur. Soluta commodi libero deleniti at deserunt architecto, esse necessitatibus inventore laboriosam consectetur praesentium sit debitis et similique a nemo aspernatur perferendis earum harum ratione eius vel quia quasi fugit tenetur! Autem non ipsum minima provident officia doloribus omnis, excepturi praesentium voluptatum nisi voluptate accusamus incidunt hic consectetur, doloremque cumque dolorem pariatur. Quod voluptates minus ad placeat, repudiandae adipisci, suscipit ducimus. Cumque, et! Nobis quas necessitatibus praesentium quasi numquam autem quidem ex eius, veritatis ducimus? Voluptas, modi asperiores vero nisi id pariatur accusantium libero rem eaque eius minus blanditiis, nulla fugiat! Ipsum quas saepe, reiciendis labore reprehenderit ut obcaecati, alias placeat, vitae eaque quaerat odio suscipit neque porro incidunt dicta ducimus. Commodi corporis ex accusantium aperiam eos quos eius minus nulla, incidunt numquam aut ratione. Vero at quo, ipsa nam sunt quidem?</p>
		</div>

		<div class="row">  <!-- hide-on-small-only sirve para ocultar elementos cuando se superen las resoluciones tenidas -->
			<div class="col s3 hide-on-small-only">Hola1</div>
			<div class="col s3 hide-on-small-only">Hola2</div>
			<div class="col s3 l6">Hola3</div>
			<div class="col s3 l6">Hola4</div>

		</div>

		<h4 class="truncate">This is an extremely long title that will be truncated</h4>

		</div>
	</body>

	<script>js/materialize.min.js</script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</html>