Responsive Image Blog

Developer
Tiffany Rayside
Size
6,496 Kb
Views
12,144
  1. Responsive Image Blog Previews
  2. Responsive Image Blog HTML Codes
  3. Responsive Image Blog CSS Codes
  4. Responsive Image Blog JS Codes

How do I make an responsive image blog?

Playing around with JS / JQuery mostly. I guess this could be considered an Image Blog...it's responsive, ability to open images to full size upon click, there are multiple modals and sliding menu options.. What is a responsive image blog? How do you make a responsive image blog? This script and codes were developed by Tiffany Rayside on 07 January 2023, Saturday.

Responsive Image Blog Previews
IQ Test

Responsive Image Blog - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Image Blog</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> <html>	<head>	<title>Home</title>	<link rel="stylesheet" type="text/css" href="style.css">	<meta charset="utf-8"/>	<meta name="viewport" content="width=device-width, user-scalable=no">	</head>	<body>	<div class="wrapper">	<div class="nav">	<ul>	<li><a href="#">Home</a></li>	<li><a href="#" class='our_mission'>Mission</a></li>	<li><a href="#" class='new_items'>New</a></li>	<li><a href="#" class="contact_us">Contact</a></li>	<li><a href="#" class="login">Sign In</a></li>	</ul>	</div> <div class='sign_in'> <form> <input type="text" placeholder="Username" /> <input type="password" placeholder="Password" /> <input type="submit" value="Login" class="login-button" /> </form>	</div>	<div class='contact'>	<form>	<input type="text" placeholder="Full Name">	<input type="text" placeholder="Email Address">	<textarea placeholder="Please Enter Your Question Or Comments"></textarea>	<input type="submit" value="Send" class='contact-button'/>	</form>	</div>	<div class='new-items'>	<input type="submit" value="Close" class='close'/>	<p> New Items Displayed Here --- NO NEW ITEMS TODAY</p><br />	</div>	<div class='our-mission'>	<input type="submit" value="Close" class='mission-close'/>	<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.</p><br />	</div> <div class="header">	<h2>Responsive Image Blog w/Multiple Modals</h2>	<h3>Click On An Image To View Full Image Pop-Up</h3>	<h3>Click On 'Read More' To View Modals</h3>	<h3>Click On Menu Items Above Too</h3>	</div>	<div class="content">	<div class="first-column column">	<img src="http://placehold.it/300x300" alt='image' rel='demo-1'>	<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.</p>	<a href="#" class='extra modal-1'>Read More&hellip;</a>	<div class="modal modal-1">	<div class="overlay" id='one'></div>	<div class="modal__content mod_transition">	<div class="close_modal" id='one'>	<div class='entypo-cancel-circled' id='icon'></div></div>	<h1>Modal One</h1>	<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.</p>	<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.</p>	<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.</p>	<ul>	<li class="entypo-facebook-circled "></li>	<li class="entypo-gplus-circled"></li>	<li class="entypo-pinterest-circled"></li>	<li class="entypo-twitter-circled"></li>	</ul> <div class="byline">	<address class="author">By: <div id="author" href="/author/john-doe">John Doe</a></address>	on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>	</div>	</div>	</div>	</div>	<div class="second-column column">	<img src="http://placehold.it/400x500" alt='image' rel='demo-2'>	<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.</p>	<a href="#" class='extra modal-2'>Read More&hellip;</a>	<div class="modal modal-2">	<div class="overlay"></div>	<div class="modal__content mod_transition">	<div class="close_modal" id='two' href="#">	<div class='entypo-cancel-circled' id='icon'></div></div>	<h1>Modal Two</h1>	<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.</p>	<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.</p>	<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.</p>	<ul>	<li class="entypo-facebook-circled "></li>	<li class="entypo-gplus-circled"></li>	<li class="entypo-pinterest-circled"></li>	<li class="entypo-twitter-circled"></li>	</ul> <div class="byline">	<address class="author">By: <div id="author" href="/author/john-doe">John Doe</a></address>	on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>	</div>	</div>	</div>	</div>	<div class="last-column column">	<img src="http://placehold.it/600x600" alt='image' rel='demo-3'>	<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.</p>	<a href="#" class='extra modal-3'>Read More&hellip;</a>	<div class='modal modal-3'>	<div class="overlay"></div>	<div class="modal__content mod_transition">	<div class="close_modal" id='three' href="#">	<div class='entypo-cancel-circled' id='icon'></div></div>	<h1>Modal Three</h1>	<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.</p>	<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.</p>	<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.</p>	<ul>	<li class="entypo-facebook-circled "></li>	<li class="entypo-gplus-circled"></li>	<li class="entypo-pinterest-circled"></li>	<li class="entypo-twitter-circled"></li>	</ul> <div class="byline">	<address class="author">By: <div id="author" href="/author/john-doe">John Doe</a></address>	on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>	</div>	</div>	</div>	</div>	<div class="first-column column">	<img src="http://placehold.it/450x450" alt='image' rel='demo-4'>	<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.</p>	<a href="#" class='extra modal-4'>Read More&hellip;</a>	<div class="modal modal-4">	<div class="overlay"></div>	<div class="modal__content mod_transition">	<div class="close_modal" id='four' href="#">	<div class='entypo-cancel-circled' id='icon'></div></div>	<h1>Modal Four</h1>	<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.</p>	<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.</p>	<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.</p>	<ul>	<li class="entypo-facebook-circled "></li>	<li class="entypo-gplus-circled"></li>	<li class="entypo-pinterest-circled"></li>	<li class="entypo-twitter-circled"></li>	</ul> <div class="byline">	<address class="author">By: <div id="author" href="/author/john-doe">John Doe</a></address>	on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>	</div>	</div>	</div>	</div>	<div class="second-column column">	<img src="http://placehold.it/800x600" alt='image' rel='demo-5'>	<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.</p>	<a href="#" class='extra modal-5'>Read More&hellip;</a>	<div class="modal modal-5">	<div class="overlay"></div>	<div class="modal__content mod_transition">	<div class="close_modal" id='five' href="#">	<div class='entypo-cancel-circled' id='icon'></div></div>	<h1>Modal Five</h1>	<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.</p>	<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.</p>	<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.</p>	<ul>	<li class="entypo-facebook-circled "></li>	<li class="entypo-gplus-circled"></li>	<li class="entypo-pinterest-circled"></li>	<li class="entypo-twitter-circled"></li>	</ul> <div class="byline">	<address class="author">By: <div id="author" href="/author/john-doe">John Doe</a></address>	on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>	</div>	</div>	</div>	</div>	<div class="last-column column">	<img src="http://placehold.it/500x500" alt='image' rel='demo-6'>	<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.</p>	<a href="#" class='extra modal-6'>Read More&hellip;</a>	<div class="modal modal-6">	<div class="overlay"></div>	<div class="modal__content mod_transition">	<div class="close_modal" id='six' href="#">	<div class='entypo-cancel-circled'></div></div>	<h1>Modal Six</h1>	<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.</p>	<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.</p>	<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.</p>	<ul>	<li class="entypo-facebook-circled "></li>	<li class="entypo-gplus-circled"></li>	<li class="entypo-pinterest-circled"></li>	<li class="entypo-twitter-circled"></li>	</ul> <div class="byline">	<address class="author">By: <div id="author" href="/author/john-doe">John Doe</div></address>	on <time pubdate datetime="2014-08-21" title="August 21st, 2014">8/21/14</time>	</div>	</div>	</div>	</div>	<div id="large"></div>	<div id="background"></div>	</div>	</div>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Image Blog - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif; font-size:2em; padding:.2em;
}
* {	font-family: 'gotham', sans-serif;	box-sizing: border-box;
}
body {	width: 100%;	padding: 0;	margin: 0;	background: #67C5C2;
}
.wrapper {	width: 100%;	margin: 0 auto;
}
.wrapper .nav {	width: 100%;	height: auto;	margin: 0 auto;	background: #3D2117;	text-align: center;	padding: 10px;
}
.wrapper .nav ul {	margin: 0;	padding: 0;
}
.wrapper .nav ul li {	display: inline;
}
.wrapper .nav ul li a {	text-decoration: none;	padding: .5em 1.5em .5em 1.5em;	font-family: 'Open Sans', sans-serif;	font-size: 1em;	color: #FFF;	border-radius: .15em;	transition: all .1s ease;	box-sizing: border-box;	display: inline-block;	-webkit-border-radius: .2em; border-radius: .2em;
}
.wrapper .nav ul li a:hover {	background-color: #FEFCE8;	color: #C84127;
}
.wrapper .nav ul li .login {	color: #81a90b;	transition: all .1s ease;
}
.wrapper .nav ul li .login:hover {	background-color: #81a90b;	color: #ffffff;
}
.wrapper .content {	width: 80%;	height: auto;	line-height: 1.6em;	margin: 0 auto;	font-family: 'Open Sans', sans-serif;	font-size: 1em;	text-align: center;	padding: 0 0 20px 0;
}
.wrapper .content .column {	width: 31%;	height: auto;	display: inline-block;	padding: 0px;	box-sizing: border-box;	background-color: #FEFCE8;	border: thin solid #67C5C2;	margin: 0 auto;	margin: 2% 0 0 0;
}
.wrapper .content .column p {	margin: 0;	padding: 0 25px;	text-align: center;
}
.wrapper .content .column:hover{	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
} .content .column a {	text-decoration: none;	padding: 2px 10px;	font-size: 1em;	color: #383838;	display: inline-block;	margin: 10px 0 15px 0;	border-radius: .2em;	box-sizing: border-box;	text-align: center;	font-family: 'Open Sans', sans-serif;	transition: all .1s ease;
}
.content .column a:hover {	background-color: #C84127;	color: #fff;	box-shadow:1px 1px 1px 1px rgba(0,0,0,0.4);
}
.wrapper .content .column img {	width: 100%;	height: 150px;	padding: 0 0 15px 0;	-webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
.wrapper .content .second-column {	margin: 0 1.5%;
}
.header {	width: 100%;	height: 200px;	-webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
.header h2{	padding: 0;	margin: 0;	font-family: 'Open Sans', sans-serif;	font-weight: 200;	line-height:2.5em;	text-align: center;	color: #f7f7f7;	font-size: 2.2em;
}
.header h3 {	padding: 0;	margin: 0;	font-family: 'Open Sans', sans-serif;	font-weight: 200;	line-height: 1.5em;	text-align: center;	color: #f7f7f7;	font-size: 1.2em;
}
.overlay { background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; width: 100%; height:100%;
}
.modal { visibility: hidden;
}
.modal__content{ background: #FEFCE8; border: 1em solid #3D2117; border-radius:2%; width: 32rem; position: absolute; left: 50%; margin-left: -16rem; top: 6rem; min-height: 32rem; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.4);
}
.modal__content h1 { margin: 0; padding: 0; line-height: 5em; text-align: center; display: block;
}
.close_modal { position: absolute; right:5%; top: 5%; text-decoration: none; font-size:1.2em; cursor:pointer; color:#3D2117;
}
.entypo-cancel-circled:hover{	color:#C84127;	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.show_modal { visibility: visible;
}
.mod_transition {	-webkit-transform: scale(0.7);	-moz-transform: scale(0.7);	-ms-transform: scale(0.7);	transform: scale(0.7);	opacity: 0;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;
}
.show_modal .mod_transition {	-webkit-transform: scale(1);	-moz-transform: scale(1);	-ms-transform: scale(1);	transform: scale(1);	opacity: 1;
}
.modal__content ul{	margin:5% auto;	padding:1em;
}
.modal__content li{	display:inline-block;	color:#67C5C2;	cursor:pointer;	font-size:1.5em;
}
.modal__content li[class*=entypo-]:hover{	color:#C84127;	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.byline{	line-height:1.5;
}
#author{	text-decoration:none;	cursor:pointer;
}
#author:hover{	text-decoration:underline;	text-decoration-style:dashed;	-moz-text-decoration-style:dashed;
}
#large { display: none;	position: absolute;	background: transparent;	width:50%;	height:65%;	text-align:center;	z-index: 10;	color:#C84127;
}
#large img{	max-width:100%;
}
#background{ display: none; position: fixed; height: 100%; width: 100%; top: 0; left: 0; background:rgb(0,0,0); z-index: 1;
}
.sign_in { background: #FEFCE8; color: white; margin: 0 auto; width: 100%; height: 12em; position: relative;
}
.sign_in form { width:50%; margin-left:30%; padding:1.5em;
}
.sign_in form input[type=text], .sign_in form input[type=password], .sign_in form input[type=submit] { width:60%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family: 'Roboto';
}
.sign_in form input[type=text], .sign_in form input[type=password] { height: 2.5em; margin-bottom:.2em; padding-left: .5em; background: #CFA780; border: none; color:#81a90b; outline: none;
}
.sign_in form input.login-button { border: none; display: block; background: #67C5C2; height: 3em; width: 7em; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-bottom:5%; color: #81a90b; transition: all .1s ease; font-family: 'Roboto';
}
.sign_in form input.login-button:hover { background-color: #81a90b; color: #ffffff;
}
.sign_in form input::-webkit-input-placeholder { color: #fff;
}
.sign_in form input:-moz-placeholder { color: #fff;
}
.sign_in form input::-moz-placeholder { color: #fff;
}
.sign_in form input:-ms-input-placeholder { color: #fff;
}
.contact { background: #FEFCE8; color: white; margin: 0 auto; width: 100%; height: 17em; position: relative;
}
.contact form { width:50%; margin-left:30%; padding:1.5em;
}
.contact form textarea{ font-family: 'Roboto'; width:60%; height:40%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #CFA780; border: none; color:#fff;
}
.contact form input[type=text], .contact form input[type=submit] { font-family: 'Roboto'; width:60%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
.contact form input[type=text]{ height: 2.5em; margin-bottom:.2em; padding-left: .5em; background: #CFA780; border: none; color:#81a90b; outline: none; font-family: 'Roboto';
}
.contact form input.contact-button { border: none; display: block; background: #67C5C2; height: 3em; width: 7em; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-bottom:5%; color: #81a90b; transition: all .1s ease; font-family: 'Roboto';
}
.contact form input.contact-button:hover {	background-color: #81a90b;	color: #ffffff;
}
.contact form input::-webkit-input-placeholder { color: #fff;
}
.contact form input:-moz-placeholder { color: #fff;
}
.contact form input::-moz-placeholder { color: #fff;
}
.contact form input:-ms-input-placeholder { color: #fff;
}
.new-items{	margin: 0 auto;	width: 100%;	height: 5.5em;	position: relative;	background:#FEFCE8;	text-align:center;	font-family: 'Roboto';
}
.new-items p{	width:50%;	margin:0 30%;	padding:1em;
}
.new-items .close{ border: none; display: block; float:right; margin-right:5%; margin-top:1%; background: #67C5C2; height: 3em; width: 7em; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color: #81a90b; transition: all .1s ease;
}
.new-items .close:hover{	background-color: #81a90b;	color: #ffffff;
}
.our-mission{	margin: 0 auto;	width: 100%;	height: 6.7em;	position: relative;	background:#FEFCE8;	text-align:center;	font-family: 'Roboto';
}
.our-mission p{	width:50%;	margin:0 30%;	padding:1em;
}
.our-mission .mission-close{ border: none; display: block; float:right; margin-right:5%; margin-top:3%; background: #67C5C2; height: 3em; width: 7em; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color: #81a90b; transition: all .1s ease;
}
.our-mission .mission-close:hover{	background-color: #81a90b;	color: #ffffff;
}
@media (max-width : 48rem) { .modal__content {	top: 0;	left: 0; bottom: 0; width: 100%; margin: 0; } .close_modal { display: block;	right:0; } .mod_transition { -webkit-transform: translateX(-0) translateY(150%); -moz-transform: translateX(-0) translateY(150%); -ms-transform: translateX(-0) translateY(150%); transform: translateX(-0) translateY(150%); }
}
/*	Media for screen size = 1060px
*/
@media only screen and (max-width:1060px) {	.wrapper .nav ul li a {	margin: 0 5px;	}	.wrapper .content {	width: auto;	margin: 0 auto;	height: auto;	display: block;	float: left;	padding: 20px 20px;	}	.wrapper .content .column {	width: 48.5%;	box-sizing: border-box;	height: auto;	display: block;	float: left;	margin: 1% .7% 0 .8%;	text-align: center;	}	.wrapper .content .column a {	padding: 2px 12px;	}	.wrapper .content .column p {	margin: 0;	padding: 0 25px;	}	.wrapper .content .last-column img {	width: 100%;	border-radius: .2em;	}	.header h2, .header h3{	line-height:2em;	}
}
@media only screen and (max-width:980px){
.contact form{	width:95%;	}	.sign_in form{	width:95%;	}	.header h2, .header h3{	line-height:2em;	}
}
@media only screen and (max-width:850px){	.contact form{	width:90%;	}	.sign_in form{	width:90%;	}	.header h2, .header h3{	line-height:1.5em;	}
}
/*	Media for screen size = 640px
*/
@media only screen and (max-width:645px) {	.wrapper .nav {	padding: 8px 0;	border-bottom: thin solid #efefef;	}	.wrapper .nav ul li a {	display: block;	padding: 8px 0;	border-radius: 0;	margin: 0 0;	}	.wrapper .nav ul li .login {	border: 0;	padding-left: 0;	background: none;	}	.wrapper .content {	width: auto;	height: auto;	display: block;	float: left;	margin: 0 auto;	}	.wrapper .content .column {	width: 100%;	box-sizing: border-box;	height: auto;	display: block;	float: left;	padding: 0 0 8px 0;	margin-top: 1%;	}	.wrapper .content .column p {	padding: 0 20px;	}	.wrapper .content .first-column {	margin: 5% 0 0 0;	}	.wrapper .content .second-column {	margin: 5% 0 0 0;	}	.wrapper .content .last-column {	margin: 5% 0 0 0;	}	.wrapper .content .column a {	width: 100%;	text-align: center;	text-decoration: none;	padding: 5px 0;	font-family: 'Open Sans', sans-serif;	font-size: 11px;	margin: 8px 0 0 0;	border-radius: 0;	transition: all .1s ease;	}	.header {	display: none;	}	.new-items{	height:8em;	}	.our-mission{	height:10em;	}	.contact form{	width:95%;	}	.sign_in form{	width:95%;	}
}

Responsive Image Blog - Script Codes JS Codes

/*LIfe's Not Complete Without Art (Expand Your Editor > ASCII Is Not Responsive ;) ___ _ _ _ ____ | | |\/| |___ ... | | | | |___ ,' '. ___ ____ ; ; | | | | | | |__| | | _ _ _ ____ ____ _ _ | _, ,_ | | | | | | |__/ |_/ '´ | | `' |_|_| |__| | \ | \_ | | _ _ | | .|_|_,' | ,--. | | | | : | | | `|`'`-._| : | | | | | : | | | | | : | | | | | .-------. : | | | | | ,| _O | : | | | | | ||_,' | : | | | | | `| TMR | ;...: | | | | | | /.--. \ | | |` | | | |'--' | '-' `--' '-------' '-----'
*/
//open modal that matches the modal class number (modal-1, -2, etc.)associated with this trigger.
$('.extra').click(function() { var m = $(this)[0], classes = m.className.split(/\s+/); for(var i = 0; i < classes.length; i++) { if(classes[i].match(/modal-/)) { var modalClass = classes[i]; $('.modal.' + modalClass).toggleClass('show_modal'); } }
});
//close open modal when the modal's 'close' button is clicked
$('.close_modal').click(function() { $(this).closest('.modal').toggleClass('show_modal');
});
//or, close the open modal if overlay is clicked
$( '.overlay' ).on( 'click', function() { $(this).closest('.modal').toggleClass('show_modal');
});
//Image enlarging jQuery.fn.center = function () { //position image	this.css("top","25%");	this.css("margin-left","15%"); return this; } $(document).ready(function() { $("img").click(function(e){ //show enlarged image on click $("#background").css({"opacity" : ".95"}) .fadeIn("slow"); $("#large").html("<img src='"+$(this).attr("src")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"") .center() .fadeIn("slow"); return false; }); $(document).keypress(function(e){ //fade out image on background/image click if(e.keyCode==27){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); } }); $("#background").click(function(){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); }); $("#large").click(function(){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); }); }); //menu slide down options
$(document).ready(function(){
$('.sign_in').hide();
$('.contact').hide();
$('.new-items').hide();
$('.our-mission').hide();
$('.login').click(function(){	$('.sign_in').slideToggle('slow'); if( $('.contact').is( ':visible' ) ) $('.contact').slideUp('slow'); if( $('.new-items').is( ':visible' ) ) $('.new-items').slideUp('slow'); if( $('.our-mission').is( ':visible' ) ) $('.our-mission').slideUp('slow');
});	$('.login-button').click(function(){	$('.sign_in').slideToggle('slow');
});
$('.contact_us').click(function(){	$('.contact').slideToggle('slow'); if( $('.sign_in').is( ':visible' ) ) $('.sign_in').slideUp('slow'); if( $('.new-items').is( ':visible' ) ) $('.new-items').slideUp('slow'); if( $('.our-mission').is( ':visible' ) ) $('.our-mission').slideUp('slow');
});	$('.contact-button').click(function(){	$('.contact').slideToggle('slow');
});
$('.new_items').click(function(){	$('.new-items').slideToggle('slow'); if( $('.sign_in').is( ':visible' ) ) $('.sign_in').slideUp('slow'); if( $('.contact').is( ':visible' ) ) $('.contact').slideUp('slow'); if( $('.our-mission').is( ':visible' ) ) $('.our-mission').slideUp('slow');
});	$('.close').click(function(){	$('.new-items').slideToggle('slow');
});
$('.our_mission').click(function(){	$('.our-mission').slideToggle('slow'); if( $('.sign_in').is( ':visible' ) ) $('.sign_in').slideUp('slow'); if( $('.new-items').is( ':visible' ) ) $('.new-items').slideUp('slow'); if( $('.contact').is( ':visible' ) ) $('.contact').slideUp('slow');
});	$('.mission-close').click(function(){	$('.our-mission').slideToggle('slow');
});
});
Responsive Image Blog - Script Codes
Responsive Image Blog - Script Codes
Home Page Home
Developer Tiffany Rayside
Username tmrDevelops
Uploaded January 07, 2023
Rating 3.5
Size 6,496 Kb
Views 12,144
Do you need developer help for Responsive Image Blog?

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!

Tiffany Rayside (tmrDevelops) Script Codes
Name
Fav Wave
Gradiance 2
Jiggle
Hyperstellar
Shattered
Legions
InterCosmic
The Net
Words of the Rainbow
Retro Fractal
Create amazing Facebook ads 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!