2020-04-27 17:42:40 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "A layout example that shows off a blog page with a list of posts." >
< title > Blog – Layout Examples – Pure< / title >
2020-05-05 15:15:25 +00:00
< link rel = "stylesheet" href = "/css/pure/pure-min.css" >
< link rel = "stylesheet" href = "/css/pure/grids-responsive-min.css" >
2020-04-27 17:42:40 +00:00
< link rel = "stylesheet" href = "/layouts/blog/styles.css" >
< / head >
< body >
< div id = "layout" class = "pure-g" >
< div class = "sidebar pure-u-1 pure-u-md-1-4" >
< div class = "header" >
< h1 class = "brand-title" > A Sample Blog< / h1 >
< h2 class = "brand-tagline" > Creating a blog layout using Pure< / h2 >
< nav class = "nav" >
< ul class = "nav-list" >
< li class = "nav-item" >
< a class = "pure-button" href = "http://purecss.io" > Pure< / a >
< / li >
< / ul >
< / nav >
< / div >
< / div >
< div class = "content pure-u-1 pure-u-md-3-4" >
< div >
<!-- A wrapper for all the blog posts -->
< div class = "posts" >
< h1 class = "content-subhead" > Pinned Post< / h1 >
<!-- A single blog post -->
< section class = "post" >
< header class = "post-header" >
< img width = "48" height = "48" alt = "Tilo Mitra's avatar" class = "post-avatar" src = "/img/common/tilo-avatar.png" >
2022-01-27 17:11:11 +00:00
< h2 class = "post-title" > Welcome to Pure< / h2 >
2020-04-27 17:42:40 +00:00
< p class = "post-meta" >
By < a href = "#" class = "post-author" > Tilo Mitra< / a > under < a class = "post-category post-category-design" href = "#" > CSS< / a > < a class = "post-category post-category-pure" href = "#" > Pure< / a >
< / p >
< / header >
< div class = "post-description" >
< p >
2022-01-27 17:11:11 +00:00
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
2020-04-27 17:42:40 +00:00
< / p >
< / div >
< / section >
< / div >
< div class = "posts" >
< h1 class = "content-subhead" > Recent Posts< / h1 >
< section class = "post" >
< header class = "post-header" >
< img width = "48" height = "48" alt = "Eric Ferraiuolo's avatar" class = "post-avatar" src = "/img/common/ericf-avatar.png" >
2022-01-27 17:11:11 +00:00
< h2 class = "post-title" > Everything You Need to Know About Node.js< / h2 >
2020-04-27 17:42:40 +00:00
< p class = "post-meta" >
By < a class = "post-author" href = "#" > Eric Ferraiuolo< / a > under < a class = "post-category post-category-js" href = "#" > JavaScript< / a >
< / p >
< / header >
< div class = "post-description" >
< p >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
< / p >
< / div >
< / section >
< section class = "post" >
< header class = "post-header" >
< img width = "48" height = "48" alt = "Reid Burke's avatar" class = "post-avatar" src = "/img/common/reid-avatar.png" >
< h2 class = "post-title" > Photos from CSSConf and JSConf< / h2 >
< p class = "post-meta" >
By < a class = "post-author" href = "#" > Reid Burke< / a > under < a class = "post-category" href = "#" > Uncategorized< / a >
< / p >
< / header >
< div class = "post-description" >
< div class = "post-images pure-g" >
< div class = "pure-u-1 pure-u-md-1-2" >
< a href = "http://www.flickr.com/photos/uberlife/8915936174/" >
< img alt = "Photo of someone working poolside at a resort"
class="pure-img-responsive"
src="http://farm8.staticflickr.com/7448/8915936174_8d54ec76c6.jpg">
< / a >
< div class = "post-image-meta" >
< h3 > CSSConf Photos< / h3 >
< / div >
< / div >
< div class = "pure-u-1 pure-u-md-1-2" >
< a href = "http://www.flickr.com/photos/uberlife/8907351301/" >
< img alt = "Photo of the sunset on the beach"
class="pure-img-responsive"
src="http://farm8.staticflickr.com/7382/8907351301_bd7460cffb.jpg">
< / a >
< div class = "post-image-meta" >
< h3 > JSConf Photos< / h3 >
< / div >
< / div >
< / div >
< / div >
< / section >
< / div >
< div class = "footer" >
< div class = "pure-menu pure-menu-horizontal" >
< ul >
< li class = "pure-menu-item" > < a href = "http://purecss.io/" class = "pure-menu-link" > About< / a > < / li >
< li class = "pure-menu-item" > < a href = "http://github.com/pure-css/pure/" class = "pure-menu-link" > GitHub< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
