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