-
Notifications
You must be signed in to change notification settings - Fork 0
/
Testcolumnlayouts.html
108 lines (70 loc) · 2.9 KB
/
Testcolumnlayouts.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
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" content="Dr Ray EFL ESL, English learning">
<!-- content attribute is for search engines -->
<meta name="quizMaker" content="English Learning Management Method" >
<!-- Mobile responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- xxxx NO Cache xxx -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>aWebPage</title>
<!-- link rel="stylesheet" href="style.css" -->
<!-- <script src="script.js"></script -->
<style>
body{
font-family: sans-serif;
background-color: #d4e6f1 ;
padding: 1ex 1ex 1ex 1ex;
}
:focus {outline:none;}
::-moz-focus-inner {border:0; }
.fake-button {
background-color: #E9E9ED;
border-style:solid; border-width:thin; border-radius: 5px;
box-shadow: 1px 1px; padding: 0 1ex 0 1ex; font-size: 0.85em;
}
.fake-button:hover {
background-color: lightblue;
border-radius: 5px; box-shadow: 3px 3px gray;
}
/* for <button> class="hltBtn" */
.hlBtn {border-radius:5px;}
.hlBtn:hover {
background-color:lightblue; border-radius: 5px;
}
h1 {
color: maroon;
margin-left: 40px;
}
.container {
display: block; width:100%;
box-sizing: border-box;
}
/*set column1/2 for desktop*/
.column1, .column2 {
display:inline-block;
width:46%;
max-width: 480px;
padding: 1ex;
}
/*set column1/2 for small browser*/
@media screen and (max-width: 580px) {
.column1, .column2 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="column1">1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore disputandum putant. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae laudatur, industria, ne fortitudo quidem, sed ista sequimur, ut sine cura metuque vivamus animumque et corpus, quantum efficere possimus, molestia liberemus. Ut enim mortis metu omnis quietae.</div>
<div class="column2">2Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore disputandum putant. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae laudatur, industria, ne fortitudo quidem, sed ista sequimur, ut sine cura metuque vivamus animumque et corpus, quantum efficere possimus, molestia liberemus. Ut enim mortis metu omnis quietae.</div>
</div>
<footer style="margin:35px">
<p> ... end. </p>
</footer>
</body>
</html>