Blog Concept

Developer
Size
7,663 Kb
Views
18,216

How do I make an blog concept?

What is a blog concept? How do you make a blog concept? This script and codes were developed by Daniel Gooß on 10 November 2022, Thursday.

Blog Concept Previews

Blog Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blog Concept</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Droid+Serif'> <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! */ body { padding: 250px 10px 0; background-color: #efefef; font-family: 'Droid Serif', serif; font-size: 14px;
}
svg { display: block;
}
svg * { fill: currentColor;
}
#header { z-index: 3; position: fixed; top: 0; left: 0; width: 100%; height: 250px; box-sizing: border-box; padding: 25px 0; background-color: #3079d0; color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); transition: 0.65s cubic-bezier(0.6, 1.8, 0.5, 0.8); transition-property: height, padding;
}
#header.shrink { height: 50px; padding: 0.5em 0;
}
#header.shrink .logo { margin-top: -140px;
}
#header.shrink h1 { margin: 2px 0;
}
#header .logo { height: 140px; width: 140px; margin: 0 auto; transition: all 0.65s cubic-bezier(0.6, 1.8, 0.5, 0.8); /*-webkit-filter: drop-shadow(0 3px 2px rgba(0,0,0,0.2));*/
}
#header h1 { margin: 0.5em 0; font-weight: normal; text-align: center; transition: margin 0.65s cubic-bezier(0.6, 1.8, 0.5, 0.8);
}
h2 { margin: 0 0 0.3em; font-family: 'Oswald'; line-height: 1.5em; /*-webkit-font-smoothing: antialiased;*/ -moz-osx-font-smoothing: grayscale;
}
h2:after { content: ''; display: block; width: 30%; margin: 0.3em auto 0; border-top: 1px solid currentColor; transition: width 0.2s ease-in-out;
}
article header { padding: 1em 40px 0.5em; margin: 0 -40px 1em; text-align: center; color: #333; transition: all 0.2s 0.2s ease-in-out;
}
p { margin: 1em 0; line-height: 1.5em;
}
.test { list-style: none; padding-left: 0;
}
.test article { max-width: 720px; box-sizing: border-box; padding: 0 40px 1.5em; margin: 0 auto 10px; background-color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); transition: all 0.2s ease-in-out; cursor: pointer; /*& > *:last-child{ margin-bottom: 0; }*/
}
.test article:hover,
.test article:active,
.test article:focus { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transform: scale(1.01); transition-delay: 0.2s;
}
.test article:hover header,
.test article:active header,
.test article:focus header { background-color: #3079d0; color: #fff; transition-delay: 0;
}
.test article:hover h2:after,
.test article:active h2:after,
.test article:focus h2:after { width: 60%; transition-delay: 0.2s;
}
.test article a { display: block; text-decoration: none; color: inherit;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header id="header" class="js_header"> <svg class="logo" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid meet"><path d="M64 180.3v-104.6h21.9c7 0 12.7.6 17.2 1.9 4.5 1.3 8.1 3.3 10.6 6.2 2.6 2.9 4.4 6.3 5.3 10.4s1.5 9.2 1.5 15.4v34.3c0 3.7-.1 7-.3 9.7-.2 2.8-.7 5.5-1.3 8.1s-1.5 4.9-2.6 6.7c-1.1 1.8-2.5 3.6-4.3 5.1-1.7 1.6-3.8 2.8-6.3 3.8-2.5.9-5.3 1.6-8.7 2.2-3.3.5-7.1.8-11.4.8h-21.6zm22-14.8c2 0 3.6 0 4.8-.1 1.2-.1 2.3-.2 3.5-.4s2-.6 2.6-1c.5-.4 1-1 1.5-1.8s.8-1.7.9-2.8c.1-1.1.2-2.4.2-4v-56.2c0-3.4-1-5.7-3.1-6.9-2.1-1.1-5.5-1.7-10.3-1.7v74.9zM130.3 147.6v-36.9c0-24.7 10.3-37.1 30.9-37.1 4.3 0 8.2.6 11.6 1.7s6.2 2.7 8.5 4.7 4.2 4.5 5.6 7.4c1.5 2.9 2.5 6.1 3.2 9.6.7 3.4 1 7.2 1 11.4v6.2h-20.2v-7.3c0-1.8 0-3.4-.1-4.8s-.3-2.9-.7-4.6c-.4-1.7-.9-3.1-1.6-4.2-.7-1.1-1.6-2-2.8-2.7-1.2-.7-2.7-1.1-4.4-1.1-6.5 0-9.7 5.2-9.7 15.5v45.2c0 10.3 3.2 15.4 9.7 15.4 6.4 0 9.6-5.3 9.6-16v-8.4h-12v-15.2h33.1v53.8h-14.5l-2.7-7.3c-1.8 2.8-4.3 5-7.6 6.8-3.3 1.7-6.7 2.6-10.2 2.6-3.8 0-7.2-.7-10.3-2.1-3.1-1.4-5.6-3.2-7.6-5.5s-3.7-4.9-5-8c-1.4-3.1-2.3-6.2-2.9-9.4-.6-3.1-.9-6.3-.9-9.7zM88.4 61.8l-11.4-23.8 5-2.4c1.6-.8 3-1.2 4.1-1.5 1.2-.2 2.2-.1 3.1.2s1.7 1 2.3 1.8c.7.8 1.3 1.9 2 3.3l3.8 7.8c.4.8.7 1.6 1 2.2.3.7.4 1.3.6 2 .1.7.2 1.3.1 1.8s-.2 1.1-.4 1.6c-.2.6-.6 1.1-1 1.5s-1 1-1.7 1.4c-.7.5-1.5 1-2.5 1.4l-5 2.7zm3.4-5.8l1.1-.5c.3-.1.5-.3.7-.5.2-.2.4-.3.5-.5.1-.2.1-.3.1-.6 0-.2 0-.5-.1-.7-.1-.3-.2-.6-.4-.9l-6.2-12.8c-.4-.8-.9-1.2-1.4-1.2-.6 0-1.4.2-2.5.7l8.2 17zM102.7 55l-.4-27 4.6-1.1 11.5 24.4-5.1 1.2-2.3-5.2-3.4.8.3 5.7-5.2 1.2zm4.4-10.2l2.7-.6-3.5-9.2.8 9.8zM120.3 51.3l-.4-26.4 3.8-.1 6 13.7-.2-13.8 4.4-.1.4 26.4-3.7.1-6-14.5.2 14.6-4.5.1zM138.1 51.8l4.3-26 5.3.9-4.3 26-5.3-.9zM147.4 53.5l8.2-25 10.5 3.4-1.1 3.5-5.4-1.8-2.2 6.8 3.8 1.3-1.2 3.6-3.8-1.3-2.5 7.7 5.4 1.8-1.1 3.5-10.6-3.5zM160.2 58.1l12.5-23.2 4.7 2.5-10.7 20 4.6 2.5-1.7 3.2-9.4-5zM80.7 210.7l3.9-8.4c2.6-5.6 6.3-7.4 11-5.2 1 .5 1.8 1 2.5 1.6s1.1 1.3 1.4 2c.3.7.5 1.5.5 2.3 0 .8-.1 1.7-.3 2.5-.2.9-.5 1.8-1 2.7l-.7 1.4-4.6-2.2.8-1.7c.2-.4.4-.8.5-1.1.1-.3.2-.7.3-1.1.1-.4.1-.8.1-1.1 0-.3-.2-.6-.4-.9-.2-.3-.5-.5-.9-.7-1.5-.7-2.8.1-3.9 2.5l-4.8 10.3c-1.1 2.3-.9 3.9.6 4.6 1.5.7 2.8-.2 3.9-2.6l.9-1.9-2.7-1.3 1.6-3.5 7.6 3.5-5.7 12.3-3.3-1.6.2-2c-.7.4-1.5.7-2.5.7-.9 0-1.8-.1-2.6-.5-.9-.4-1.6-.9-2.1-1.6s-.9-1.3-1.2-2.1c-.2-.7-.3-1.5-.3-2.4s.1-1.7.3-2.5c.3-.4.6-1.2.9-2zM101.4 219l1.8-8.7c1.3-6.1 4.4-8.6 9.4-7.6s6.9 4.6 5.7 10.7l-1.8 8.6c-.2 1-.5 2-.8 2.8s-.8 1.6-1.3 2.3c-.5.7-1.1 1.3-1.8 1.7s-1.5.7-2.4.9c-.9.1-2 .1-3.1-.1s-2.1-.6-2.9-1.1c-.8-.5-1.4-1.1-1.9-1.7-.5-.6-.8-1.4-1-2.2-.2-.8-.3-1.7-.3-2.6 0-1 .2-1.9.4-3zm9.6 3.2l2.3-11.2c.5-2.5 0-4-1.6-4.3-.5-.1-.9-.1-1.3.1s-.7.4-.9.8-.4.8-.6 1.1c-.1.4-.3.8-.4 1.3l-2.3 11.2c-.5 2.5 0 4 1.5 4.3 1.8.4 2.8-.7 3.3-3.3zM123 222.7l-.2-8.9c-.2-6.2 2.3-9.4 7.4-9.6 5.1-.1 7.8 2.9 8 9.1l.2 8.7c0 1.1 0 2-.2 2.9-.1.9-.4 1.8-.7 2.6s-.8 1.5-1.4 2.1c-.6.6-1.3 1-2.2 1.4-.9.3-1.9.5-3 .6-1.1 0-2.1-.1-3-.4-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.1-1.2-1.5-2-.4-.8-.7-1.6-.9-2.5s-.3-1.8-.3-2.8zm10.1.9l-.3-11.4c-.1-2.6-.9-3.9-2.5-3.8-.5 0-.9.1-1.2.4-.3.2-.6.6-.7 1l-.3 1.2c-.1.4-.1.8-.1 1.3l.3 11.4c.1 2.6.9 3.9 2.5 3.8 1.6 0 2.4-1.3 2.3-3.9zM144.6 222.5l5-2.3c.1.5.3 1 .4 1.4.1.4.3.8.5 1.3.2.4.4.8.6 1.1.2.3.5.5.8.6.3.1.6.2 1 .1 1-.3 1.4-1 1-2.3-.5-1.8-1.9-3.3-4.4-4.6l-1.9-1c-.6-.3-1.1-.5-1.5-.8s-.8-.5-1.4-.9c-.5-.4-1-.8-1.3-1.2-.3-.4-.7-.9-1-1.5s-.6-1.2-.8-2c-.5-2.1-.3-3.9.7-5.4 1-1.5 2.6-2.6 4.8-3.1 1.8-.5 3.5-.2 5.1.8s2.6 2.4 3.1 4.2v.2l.1.4-5.2 2.1c0-.1-.1-.3-.1-.5l-.1-.6-.3-1s-.3-.6-.5-.9-.4-.5-.7-.6c-.3-.1-.6-.2-.9-.1-.6.1-.9.5-1.1 1s-.2 1.1 0 1.7c.1.5.3 1 .6 1.4.3.4.6.8 1.1 1.1s.8.6 1.2.8l1.4.7 1.2.6c.9.5 1.7.9 2.3 1.3.6.4 1.3 1 1.9 1.6.6.6 1.2 1.3 1.6 2 .4.8.8 1.6 1 2.6.5 1.8.2 3.4-.8 4.9s-2.4 2.4-4.2 2.9c-1.2.3-2.3.3-3.3.1-1-.2-1.9-.6-2.7-1.2-.8-.6-1.4-1.3-1.9-2.2-.6-.8-1-1.7-1.3-2.7zM163.4 217.1l4.4-3.3c.2.5.5.9.6 1.3.2.4.4.7.7 1.1s.6.7.8.9c.3.2.6.4.9.4.3.1.6 0 1-.1.9-.5 1.1-1.3.5-2.5-.8-1.7-2.5-2.9-5.2-3.6l-2.1-.5c-.7-.2-1.2-.3-1.6-.4s-.9-.3-1.5-.6-1.1-.5-1.5-.9-.8-.7-1.3-1.2c-.4-.5-.8-1.1-1.1-1.8-.9-1.9-1.1-3.7-.4-5.5.7-1.7 2-3.1 4-4 1.7-.8 3.4-.9 5.2-.3 1.8.6 3 1.8 3.9 3.5l.1.2c.1.1.1.2.2.4l-4.6 3.1c0-.1-.1-.3-.2-.5s-.2-.4-.2-.5l-.5-.9s-.4-.5-.6-.8c-.2-.2-.5-.4-.8-.5-.3-.1-.6 0-.9.1-.5.3-.8.7-.9 1.2-.1.5 0 1.1.3 1.7.2.5.5.9.9 1.3s.8.6 1.3.9c.5.2.9.4 1.3.5s.9.2 1.5.4c.6.1 1.1.3 1.3.3l2.5.8c.7.3 1.4.7 2.2 1.1.7.5 1.4 1 2 1.7s1.1 1.4 1.5 2.3c.8 1.7.9 3.3.2 4.9-.7 1.6-1.9 2.9-3.5 3.7-1.1.5-2.2.8-3.2.8s-2-.2-2.9-.6c-.9-.4-1.6-1-2.3-1.7-.9-.6-1.5-1.4-2-2.4zM197.5 216.8v-10.9c3.3 0 6.2-.4 8.5-1.2 2.3-.8 4.2-2.3 5.7-4.5 1.5-2.3 2.6-4.4 3.5-6.3.8-2 1.4-5.2 1.8-9.8s.6-8.4.6-11.4c.1-3 .1-7.9.1-14.5 0-3.7.2-6.9.5-9.7.4-2.8 1-5.7 2.1-8.6 1-2.9 2.7-5.4 4.9-7.4s5-3.5 8.3-4.5c-3.3-1-6-2.5-8.3-4.5-2.2-2-3.8-4.5-4.9-7.4-1-2.9-1.7-5.7-2.1-8.6-.4-2.8-.5-6-.5-9.7 0-6.6 0-11.5-.1-14.5s-.3-6.8-.6-11.4c-.4-4.6-1-7.8-1.8-9.8s-2-4.1-3.5-6.3c-1.5-2.3-3.4-3.8-5.7-4.5s-5.2-1.2-8.5-1.2v-10.9c3.6 0 6.9.4 9.9 1.2 3 .8 5.5 1.7 7.7 2.9 2.2 1.1 4.1 2.8 5.8 5.1 1.7 2.3 3.1 4.3 4.2 6.3 1.1 1.9 2 4.6 2.8 8.1.8 3.4 1.4 6.4 1.7 8.8s.7 5.8.9 10.2c.2 4.4.3 7.9.3 10.5v11.4c0 5 .8 8.8 2.5 11.4 1.7 2.6 5.1 3.9 10.1 3.9v18.2c-5.1 0-8.5 1.3-10.1 3.9s-2.5 6.4-2.5 11.4v11.4c0 2.6-.1 6.2-.3 10.5-.2 4.4-.5 7.8-.9 10.2-.4 2.4-1 5.4-1.7 8.8-.8 3.4-1.7 6.1-2.8 8.1s-2.5 4-4.2 6.3-3.6 3.9-5.8 5.1c-2.2 1.1-4.8 2.1-7.7 2.9-3 .6-6.2 1-9.9 1zM48.1 215.6c-3-.8-5.5-1.7-7.7-2.9-2.2-1.1-4.1-2.8-5.8-5.1s-3.1-4.3-4.2-6.3-2-4.6-2.8-8.1c-.8-3.4-1.4-6.4-1.7-8.8-.4-2.4-.7-5.8-.9-10.2-.2-4.4-.3-7.9-.3-10.5v-11.4c0-5-.8-8.8-2.5-11.4s-5.1-3.9-10.1-3.9v-18.2c5.1 0 8.5-1.3 10.1-3.9 1.7-2.6 2.5-6.4 2.5-11.4v-11.4s.2-6.1.3-10.5.5-7.8.9-10.2 1-5.3 1.7-8.8c.8-3.4 1.7-6.1 2.8-8.1 1.1-1.9 2.5-4 4.2-6.3 1.7-2.3 3.6-3.9 5.8-5.1 2.2-1.1 4.8-2.1 7.7-2.9s6.2-1.2 9.9-1.2v10.9c-3.3 0-6.2.4-8.5 1.2-2.3.8-4.2 2.3-5.7 4.5-1.5 2.3-2.6 4.4-3.5 6.3s-1.4 5.2-1.8 9.8c-.4 4.6-.6 8.4-.6 11.4-.1 3-.1 7.9-.1 14.5 0 3.7-.2 6.9-.5 9.7-.4 2.8-1 5.7-2.1 8.6-1 2.9-2.7 5.4-4.9 7.4s-5 3.5-8.3 4.5c3.3 1 6 2.5 8.3 4.5s3.8 4.5 4.9 7.4c1 2.9 1.7 5.7 2.1 8.6.4 2.8.5 6 .5 9.7 0 6.6 0 11.5.1 14.5s.3 6.8.6 11.4 1 7.8 1.8 9.8c.8 2 2 4.1 3.5 6.3 1.5 2.3 3.4 3.8 5.7 4.5 2.3.8 5.2 1.2 8.5 1.2v10.9c-3.6.2-6.9-.2-9.9-1z"/></svg> <h1>Frontend Blog</h1>
</header>
<ul class="test"> <li> <article> <a href="#"> <header> <h2>Dealing with Transitions</h2> <time datetime="2014-06-26">26th Jun 2014</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestiae dolorum dolores aspernatur earum aut quas cupiditate voluptate. Modi molestias eius aliquid alias nemo id in error necessitatibus quos itaque.</p> </a> </article> </li> <li> <article> <a href="#"> <header> <h2>Cascading Color Styles</h2> <time datetime="2014-06-24">24th Jun 2014</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestiae dolorum dolores aspernatur earum aut quas cupiditate voluptate. Modi molestias eius aliquid alias nemo id in error necessitatibus quos itaque.</p> </a> </article> </li> <li> <article> <a href="#"> <header> <h2>The Art of Collapsing Margins</h2> <time datetime="2014-06-12">12th Jun 2014</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestiae dolorum dolores aspernatur earum aut quas cupiditate voluptate. Modi molestias eius aliquid alias nemo id in error necessitatibus quos itaque.</p> </a> </article> </li> <li> <article> <a href="#"> <header> <h2>Dealing with Transitions</h2> <time datetime="2014-06-26">26th Jun 2014</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestiae dolorum dolores aspernatur earum aut quas cupiditate voluptate. Modi molestias eius aliquid alias nemo id in error necessitatibus quos itaque.</p> </a> </article> </li> <li> <article> <a href="#"> <header> <h2>Cascading Color Styles</h2> <time datetime="2014-06-24">24th Jun 2014</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestiae dolorum dolores aspernatur earum aut quas cupiditate voluptate. Modi molestias eius aliquid alias nemo id in error necessitatibus quos itaque.</p> </a> </article> </li> <li> <article> <a href="#"> <header> <h2>The Art of Collapsing Margins</h2> <time datetime="2014-06-12">12th Jun 2014</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestiae dolorum dolores aspernatur earum aut quas cupiditate voluptate. Modi molestias eius aliquid alias nemo id in error necessitatibus quos itaque.</p> </a> </article> </li>
</ul> <script src="js/index.js"></script>
</body>
</html>

Blog Concept - Script Codes CSS Codes

body { padding: 250px 10px 0; background-color: #efefef; font-family: 'Droid Serif', serif; font-size: 14px;
}
svg { display: block;
}
svg * { fill: currentColor;
}
#header { z-index: 3; position: fixed; top: 0; left: 0; width: 100%; height: 250px; box-sizing: border-box; padding: 25px 0; background-color: #3079d0; color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); transition: 0.65s cubic-bezier(0.6, 1.8, 0.5, 0.8); transition-property: height, padding;
}
#header.shrink { height: 50px; padding: 0.5em 0;
}
#header.shrink .logo { margin-top: -140px;
}
#header.shrink h1 { margin: 2px 0;
}
#header .logo { height: 140px; width: 140px; margin: 0 auto; transition: all 0.65s cubic-bezier(0.6, 1.8, 0.5, 0.8); /*-webkit-filter: drop-shadow(0 3px 2px rgba(0,0,0,0.2));*/
}
#header h1 { margin: 0.5em 0; font-weight: normal; text-align: center; transition: margin 0.65s cubic-bezier(0.6, 1.8, 0.5, 0.8);
}
h2 { margin: 0 0 0.3em; font-family: 'Oswald'; line-height: 1.5em; /*-webkit-font-smoothing: antialiased;*/ -moz-osx-font-smoothing: grayscale;
}
h2:after { content: ''; display: block; width: 30%; margin: 0.3em auto 0; border-top: 1px solid currentColor; transition: width 0.2s ease-in-out;
}
article header { padding: 1em 40px 0.5em; margin: 0 -40px 1em; text-align: center; color: #333; transition: all 0.2s 0.2s ease-in-out;
}
p { margin: 1em 0; line-height: 1.5em;
}
.test { list-style: none; padding-left: 0;
}
.test article { max-width: 720px; box-sizing: border-box; padding: 0 40px 1.5em; margin: 0 auto 10px; background-color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); transition: all 0.2s ease-in-out; cursor: pointer; /*& > *:last-child{ margin-bottom: 0; }*/
}
.test article:hover,
.test article:active,
.test article:focus { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transform: scale(1.01); transition-delay: 0.2s;
}
.test article:hover header,
.test article:active header,
.test article:focus header { background-color: #3079d0; color: #fff; transition-delay: 0;
}
.test article:hover h2:after,
.test article:active h2:after,
.test article:focus h2:after { width: 60%; transition-delay: 0.2s;
}
.test article a { display: block; text-decoration: none; color: inherit;
}

Blog Concept - Script Codes JS Codes

var Header = function(node){ var shrinkName = 'shrink'; this.node = node; this.toggle = function(pos){ node.classList.toggle('shrink',pos > 160); }
}.bind(this);
var header = new Header(document.querySelector('.js_header'));
var lastPos = 0;
(function getScrollPos(){	requestAnimationFrame(getScrollPos);	var pos = window.pageYOffset;	if(pos != lastPos){	header.toggle(pos);	}	lastPos = pos;
}());
Blog Concept - Script Codes
Blog Concept - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 4.5
Size 7,663 Kb
Views 18,216
Do you need developer help for Blog Concept?

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!

Daniel Gooß (daniel_gooss) Script Codes
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!