Flat Blog layout in CSS3

Developer
Renaud Tertrais
Size
4,111 Kb
Views
68,816
  1. Flat Blog layout in CSS3 Previews
  2. Flat Blog layout in CSS3 HTML Codes
  3. Flat Blog layout in CSS3 CSS Codes
  4. Flat Blog layout in CSS3 JS Codes

How do I make an flat blog layout in css3?

A flat blog layout css3 with a view switch lines / blocs.. What is a flat blog layout in css3? How do you make a flat blog layout in css3? This script and codes were developed by Renaud Tertrais on 09 July 2022, Saturday.

Flat Blog layout in CSS3 Previews
IQ Test

Flat Blog layout in CSS3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Blog layout in CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1 id="header" class="text-primary">My Blog</h1>
<div class="container list-article"> <div class="btn-group pull-right" id="switch-view"> <button class="btn btn-primary"> <span class="icon-th-large"></span> </button> <button class="btn btn-primary active"> <span class="icon-th-list"></span> </button> </div> <div class="clearfix"></div> <div class="row"> <div class="col-xs-12 article-wrapper"> <article> <a href="#" class="more">more</a> <div class="img-wrapper"><img src="http://lorempixel.com/150/150/fashion" alt="" /></div> <h1>Lorem ipsum dolor.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p> </article> </div> <div class="col-xs-12 article-wrapper"> <article> <a href="#" class="more">more</a> <div class="img-wrapper"><img src="http://lorempixel.com/150/150/city" alt="" /></div> <h1>Dignissimos perferendis quae.</h1> <p>Numquam dolorem sed quae placeat iusto! Quibusdam doloremque enim assumenda aliquam impedit earum alias labore.</p> </article> </div> <div class="col-xs-12 article-wrapper"> <article> <a href="#" class="more">more</a> <div class="img-wrapper"><img src="http://lorempixel.com/150/150/food" alt="" /></div> <h1>Quisquam deserunt cumque!</h1> <p>Dolor tempora nihil facere explicabo qui mollitia deleniti quam quia iure nisi voluptate voluptatibus cum.</p> </article> </div> <div class="col-xs-12 article-wrapper"> <article> <a href="#" class="more">more</a> <div class="img-wrapper"><img src="http://lorempixel.com/150/150/nature" alt="" /></div> <h1>Velit natus possimus.</h1> <p>Illum voluptates nisi asperiores temporibus illo maiores qui aliquid corporis exercitationem libero dolor tenetur. Doloremque!</p> </article> </div> <div class="col-xs-12 article-wrapper"> <article> <a href="#" class="more">more</a> <div class="img-wrapper"><img src="http://lorempixel.com/150/150/abstract" alt="" /></div> <h1>Atque quo maxime.</h1> <p>Sed eveniet iste magni possimus ipsum dolore ea nesciunt eligendi id. Eum quos voluptatibus ullam.</p> </article> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat Blog layout in CSS3 - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Pacifico);
body { padding: 0 100px 100px; background-color: #CDE !important;
}
h1#header { text-align: center; padding: 50px; font-size: 62px; font-family: "Pacifico"; text-shadow: 0 2px 2px #3c77b3;
}
.article-wrapper { -moz-transition: width 0.4s; -o-transition: width 0.4s; -webkit-transition: width 0.4s; transition: width 0.4s;
}
article { position: relative; padding-left: 180px; padding-right: 75px; height: 150px; margin-bottom: 30px; background-color: #FFF; -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; cursor: pointer;
}
article .img-wrapper { position: absolute; top: -10px; left: -10px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background-color: #CDE; padding: 10px; z-index: 1000; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s;
}
article .img-wrapper img { -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; width: 150px;
}
article h1 { height: 75px; line-height: 75px; font-size: 24px; border-bottom: 2px solid #CDE; color: #428bca; -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s;
}
article p { color: #888;
}
article a { position: absolute; display: block; top: 0; left: 0; height: 100%; line-height: 150px; text-align: center; width: 100%; background-color: #FFF; font-size: 48px; font-style: italic; opacity: 0; color: #428bca !important; -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; text-decoration: none !important; -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; font-family: "Pacifico"; text-shadow: 0 1px 1px #AAA;
}
article:hover .img-wrapper { padding: 5px; -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg);
}
article:hover .img-wrapper img { width: 160px;
}
article:hover a { opacity: 1;
}
.bloc article { padding: 10px; height: 225px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 75px;
}
.bloc article .img-wrapper { position: relative; top: -85px; width: 170px; left: inherit; margin: auto; margin-bottom: -100px;
}
.bloc article h1 { font-size: 14px; height: 37.5px; line-height: 37.5px;
}
.bloc article p { font-size: 12px;
}
.bloc article a { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; line-height: 255px;
}

Flat Blog layout in CSS3 - Script Codes JS Codes

// JS only for the switch
$(function(){ $("#switch-view").click(function(){ $(this).find("button").toggleClass("active"); $(".article-wrapper").toggleClass("bloc col-xs-12 col-xs-4"); });
});
Flat Blog layout in CSS3 - Script Codes
Flat Blog layout in CSS3 - Script Codes
Home Page Home
Developer Renaud Tertrais
Username renaudtertrais
Uploaded July 09, 2022
Rating 4.5
Size 4,111 Kb
Views 68,816
Do you need developer help for Flat Blog layout in CSS3?

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!

Renaud Tertrais (renaudtertrais) Script Codes
Name
Images gallery with CSS3 transitions
Pure CSS albums gallery
Tiny CSS3 Round Breadcrumb
Flat CSS3 Breadcrumb
CSS3 Transitions on grid
Angular JS - Basic app
Pure CSS3 arrow icons
Buttons wip...
Flat CSS3 rating system
React-draggable
Create amazing blog posts 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!