forked from WPMedia/news-theme-css
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (110 loc) · 4.07 KB
/
index.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fusion Themes Grid</title>
<meta name="Brent Miller" content="WashPost">
<link rel="stylesheet" href="css/index.css">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
header, footer{
background-color: purple;
height:auto;
display: flex;
align-items:center;
justify-items:center;
text-align:center;
flex-direction: column;
}
article{
background-color: green;
height: 60vh;
}
aside{
background-color: blue;
height: 60vh;
/****
@media (min-width: 1440px){
width: 380px;
}
@media (min-width: 1024px){
width: 265px;
}
****/
}
.container{
/** Sample Styles **/
background-color: hotpink;
height: auto;
}
div.spacer{
margin:30px;
}
</style>
</head>
<body>
<header class="container-fluid">
<h1>This is the nav</h1>
</header>
<main class="container">
<section class="row">
<article class="col-lg-8 col-md-12 col-sm-12">
Main Article Area
</article>
<aside class="col-lg-4 col-md-12 col-sm-12">
Right Rail Area
</aside>
</section>
</main>
<div class="container">
<section class="row">
<article class="col-xl-4 col-lg-4 col-md-4 col-sm-12 flex-col-ver-centered flex-col-hor-centered">
Another Article area
</article>
<article class="col-xl-4 col-lg-4 col-md-4 col-sm-12 flex-col-ver-centered flex-col-hor-centered">
Another Article area
</article>
<article class="col-xl-4 col-lg-4 col-md-4 col-sm-12 flex-col-ver-centered flex-col-hor-centered">
Another Article area
</article>
</section>
</div>
<div class="container">
<section class="row">
<article class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-start-xl-5 col-start-lg-5">
Another Article area
</article>
<article class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-start-xl-9 col-start-lg-9">
Another Article area
</article>
</section>
</div>
<h1>This is a header 1</h1>
<h2>This is a header 2</h2>
<h3>This is a header 3</h3>
<h4>This is a header 4</h4>
<h5>This is a header 5</h5>
<h6>This is a header 6</h6>
<p>Lorem ipsum dolor sit amet, affert evertitur ad duo. Ius porro fugit corpora cu. Mundi verear ut pri, mei no dolor altera mandamus, dicta voluptua in usu. Ut vim modo nibh, sit epicurei reprehendunt an, veniam conceptam ei sed. Nec tale fierent disputando in, an fuisset antiopam deterruisset nam. Pri etiam minim eu, vel te intellegat instructior, diceret alterum patrioque ei qui. Meis placerat dissentiunt mei ei, moderatius referrentur his ad.</p>
<div class="spacer"><button class="btn">Medium Button</button> </div>
<div class="spacer"><button class="btn" disabled="disabled">Medium Button</button> </div>
<div class="spacer"><button class="btn btn-sm">Small Button</button> </div>
<div class="spacer"><button class="btn btn-lg">Large Button</button> </div>
<div class="spacer"><button class="btn btn-outline">Medium Button</button> </div>
<div class="spacer"><button class="btn btn-success">Medium Button</button> </div>
<div class="spacer"><button class="btn btn-warning">Medium Button</button> </div>
<div class="spacer"><button class="btn btn-danger">Medium Button</button> </div>
<div class="spacer"><button class="btn btn-outline-success">Medium Button</button> </div>
<div class="spacer"><button class="btn btn-outline-warning">Medium Button</button> </div>
<div class="spacer"><button class="btn btn-outline-danger">Medium Button</button> </div>
<footer class="container-fluid">
<h1>This is the footer</h1>
</footer>
</body>
</html>