Blog

Developer
MOHIM
Size
5,738 Kb
Views
10,120
  1. Blog Previews
  2. Blog HTML Codes
  3. Blog CSS Codes

How do I make an blog?

What is a blog? How do you make a blog? This script and codes were developed by MOHIM on 22 November 2022, Tuesday.

Blog Previews
IQ Test

Blog - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>blog</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <title>Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<!-- start header section -->
<div class="hader"> <nav class="navbar navbar-default navbar-fixed-top style_nav" data-spy="affix" data-offset-top="10" data-offset-bottom="200"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand style_brand" href="#"><img class="img-responsive" src="http://commonpixel.com/themes/edgar/images/logo.png"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav pull-right"> <li class="dropdown"><a href="#contact_us">HOME<i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">HOME ONE</a> <a href="#">HOME TWO</a> </div> </li> <li><a href="#">PAGES</a></li> <li class="dropdown"><a href="#">ELEMENTS<i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> </div> </li> <li><a href="#">PORTFOLIO</a></li> <li class="dropdown"><a href="#">CONTACT US<i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> <a href="#">SERVICE</a> <a href="#">SINGLE SERVICE</a> </div> </li> <li><a href="#">BLOG</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
</div>
<!-- end header section -->
<!--======================================================================================================= -->
<div class="pageTitle parallax" style="background-image: url()">	<div class="inner title">	<div class="container">	<h1>Blog</h1>	</div>	</div>	</div>
<!-- start blog section -->
<section class="sectionBase sectionTop container"> <div class="row"> <div class="col-md-4 wow fadeInUp"> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_02.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Great results for our customers</h5> </a> <p class="author">By Jane Smith</p> </div> </div> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_small_03.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Great results for our customers</h5> </a> <p class="author">By Jane Smith</p> </div> </div> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_01.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Great results for our customers</h5> </a> <p class="author">By Jane Smith</p> </div> </div> <!-- end item 1 --> </div> <div class="col-md-4 wow fadeInUp"> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_small_01.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Hello, world!</h5> </a> <p class="author">By William Styron</p> </div> </div> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_04.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Hello, world!</h5> </a> <p class="author">By William Styron</p> </div> </div> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_03.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Hello, world!</h5> </a> <p class="author">By William Styron</p> </div> </div> <!-- end item 4 --> </div> <div class="col-md-4 wow fadeInUp"> <!-- end item 2 --> <div class="article quote"> <a href="#"> <div class="info"> <h5>Classical design is a mirror of the human mind. It's how we see the world.</h5> <i class="fa fa-quote-right icon"></i> <p class="author">By Robert McKee</p> </div> </a> </div> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_small_02.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Hello, world!</h5> </a> <p class="author">By William Styron</p> </div> </div> <div class="article quote"> <a href="#"> <div class="info"> <h5>Classical design is a mirror of the human mind. It's how we see the world.</h5> <i class="fa fa-quote-right icon"></i> <p class="author">By Robert McKee</p> </div> </a> </div> <div class="article"> <div class="photo"><img src="http://commonpixel.com/themes/edgar/images/examples/work_06.jpg" alt="Article image title"></div> <div class="info"> <p class="cat">Dec 23, 2016 | Business</p> <a href="#"> <h5>Hello, world!</h5> </a> <p class="author">By William Styron</p> </div> </div> <!-- end item 3 --> </div> </div>	</section>
<!-- end blog section -->
<footer class="mastFooter"> <div class="inner"> <!-- START banner --> <div class="banner"> <div class="container"> <div class="row"> <div class="col-sm-8"> <h3>Take control of your ideas</h3> <p>Drop us a line today and we’ll get back to you with a custom business proposition</p> </div> <div class="col-sm-4 rightAlign xsAlignReset"> <a href="#" class="button primary large">Order now</a> </div> </div> </div> </div> <!-- END banner --> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="logo"> <a href="index.html"><img src="http://commonpixel.com/themes/edgar/images/logo.png" data-rjs="2" alt="My Company name"></a> </div> <p class="copyright">© Edgar 2016. All rights reserved.</p> </div> <div class="col-sm-3"> <h6>Links</h6> <ul class="links"> <li><a href="about.html">About us</a></li> <li><a href="blog.html">Latest news</a></li> <li><a href="projects.html">Our projects</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> <div class="col-sm-3"> <h6>Find us here</h6> <ul class="contact"> <li> <i class="fa fa-envelope"></i> [email protected] </li> <li> <i class="fa fa-phone"></i> +5 6800 377 887 </li> <li> <i class="fa fa-map-marker"></i> 23 Park Lane Terrace, SW03N, London, UK </li> </ul> </div> <div class="col-sm-3"> <h6>Social</h6> <ul class="social"> <li> <a href="#"><i class="fa fa-facebook"></i></a> </li> <li> <a href="#"><i class="fa fa-twitter"></i></a> </li> <li> <a href="#"><i class="fa fa-pinterest"></i></a> </li> <li> <a href="#"><i class="fa fa-linkedin"></i></a> </li> <li> <a href="#"><i class="fa fa-google-plus"></i></a> </li> </ul> </div> </div> </div> </div>
</footer>
<!-- -->
<!-- End footer section -->
</body>
</html>

Blog - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.hader { position: relative; width: 100%;
}
.hader .style_nav { background-color: transparent; border-bottom: 1px solid white;
}
.hader .style_nav .style_brand { padding-top: 23px;
}
/* Shutter Out Horizontal */
.navbar-default .navbar-nav > li > a { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; background-color: transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; border-bottom: 1px solid transparent; color: white!important; font-family: 'Montserrat', sans-serif; font-size: 0.8em; letter-spacing: 2px;
}
.navbar-default .navbar-nav > li > a:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; r-bottom: 2px solid #000; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; color: #000; transition: ease 0.5s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active { color: #000; transition: ease 0.5s;
}
.navbar-default .navbar-nav > li > a:hover:before,
.navbar-default .navbar-nav > li > a:focus:before,
.navbar-default .navbar-nav > li > a:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); transition: ease 0.5s;
}
.hader .nav.navbar-nav.pull-right { margin-top: 2%;
}
.video-part-content .carousel-caption h1 { font-size: 50px;
}
.video-part-content .carousel-caption p { font-size: 20px;
}
.affix { width: 100%; transition: ease 0.5s; background: rgba(11, 25, 45, 0.93)!important; opacity: 0.8; border-bottom: 2px solid #5775bd !important;
}
.navbar-default.affix .navbar-nav > li > a { color: #333;
}
.btn-info { background: #5674bc; border: 1px solid #5674bc; border-radius: 0px; transition: ease 0.5s;
}
.btn-info { color: #5674bc; transition: ease 0.5s;
}
.full-width { width: 100%; float: left;
}
.video-part-content .btn-info:hover { color: #fff; border: 1px solid #fff; transition: ease 0.5s; background: transparent;
}
.navbar-default { background-color: transparent; border: none;
}
.navbar-default .navbar-nav > li > a { color: #fff;
}
.navbar-nav > li > a { padding-bottom: 6px; padding-top: 15px;
}
.btn-info { background: #5674bc none repeat scroll 0 0; border: 1px solid #5674bc; border-radius: 0; color: #fff; transition: all 0.5s ease 0s;
}
@-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-delay: 1s; animation-duration: 2s;
}
.dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
li.dropdown { display: inline-block;
}
.dropdown-content { display: none; position: absolute; background-color: #132134; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1;
}
.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: right; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 300;
}
.dropdown-content a:hover { color: #FFA726; text-decoration: none; padding: 12px 16px; text-decoration: none; display: block; text-align: right; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 300; background-color: #132134!important;
}
.dropdown-content a:hover { background-color: #f1f1f1
}
.dropdown:hover .dropdown-content { display: block;
}
/* */
/* */
/* start blog style */
.parallax { color: #fff; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; position: relative;
}
.pageTitle .inner.title { padding: 150px 0 60px 0;
}
.parallax .inner { padding-top: 60px; padding-bottom: 60px; background: rgba(11, 25, 45, 0.8);
}
.pageTitle .inner.title h1 { font-size: 3em; position: relative; color: #fff; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1.4;
}
.pageTitle .inner.title h1:after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 1px; background: #ffa726;
}
/* */
/* */
/* end blog css*/
.sectionTitle.center { text-align: center;
}
.article { margin-bottom: 30px; border-bottom: 3px solid transparent; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
}
.article .photo { overflow: hidden; position: relative; z-index: 10;
}
.article img { display: block; max-width: 100%; width: 100%; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
}
.article .info { background: #f3f8fa; padding: 25px;
}
.article p.cat { text-transform: uppercase; margin-bottom: 15px; font-size: .8em;
}
.article .info p { color: #9ca0b1; font-size: 0.9em;
}
.article .info h5 { margin-bottom: 15px; font-size: 1.2em; color: inherit; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.article a { color: #23344b; display: block;
}
.article p.author { margin-bottom: 0;
}
.article.quote { text-align: center; position: relative; padding: 27px; background: #ffa726;
}
.article:hover { border-bottom: 3px solid #ffa726;
}
.article.quote:hover { border-bottom: 3px solid #23344b; text-decoration: none;
}
.article.quote:hover a { text-decoration: none;
}
.article.quote .info { padding: 0; background: none;
}
.photo { position: relative; overflow: hidden;
}
.photo img { max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.article:hover img { -moz-transform: scale(1.7); -webkit-transform: scale(1.7); transform: scale(1.7);
}
.sectionBase { padding-top: 70px; padding-bottom: 70px;
}
.parallax { color: #fff; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; position: relative;
}
.parallax .inner { padding-top: 60px; padding-bottom: 60px; background: rgba(11, 25, 45, 0.8);
}
.pricingTop { position: relative; margin-top: -210px;
}
.pricing .item { padding: 2em 2.5em; text-align: left; background: #f3f8fa; border-top: 3px solid #ffa726; margin-bottom: 30px;
}
.pricing .title { font-size: 1em; margin: 10px 0 20px 0; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #23344b; line-height: 1.4;
}
.pricing .price { font-size: 2em; font-weight: bold; padding: 0.5em 0 0.75em; border-top: 1px solid #dae4e8; margin: 0;
}
.pricing .info { padding: 0 0 1em 0; color: #9CA0A9; border-bottom: 1px solid #dae4e8;
}
.pricing .features { margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: right;
}
.pricing .button { display: block; width: 100%; transition: 2s;
}
.pricing .button:hover { display: block; width: 100%; background-color: #ffa726; ;
}
.button.dark { background: #0b192d; color: #fff;
}
.pricing .best { background: #ffa726; color: #fff; padding: 3px 10px; font-weight: 300; display: inline-block; text-transform: uppercase; font-size: .75em; border-radius: 2px; position: absolute; left: 47px; top: 2px;
}
button { cursor: pointer; overflow: visible; border: none; font-size: 1em;
}
.pricingTitle .sectionTitle { padding-bottom: 170px; padding-top: 30px;
}
/* style for blog content */ /* end blog content */
/* start footer section */
/* */
.mastFooter { position: relative; text-align: left; color: #abacb1; overflow: hidden; background: url(http://commonpixel.com/themes/edgar/images/examples/bg_parallax_05.jpg) no-repeat 50% 50% / cover fixed;
}
.mastFooter .inner { padding: 60px 0; background: rgba(11, 25, 45, 0.85);
}
.mastFooter .banner { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 45px; margin-bottom: 50px; color: #fff;
}
.banner h3 { margin-bottom: 5px; font-size: 2em; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1.4;
}
.rightAlign { text-align: right;
}
.banner .button { margin-top: 15px;
}
.mastFooter .logo { margin-bottom: 30px;
}
.mastFooter .copyright { font-size: 12px; margin-bottom: 0;
}
.mastFooter h6 { color: #fff; margin: 0 0 40px 0; font-weight: 300; font-family: 'Montserrat', sans-serif; line-height: 1.4
}
.mastFooter .links,
.mastFooter .contact { margin: 0;
}
.mastFooter a { color: #abacb1;
}
.links,
.contact { list-style-type: none;
}
.links li,
.contact li { margin-top: 10px;
}
.links li a:hover { text-decoration: none; color: #ffa726; text-decoration: none; -o-transition: color 0.2s ease-in; -webkit-transition: color 0.2s ease-in; -moz-transition: color 0.2s ease-in; transition: color 0.2s ease-in;
}
.mastFooter .social li { display: inline-block; margin-right: 10px;
}
.mastFooter .social a { color: #ffa726;
}
.mastFooter .social a:hover { color: white;
} .button { position: relative; display: inline-block; padding: 8px 28px; background: none; font-weight: normal; text-transform: uppercase; font-size: .9em;
}
.button.primary { background: #ffa726; color: #fff;
}
.button.primary:hover { background: #0b192d; color: #fff; text-decoration: none;
}
Blog - Script Codes
Blog - Script Codes
Home Page Home
Developer MOHIM
Username MOHIM
Uploaded November 22, 2022
Rating 3
Size 5,738 Kb
Views 10,120
Do you need developer help for 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!

MOHIM (MOHIM) Script Codes
Name
Mop-1
Navigation var
Mop-2
Our services
Faq
A Pen by MOHIM
Section-2
Confidence
Jq_xam
Bulsy
Create amazing captions 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!