Proposed boghop homepage look - june 2017

proposed boghop homepage look - june 2017



<html>
<head>

<title>test skewed</title>

<style>

body {
background-color: #40FF00;
    background-color: #2ECCFA;
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    font-size: 22px;
}

header {
    width: 100%;
    /* position: fixed;  */
    top: 0;
    left: 0;
    z-index: 100; 
}

header nav {
    text-align: left;
    background: #FF4000;
    font: .9em/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    padding-left: 1em;
}

header nav ul {
    margin: 0 0 0 6em; 
    padding: .4em 0 .5em 0; 
    list-style-type: none;
}

header nav ul li {
    display: inline;
    margin-left: 1em;
}

header nav ul li:first-child {
    margin-left: 0;
}

header nav ul li ul {
    display: none;
}

header nav a, header nav a:visited {
    color: #f8f8f8;
color: #F2F2F2;
    text-decoration: none;
}

header nav a:hover {
    color: #ffffff;
    text-decoration: underline;
}

header #homelink a, .header #homelink {
    color: #f8f8f8;
    text-decoration: none;
}

header #homelink {
    position: absolute;
    left: .5em;
    top: .4em;
    background: none;
    z-index: 99 !important;
    font: .9em/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


.circular-author-image {
    width:150px;
    height:150px;
    border-radius: 75px;
    -moz-border-radius: 75px;
    -khtml-border-radius: 75px;
    -webkit-border-radius: 75px;
    -ms-transform: rotate(-1.8deg); /* IE 9 */
    -webkit-transform: rotate(-1.8deg); /* Chrome, Safari, Opera */
    transform: rotate(-1.8deg);
}

.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    margin-top: 20px;
    /* Rotate div */
    -ms-transform: rotate(1.8deg); /* IE 9 */
    -webkit-transform: rotate(1.8deg); /* Chrome, Safari, Opera */
    transform: rotate(1.8deg);
    background-color: #01DF01;
background-color: #5858FA;
background-color: #40FF00;
    height: 200px;
    /* margin-top: 100px; if fixed header */
    margin-top: 70px;
    margin-bottom: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.left {
    float: left;
    width: 40%;
    background-color: #01DF01;
background-color: #5858FA;
background-color: #40FF00;
}

.right {
    float: right;
    width: 60%;
    background-color: #01DF01;
background-color: #5858FA;
background-color: #40FF00;
}


.divContainer {
    display: table;
    width: 100%;
    height: 100%;
}

.divCenteredObject {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.divLeftAlignedObject {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}


.bio-card a,
.bio-card a:visited {
    color: #5858FA;
    text-decoration: none;
}

.bio-card a:hover {
    color: #5858FA;
    text-decoration: underline;
}


article {
    margin: 0 auto;
    max-width: 640px; 
    width: 100%;
}

.blacklinks a,
.blacklinks a:visited {
    color: #222;
    text-decoration: none
}

.blacklinks a:hover {
    color: #000;
    text-decoration: underline
}

.intro {
    font-size: 125%;
    margin-bottom: 20px;
}

.note {
    margin-bottom: 20px;
    margin-top: 20px;
}

.elsewhere {
    font-size: 80%;
    line-height: normal;
}

</style>


</head>
<body>


<header>
<span id="homelink"><a title="Home Page" href=""><strong>JR's Notes</strong></a></span>  
<nav>
<ul>
<li style="float:right; margin-right: 10px;"><a title="" href="">search</a></li>
<li><a title="" href="">info</a></li>
<li><a title="" href="">archives</a></li>
<li><a title="" href="">favs</a></li>
</ul>
</nav>
</header>



<div class="wrapper">

 <div class="left">
   <div class="divContainer">
     <div class="divCenteredObject">
       <a href="/about.html"><img border="0" class="circular-author-image" src="https://c1.staticflickr.com/5/4243/34042815343_3d3683ba13_q.jpg" alt="" /></a>
     </div>
   </div>
 </div>


 <div class="right">
   <div class="divContainer">
     <div class="divLeftAlignedObject">

       <div class="bio-card intro">
       <a href="/about.html">JR</a> - Camping happily in Toledo, Ohio.
       </div>

       <!-- Observing, taking notes, and creating web posts. -->

       <!-- <div style="margin-top: 20px; margin-bottom: 20px;" class="bio-card"> -->
       <div class="note bio-card">
       Boghop is an E/N site. The content means everything to me while it probably means nothing to everyone else.
       </div>

       <div class="elsewhere bio-card">
       <a href="https://twitter.com/jrboghop">twitter.com/jrboghop</a> &nbsp; &nbsp; 
       <a href="https://github.com/boghop">github.com/boghop</a>
       </div>

       <div class="elsewhere bio-card">
       <a href="mailto:jr@boghop.com">jr@boghop.com</a> &nbsp; &nbsp; 
       <a href="http://toledotalk.com">toledotalk.com/jr</a>
       </div>

     </div>
   </div>
 </div>

</div>


<article>

<div class="blacklinks" style="font-size:120%; text-align:left;">
<p><a href="/manifesto-for-lightweight-web-pages.html">Manifesto for Lightweight Web Pages</a></p>

<p><a href="/2017/04/11/favorite-articles-about-web-design.html">Favorite Articles about Web Design</a></p>

<p><a href="/a-few-words-about-my-dad.html">A few words about my Dad</a></p>

<p><a href="/bicycling-in-toledo.html">Bicycling in Toledo</a></p>

<p><a href="/recap-of-the-june-27-2015-weather-event.html">Recap of the June 27, 2015 Weather Event</a></p>

<p><a href="/crocheting-a-small-mobius-scarf.html">Crocheting a Small Mobius Scarf</a></p>

<p><a href="/black-cloister-pints-and-purls.html">Black Cloister Pints and Purls</a></p>

<p><a href="/supporting-local-businesses.html">Supporting local businesses</a></p>

<p><a href="/making-matzo-bread.html">Making Matzo Bread</a></p>

<p><a href="/dining-at-mutz.html">Dining at Mutz</a></p>

<p><a href="/cooking-a-rib-roast.html">Cooking a Rib Roast</a></p>

<p><a href="/20142015-winter-season-recap.html">2014-2015 Winter Season Recap</a></p>

<p><a href="/brewing-a-onegallon-batch-of-beer.html">Brewing a One-gallon Batch of Beer</a></p>

<p><a href="/baking-naturallyleavened-sourdough-bread.html">Baking Naturally-leavened Sourdough Bread</a></p>

<p><a href="/crocheting-a-beanie-and-a-scarf.html">Crocheting a Beanie and a Scarf</a></p>

<p><a href="/making-pizza.html">Making Pizza</a></p>

<p><a href="/2014/07/19/a-full-rich-day-in-toledo-ohio.html">A full, rich day in Toledo, Ohio</a></p>

<p><a href="/baking-poilanestyle-punition-cookies.html">Baking Poilane-style Punition Cookies</a></p>

<p><a href="/2014-backyard-garden-notes.html">2014 Backyard Garden Notes</a></p>

<p><a href="/roasting-coffee-beans-at-home.html">Roasting Coffee Beans</a></p>

<p><a href="/forecastiopm.html">ForecastIO.pm</a></p>

<p><a href="/2010/09/24/observing-lakeshore-dragons.html">Observing Lakeshore Dragons</a></p>

<p><a href="/rossford-island-view-park-in-the-fall.html">Rossford Island View Park in the Fall</a></p>

<p><a href="/lake-erie-west-farmers-markets.html">Lake Erie West Farmers Markets</a></p>

<p><a href="/toledo-mayoral-primary-2005.html">Toledo Mayoral Primary 2005</a></p>

<p><a href="/2017/03/21/my-march-2017-personal-publishing-thoughts.html">Personal Web Publishing Thoughts</a></p>

<p><a href="/december-2016-events-calendar.html">December 2016 Events Calendar</a></p>
</div>

<p><span class="blacklinks" style="float:right;"><a href="/page-2.html"><small>page 2 >></small></a></span></p>

<p><br /></p>

</article>


</body>
</html>
From JR's : articles
655 words - 7334 chars - 3 min read
created on Jun 28, 2017 at 06:10:23 pm - #
source - versions