-
Notifications
You must be signed in to change notification settings - Fork 0
/
fluidWidths.html
101 lines (85 loc) · 4.35 KB
/
fluidWidths.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Remove the meta tag below to see the difference in how width of screen is calculated and how content is scaled -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo without viewport</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background: #333;
margin-bottom: 2rem;
}
header nav ul li {
margin: 1rem;
}
header nav ul li a {
text-decoration: none;
color: #f4f4f4;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: bold;
border-radius: 5px;
}
header nav ul li a:hover {
color: #000;
background: #f4f4f4;
opacity: 0.9;
}
header nav ul {
padding: 1rem 1.5rem;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
text-align: center;
}
.current-link {
background: #f4f4f4;
color: #000;
}
h1 {
margin-bottom: 1rem;
}
p {
font-size: 20px;
margin: 1rem;
}
img {
width: 50vw;
min-width: 300px;
}
.container {
max-width: 1110px;
min-width: 300px;
margin: 1px auto;
text-align:center;
padding: 20px;
}
</style>
<link href="mobile.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Viewport.html">Setting the Viewport</a></li>
<li><a href="fluidWidths.html" class="current-link">Fluid Widths and Fluid Layout</a></li>
<li><a href="mediaQueries.html">Media Queries</a></li>
</ul>
</nav>
</header>
<div class="container">
<h1>The Infinite Beauty of Nature</h1>
<img src="https://images.unsplash.com/photo-1623665038131-5c5d434b8bcf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=200">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos exercitationem illum expedita, recusandae iure porro? Totam in itaque aliquam impedit quibusdam incidunt pariatur quod aperiam quaerat necessitatibus at voluptatem voluptatum assumenda, officiis laudantium explicabo beatae ducimus quam, ab repellat minus. Quas perspiciatis ducimus dolorem assumenda deserunt rem sequi! Optio corrupti dolor doloremque amet voluptatum eligendi natus laudantium, eius repudiandae excepturi vel odio consequuntur delectus iste ratione fugit voluptates inventore hic. Ea ut facere corporis cum, sed rerum at voluptatem. Corrupti accusantium non dignissimos saepe at adipisci voluptates tempora labore voluptatem, ullam molestias accusamus dolore temporibus corporis quaerat suscipit enim recusandae sunt sapiente inventore architecto alias odit. Repudiandae ex asperiores necessitatibus aliquid temporibus facilis dignissimos tenetur, sed quos ut consequuntur minima cum quasi ipsam nam voluptate iusto consequatur distinctio nostrum praesentium accusantium iste! Optio iure sit fugiat magnam eligendi illo consectetur, repudiandae esse impedit temporibus tenetur atque velit dolorum adipisci. Quidem, eligendi soluta rem sapiente ullam architecto sint quia minus impedit eos vero vel accusantium quas obcaecati. Commodi placeat cumque, eos, dolorum necessitatibus expedita doloremque alias ipsum laudantium reprehenderit iste. Accusamus magnam hic vero ipsa quam, exercitationem dignissimos tempora, impedit odit, excepturi earum nihil atque dolor quas consectetur explicabo aspernatur repudiandae.</p>
</div>
</body>
</html>