Simple Article Layout

Developer

Size

6,842 Kb

Views

6,072

Simple Article Layout Previews
Simple Article Layout HTML Codes
Simple Article Layout CSS Codes
Simple Article Layout JS Codes

How do I make an simple article layout?

A very simple article layout using flexbox and the always lovely Roboto font family. . What is a simple article layout? How do you make a simple article layout? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Simple Article Layout Previews

Simple Article Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Article Layout</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="content"> <img src="http://lorempixel.com/960/400/sports/8" alt="" /> <article> <h1>It Takes Two to Tango!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita odit aliquam neque amet fuga aspernatur hic eius? Fugit quam tenetur architecto dolor officiis labore accusantium sequi velit voluptas officia laboriosam iure illum quo id aspernatur ducimus sit et quasi asperiores animi. Laborum impedit repellat tempora expedita commodi laudantium cumque eius autem eligendi quidem saepe repellendus nesciunt pariatur sed blanditiis non maxime rerum neque dolor vel voluptates quas excepturi inventore quis veniam cum officiis. Eos ex facilis adipisci impedit dignissimos consectetur provident nisi ut dolor recusandae repudiandae eveniet. Facere magnam fugit pariatur quia tempore consequatur quasi placeat corrupti tenetur libero voluptatibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium similique nulla odit laboriosam perspiciatis fuga odio magni repellendus consequuntur sapiente nihil fugit voluptatibus hic molestias sequi possimus totam impedit id recusandae reiciendis? Veniam consequatur aliquid illo at nesciunt doloremque placeat ut similique officia quos quibusdam beatae totam sunt amet sapiente soluta aperiam. Dolorum quis consectetur aliquid commodi dicta quod et delectus qui a distinctio! Dolores.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium similique nulla odit laboriosam perspiciatis fuga odio magni repellendus consequuntur sapiente nihil fugit voluptatibus hic molestias sequi possimus totam impedit id recusandae reiciendis? Veniam consequatur aliquid illo at nesciunt doloremque placeat ut similique officia quos quibusdam beatae totam sunt amet sapiente soluta aperiam. Dolorum quis consectetur aliquid commodi dicta quod et delectus qui a distinctio! Dolores.</p> </article> </div> <a class="clickr">View Sidebar<span class="entypo-down-open"></span></a> <aside class="sidebar"> <div class="widget"> <img src="http://lorempixel.com/250/200/city/2" alt="" /> </div><!--end widget --> <div class="widget"> <h3>Welcome</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quod molestiae cum delectus labore ipsum officiis facere ullam distinctio id error aut saepe voluptate corporis.</p> </div><!--end widget --> <div class="widget"> <h3>Recent Posts</h3> <ul> <li><a href="#">It Takes Two To Tango</a></li> <li><a href="#">Just A Post</a></li> <li><a href="#">Another Post For You</a></li> <li><a href="#">Let's Talk Posts</a></li> </ul> </div><!--end widget --> </aside>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Article Layout - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,900);
@font-face { font-family: 'entypo'; font-style: normal; font-weight: normal; src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot'); src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
}
.entypo-note:before { content: "\266a";
}
.entypo-note-beamed:before { content: "\266b";
}
.entypo-music:before { content: "\1f3b5";
}
.entypo-search:before { content: "\1f50d";
}
.entypo-flashlight:before { content: "\1f526";
}
.entypo-mail:before { content: "\2709";
}
.entypo-heart:before { content: "\2665";
}
.entypo-heart-empty:before { content: "\2661";
}
.entypo-star:before { content: "\2605";
}
.entypo-star-empty:before { content: "\2606";
}
.entypo-user:before { content: "\1f464";
}
.entypo-users:before { content: "\1f465";
}
.entypo-user-add:before { content: "\e700";
}
.entypo-video:before { content: "\1f3ac";
}
.entypo-picture:before { content: "\1f304";
}
.entypo-camera:before { content: "\1f4f7";
}
.entypo-layout:before { content: "\268f";
}
.entypo-menu:before { content: "\2630";
}
.entypo-check:before { content: "\2713";
}
.entypo-cancel:before { content: "\2715";
}
.entypo-cancel-circled:before { content: "\2716";
}
.entypo-cancel-squared:before { content: "\274e";
}
.entypo-plus:before { content: "\2b";
}
.entypo-plus-circled:before { content: "\2795";
}
.entypo-plus-squared:before { content: "\229e";
}
.entypo-minus:before { content: "\2d";
}
.entypo-minus-circled:before { content: "\2796";
}
.entypo-minus-squared:before { content: "\229f";
}
.entypo-help:before { content: "\2753";
}
.entypo-help-circled:before { content: "\e704";
}
.entypo-info:before { content: "\2139";
}
.entypo-info-circled:before { content: "\e705";
}
.entypo-back:before { content: "\1f519";
}
.entypo-home:before { content: "\2302";
}
.entypo-link:before { content: "\1f517";
}
.entypo-attach:before { content: "\1f4ce";
}
.entypo-lock:before { content: "\1f512";
}
.entypo-lock-open:before { content: "\1f513";
}
.entypo-eye:before { content: "\e70a";
}
.entypo-tag:before { content: "\e70c";
}
.entypo-bookmark:before { content: "\1f516";
}
.entypo-bookmarks:before { content: "\1f4d1";
}
.entypo-flag:before { content: "\2691";
}
.entypo-thumbs-up:before { content: "\1f44d";
}
.entypo-thumbs-down:before { content: "\1f44e";
}
.entypo-download:before { content: "\1f4e5";
}
.entypo-upload:before { content: "\1f4e4";
}
.entypo-upload-cloud:before { content: "\e711";
}
.entypo-reply:before { content: "\e712";
}
.entypo-reply-all:before { content: "\e713";
}
.entypo-forward:before { content: "\27a6";
}
.entypo-quote:before { content: "\275e";
}
.entypo-code:before { content: "\e714";
}
.entypo-export:before { content: "\e715";
}
.entypo-pencil:before { content: "\270e";
}
.entypo-feather:before { content: "\2712";
}
.entypo-print:before { content: "\e716";
}
.entypo-retweet:before { content: "\e717";
}
.entypo-keyboard:before { content: "\2328";
}
.entypo-comment:before { content: "\e718";
}
.entypo-chat:before { content: "\e720";
}
.entypo-bell:before { content: "\1f514";
}
.entypo-attention:before { content: "\26a0";
}
.entypo-alert:before { content: "\1f4a5'";
}
.entypo-vcard:before { content: "\e722";
}
.entypo-address:before { content: "\e723";
}
.entypo-location:before { content: "\e724";
}
.entypo-map:before { content: "\e727";
}
.entypo-direction:before { content: "\27a2";
}
.entypo-compass:before { content: "\e728";
}
.entypo-cup:before { content: "\2615";
}
.entypo-trash:before { content: "\e729";
}
.entypo-doc:before { content: "\e730";
}
.entypo-docs:before { content: "\e736";
}
.entypo-doc-landscape:before { content: "\e737";
}
.entypo-doc-text:before { content: "\1f4c4";
}
.entypo-doc-text-inv:before { content: "\e731";
}
.entypo-newspaper:before { content: "\1f4f0";
}
.entypo-book-open:before { content: "\1f4d6";
}
.entypo-book:before { content: "\1f4d5";
}
.entypo-folder:before { content: "\1f4c1";
}
.entypo-archive:before { content: "\e738";
}
.entypo-box:before { content: "\1f4e6";
}
.entypo-rss:before { content: "\e73a";
}
.entypo-phone:before { content: "\1f4dE";
}
.entypo-cog:before { content: "\2699";
}
.entypo-tools:before { content: "\2692";
}
.entypo-share:before { content: "\e73c";
}
.entypo-shareable:before { content: "\e73e";
}
.entypo-basket:before { content: "\e73d";
}
.entypo-bag:before { content: "\1f45c'";
}
.entypo-calendar:before { content: "\1f4c5";
}
.entypo-login:before { content: "\e740";
}
.entypo-logout:before { content: "\e741";
}
.entypo-mic:before { content: "\1f3a4";
}
.entypo-mute:before { content: "\1f507";
}
.entypo-sound:before { content: "\1f50a";
}
.entypo-volume:before { content: "\e742";
}
.entypo-clock:before { content: "\1f554";
}
.entypo-hourglass:before { content: "\23f3";
}
.entypo-lamp:before { content: "\1f4a1";
}
.entypo-light-down:before { content: "\1f505";
}
.entypo-light-up:before { content: "\1f506";
}
.entypo-adjust:before { content: "\25d1";
}
.entypo-block:before { content: "\1f6ab";
}
.entypo-resize-full:before { content: "\e744";
}
.entypo-resize-small:before { content: "\e746";
}
.entypo-popup:before { content: "\e74c";
}
.entypo-publish:before { content: "\e74d";
}
.entypo-window:before { content: "\e74e";
}
.entypo-arrow-combo:before { content: "\e74f";
}
.entypo-down-circled:before { content: "\e758";
}
.entypo-left-circled:before { content: "\e759";
}
.entypo-right-circled:before { content: "\e75a";
}
.entypo-up-circled:before { content: "\e75b";
}
.entypo-down-open:before { content: "\e75c";
}
.entypo-left-open:before { content: "\e75d";
}
.entypo-right-open:before { content: "\e75e";
}
.entypo-up-open:before { content: "\e75f";
}
.entypo-down-open-mini:before { content: "\e760";
}
.entypo-left-open-mini:before { content: "\e761";
}
.entypo-right-open-mini:before { content: "\e762";
}
.entypo-up-open-mini:before { content: "\e763";
}
.entypo-down-open-big:before { content: "\e764";
}
.entypo-left-open-big:before { content: "\e765";
}
.entypo-right-open-big:before { content: "\e766";
}
.entypo-up-open-big:before { content: "\e767";
}
.entypo-down:before { content: "\2b07";
}
.entypo-left:before { content: "\2b05";
}
.entypo-right:before { content: "\27a1";
}
.entypo-up:before { content: "\2b06";
}
.entypo-down-dir:before { content: "\25be";
}
.entypo-left-dir:before { content: "\25c2";
}
.entypo-right-dir:before { content: "\25b8";
}
.entypo-up-dir:before { content: "\25b4";
}
.entypo-down-bold:before { content: "\e4b0";
}
.entypo-left-bold:before { content: "\e4ad";
}
.entypo-right-bold:before { content: "\e4ae";
}
.entypo-up-bold:before { content: "\e4af";
}
.entypo-down-thin:before { content: "\2193";
}
.entypo-left-thin:before { content: "\2190";
}
.entypo-right-thin:before { content: "\2192";
}
.entypo-up-thin:before { content: "\2191";
}
.entypo-ccw:before { content: "\27f2";
}
.entypo-cw:before { content: "\27f3";
}
.entypo-arrows-ccw:before { content: "\1f504";
}
.entypo-level-down:before { content: "\21b3";
}
.entypo-level-up:before { content: "\21b0";
}
.entypo-shuffle:before { content: "\1f500";
}
.entypo-loop:before { content: "\1f501";
}
.entypo-switch:before { content: "\21c6";
}
.entypo-play:before { content: "\25b6";
}
.entypo-stop:before { content: "\25a0";
}
.entypo-pause:before { content: "\2389";
}
.entypo-record:before { content: "\26ab";
}
.entypo-to-end:before { content: "\23ed";
}
.entypo-to-start:before { content: "\23ee";
}
.entypo-fast-forward:before { content: "\23e9";
}
.entypo-fast-backward:before { content: "\23ea";
}
.entypo-progress-0:before { content: "\e768";
}
.entypo-progress-1:before { content: "\e769";
}
.entypo-progress-2:before { content: "\e76a";
}
.entypo-progress-3:before { content: "\e76b";
}
.entypo-target:before { content: "\1f3af";
}
.entypo-palette:before { content: "\1f3a8";
}
.entypo-list:before { content: "\e005";
}
.entypo-list-add:before { content: "\e003";
}
.entypo-signal:before { content: "\1f4f6";
}
.entypo-trophy:before { content: "\1f3c6";
}
.entypo-battery:before { content: "\1f50b";
}
.entypo-back-in-time:before { content: "\e771";
}
.entypo-monitor:before { content: "\1f4bb";
}
.entypo-mobile:before { content: "\1f4f1";
}
.entypo-network:before { content: "\e776";
}
.entypo-cd:before { content: "\1f4bf";
}
.entypo-inbox:before { content: "\e777";
}
.entypo-install:before { content: "\e778";
}
.entypo-globe:before { content: "\1f30e";
}
.entypo-cloud:before { content: "\2601";
}
.entypo-cloud-thunder:before { content: "\26c8";
}
.entypo-flash:before { content: "\26a1";
}
.entypo-moon:before { content: "\263d";
}
.entypo-flight:before { content: "\2708";
}
.entypo-paper-plane:before { content: "\e79b";
}
.entypo-leaf:before { content: "\1f342";
}
.entypo-lifebuoy:before { content: "\e788";
}
.entypo-mouse:before { content: "\e789";
}
.entypo-briefcase:before { content: "\1f4bc";
}
.entypo-suitcase:before { content: "\e78e";
}
.entypo-dot:before { content: "\e78b";
}
.entypo-dot-2:before { content: "\e78c";
}
.entypo-dot-3:before { content: "\e78d";
}
.entypo-brush:before { content: "\e79a";
}
.entypo-magnet:before { content: "\e7a1";
}
.entypo-infinity:before { content: "\221e";
}
.entypo-erase:before { content: "\232b";
}
.entypo-chart-pie:before { content: "\e751";
}
.entypo-chart-line:before { content: "\1f4c8";
}
.entypo-chart-bar:before { content: "\1f4ca";
}
.entypo-chart-area:before { content: "\1f53e";
}
.entypo-tape:before { content: "\2707";
}
.entypo-graduation-cap:before { content: "\1f393";
}
.entypo-language:before { content: "\e752";
}
.entypo-ticket:before { content: "\1f3ab";
}
.entypo-water:before { content: "\1f4a6";
}
.entypo-droplet:before { content: "\1f4a7";
}
.entypo-air:before { content: "\e753";
}
.entypo-credit-card:before { content: "\1f4b3";
}
.entypo-floppy:before { content: "\1f4be";
}
.entypo-clipboard:before { content: "\1f4cb";
}
.entypo-megaphone:before { content: "\1f4e3";
}
.entypo-database:before { content: "\e754";
}
.entypo-drive:before { content: "\e755";
}
.entypo-bucket:before { content: "\e756";
}
.entypo-thermometer:before { content: "\e757";
}
.entypo-key:before { content: "\1f511";
}
.entypo-flow-cascade:before { content: "\e790";
}
.entypo-flow-branch:before { content: "\e791";
}
.entypo-flow-tree:before { content: "\e792";
}
.entypo-flow-line:before { content: "\e793";
}
.entypo-flow-parallel:before { content: "\e794";
}
.entypo-rocket:before { content: "\1f680";
}
.entypo-gauge:before { content: "\e7a2";
}
.entypo-traffic-cone:before { content: "\e7a3";
}
.entypo-cc:before { content: "\e7a5";
}
.entypo-cc-by:before { content: "\e7a6";
}
.entypo-cc-nc:before { content: "\e7a7";
}
.entypo-cc-nc-eu:before { content: "\e7a8";
}
.entypo-cc-nc-jp:before { content: "\e7a9";
}
.entypo-cc-sa:before { content: "\e7aa";
}
.entypo-cc-nd:before { content: "\e7ab";
}
.entypo-cc-pd:before { content: "\e7ac";
}
.entypo-cc-zero:before { content: "\e7ad";
}
.entypo-cc-share:before { content: "\e7ae";
}
.entypo-cc-remix:before { content: "\e7af";
}
.entypo-github:before { content: "\f300";
}
.entypo-github-circled:before { content: "\f301";
}
.entypo-flickr:before { content: "\f303";
}
.entypo-flickr-circled:before { content: "\f304";
}
.entypo-vimeo:before { content: "\f306";
}
.entypo-vimeo-circled:before { content: "\f307";
}
.entypo-twitter:before { content: "\f309";
}
.entypo-twitter-circled:before { content: "\f30a";
}
.entypo-facebook:before { content: "\f30c";
}
.entypo-facebook-circled:before { content: "\f30d";
}
.entypo-facebook-squared:before { content: "\f30e";
}
.entypo-gplus:before { content: "\f30f";
}
.entypo-gplus-circled:before { content: "\f310";
}
.entypo-pinterest:before { content: "\f312";
}
.entypo-pinterest-circled:before { content: "\f313";
}
.entypo-tumblr:before { content: "\f315";
}
.entypo-tumblr-circled:before { content: "\f316";
}
.entypo-linkedin:before { content: "\f318";
}
.entypo-linkedin-circled:before { content: "\f319";
}
.entypo-dribbble:before { content: "\f31b";
}
.entypo-dribbble-circled:before { content: "\f31c";
}
.entypo-stumbleupon:before { content: "\f31e";
}
.entypo-stumbleupon-circled:before { content: "\f31f";
}
.entypo-lastfm:before { content: "\f321";
}
.entypo-lastfm-circled:before { content: "\f322";
}
.entypo-rdio:before { content: "\f324";
}
.entypo-rdio-circled:before { content: "\f325";
}
.entypo-spotify:before { content: "\f327";
}
.entypo-spotify-circled:before { content: "\f328";
}
.entypo-qq:before { content: "\f32a";
}
.entypo-instagrem:before { content: "\f32d";
}
.entypo-dropbox:before { content: "\f330";
}
.entypo-evernote:before { content: "\f333";
}
.entypo-flattr:before { content: "\f336";
}
.entypo-skype:before { content: "\f339";
}
.entypo-skype-circled:before { content: "\f33a";
}
.entypo-renren:before { content: "\f33c";
}
.entypo-sina-weibo:before { content: "\f33f";
}
.entypo-paypal:before { content: "\f342";
}
.entypo-picasa:before { content: "\f345";
}
.entypo-soundcloud:before { content: "\f348";
}
.entypo-mixi:before { content: "\f34b";
}
.entypo-behance:before { content: "\f34e";
}
.entypo-google-circles:before { content: "\f351";
}
.entypo-vkontakte:before { content: "\f354";
}
.entypo-smashing:before { content: "\f357";
}
.entypo-sweden:before { content: "\f601";
}
.entypo-db-shape:before { content: "\f600";
}
.entypo-logo-db:before { content: "\f603";
}
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
* { box-sizing: border-box;
}
body { background: #212121; font-family: 'roboto'; color: #555; font-weight: 300; line-height: 1.5em;
}
.wrap { display: flex; width: 85%; margin: 0 auto; margin-top: 2em;
}
.wrap img { max-width: 100%; width: 100%; height: auto;
}
@media (max-width: 50em) { .wrap { display: block; width: 85%; }
}
.content { flex: 3; background: #eaeaea; box-shadow: 10px 0px 10px -5px rgba(0, 0, 0, 0.35); z-index: 2;
}
@media (max-width: 50em) { .content { display: block; width: 100%; }
}
.content article { padding: 0em 1em 1em 1em;
}
.content article h1:nth-child(1) { border-bottom: 1px solid rgba(0, 0, 0, 0.05); text-transform: uppercase; font-weight: 100; margin-bottom: 0; padding-bottom: .75em; line-height: 1.25em;
}
.sidebar { flex: 1; padding: 1em; background: #232323; margin-top: 1em; border-bottom: 1em solid #212121; font-size: .85em; line-height: 1.5em; min-width: 225px;
}
@media (max-width: 50em) { .sidebar { display: none; margin-top: 0; }
}
.sidebar img { border: .5em solid #212121; box-sizing: border-box;
}
.sidebar .widget { border-bottom: 1px solid #1f1f1f; margin-bottom: 1em; padding-bottom: 1em;
}
.sidebar h3 { text-transform: uppercase; color: #4b4b4b;
}
.sidebar ul { list-style: none; margin: 0; padding: 0;
}
.sidebar ul li:nth-of-type(odd) a { background: #282828;
}
.sidebar ul li:nth-of-type(odd) a:hover { background: #313131;
}
.sidebar ul li a { display: block; padding: 5px; color: #aaa; text-decoration: none; background: rgba(18, 18, 18, 0.14); text-transform: uppercase; font-size: .80em; transition: padding-left 0.5s;
}
.sidebar ul li a:hover { background: #191919; padding-left: 1.25em; transition: padding-left 0.35s;
}
.clickr { width: 100%; display: none; padding: 1em; background: #1e1e1e; margin: 1em 0 0 0; border-top: 1px solid #1a1a1a; border-left: 1px solid #1a1a1a; border-right: 1px solid #1a1a1a; text-transform: uppercase; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.05);
}
.clickr span { float: right;
}
.clickr:hover { color: #7e7e7e;
}
@media (max-width: 50em) { .clickr { display: block; }
}

Simple Article Layout - Script Codes JS Codes

$('.clickr').click(function(){ $('.sidebar').slideToggle('slow');
});

Home Page	Home
Developer	Brock Nunn
Username	banunn
Uploaded	January 06, 2023
Rating	3.5
Size	6,842 Kb
Views	6,072

Do you need developer help for Simple Article Layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brock Nunn (banunn) Script Codes

Name	Size
Pixel Perfect Buttons Without PSD	3,828 Kb
Simple Login Form Template	3,571 Kb
Modern Web Button	3,264 Kb
Angular Users Application	5,151 Kb
Super Simple Slideshow	2,639 Kb
Flat UI Alert	3,325 Kb
Article Cards	4,487 Kb
Simple Responsive Navigation	5,885 Kb
Off Canvas Navigation	6,894 Kb
Minimal Hover Menu	3,203 Kb

Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Buttons with style	Chbymnky	2,082 Kb
Clock Face Idea	Chrisburnell	3,196 Kb
Z-index demo	Kblh	1,534 Kb
Flat design iframe	Damienpm	1,819 Kb
Click Based Rotation Demo	Zeaklous	2,086 Kb
Long Shadow Button	Uixcrazy	3,550 Kb
CSS background-size - GSAP	Jonathan	2,209 Kb
Progressively reveal dots on a Bezier curve	GreenSock	2,489 Kb
CSS Piano	Dannystyle	5,138 Kb
Scroll using CSS	Casperovic	2,159 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!