CSS-Flexbox/02-spacing-and-alignment.html at main · dragoncillos/CSS-Flexbox · 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
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
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Laracasts: CSS Flexbox Simplified</title>
	<link rel="stylesheet" href="css/reset-2019.css">
	<style>
		body {
			margin: 2rem 3.5rem;
		}
		h2 {
			margin-block-start: 3rem;
			margin-block-end: 1rem;
		}

		/* Navigation bar */
		ul {
			max-width: calc(60rem - 14rem);
			padding: 1rem;
			background-color: #646464;

			display: flex;
			gap: 2.4rem;
			justify-content: center;
			align-items: center;
		}
		a {
			text-decoration: none;
			color: white;
		}

		/* Testimonial section */
		section {
			max-width: 60rem;
			margin: 2rem 0;

			display: flex;
			gap: 2rem;
		}
		.testimonial {
			background: #32343c;
			padding: 1rem 1.5rem;
			border-radius: 0.25rem;

			width: 14rem;
		}
	</style>
</head>

<body>
	<header>
		<h1>02 Spacing and alignment</h1>
		<h2>Navigation bar</h2>
		<nav>
			<ul role="list">
				<li><img src="img/figma.svg" alt="Figma" style="height: 35px;"></li>
				<li><a href="">Home</a></li>
				<li><a href="">Events</a></li>
				<li><a href="">Protocols</a></li>
				<li><a href="">Members</a></li>
				<li><a href="">About Us</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<h2>Testimonial seccion in a sigle row</h2>
		<p>Notice that all blocks are of the same height and same widths</p>
		<section>
			<div class="testimonial">
				<img src="img/quote.svg" alt="" width="36">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci accusamus quis, eveniet qui mollitia saepe voluptates corrupti! Aut repudiandae dolorem cupiditate ab, sed sequi officiis deleniti numquam rem placeat commodi!</p>
			</div>
			<div class="testimonial">
				<img src="img/quote.svg" alt="" width="36">
				<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum, hic voluptas sed molestias deserunt, officia quae quam asperiores nesciunt obcaecati facilis totam laborum?</p>
			</div>
			<div class="testimonial">
				<img src="img/quote.svg" alt="" width="36">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim facilis officiis cupiditate aliquid autem tempora officia laborum molestiae minima eveniet quasi nesciunt nobis aliquam, corrupti excepturi earum reprehenderit aspernatur assumenda error. Dicta, sapiente!</p>
			</div>
		</section>
	</main>
</body>

</html>