Flat Origami Article

Developer
Matt Litherland
Size
3,581 Kb
Views
60,720
  1. Flat Origami Article Previews
  2. Flat Origami Article HTML Codes
  3. Flat Origami Article CSS Codes

How do I make an flat origami article?

This is a Pure CSS article presentation to be tiled horizontally within a carousel. It's using the new Boostrap and is responsive. The flip down was inspired by a recent pen by @mariusbalaj - his work is lovely.. What is a flat origami article? How do you make a flat origami article? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Flat Origami Article Previews
IQ Test

Flat Origami Article - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Origami Article</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row show-grid"> <div class="col-lg-12"> <h1 class="heading"> Flat Origami Article <small>Pure CSS, Responsive</small></h1> </div> </div>
</div>
<div class="container"> <div class="row show-grid"> <div class="col-lg-12"> <div id="slide"> <!-- Ribbons --> <span class="ribbon-a"></span> <span class="ribbon-b"></span> <span class="ribbon-c"></span> <span class="ribbon-d"></span> <!-- Article --> <article class="article"> <figure> <img src="https://www.redbullcontentpool.com/resources/2013/07/09/00001-01000/P-20130709-00550/image_proxy_large.jpg" /> </figure> <span class="article-heading"> Article Heading </span> <span class="article-snippet"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet... </span> <a class="article-url" href="#" title="Continue Reading">Continue Reading</a> <ul class="article-social"> <li> <a href="#"><i class="icon-facebook"></i></a> <a href="#"><i class="icon-twitter"></i></a> <a href="#"><i class="icon-google-plus"></i></a> </li> </ul> </article> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Flat Origami Article - Script Codes CSS Codes

@import "http://netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
html, body { background: #f8f8f8; padding: 0px 0;}
h1 { margin-bottom: 25px;}
#slide { display: block; position: relative; width: 100%; height: 460px; background: #fff; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.1);} /* Focus Animation */ #slide .article { -webkit-transform: scale3d(1.02, 1.02, 0.1); -webkit-transition: 0.1s linear 0s; -o-transition: 0.1s linear 0s; transition: 0.1s linear 0s;} #slide:hover .article { -webkit-transform: scale3d(1.0, 1.0, 0.1); -webkit-transition: 0.1s linear 0s; -o-transition: 0.1s linear 0s; transition: 0.1s linear 0s;}
/* ----------------------- * Shapes - Ribbon A */
.ribbon-a { display: block; position: absolute; top: 200px; left: 0px; width: 150px; height: 20px; background: rgba(231,76,60,1.0);} .ribbon-a:before { content: " "; position: absolute; top: -15px; width: 0; height: 0; border-left: 150px solid transparent; border-bottom: 15px solid rgba(231,76,60,1.0);}
.ribbon-a:after { content: " "; position: absolute; top: 20px; width: 0; height: 0; border-left: 150px solid transparent; border-top: 30px solid rgba(231,76,60,1.0);}
/* ----------------------- * Shapes - Ribbon B */
.ribbon-b { display: block; position: absolute; top: 185px; left: 150px; width: 300px; height: 35px; background: rgba(192,57,43,1.0);} .ribbon-b:before { content: " "; position: absolute; top: -40px; width: 0; height: 0; border-left: 300px solid transparent; border-bottom: 40px solid rgba(192,57,43,1.0);}
.ribbon-b:after { content: " "; position: absolute; top: 35px; width: 0; height: 0; border-right: 300px solid transparent; border-top: 30px solid rgba(192,57,43,1.0);}
/* ----------------------- * Shapes - Ribbon C */
.ribbon-c { display: block; position: absolute; top: 200px; right: 0px; width: 150px; height: 20px; background: rgba(231,76,60,1.0);} .ribbon-c:before { content: " "; position: absolute; top: -15px; width: 0; height: 0; border-right: 150px solid transparent; border-bottom: 15px solid rgba(231,76,60,1.0);}
.ribbon-c:after { content: " "; position: absolute; top: 20px; width: 0; height: 0; border-right: 150px solid transparent; border-top: 30px solid rgba(231,76,60,1.0);}
/* ----------------------- * Shapes - Ribbon D */
.ribbon-d { display: block; position: absolute; top: 185px; right: 150px; width: 300px; height: 35px; background: rgba(192,57,43,1.0);} .ribbon-d:before { content: " "; position: absolute; top: -40px; width: 0; height: 0; border-right: 300px solid transparent; border-bottom: 40px solid rgba(192,57,43,1.0);}
.ribbon-d:after { content: " "; position: absolute; top: 35px; width: 0; height: 0; border-left: 300px solid transparent; border-top: 30px solid rgba(192,57,43,1.0);}
/* ----------------------- * Article */
.article { display: block; position: absolute; width: 320px; top: 30px; left: 50%; margin-left: -160px; background: rgba(168,46,25,1);} .article:after { content: " "; width: 320px; height: 30px; background: rgba(0,0,0,0.1); position: absolute; bottom: -20px; left: 0; border-radius: 50%; -webkit-filter: blur(7px); -moz-filter: blur(7px); -ms-filter: blur(7px); -o-filter: blur(7px); filter: blur(7px);}
.article figure { display: block; margin: 0; position: relative; top: 0; left: 0; height: 100px; overflow: hidden;} .article figure img { position: relative; top: 0; width: 320px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5);}
.article-heading { float: left; position: relative; top: 0; width: 340px; height: 75px; line-height: 75px; font-weight: 500; padding: 0 20px; position: relative; left: -10px; background: rgba(231,76,60,1.0); border-bottom: 3px solid rgba(131,34,18,1); text-shadow: -1px -1px 0px rgba(0,0,0,0.2); line-height: 75px; color: #fff; font-size: 24px;}
.article-heading:before { position: absolute; top: 74px; left: 0; content: "";	width: 0;	height: 0;	border-left: 10px solid transparent;	border-top: 10px solid rgba(131,34,18,1);}
.article-heading:after { position: absolute; top: 74px; right: 0; content: "";	width: 0;	height: 0;	border-right: 10px solid transparent;	border-top: 10px solid rgba(131,34,18,1);}
.article-snippet { float: left; position: relative; width: 320px; padding: 20px; background: rgba(168,46,25,1); color: #fff;}
.article-url { float: left; position: relative; width: 320px; padding: 15px 20px; background: rgba(131,34,18,1); color: #fff;}
.article-url:hover { color: #fff; text-decoration: none; background: rgba(106,27,14,1.0); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}
/* ----------------------- * Unfold */
.article-social { width: 120px; height: 40px; position: absolute; bottom: -40px; float: left; box-sizing: border-box; font-size: 13px; margin: 0; padding: 0;}
.article-social li { color: #fff; background: rgba(168,46,25,1); padding: 0 0 0 20px; line-height: 40px;} .article-social li a { display: inline-block; height: 26px; width: 26px; border-radius: 13px; line-height: 26px; text-align: center; text-decoration: none; color: rgba(192,57,43,1.0); background: #fff;}
.article-social li { -webkit-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: perspective(250px) rotateX(-90deg); -o-transform: perspective(250px) rotateX(-90deg); transform: perspective(250px) rotateX(-90deg); -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05); -webkit-transition: 0.2s linear 0.2s; -o-transition: 0.2s linear 0.2s; transition: 0.2s linear 0.2s;}
.article:hover .article-social li { -webkit-transform: perspective(350px) rotateX(0deg); -o-transform: perspective(350px) rotateX(0deg); transform: perspective(350px) rotateX(0deg); -webkit-transition: 0.2s linear 0s; -o-transition: 0.2s linear 0s; transition: 0.2s linear 0s;}
.article-social li:after { position: absolute; top: 0; right: -40px; content: "";	width: 0;	height: 0;	border-right: 40px solid transparent;	border-top: 40px solid rgba(168,46,25,1);}
Flat Origami Article - Script Codes
Flat Origami Article - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 3,581 Kb
Views 60,720
Do you need developer help for Flat Origami Article?

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!

Matt Litherland (mattsince87) Script Codes
Name
Google Inspired CSS Preloader
Wishlist Toggle Button
Slick Two Part Form
SVG Firework Animation
Node Waves
Animated SVG Path
Share Your Profile
Better Bootstrap Buttons
Responsive Flot Chart
Vertical Align Images - Explained
Create amazing captions 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!