Blog Concept - Large photos

Developer
Kristen Zirkler
Size
6,948 Kb
Views
16,192
  1. Blog Concept - Large photos Previews
  2. Blog Concept - Large photos HTML Codes
  3. Blog Concept - Large photos CSS Codes
  4. Blog Concept - Large photos JS Codes

How do I make an blog concept - large photos?

What is a blog concept - large photos? How do you make a blog concept - large photos? This script and codes were developed by Kristen Zirkler on 16 October 2022, Sunday.

Blog Concept - Large photos Previews
IQ Test

Blog Concept - Large photos - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blog Concept - Large photos</title> <link href='https://fonts.googleapis.com/css?family=Special+Elite|Raleway' rel='stylesheet' type='text/css'><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #000; color: #fff; position: relative; font-family: 'Special Elite', Arial, serif; background-attachment: fixed;
}
a { text-decoration: none; color: #fff;
}
.button { background: #000; display: block; padding: 1.4em 1.7em; font-size: .8em; text-align: center;
}
.button:hover { background: #c19b00;
}
.content { margin-bottom: 100px;
}
.side-nav { cursor: pointer; background: rgba(0, 0, 0, 0.7); color: #fff; position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2em; z-index: 10;
}
.side-nav .logo { padding: 10px;
}
.side-nav .logo img, .side-nav .logo i { line-height: 60px; float: left;
}
.side-nav .logo img { height: 90px; margin-top: -30px;
}
.side-nav .logo i { margin-left: 10px; opacity: .5;
}
.side-nav .logo:hover i { opacity: 1;
}
.side-nav .logo, .side-nav .menu { float: left; z-index: 2; position: relative;
}
.side-nav .links { clear: both;
}
.side-nav .links .about, .side-nav .links .posts, .side-nav .links .categories { width: 50%; margin: -30px 0px; float: left;
}
.side-nav .links .about { background: #fff; color: #000; padding-top: 20px;
}
.side-nav .links .about a { padding: .5em; margin: 1em 0 0;
}
.side-nav .links .about p { padding: 15px;
}
.side-nav .links .about, .side-nav .links ul { font-size: .9em;
}
.side-nav .links h3 { padding: 20px 20px 0;
}
.side-nav .links ul { padding: 20px;
}
.side-nav .links ul a { display: block; padding: .3em 0; font-family: 'Raleway', sans-serif;
}
.side-nav .links img { width: 100%; margin: 10px 0 0;
}
.side-nav .links p { line-height: 1.4em;
}
.side-nav .links .photo { height: 200px; overflow: hidden;
}
.social { float: right;
}
.social a { line-height: 80px; font-size: 1.3em; opacity: .5; display: inline-block; padding-right: 1em;
}
.social a:hover { opacity: 1;
}
.donate { position: fixed; top: 10px; right: 10px; z-index: 9;
}
.next { position: fixed; z-index: 8; top: 50%; right: 0; background: rgba(0, 0, 0, 0.5); padding: 2px; text-align: center; margin-top: -50px; font-size: .6em;
}
.next em { display: block; opacity: .5; text-transform: uppercase; letter-spacing: 2px;
}
.next img { opacity: .8; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%);
}
.next:hover { background: #000;
}
.next:hover img { opacity: 1; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%);
}
.featured-story { margin-bottom: 80px;
}
.featured-story .thumb { display: block; text-align: center; position: relative;
}
.featured-story .thumb img { width: 100%;
}
.featured-story .thumb:after { content: '\f144'; font-family: 'FontAwesome'; display: block; color: rgba(255, 255, 255, 0.7); font-size: 2em; position: absolute; bottom: 20px; left: 20px; z-index: 2;
}
.featured-story .title { position: relative; z-index: 3; margin-left: 10vw; width: 500px; background: #fff; color: #000;
}
.featured-story h1 { font-size: 2em; margin: 30px 20px 10px;
}
.featured-story p { font-size: .8em; line-height: 1.4em; margin: 0 20px 30px;
}
.featured-story .bg { position: fixed; background-repeat: no-repeat; background-size: cover; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .5;
}
.featured-story .overlay { position: absolute; top: 0; left: 0; z-index: 2; opacity: .5;
}
.links { display: none;
}
.open { overflow: hidden;
}
.open .side-nav { top: 70px; bottom: 0; background: rgba(0, 0, 0, 0.85);
}
.open .side-nav .logo, .open .side-nav .social a { font-size: 1.6em;
}
.open .side-nav .logo img { height: 120px;
}
.open .links { display: block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="content"> <div class="featured-story"> <div class="title"> <a class="thumb" href="#"><img src="http://lorempixel.com/500/250/nature/3" width="500" height="250" /></a> <h1>The Inca Trail - September 5th, 2014</h1> <p>Human beings, who are almost unique in having the ability to learn from the experience of others, are also remarkable for their apparent disinclination to do so. Let us think the unthinkable, let us do the undoable, let us prepare to grapple with the ineffable itself, and see if we may not eff it after all.<!-- A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.--></p> <a class="button" href="#">Watch Now <i class="fa fa-play-circle"></i></a> </div> <div class="bg" style="background-image: url(http://lorempixel.com/500/500/nature/3)">&nbsp;</div> <img class="overlay" src="http://www.kristenzirkler.com/wp-content/uploads/2014/08/grunge-overlay.png"> </div> <a href="#" class="next"><span><img src="http://lorempixel.com/80/60/nature/8" width="80" height="60" /><em>Next</em></span></a>
</div>
<div class="side-nav" id="nav"> <a class="logo toggle"> <img src="http://www.kristenzirkler.com/wp-content/uploads/2014/08/logo-500.png"/> <i id="navicon" class="fa fa-bars"></i> </a> <div class="social toggle"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-youtube"></i></a> <a href="#"><i class="fa fa-gift"></i></a> <a href="#"><i class="fa fa-envelope"></i></a> </div> <div class="links"> <div class="about"> <p>My name is Taylor and I’d like you to come with me on an adventure. The day I turned 18, I was on a British Airways flight bound for London. Even before I stepped off the plane, the idea of a round-the-world <!--trip by myself had taken seed. Growing up reading Tintin and watching Indiana Jones had left me foaming at the mouth as soon as I figured out how easy it was to go to all these amazing places and see these beautiful things. Since then, I’ve been around the world multiple times, toured with metal bands as a Guitar Tech, built racecars and motorcycles-->... <a href="#" class="button">Read More</a></p> <div class="photo"> <img src="http://www.kristenzirkler.com/wp-content/uploads/2014/08/taylor-photo.jpg"/> </div> </div> <div class="posts"> <h3>Recent Posts</h3> <ul> <li><a href="#">The Inca Trail - September 5th, 2014</a></li> <li><a href="#">Cambodia on a Shoestring - August 13th, 2014</a></li> <li><a href="#">Cambodia - August 10th, 2014</a></li> <li><a href="#">Cambodia - August 10th, 2014</a></li> <li><a href="#">Cambodia - August 10th, 2014</a></li> </ul> </div> <!--div class="categories"> <h3>Categories</h3> <a href="#">Asia</a> <a href="#">Africa</a> </div--> </div>
</div>
<a class="button donate" href="#"><i class="fa fa-gift"></i> Donate</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blog Concept - Large photos - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #000; color: #fff; position: relative; font-family: 'Special Elite', Arial, serif; background-attachment: fixed;
}
a { text-decoration: none; color: #fff;
}
.button { background: #000; display: block; padding: 1.4em 1.7em; font-size: .8em; text-align: center;
}
.button:hover { background: #c19b00;
}
.content { margin-bottom: 100px;
}
.side-nav { cursor: pointer; background: rgba(0, 0, 0, 0.7); color: #fff; position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2em; z-index: 10;
}
.side-nav .logo { padding: 10px;
}
.side-nav .logo img, .side-nav .logo i { line-height: 60px; float: left;
}
.side-nav .logo img { height: 90px; margin-top: -30px;
}
.side-nav .logo i { margin-left: 10px; opacity: .5;
}
.side-nav .logo:hover i { opacity: 1;
}
.side-nav .logo, .side-nav .menu { float: left; z-index: 2; position: relative;
}
.side-nav .links { clear: both;
}
.side-nav .links .about, .side-nav .links .posts, .side-nav .links .categories { width: 50%; margin: -30px 0px; float: left;
}
.side-nav .links .about { background: #fff; color: #000; padding-top: 20px;
}
.side-nav .links .about a { padding: .5em; margin: 1em 0 0;
}
.side-nav .links .about p { padding: 15px;
}
.side-nav .links .about, .side-nav .links ul { font-size: .9em;
}
.side-nav .links h3 { padding: 20px 20px 0;
}
.side-nav .links ul { padding: 20px;
}
.side-nav .links ul a { display: block; padding: .3em 0; font-family: 'Raleway', sans-serif;
}
.side-nav .links img { width: 100%; margin: 10px 0 0;
}
.side-nav .links p { line-height: 1.4em;
}
.side-nav .links .photo { height: 200px; overflow: hidden;
}
.social { float: right;
}
.social a { line-height: 80px; font-size: 1.3em; opacity: .5; display: inline-block; padding-right: 1em;
}
.social a:hover { opacity: 1;
}
.donate { position: fixed; top: 10px; right: 10px; z-index: 9;
}
.next { position: fixed; z-index: 8; top: 50%; right: 0; background: rgba(0, 0, 0, 0.5); padding: 2px; text-align: center; margin-top: -50px; font-size: .6em;
}
.next em { display: block; opacity: .5; text-transform: uppercase; letter-spacing: 2px;
}
.next img { opacity: .8; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%);
}
.next:hover { background: #000;
}
.next:hover img { opacity: 1; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%);
}
.featured-story { margin-bottom: 80px;
}
.featured-story .thumb { display: block; text-align: center; position: relative;
}
.featured-story .thumb img { width: 100%;
}
.featured-story .thumb:after { content: '\f144'; font-family: 'FontAwesome'; display: block; color: rgba(255, 255, 255, 0.7); font-size: 2em; position: absolute; bottom: 20px; left: 20px; z-index: 2;
}
.featured-story .title { position: relative; z-index: 3; margin-left: 10vw; width: 500px; background: #fff; color: #000;
}
.featured-story h1 { font-size: 2em; margin: 30px 20px 10px;
}
.featured-story p { font-size: .8em; line-height: 1.4em; margin: 0 20px 30px;
}
.featured-story .bg { position: fixed; background-repeat: no-repeat; background-size: cover; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .5;
}
.featured-story .overlay { position: absolute; top: 0; left: 0; z-index: 2; opacity: .5;
}
.links { display: none;
}
.open { overflow: hidden;
}
.open .side-nav { top: 70px; bottom: 0; background: rgba(0, 0, 0, 0.85);
}
.open .side-nav .logo, .open .side-nav .social a { font-size: 1.6em;
}
.open .side-nav .logo img { height: 120px;
}
.open .links { display: block;
}

Blog Concept - Large photos - Script Codes JS Codes

$('.side-nav').click(function() { $('body').toggleClass('open'); $('#navicon').toggleClass('fa-bars').toggleClass('fa-times');
});
$('.next').click(function() { //Update current story pics $('.bg').css('background-image','url(http://lorempixel.com/500/500/nature/8)'); $('.thumb img').attr('src','http://lorempixel.com/320/180/nature/8').animate('slow'); //Update text $('.featured-story h1').text('Cambodia on a Shoestring - August 13th, 2014'); $('.featured-story p').text('A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.'); //Update next link $('.next img').attr('src','http://lorempixel.com/80/60/nature/7');
});
Blog Concept - Large photos - Script Codes
Blog Concept - Large photos - Script Codes
Home Page Home
Developer Kristen Zirkler
Username kristenzirkler
Uploaded October 16, 2022
Rating 3
Size 6,948 Kb
Views 16,192
Do you need developer help for Blog Concept - Large photos?

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!

Kristen Zirkler (kristenzirkler) Script Codes
Name
CSS Loader
Map Animation
Skill Grid
Full Page Intro Slide with Content
HTML Mini Charts
Card Slide - CSS reveal
Tablet Navigation - Jobing.com
Blog Concept - Video
Simple - Blurred BG
Email Marketing Mock
Create amazing SEO content 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!