Blog Concept 3

Developer
Juan Gallardo
Size
4,382 Kb
Views
42,504
  1. Blog Concept 3 Previews
  2. Blog Concept 3 HTML Codes
  3. Blog Concept 3 CSS Codes
  4. Blog Concept 3 JS Codes

How do I make an blog concept 3?

What is a blog concept 3? How do you make a blog concept 3? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.

Blog Concept 3 Previews
IQ Test

Blog Concept 3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blog Concept 3</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="inner"> <header class="container"> <h1> <a href="/">DIVE</a> </h1> <ul> <li><a href="#">ASK</a></li> <li><a href="#">SUBMIT</a></li> <li><a href="#">ARCHIVE</a></li> </ul> </header> <div id="content" class="container clearfix">
<!-- TEST CONTENT
======================== --> <div class="item"> <div class="postContent"> <img src="http://media.tumblr.com/tumblr_ma8wodZv3b1rwp3js.jpg"> </div> <div class="notes"> <a href="#">17 notes</a> <a href="#">Janurary 3, 2013</a> <a href="#">Reblog</a> </div> <!--/ .notes --> </div> <div class="item"> <div class="postContent"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzccaRsIaEBhvG4UbvSk_fkpL5onWLKAff35riOHN01YmGjbRN"> </div> <div class="notes"> <a href="#">600 notes</a> <a href="#">December 12, 2012</a> <a href="#">Reblog</a> </div> <!--/ .notes --> </div> <div class="item"> <div class="postContent"> <img src="http://wallpaperweb.org/wallpaper/animals/1600x1200/Bottlenose_Dolphins_Caribbean_Sea_Honduras.jpg" alt="" /> </div> <div class="notes"> <a href="#">12 notes</a> <a href="#">June 2, 2012</a> <a href="#">Reblog</a> </div> <!--/ .notes --> </div> <div class="item"> <div class="postContent"> <img src="http://media.tumblr.com/tumblr_lw20o3UCOL1r1h2ku.jpg"> </div> <div class="notes"> <a href="#"> 200 notes </a> <a href="#"> June 1, 2012 </a> <a href="#"> Reblog </a> </div> <!--/ .notes --> </div> <div class="item"> <div class="postContent"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTqQD1GhV74-lmY8lA7guat3diBGC-_ULiBC8G14v1q3EDidpuJ"> </div> <div class="notes"> <a href="#"> 90 notes </a> <a href="#"> June 1, 2012 </a> <a href="#"> Reblog </a> </div> <!--/ .notes --> </div> <div class="item"> <div class="postContent"> <img src="http://travelphotos.expertvagabond.com/Travel/Mexico/i-HjnsLdr/1/XL/mexico-cavern-diving-dos-ojos-XL.jpg"> </div> <div class="notes"> <a href="#"> 60 notes </a> <a href="#"> June 1, 2012 </a> <a href="#"> Reblog </a> </div> <!--/ .notes --> </div>
<!-- ========================
END OF TEST CONTENT --> </div> <!--/ .content --> </div> <!--/ .inner -->
</div><!--/ .wrapper --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blog Concept 3 - Script Codes CSS Codes

/* From HTML5 Boilerplate */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* Grid styles - Author: Luke Shumard (lukeshumard.com) */
#content {	/*width: 980px;*/	/*width: 95%;*/	width: auto;	margin: 0 auto;
}
.item {	display: block;	float: left;	width: 300px;	margin: 0 20px 20px 0;	-webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;	-moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;	-ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;	-o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;	transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}
.featured {	width: 620px;
}
.item img {	width: 300px;	height: auto;
}
.featured img { width: 620px; height: auto;
}
/* Blog styles - Author: Juan Gallardo (jgallardo.me) */
@import url(http://fonts.googleapis.com/css?family=Six+Caps);
body { background-color: #e5ebec; font-family: "Helvetica Neue", Helvetica, sans-serif; color: rgb(34,34,34);
}
header { text-align: center;	margin-top: 0.8em;
}
header ul { list-style-type: none; padding-left: 0;
}
header ul li { display:inline-block; margin: 0 9px;
}
header ul li a { color: #646464; font-size: 13px; font-weight: 600; text-decoration: none;
}
h1 { font-family: 'Six Caps', sans-serif; font-size: 60px; margin: 12px 0 0 0; font-weight: 400; line-height: 1; text-transform: uppercase;
}
.container h1 a { color: rgb(18, 18, 18); text-decoration: none; color: #333;
}
.notes { background: rgb(255, 255, 255); line-height: 24px; margin: 0px; width: 100%;
}
.notes a { color: rgb(170,170,170); font-size: 12px; line-height: 24px; margin: 0 0 0 13px; text-decoration: none;
}
#content {padding: 0 10px;}
@media (max-width: 580px) { }
@media only screen and (min-width: 35em) {
.ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Blog Concept 3 - Script Codes JS Codes

$(document).ready(function() {	// Initialize Masonry	$('#content').masonry({	columnWidth: 320,	itemSelector: '.item',	isFitWidth: true,	isAnimated: !Modernizr.csstransitions	}).imagesLoaded(function() {	$(this).masonry('reload');	});
});
Blog Concept 3 - Script Codes
Blog Concept 3 - Script Codes
Home Page Home
Developer Juan Gallardo
Username JGallardo
Uploaded August 18, 2022
Rating 3
Size 4,382 Kb
Views 42,504
Do you need developer help for Blog Concept 3?

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!

Juan Gallardo (JGallardo) Script Codes
Name
A Pen by Juan Gallardo
Travel Location Select
Blog Concept 2
Testimonial - Concept 1
BruxZir - Header with headroom
Template - iPad Air - Vertical
Foundation - Sample Header
International Sort
Fixed Header when scrolling
Demo - swipe.js
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!