Bootstrap: simple example

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"> &copy; 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

WordPress: syntax highlighting

I had forgotten where I noted that thanks to Alex Gorbatchev you can do syntax highlighting in plain old WordPress.com.

The post is just to remind me about what to do, where to go for the examples.

And as these are the 3 I use most frequently:

CodeSnipFormat01

https://en.support.wordpress.com/code/posting-source-code/