Blog
This is a single-page responsive HTML/CSS template that can be used to display stories with the main image at the center and the other three images with the title after the content. The template also contains background wallpaper that you can change according to the theme of the story.
DEMO
Open demo in a full window – https://demos.webdevpuneet.com/layouts/layout1/index.html
HTML
<!doctype html>
<html lang="en">
<head>
<title>Story Title</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="robots" content="INDEX,FOLLOW"/>
<meta name="keywords" content="" />
<meta name="description" content="This is the story description"/>
<meta name="author" content="Webdevpuneet" />
<meta name="copyright" content="© 2020 Webdevpuneet" />
<!-- OG Tags -->
<meta property="og:title" content="Story Title" />
<meta property="og:url" content="" />
<meta property="og:description" content="This is the story description" />
<meta property="og:image" content="" />
<meta property="og:type" content="article" />
<!-- Icons -->
<link rel="icon" href="./assets/img/logo-32.png" sizes="32x32" />
<link rel="icon" href="./assets/img/logo-192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="./assets/img/logo-180.png" />
<meta name="msapplication-TileImage" content="./assets/img/logo-240.png" />
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<div class="container-wrapper">
<header class="siteHeader">
<div class="container">
<div class="siteHeader__inner">
<div class="siteHeader__logoWrapaper">
<img alt="" src="https://placeholder.pics/svg/498x130/DEDEDE/555555/Logo%20Image">
</div>
<h1>This can be the story title</h1>
</div>
</div>
</header>
<div class="mainBody">
<div class="container">
<div class="mainBody__columns">
<div class="mainBody__col1">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="mainBody__col2">
<img class="mainBody__img" alt="" src="https://placeholder.pics/svg/500x620">
</div>
<div class="mainBody__col3">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="mainBody__btnWrapper">
<a class="mainBody__btn" target="_blank" href="">Click here</a>
</div>
</div>
</div>
</div>
</div>
<footer class="siteFooter">
<div class="container">
<div class="siteFooter__img">
<div class="siteFooter__flex">
<div class="siteFooter__flexItem">
<div title="Image 1" class="siteFooter__photo">
<img alt="Image 1" src="https://placeholder.pics/svg/503x374">
<div class="siteFooter__flexTitle">Image 1 Title</div>
</div>
</div>
<div class="siteFooter__flexItem">
<div title="Image 2" class="siteFooter__photo">
<img alt="Image 2" src="https://placeholder.pics/svg/503x374">
<div class="siteFooter__flexTitle">Image 2 Title</div>
</div>
</div>
<div class="siteFooter__flexItem">
<div title="Image 3" class="siteFooter__photo">
<img alt="Image 3" src="https://placeholder.pics/svg/503x374">
<div class="siteFooter__flexTitle">Image 3 Title</div>
</div>
</div>
</div>
</div>
<div class="siteFooter__copy">
© 2020 webdevpuneet.com
</div>
</div>
</footer>
</div>
</body>
</html>
CSS
/* Styled by: webdevpuneet.com */
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,::after,::before{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:none}a:hover{color:#024dbc;text-decoration:underline}a:not([href]),a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img{vertical-align:middle}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:textfield}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}mark{padding:.2em;background-color:#fcf8e3}progress{vertical-align:baseline}::-webkit-datetime-edit{overflow:visible;line-height:0}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}main{display:block}[hidden]{display:none!important}
body{
background: url('../img/bg.jpg');
font-size: 17px;
}
@media screen and (max-width: 768px) {
body{
font-size: 16px;
}
}
.container-wrapper{
margin:0 auto;
background: rgba(255,255,255, 0.90);
max-width: 1520px;
padding: 0 10px;
}
.container{
}
/* Header */
.siteHeader__inner{
text-align: center;
padding: 15px 15px;
}
.siteHeader__logoWrapaper img{
max-width: 80%;
}
.siteHeader h1{
font-family: 'Vidaloka', serif;
font-weight: 700;
color: #015b7e;
}
/* Body and columns */
.mainBody{
}
.mainBody__columns{
display: flex;
text-align:justify;
text-justify:auto;
}
.mainBody__columns > div{
width: 33.33%;
padding: 0 10px;
}
.mainBody__col2{
text-align: center;
}
.mainBody__img{
max-width: 100%;
display: inline-block;
}
/* Footer */
.siteFooter__copy{
text-align: center;
padding: 15px 15px;
font-size: 14px;
}
.siteFooter__img{
margin-top: 20px;
background-size: 100% auto;
padding: 0;
}
.siteFooter__img img{
width: 100%;
pointer-events: none;
}
.mainBody__btn{
color: #ffffff;
display: inline-block;
background: #015b7e;
line-height: 1;
min-height: 45px;
text-transform: uppercase;
text-decoration: none;
border-radius: 50px;
padding: 13px 20px 10px;
font-size: 16px;
text-align: center;
}
.mainBody__btn:hover{
text-decoration: none;
color: #ffffff;
}
.siteFooter__flex{
display: flex;
}
.siteFooter__flexItem{
width: 33.33%;
padding:10px;
}
.siteFooter__photo{
border:2px solid #cecece;
position: relative;
}
.siteFooter__flexTitle{
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding: 5px;
line-height: 1;
background: rgba(255, 255, 255, 0.9);
text-align: center;
font-weight: 600;
}
/* Mobile responsive */
@media screen and (max-width: 1024px) {
body{
font-size: 13px;
}
.mainBody__btn{
font-size: 13px;
min-height: 40px;
}
p{
margin-bottom: 10px;
}
.siteFooter__img{
padding: 0;
}
}
@media screen and (max-width: 768px) {
.mainBody__columns{
display: block;
}
.mainBody__columns > div{
width: 100%;
padding-bottom: 20px;
}
.mainBody__columns > div.mainBody__col1{
padding-bottom: 0px;
}
.mainBody__btnWrapper{
text-align: center;
}
.siteFooter__img{
margin-top: 0px;
}
.mainBody__img{
max-width: 400px;
width: 100%;
}
}
@media screen and (max-width: 600px) {
.siteHeader h1{
font-size: 30px;
line-height: 1;
}
.siteFooter__flex{
display: block;
}
.siteFooter__flexItem{
width: 100%;
}
}
You must be logged in to post a comment.