Blog Concept - Single Post

Developer
Mario Nebl
Size
9,603 Kb
Views
38,456
  1. Blog Concept - Single Post Previews
  2. Blog Concept - Single Post HTML Codes
  3. Blog Concept - Single Post CSS Codes

How do I make an blog concept - single post?

What is a blog concept - single post? How do you make a blog concept - single post? This script and codes were developed by Mario Nebl on 07 July 2022, Thursday.

Blog Concept - Single Post Previews
IQ Test

Blog Concept - Single Post - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blog Concept - Single Post</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <nav class="toolbar"> <a class="logo" href="#" title="lorem">herebeco.de</a> <label class="menu"> <input class="state menustate" type="checkbox" name="menutoggle" /> <span class="menuicon">Menu</span> <ul class="toolbarlist"> <li class="item active"> <a href="#" title="lorem"> Read </a> </li> <li class="item"> <a href="#" title="lorem"> See </a> </li> <li class="item"> <a href="#" title="lorem"> Say hello </a> </li> </ul> </label> </nav> <aside class="currentpost"> <span class="info"> <span class="what">You are reading: Lorem title.</span> <span class="where"><span class="lines js_progressCount">50</span> Lines to go</span> </span> <a href="#tldr" class="skip js_progressSkip">tl;dr</a> <progress class="currentprogress js_progress" value=".6"></progress> </aside>
</header>
<main class="main singlepost"> <figure class="image"> <img class="img" src="//is.s2.de/600x250/" width="600" height="250" alt="some image"> </figure> <div class="singlepostcontainer"> <aside class="meta"> <ul class="metalist"> <li class="item published" data-dateday="2"> 1 day ago </li> <li class="item tags"> <ul class="taglist"> <li class="item"> <a href="#">Ghost</a> </li> <li class="item"> <a href="#">Ghost</a> </li> </ul> </li> <li class="item notes"> <ul class="noteslist"> <li class="item"> <a href="#">1</a> </li> <li class="item"> <a href="#">50</a> </li> <li class="item"> <a href="#">130</a> </li> </ul> </li> </ul> </aside> <article class="singlepostcontent"> <h2 class="h h2">Lorem title</h2> <main class="body"> <p> Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <h3 class="h h3" id="tldr">TL;DR</h3> Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <p> </p> </main> </div> </article> <section class="me section"> <h1 class="h h1 hidden">About me</h1> <figure class="authorid"> <div class="image"> <img class="img" src="//is.s2.de/250x250/" height="250" width="250" alt="Itse me" /> </div> <figcaption class="caption"> <h3 class="h h3">Itse me.</h3> <p class="features"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <div class="buttonrow"> <a href="#" class="button">Github</a> <a href="#" class="button">Codepen</a> <a href="#" class="button">Xing</a> </div> </figcaption> </figure> </section>
</main>
<footer class="footer"> <ul class="contact"> <li class="item"> Lorem Ipsum </li> <li class="item"> Lorem Ipsum </li> <li class="item"> Lorem Ipsum </li> </ul> <ul class="legals"> <li class="item"> Lorem Ipsum </li> <li class="item"> Lorem Ipsum </li> <li class="item"> Lorem Ipsum </li> </ul>
</footer>
</body>
</html>

Blog Concept - Single Post - Script Codes CSS Codes

/* Keyframes */
@-webkit-keyframes spin { 0% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg); transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
@keyframes spin { 0% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg); transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
@-webkit-keyframes wobble { 0% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 50% { -webkit-transform: translate3d(-48%, -55%, 0) rotate(180deg); transform: translate3d(-48%, -55%, 0) rotate(180deg); } 100% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg); transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
@keyframes wobble { 0% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg); transform: translate3d(-50%, -50%, 0) rotate(0deg); } 50% { -webkit-transform: translate3d(-48%, -55%, 0) rotate(180deg); transform: translate3d(-48%, -55%, 0) rotate(180deg); } 100% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg); transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
/* Definitions */
/* Normalize */
* { box-sizing: border-box;
}
html,
body { height: 100%; min-height: 100%;
}
html,
body,
figure { margin: 0; padding: 0;
}
ul,
ol { list-style: none; margin: 0; padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 { font: 13px/150% "Palatino Linotype", "Book Antiqua", Palatino, serif; margin: 0;
}
a { color: inherit; text-decoration: none;
}
/* Theming */
/* Grid */
body,
.herebecode { background: #eee; font: 13px/150% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #888;
}
.main,
.footer { padding: 15px;
}
.main .contact,
.footer .contact,
.main .legals,
.footer .legals { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.main .contact .item:not(:last-child),
.footer .contact .item:not(:last-child),
.main .legals .item:not(:last-child),
.footer .legals .item:not(:last-child) { margin: 0 7.5px 0 0;
}
.header { position: fixed; width: 100%; z-index: 10; border-bottom: 1px solid rgba(98, 98, 98, 0.2); background: rgba(94, 199, 146, 0.9); color: #fff;
}
.header .toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; align-tiems: center;
}
.header .menuicon { display: none; font-size: 0; width: 30px; height: 26px; margin: 7.5px;
}
.header .toolbarlist { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.header .toolbarlist .item a { display: inline-block; height: 100%; padding: 17.25px; font-size: 1.25em; font-weight: 200; -webkit-transition: 0.3s background ease-in-out; transition: 0.3s background ease-in-out;
}
.header .toolbarlist .item a:hover { background: rgba(0, 0, 0, 0.2);
}
.header .toolbarlist .item.active a { background: rgba(255, 255, 255, 0.2);
}
.header .logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 50px; margin: 0 15px; font-size: 2rem; font-weight: 100;
}
.header + .main { padding-top: 65px;
}
.footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: #323232;
}
.posts { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.post { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 32%; max-width: 300px; background: #fff; margin-bottom: 15px; padding: 22.5px 15px 30px; border: 1px solid rgba(98, 98, 98, 0.2); -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.post p:first-child::first-letter { display: block; padding-right: 5px; float: left; font: 3em "Palatino Linotype", "Book Antiqua", Palatino, serif; line-height: 1em; color: #5ec792;
}
.post p:not(:first-child) { text-indent: 2.5em;
}
.post .image { position: relative; width: 100%; margin-bottom: 15px; background: #eee;
}
.post .image::before { content: ''; display: block; padding-top: 41.66%;
}
.post .image .img { position: absolute; top: 0; width: 100%; height: auto;
}
.post .head { margin: 0 -15px;
}
.post .head .h { padding: 0 15px;
}
.post .head .metalist { padding: 7.5px 15px;
}
.post .body { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 30px;
}
.post .foot { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.post .foot .more { margin-left: auto;
}
.post .metalist,
.post .taglist { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: .75rem;
}
.post .metalist .item,
.post .taglist .item { padding-right: 5px;
}
.post .metalist { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 15px;
}
.post .metalist .item:not(:last-child) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.post .taglist { padding-left: 15px;
}
.state { position: absolute; top: 0; left: -100vw;
}
/* Typography */
.h { font-weight: bold; color: #626262; margin-bottom: .4em;
}
.h.h1 { font-size: 1.6rem; margin-bottom: 0.96rem;
}
.h.h2 { font-size: 1.5em; margin-bottom: 0.9rem;
}
.h.h3 { font-size: 1.4em; margin-bottom: 0.9rem;
}
.h.h4 { font-size: 1.3em; margin-bottom: 0.9rem;
}
.h.h5 { font-size: 1.2em; margin-bottom: 0.9rem;
}
.h.h6 { font-size: 1.1em; margin-bottom: 0.9rem;
}
.p,
p { margin: 0 0 1em;
}
.p a,
p a,
.taglist > .item,
.singlepostcontainer .metalist .noteslist > .item { color: #5ec792; text-decoration: none; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.p a:visited,
p a:visited,
.p a:link,
p a:link,
.taglist > .item:visited,
.taglist > .item:link,
.singlepostcontainer .metalist .noteslist > .item:visited,
.singlepostcontainer .metalist .noteslist > .item:link { color: #5ec792; text-decoration: none;
}
.p a:hover,
p a:hover,
.p a:active,
p a:active,
.taglist > .item:hover,
.taglist > .item:active,
.singlepostcontainer .metalist .noteslist > .item:hover,
.singlepostcontainer .metalist .noteslist > .item:active { color: #38a16c; text-decoration: underline;
}
.a,
.button { position: relative; padding: 7.5px; background: #5ec792; border: 1px solid rgba(56, 161, 108, 0.1); color: #fff; text-decoration: none; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.a:hover,
.button:hover,
.a:active,
.button:active,
.a:focus,
.button:focus { background: #38a16c; outline: 0;
}
.a::after,
.button::after,
.a::before,
.button::before { position: absolute; top: 50%; left: 50%; content: ''; height: 1.5em; width: 1.5em; border-radius: 100%; opacity: 0; -webkit-transition: 0.3s opacity ease-in-out; transition: 0.3s opacity ease-in-out;
}
.a::after,
.button::after { -webkit-animation: spin 2s 1s infinite; animation: spin 2s 1s infinite; border: 3px solid #fff;
}
.a::before,
.button::before { -webkit-animation: wobble 2s 1s infinite; animation: wobble 2s 1s infinite; border: 3px solid rgba(0, 0, 0, 0.4);
}
.a.loading,
.button.loading { background: #38a16c; color: #38a16c;
}
.a.loading::after,
.button.loading::after,
.a.loading::before,
.button.loading::before { opacity: 1;
}
/* Elements */
.published { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #c8c8c8;
}
.published::before { content: attr(data-dateday); display: block; height: 100%; height: .5rem; width: .75rem; margin-right: 5px; border: solid #c8c8c8; border-width: 5px 1px 1px; line-height: 100%; font-size: .5rem; color: #c8c8c8; text-align: center;
}
.taglist > .item { position: relative; z-index: 0; margin: 0 7.5px; padding: 1.5px 7.5px; border: 1px solid currentcolor; border-width: 1px 1px 1px 0; border-radius: 3px 2px 2px 3px; font-size: 10px; color: #c8c8c8; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.taglist > .item::before { box-sizing: border-box; content: ''; position: absolute; z-index: 1; top: 2px; left: -0.4rem; display: block; height: 1.05rem; width: 1.05rem; border: inherit; border-width: 0px 0px 1px 1px; background: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 3px 0 3px 20%;
}
.taglist > .item::after { box-sizing: border-box; content: ''; position: absolute; z-index: 2; top: 50%; left: -0.1rem; display: block; height: .3rem; width: .3rem; border: 1px solid currentcolor; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.taglist > .item:hover { text-decoration: none;
}
.taglist > .item:last-child { margin-right: 0;
}
.followup .button { display: block; margin: 0 auto; padding: 10px; font-size: 13px;
}
.authorid { display: table; width: 100%;
}
.authorid .image,
.authorid .caption { display: table-cell; vertical-align: top;
}
.authorid .image { width: 30%;
}
.authorid .image .img { width: 100%; height: auto;
}
.authorid .caption { padding: 0 15px;
}
.authorid .caption p { text-align: justify; -webkit-hyphens: auto; -o-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-columns: 2; -moz-columns: 2; -o-columns: 2; columns: 2; -webkit-column-gap: 22.5px; -moz-column-gap: 22.5px; column-gap: 22.5px;
}
.buttonrow { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: center; padding: 15px 0;
}
.buttonrow .button { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.buttonrow .button:not(:last-child) { margin-right: 15px;
}
.section { background: #fff; padding: 15px; border: 1px solid rgba(98, 98, 98, 0.2);
}
.section:not(:last-child) { margin-bottom: 15px;
}
.currentpost { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px;
}
.currentpost .info { width: 50%;
}
.currentpost .skip { margin-left: auto;
}
.currentpost .currentprogress { position: absolute; right: 0; bottom: -1px; left: 0; width: 100%; height: 5px; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none;
}
.currentpost .currentprogress::-webkit-progress-bar { background-color: transparent;
}
.currentpost .currentprogress::-webkit-progress-value { background-color: #fff;
}
.currentpost .currentprogress::-moz-progress-value { background-color: #fff;
}
.currentpost .currentprogress::progress-value { background-color: #fff;
}
.skip { padding: 7.5px 15px; border: 1px solid currentcolor; background: none; font-size: inherit; color: inherit;
}
.skip:hover,
.skip:focus { outline: none; background: rgba(255, 255, 255, 0.1);
}
.header + .singlepost { padding-top: 120px;
}
.singlepost { padding-left: 0; padding-right: 0;
}
.singlepost > .image { width: 100%; max-width: 900px; margin: 0 auto; margin-bottom: -15px;
}
.singlepost > .image .img { width: 100%; height: auto;
}
.singlepostcontainer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; border-bottom: 1px solid rgba(98, 98, 98, 0.2); background: #fff;
}
.singlepostcontainer .meta { -ms-flex-negative: 0; flex-shrink: 0; min-width: 25%; padding: 30px;
}
.singlepostcontainer .metalist { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.singlepostcontainer .metalist > .item { margin-left: auto;
}
.singlepostcontainer .metalist .published { margin-bottom: 15px;
}
.singlepostcontainer .metalist .taglist { margin-bottom: 15px;
}
.singlepostcontainer .metalist .taglist > .item { display: inline-block; margin-right: 0;
}
.singlepostcontainer .metalist .notes { text-align: right;
}
.singlepostcontainer .metalist .noteslist { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.singlepostcontainer .metalist .noteslist > .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 30px; width: 30px; border: 1px solid currentcolor; border-radius: 50%; font-size: 10px; color: #c8c8c8;
}
.singlepostcontainer .metalist .noteslist > .item:hover,
.singlepostcontainer .metalist .noteslist > .item:active { text-decoration: none;
}
.singlepostcontainer .metalist .noteslist > .item:not(:last-child) { margin-right: 3px;
}
.singlepostcontainer .metalist .noteslist > .item a { width: 100%; text-align: center;
}
.singlepostcontent { padding: 30px; padding-left: 60px; max-width: 600px;
}
/* Helpers */
.hidden { display: none;
}
/* Media Queries */
@media (max-width: 450px) { body, html { min-width: 320px; } .main { padding-right: 0; padding-left: 0; } .header { background: transparent; } .header .menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .header .menuicon { position: relative; display: inline-block; z-index: 3; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 20%, transparent 20%, transparent 40%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.8) 80%); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 20%, transparent 20%, transparent 40%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.8) 80%); } .header .state:checked ~ .toolbarlist { -webkit-transform: none; transform: none; } .header .toolbar { height: 50px; } .header .logo { position: absolute; z-index: 2; top: 0; right: 0; left: 0; margin: 0; padding: 0 15px 0 60px; border-bottom: 1px solid rgba(98, 98, 98, 0.2); background: rgba(94, 199, 146, 0.9); } .header .toolbarlist { position: absolute; z-index: 1; top: 100%; left: 0; display: block; width: 100%; background: #fff; color: #888; -webkit-transform: translateY(-150%); transform: translateY(-150%); -webkit-transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s transform ease-in-out; transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out; } .header .toolbarlist .item { display: inline-block; width: 100%; } .header .toolbarlist .item a { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .header .toolbarlist .item a:hover { background: none; color: #5ec792; -webkit-transition: 0.3s color ease-in-out; transition: 0.3s color ease-in-out; } .header .toolbarlist .item.active { color: #5ec792; } .authorid { display: block; padding: 15px 0; } .authorid .image, .authorid .caption { display: block; } .authorid .image { width: 100%; padding: 0 15px; } .authorid .image .img { display: block; width: 50%; margin: 0 auto; } .authorid .caption { padding: 15px 0; } .authorid .caption p { -webkit-columns: 1; -moz-columns: 1; -o-columns: 1; columns: 1; } .posts .post .body { -webkit-columns: 1; -moz-columns: 1; -o-columns: 1; columns: 1; } .posts .post .more { margin: 0; width: 100%; text-align: center; padding: 10px; } .button { text-align: center; width: 100%; } .footer .contact, .footer .legals { width: 100%; } .footer .contact .item, .footer .legals .item { width: 100%; padding: 15px 15px 15px 0; } .footer .contact .item:not(:last-child), .footer .legals .item:not(:last-child) { margin: 0; } .buttonrow .button:not(:last-child) { margin: 0 0 15px 0; } .currentpost { height: 4px; padding: 0; } .currentpost .info { display: none; } .currentpost .skip { display: none; } .currentpost .currentprogress::-webkit-progress-bar { background-color: #fff; } .currentpost .currentprogress::-webkit-progress-value { background-color: #38a16c; } .currentpost .currentprogress::-moz-progress-value { background-color: #38a16c; } .currentpost .currentprogress::progress-value { background-color: #38a16c; } .header + .singlepost { padding-top: 55px; } .singlepostcontainer .meta .metalist { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .singlepostcontainer .meta .metalist .taglist { margin: 15px 0; }
}
@media (max-width: 780px) { .post { min-width: 100%; } .post .body { text-align: justify; -webkit-hyphens: auto; -o-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-columns: 2; -moz-columns: 2; -o-columns: 2; columns: 2; -webkit-column-gap: 22.5px; -moz-column-gap: 22.5px; column-gap: 22.5px; } .singlepostcontainer { -ms-flex-wrap: wrap; flex-wrap: wrap; } .singlepostcontainer .meta { width: 100%; padding: 30px 15px 15px; } .singlepostcontainer .metalist { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .singlepostcontainer .metalist > .item { margin: 0; } .singlepostcontainer .metalist .published { white-space: nowrap; } .singlepostcontainer .metalist .taglist > .item, .singlepostcontainer .metalist .noteslist > .item { margin-bottom: 3px; } .singlepostcontainer .singlepostcontent { padding: 15px; }
}
@media (min-width: 780px) { .post { min-width: 49%; }
}
@media (min-width: 960px) { .post { min-width: 32%; }
}
@media (min-width: 1280px) { .posts { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .post { min-width: 24%; } .post:not(:nth-child(4n+1)) { margin-right: 1.25%; } .me .caption { padding: 0 30px; } .me .caption p { -webkit-columns: 3; -moz-columns: 3; -o-columns: 3; columns: 3; }
}
Blog Concept - Single Post - Script Codes
Blog Concept - Single Post - Script Codes
Home Page Home
Developer Mario Nebl
Username marionebl
Uploaded July 07, 2022
Rating 3
Size 9,603 Kb
Views 38,456
Do you need developer help for Blog Concept - Single Post?

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!

Mario Nebl (marionebl) Script Codes
Name
Blog Concept - Landing Page
Pure CSS toggles
Pure CSS tabs
Pure CSS lightbox technique
Animation in relation to user input, the sane way
Pure CSS tooltips
A Pen by Mario Nebl
JQuery for the poor
Mobile toolbar study
The Dark Side of the Moon 3D
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!