SmashinGeeks | Geeks In Action |  |
| Creating Blog Layout Design Using CSS and HTML5 : The Pure Artwork Posted: 24 Mar 2011 10:00 PM PDT We have designed with a simple HTML5 and CSS3, a single page perfect blog layout design. The Page is a single page but having different sections, like header with blog layout plus flickr Images plus about and contact. So, we can it is a multifunctional single page. Lets see how we made it.
The PreviewHere are some screen shots of The Pure Artwork. We have designed it with simple and minimal fonts with some colorful effects.
TutorialJust follow some simple steps to create a page like this. First comes the Header HTML. We also have scripts for sliding up and down, so firstle we have to include in the HTML. <head> <title>The Pure CSS and HTML5 Artwork</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.anchor.js" type="text/javascript"></script> <script src="js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script> </head> The HeaderThe header code goes like this. Just we have created a header section with the Title of the Page and some CSS configuring it. <header> <div id="headercontainer"> <h1><a href="#intro">The Pure Artwork<div id="title"> -By SmashinGeeks.com</div></a></h1><nav> <ul> <li><a href="#intro">Home</a></li> <li><a href="#blog">Jump To Content</a></li> <li><a href="#flickr">Flickr</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> </header> Setting Up the Featured ArticleAlmost most blogs have a featured section in which the most featured and popular post is showcased. The code goes like this. <section id="intro"> <h2>Creating and Coding with CSS and HTML is what we like ~</h2> <a href="http://news.smashingeeks.com"><img src="images/featured.png" alt="SmashingNews" /></a> <div id="fea"> <p>Featured Article: <a href="#">Pure CSS and HTML5 Blog Layout</a></p> </div> </section> The Blog LayoutWe have made this like magazine styled. For this, one container box and one sidebar is defined.There is also meta box for each post as you can see in screenshot having the autho We have made simple blog layout with like posts array and a sidebar containing Advertise Here Boxes made with CSS and not Images. <section id="blog"> <div id="contentbox"> <div id="postbox"> <h2><a href="http://www.smashingeeks.com">The standard Lorem Ipsum passage, used since the 1500s</a></h2> <div id="meta">Posted By SmashinGeeks | 20 March,2011 | 4 Comments</a></div> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div id="more">Read More ></div> </div> <div id="postbox"> <h2><a href="http://www.smashingeeks.com">The standard Lorem Ipsum passage, used since the 1500s</a></h2> <div id="meta">Posted By SmashinGeeks | 20 March,2011 | 4 Comments</a></div> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div id="more">Read More ></div> </div> <div id="postbox"> <h2><a href="http://www.smashingeeks.com">The standard Lorem Ipsum passage, used since the 1500s</a></h2> <div id="meta">Posted By SmashinGeeks | 20 March,2011 | 4 Comments</a></div> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div id="more">Read More ></div> </div> </div> <div id="sidebar"> <div id="ban"> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a></div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> </div> </div> </section> About & ContactWe have also made a about column and contact column, and a contact form too. The code goes like this. <section id="about"> <h2>About Us</h2> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </section> <section id="contact"> <h2>Contact Us</h2> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <form id="contactform"> <p><label for="name">Name</label></p> <input type="text" id=name name=name placeholder="First and last name" required tabindex="1" /> <p><label for="email">Email</label></p> <input type="text" id=email name=email placeholder="example@domain.com" required tabindex="2" /> <p><label for="comment">Your Message</label></p> <textarea name="comment" id="comment" tabindex="4"></textarea> <input name="submit" type="submit" id="submit" tabindex="5" value="Send Message" /> </form> </section> The Overall HTML Code and CSSThe overall HTML code is. <!DOCTYPE html> <html lang="en"> <head> <title>The Pure CSS and HTML5 Artwork</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.anchor.js" type="text/javascript"></script> <script src="js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script> </head> <body> <header> <div id="headercontainer"> <h1><a href="#intro">The Pure Artwork<div id="title"> -By SmashinGeeks.com</div></a></h1> <nav> <ul> <li><a href="#intro">Home</a></li> <li><a href="#blog">Jump To Content</a></li> <li><a href="#flickr">Flickr</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> </header> <section id="contentcontainer"> <section id="intro"> <h2>Creating and Coding with CSS and HTML is what we like ~</h2> <a href="http://news.smashingeeks.com"><img src="images/featured.png" alt="SmashingNews" /></a> <div id="fea"> <p>Featured Article: <a href="#">Pure CSS and HTML5 Blog Layout</a></p> </div> </section> <section id="blog"> <div id="contentbox"> <div id="postbox"> <h2><a href="http://www.smashingeeks.com">The standard Lorem Ipsum passage, used since the 1500s</a></h2> <div id="meta">Posted By SmashinGeeks | 20 March,2011 | 4 Comments</a></div> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div id="more">Read More ></div> </div> <div id="postbox"> <h2><a href="http://www.smashingeeks.com">The standard Lorem Ipsum passage, used since the 1500s</a></h2> <div id="meta">Posted By SmashinGeeks | 20 March,2011 | 4 Comments</a></div> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div id="more">Read More ></div> </div> <div id="postbox"> <h2><a href="http://www.smashingeeks.com">The standard Lorem Ipsum passage, used since the 1500s</a></h2> <div id="meta">Posted By SmashinGeeks | 20 March,2011 | 4 Comments</a></div> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div id="more">Read More ></div> </div> </div> <div id="sidebar"> <div id="ban"> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> <div id="banner"> <a href="http://www.smashingeeks.com">Advertise Here</a> </div> </div> </div> </section> <section id="flickr"> <h2>Fun With <span style="color:RoyalBlue;">Flick</span><span style="color:#EF1AEF;">r</span> Images!</h2> <ul> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> <li> <a href="http://www.smashingeeks.com"><img src="images/screen.png" alt="WebPage Screenshot" /></a> </li> </ul> </section> <section id="about"> <h2>About Us</h2> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </section> <section id="contact"> <h2>Contact Us</h2> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <form id="contactform"> <p><label for="name">Name</label></p> <input type="text" id=name name=name placeholder="First and last name" required tabindex="1" /> <p><label for="email">Email</label></p> <input type="text" id=email name=email placeholder="example@domain.com" required tabindex="2" /> <p><label for="comment">Your Message</label></p> <textarea name="comment" id="comment" tabindex="4"></textarea> <input name="submit" type="submit" id="submit" tabindex="5" value="Send Message" /> </form> </section> <footer> <ul> Copyright SmashinGeeks 2010-11 | <li><img src="images/twitter.png" alt="" /><a href="http://twitter.com/SmashinGeeks">Follow Us on Twitter</a></li> |<li><a href="http://www.smashingeeks.com/articles/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3">Read Back the Whole Tutorial ></a></li> </ul> </footer> </section> </body> </html> The Overall CSS code for the webpage. * { margin: 0; outline: 0 none; padding: 0; } header, section, footer, aside, nav, article, figure { display: block; } @font-face { font-family: "Keffeesatz"; src: url("YanoneKaffeesatz-Light.otf") format("opentype"); } @font-face { font-family: "KeffeesatzBold"; src: url("YanoneKaffeesatz-Bold.otf") format("opentype"); } body { background: none repeat scroll 0 0 whiteSmoke; color: #4B4B4B; font-family: Keffeesatz,Arial; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); width: 970px; } p { font-size: 24px; line-height: 36px; margin-bottom: 15px; padding: 35px; } #title { color: white; display: inline; font-size: 24px; } *::-moz-selection { background-color: rgba(122, 192, 0, 0.2); border: 10px solid red; } h1 { color: #FFFFFF; font-size: 40px; position: relative; } #blog { width: 1000px; } #ban { margin: 18px; } #banner { background: none repeat scroll 0 0 Black; border: 1px solid lightgrey; display: inline-table; height: 125px; margin-left: 10px; margin-top: 15px; width: 125px; } #banner a { padding-left: 23px; padding-right: 23px; } #contentbox { border: 3px solid lightgrey; float: left; width: 646px; } #sidebar { border: 3px solid lightgrey; float: right; width: 325px; } #postbox h2 { background-color: inactivecaptiontext; color: white; font-size: 40px; line-height: 63px; margin-top: 15px; padding-left: 30px; } #meta { color: SteelBlue; font-size: 25px; font-weight: bold; margin-top: 2em; padding: 0 40px; } #more { -moz-border-radius: 4px 4px 4px 4px; -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); background: none repeat scroll 0 0 -moz-visitedhyperlinktext; border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6); color: #FFFFFF; display: inline; font-size: 20px; margin-left: 13em; padding: 5px 30px 11px; } #postbox { margin-bottom: 2em; } #fea p { background: none repeat scroll 0 0 Black; color: white; font-size: 28px; line-height: 43px; margin-left: 26px; margin-top: -55px; padding: 0 42px; position: relative; text-align: right; width: -moz-max-content; } h2 { font-size: 66px; line-height: 63px; padding-left: 140px; } h2 span.sub { color: #4B4B4B; float: left; font-size: 48px; } h2.intro { background: url("images/intro.png") no-repeat scroll 0 0 transparent; height: 130px; margin-top: 1em; } h2.work { background: url("images/flickr.png") no-repeat scroll 60px 50% transparent; margin-bottom: 1em; } h2.about { background: url("images/about.png") no-repeat scroll 55px 50% transparent; } h2.contact { background: url("images/contact.png") no-repeat scroll 60px 50% transparent; } a { color: #7AC000; padding-bottom: 2px; text-decoration: none; } a:hover { border-bottom: 1px solid #FF5400; color: #FF5400; padding-bottom: 2px; text-decoration: none; } p { font-size: 24px; line-height: 36px; margin-bottom: 15px; } strong { font-family: KeffeesatzBold,Arial; } header { -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); background-color: #000000; float: left; margin-bottom: 25px; padding: 5px 0; position: fixed; width: 100%; z-index: 10; } #headercontainer, #contentcontainer { margin: 0 auto; position: relative; width: 960px; } #contentcontainer { float: none; padding-top: 0; } nav { float: left; width: auto; } nav ul { display: block; margin-top: -37px; position: absolute; right: 0; } nav ul li { display: inline; margin-left: 30px; } nav ul li a { border-bottom: medium none; font-size: 24px; } section { float: left; padding-top: 50px; } #intro h2 a { padding-bottom: 0; } #intro a.featured { border-bottom: medium none; padding: 0 20px; } #intro a img { -moz-box-shadow: 0 20px 20px grey; border: 5px solid lightgrey; margin-bottom: 5px; margin-top: 40px; opacity: 0.7; width: 940px; } #intro a img:hover { opacity: 1; } #work h2 span { color: pink; } #intro a img:hover, #flickr .work a img:hover, input:hover, textarea:hover { border: 5px solid grey; } #intro a img:active, #flickr .work a img:active { } #flickr ul.work a { border-bottom: medium none; } #flickr ul.work a img { border: 5px solid rgba(122, 192, 0, 0.15); } #flickr ul.work { width: 975px; } #flickr ul.work li { float: left; list-style: none outside none; margin-bottom: 15px; margin-left: 15px; } #contact { margin-bottom: 0; } input[type="text"] { width: 460px; } textarea { height: 275px; width: 750px; } label { font-family: inherit; font-size: 50px; } input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 5px solid rgba(122, 192, 0, 0.15); color: grey; font-family: Georgia; font-size: 21px; font-style: italic; margin-bottom: 15px; margin-top: -10px; padding: 10px; text-align: center; } input[type="submit"] { -moz-border-radius: 10px 10px 10px 10px; -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); background: -moz-linear-gradient(center bottom , #619702 23%, #7AC000 62%) repeat scroll 0 0 transparent; border-color: rgba(255, 255, 255, 0.6) -moz-use-text-color rgba(0, 0, 0, 0.4); border-style: solid none; border-width: 1px medium; color: #FFFFFF; cursor: pointer; font-size: 24px; padding: 5px 36px 8px; } input[type="submit"]:hover { background: -moz-linear-gradient(center bottom , #C34000 23%, #FF5400 62%) repeat scroll 0 0 transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.4); color: #FFFFFF; } #contactform { text-align: center; } input[type="submit"]:active { position: relative; top: 1px; } footer { background-color: black; color: white; float: left; margin-top: 50px; padding: 0 124px; width: 750px; } footer ul li { display: inline; margin-right: 10px; } footer ul li a { font-size: 24px; margin-left: 10px; } footer ul li img { position: relative; top: 2px; vertical-align: bottom; } In the end, we would like to know how is “The Pure Artwork”. You can see the demo of the the Artwork and download it below.
|
| You are subscribed to email updates from SmashinGeeks To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 komentar: