MCB Blog Style

Developer
Orrin Ward
Size
7,326 Kb
Views
4,048
  1. MCB Blog Style Previews
  2. MCB Blog Style HTML Codes
  3. MCB Blog Style CSS Codes

How do I make an mcb blog style?

What is a mcb blog style? How do you make a mcb blog style? This script and codes were developed by Orrin Ward on 01 February 2023, Wednesday.

MCB Blog Style Previews
IQ Test

MCB Blog Style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MCB Blog Style</title> <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! */ @charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300|Didact+Gothic);
body { font-family: 'Didact Gothic', sans-serif; font-size: 18px; line-height: 1.4em; background-image: url("https://orrinward.co.uk/mcb/cloud-bg.png"); background-position: center top; background-repeat: no-repeat; background-size: contain; color: #000;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1em; text-decoration: none; color: #000; margin-bottom: 0.5em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000; text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { opacity: 0.8;
}
h1 a:active, h1 a:visited, h2 a:active, h2 a:visited, h3 a:active, h3 a:visited, h4 a:active, h4 a:visited, h5 a:active, h5 a:visited, h6 a:active, h6 a:visited { color: #000;
}
h1 { font-size: 36px;
}
h2 { font-size: 28px;
}
h3 { font-size: 20px;
}
p { font-size: 16px;
}
a { color: #7992aa; text-decoration: underline;
}
a:hover { cursor: pointer; cursor: hand; opacity: 0.8;
}
#page-container { width: 1140px; margin-left: auto; margin-right: auto;
}
header { text-align: center; padding: 24px 0;
}
header a { display: inline-block;
}
#page-nav { float: left; width: 190px;
}
ul#menu-primary-menu { list-style: none;
}
ul#menu-primary-menu li { text-align: center; display: block;
}
ul#menu-primary-menu a { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1em; text-decoration: none; color: #000; font-size: 20px; display: block; padding: 24px 0; background-image: url("https://orrinward.co.uk/mcb/link-bg.png"); background-position: center bottom; background-repeat: no-repeat; transition: all 0.5s ease;
}
ul#menu-primary-menu a a { color: #000; text-decoration: none;
}
ul#menu-primary-menu a a:hover { opacity: 0.8;
}
ul#menu-primary-menu a a:active, ul#menu-primary-menu a a:visited { color: #000;
}
ul#menu-primary-menu a:hover { cursor: pointer; cursor: hand; background-position: center center;
}
ul.social-links { margin: 24px auto; display: block; text-align: center;
}
ul.social-links li { display: inline-block;
}
ul.social-links li a { display: block; overflow: hidden; text-indent: -1000px; width: 36px; height: 36px; background-image: url("https://orrinward.co.uk/dump/sprite-social.png");
}
ul.social-links li a.icon-pinterest { background-position: 0 top;
}
ul.social-links li a.icon-pinterest:hover { background-position: 0 bottom;
}
ul.social-links li a.icon-twitter { background-position: 72px top;
}
ul.social-links li a.icon-twitter:hover { background-position: 72px bottom;
}
ul.social-links li a.icon-facebook { background-position: 36px top;
}
ul.social-links li a.icon-facebook:hover { background-position: 36px bottom;
}
#main-section { float: left; width: 760px;
}
#main-section article.blogpost { position: relative; padding: 20px 30px; background-color: #f9f7fa; background-color: rgba(241, 235, 243, 0.4); margin-bottom: 40px;
}
.blogpost .meta-date { position: absolute; top: -20px; right: -20px; width: 40px; text-align: center; background: rgba(150, 150, 150, 0.6); padding: 8px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
.blogpost .meta-date span { display: block; line-height: 1em; text-transform: uppercase; font-weight: bold;
}
.blogpost .meta-date span.date-d { font-size: 24px;
}
.blogpost .meta-date span.date-m { font-size: 14px;
}
.blogpost img { margin-top: 1em; margin-bottom: 1em;
}
.blogpost img.default { display: block; width: 100%; margin-left: auto; margin-right: auto;
}
.blogpost img.centred { display: block; width: auto; margin-left: auto; margin-right: auto;
}
.blogpost h1.post-title { margin-bottom: 1em;
}
.blogpost p { margin-bottom: 1em;
}
.blogpost blockquote { background: #fff; margin: 1.5em 10px; padding: 0.5em; quotes: "“" "”" "‘" "’"; font-size: 2em;
}
.blogpost blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;
}
.blogpost blockquote p { display: inline;
}
#sidebar { float: left; width: 190px; display: none;
}
footer { clear: both; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1em; text-decoration: none; color: #000; width: 1140px; text-align: center; padding: 12px;
}
footer a { color: #000; text-decoration: none;
}
footer a:hover { opacity: 0.8;
}
footer a:active, footer a:visited { color: #000;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='page-container'> <header> <a> <img src='https://orrinward.co.uk/mcb/logo.png'> </a> </header> <nav id='page-nav'> <ul id='menu-primary-menu'> <li> <a>Home</a> </li> <li> <a>About</a> </li> <li> <a>Projects</a> </li> <li> <a>Downloads</a> </li> <li> <a>Events</a> </li> <li> <a>Submit</a> </li> <li> <a>Contact</a> </li> </ul> <ul class='social-links'> <li> <a class='icon-pinterest' href=''>Pinterest</a> </li> <li> <a class='icon-twitter' href=''>Twitter</a> </li> <li> <a class='icon-facebook' href=''>Facebook</a> </li> </ul> <ul id='menu-tertiary-menu'> <li> <label>Subscribe:</label> <input placeholder='Email Address' type='email'> <input type='submit' value='Join'> </li> </ul> </nav> <div id='main-section'> <article class='blogpost'> <h2 class='post-title'> <a href='#'> Post Title </a> </h2> <time class='meta-date' datetime='2013-12-15' pubdate='pubdate'> <span class='date-d'>15</span> <span class='date-m'>Dec</span> </time> <p> <a>Leave a comment</a> This image is set to "default" which will stretch it to fit the width of the post column. Use this for landcape/square images. </p> <img class='default' src='http://media-cache-ak0.pinimg.com/236x/e0/51/35/e051358ed34b0d7b7b0650de0efc3f64.jpg'> <p> This image is set to centred. Use this for portrait images so that it doesn't fill the page crazily. <a>Leave a comment</a> </p> <img class='centred' src='http://media-cache-ak0.pinimg.com/236x/e0/51/35/e051358ed34b0d7b7b0650de0efc3f64.jpg'> <blockquote> Marina is awesome and this is a quote. </blockquote> </article> <article class='blogpost'> <h1 class='post-title'> Post Title </h1> <p> This image is set to "default" which will stretch it to fit the width of the post column. Use this for landcape/square images. </p> <img class='default' src='http://media-cache-ak0.pinimg.com/236x/e0/51/35/e051358ed34b0d7b7b0650de0efc3f64.jpg'> <p> This image is set to centred. Use this for portrait images so that it doesn't fill the page crazily. </p> <img class='centred' src='http://media-cache-ak0.pinimg.com/236x/e0/51/35/e051358ed34b0d7b7b0650de0efc3f64.jpg'> <blockquote> Marina is awesome and this is a quote. </blockquote> <div class='meta-date'> <span>09-Nov-2013</span> </div> </article> </div> <div id='sidebar'> Ad Stuff Here </div> <footer> Footer stuff </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

MCB Blog Style - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300|Didact+Gothic);
body { font-family: 'Didact Gothic', sans-serif; font-size: 18px; line-height: 1.4em; background-image: url("https://orrinward.co.uk/mcb/cloud-bg.png"); background-position: center top; background-repeat: no-repeat; background-size: contain; color: #000;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1em; text-decoration: none; color: #000; margin-bottom: 0.5em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000; text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { opacity: 0.8;
}
h1 a:active, h1 a:visited, h2 a:active, h2 a:visited, h3 a:active, h3 a:visited, h4 a:active, h4 a:visited, h5 a:active, h5 a:visited, h6 a:active, h6 a:visited { color: #000;
}
h1 { font-size: 36px;
}
h2 { font-size: 28px;
}
h3 { font-size: 20px;
}
p { font-size: 16px;
}
a { color: #7992aa; text-decoration: underline;
}
a:hover { cursor: pointer; cursor: hand; opacity: 0.8;
}
#page-container { width: 1140px; margin-left: auto; margin-right: auto;
}
header { text-align: center; padding: 24px 0;
}
header a { display: inline-block;
}
#page-nav { float: left; width: 190px;
}
ul#menu-primary-menu { list-style: none;
}
ul#menu-primary-menu li { text-align: center; display: block;
}
ul#menu-primary-menu a { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1em; text-decoration: none; color: #000; font-size: 20px; display: block; padding: 24px 0; background-image: url("https://orrinward.co.uk/mcb/link-bg.png"); background-position: center bottom; background-repeat: no-repeat; transition: all 0.5s ease;
}
ul#menu-primary-menu a a { color: #000; text-decoration: none;
}
ul#menu-primary-menu a a:hover { opacity: 0.8;
}
ul#menu-primary-menu a a:active, ul#menu-primary-menu a a:visited { color: #000;
}
ul#menu-primary-menu a:hover { cursor: pointer; cursor: hand; background-position: center center;
}
ul.social-links { margin: 24px auto; display: block; text-align: center;
}
ul.social-links li { display: inline-block;
}
ul.social-links li a { display: block; overflow: hidden; text-indent: -1000px; width: 36px; height: 36px; background-image: url("https://orrinward.co.uk/dump/sprite-social.png");
}
ul.social-links li a.icon-pinterest { background-position: 0 top;
}
ul.social-links li a.icon-pinterest:hover { background-position: 0 bottom;
}
ul.social-links li a.icon-twitter { background-position: 72px top;
}
ul.social-links li a.icon-twitter:hover { background-position: 72px bottom;
}
ul.social-links li a.icon-facebook { background-position: 36px top;
}
ul.social-links li a.icon-facebook:hover { background-position: 36px bottom;
}
#main-section { float: left; width: 760px;
}
#main-section article.blogpost { position: relative; padding: 20px 30px; background-color: #f9f7fa; background-color: rgba(241, 235, 243, 0.4); margin-bottom: 40px;
}
.blogpost .meta-date { position: absolute; top: -20px; right: -20px; width: 40px; text-align: center; background: rgba(150, 150, 150, 0.6); padding: 8px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
.blogpost .meta-date span { display: block; line-height: 1em; text-transform: uppercase; font-weight: bold;
}
.blogpost .meta-date span.date-d { font-size: 24px;
}
.blogpost .meta-date span.date-m { font-size: 14px;
}
.blogpost img { margin-top: 1em; margin-bottom: 1em;
}
.blogpost img.default { display: block; width: 100%; margin-left: auto; margin-right: auto;
}
.blogpost img.centred { display: block; width: auto; margin-left: auto; margin-right: auto;
}
.blogpost h1.post-title { margin-bottom: 1em;
}
.blogpost p { margin-bottom: 1em;
}
.blogpost blockquote { background: #fff; margin: 1.5em 10px; padding: 0.5em; quotes: "“" "”" "‘" "’"; font-size: 2em;
}
.blogpost blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;
}
.blogpost blockquote p { display: inline;
}
#sidebar { float: left; width: 190px; display: none;
}
footer { clear: both; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1em; text-decoration: none; color: #000; width: 1140px; text-align: center; padding: 12px;
}
footer a { color: #000; text-decoration: none;
}
footer a:hover { opacity: 0.8;
}
footer a:active, footer a:visited { color: #000;
}
MCB Blog Style - Script Codes
MCB Blog Style - Script Codes
Home Page Home
Developer Orrin Ward
Username orrinward
Uploaded February 01, 2023
Rating 3
Size 7,326 Kb
Views 4,048
Do you need developer help for MCB Blog Style?

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!

Orrin Ward (orrinward) Script Codes
Name
Markerly Demo
Expandable block items.
AfG Utilities Testing
Possible new layout for portfolio
Price Comparison Table
Simple filtering by html5 targets.
Virtual Freshers Fair Layout
Lnd-health-check
Bootstrap form HAML
Elephants Full screen site
Create amazing art & images 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!