useful online CSS formatter here.
Here for the code:
main.css:
.section-content {
margin: 10px;
padding: 1px;
background-color: maroon;
}
.section-title {
font-weight: bold;
padding: 10px;
background-color: blue;
color: antiquewhite
}
.section-text {
padding: 10px;
background-color: hotpink;
}
.center {
text-align: center
}
#footer {
text-align: center;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: xx-small;
color: crimson
}
index.html:
<!doctype html>
<html>
<head>
<title>Simple example with Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"></link>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css\main.css">
</head>
<body>
<div class="container">
<h1>The stream to Oakley</h1>
<div class="row">
<div id="banner" class="span12">
<div class="center">
<img src="images/WalkToOakley.jpg" height="200" border="5" /></div>
</div>
</div>
<div class="row">
<div id="main-content" class="span8">
<ul>
<li>Took about 3 hours</li>
<li>From a photo I took during a walk</li>
<li>I invented the stream and therefore its vanishing point</li>
</ul>
<hr/>
<div class="span4">
<div class="section-title">The text belonging to section-title - parent</div>
<div class="section-text">Acrylic is one medium</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">Oil is another</div>
</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">And you might use pencil, but it wouldn't have the impact</div>
</div>
</div>
</div>
<div class="row">
<div id="footer" class="span12"> © Lucius Verenus</div>
</div>
</div>
</body>
</html>
The editor I used is Visual Studio Code, as usual for me and HTML.
The art is from my painting on my Flickr site here.
Advertisements
