"social posts card user-interface section "
Bootstrap 4.0.0 Snippet by shu3aybbadran

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- AlPhaD UI - Posts UI * Version: 1.0 * Build Date : 07-04-2018 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.github.com/alphadsy/ * License : MIT --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Posts UI by AlPhaD</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <!-- font-awesome icons --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> <!-- header css --> <link rel="stylesheet" href="post.css"> </head> <body> <!-- demo-title --> <div class="demo-title"> <h1 class="display-1">Posts UI</h1> <p>by <a href="#">@AlPhaD</a></p> <p>contribute on github <a href="https://github.com/alphadsy/alpha-ui">alpha-ui</a></p> </div> <!-- post #1 --> <div class="post" id="post1"> <div class="caption"> <div class="author"> <img src="https://randomuser.me/api/portraits/men/73.jpg" alt="" class="avatar"> <div class="name"><a>@shu3aybbadran</a></div><br/> <div class="meta"><i class="far fa-calendar-alt"></i> 2 min - <i class="fas fa-globe"></i> puplic</div> </div> <div class="text"> <p>Lorem ipsum dolor sit ametconsectetur adipisicing elit. Iusto modi dolore ducimus magnam fuga quae error consequatur perspiciatis doloribus, deserunt veritatis, excepturi amet, nihil maxime est illum tempore? Voluptatibus, eum?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi dolore vero consectetur?</p> </div> </div><!-- / .caption --> <div class="category">post category</div> <div class="content"> <img src="https://cdn.stocksnap.io/img-thumbs/960w/VZBJUVPO25.jpg" class="img" alt=""> </div><!-- / .content --> </div> <!-- post #2 --> <div class="post" id="post2"> <div class="caption"> <div class="content"> <div class="author"> <img src="https://randomuser.me/api/portraits/men/73.jpg" alt="" class="avatar"> <div class="name">@shu3aybbadran</div> </div> <div class="text"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi dolore vero consectetur?</p> </div> </div> </div><!-- / .caption --> <div class="content"> <img src="https://cdn.stocksnap.io/img-thumbs/960w/WPOWZBGDTU.jpg" class="img" alt=""> </div><!-- / .content--> </div> <!-- post #3 --> <div class="post" id="post3"> <div class="content"> <div class="author"> <img src="https://randomuser.me/api/portraits/men/73.jpg" alt="" class="avatar"> <div class="name">@shu3aybbadran</div><br/> <div class="meta"><i class="fas fa-map-marker-alt"></i> Syria</div> </div> <img src="https://cdn.stocksnap.io/img-thumbs/960w/XSTO5645BM.jpg" class="img" alt=""> </div><!-- / .img --> <div class="caption"> <div class="text"> <h2 class="display-4">Post Title</h2> <div class="category">post category</div> <p>Lorem ipsum dolor sit ametconsectetur adipisicing elit. Iusto modi dolore ducimus magnam fuga quae error consequatur perspiciatis doloribus, deserunt veritatis, excepturi amet, nihil maxime est illum tempore? Voluptatibus, eum?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi dolore vero consectetur?</p> </div> </div><!-- / .caption --> </div> <!-- post #4 --> <div class="post" id="post4"> <div class="content"> <img src="https://cdn.stocksnap.io/img-thumbs/960w/XSTO5645BM.jpg" class="img" alt=""> </div><!-- / .img --> <div class="category">post category</div> <div class="caption"> <div class="text"> <h2 class="display-4">Post Title</h2> <p>Lorem ipsum dolor sit ametconsectetur adipisicing elit. Iusto modi dolore ducimus magnam fuga quae error consequatur perspiciatis doloribus, deserunt veritatis, excepturi amet, nihil maxime est illum tempore? Voluptatibus, eum?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi dolore vero consectetur?</p> <div class="author"> <img src="https://randomuser.me/api/portraits/men/73.jpg" alt="" class="avatar"> <div class="name">@shu3aybbadran</div><br/> <div class="meta"><i class="fas fa-map-marker-alt"></i> Syria</div> </div> </div> </div><!-- / .caption --> </div> <!-- post #5 --> <div class="post" id="post5"> <div class="caption"> <div class="author"> <img src="https://randomuser.me/api/portraits/men/73.jpg" alt="" class="avatar"> <div class="name">@shu3aybbadran</div><br/> <div class="meta"><i class="far fa-calendar-alt"></i> 2 min - <i class="fas fa-globe"></i> puplic</div> </div> <div class="text"> <p>Lorem ipsum dolor sit ametconsectetur adipisicing elit. Iusto modi dolore ducimus magnam fuga quae error consequatur perspiciatis doloribus, deserunt veritatis, excepturi amet, nihil maxime est illum tempore? Voluptatibus, eum?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi dolore vero consectetur?</p> </div> </div><!-- / .caption --> <div class="content images"> <img src="https://cdn.stocksnap.io/img-thumbs/960w/XSTO5645BM.jpg" class="img" alt=""> <img src="https://cdn.stocksnap.io/img-thumbs/960w/VZBJUVPO25.jpg" class="img" alt=""> <img src="https://cdn.stocksnap.io/img-thumbs/960w/WPOWZBGDTU.jpg" class="img" alt=""> <img src="https://cdn.stocksnap.io/img-thumbs/960w/VZBJUVPO25.jpg" class="img" alt=""> </div><!-- / .content --> </div> <div class="demo-more d-lg-flex justify-content-around"> <p><i class="fa fa-users"></i> contribute on github <a href="https://github.com/alphadsy/alpha-ui">alpha-ui</a></p> <p><i class="fa fa-gift"></i> more ui and layout <a href="https://github.com/alphadsy">alphadsy</a></p> <p><i class="fa fa-balance-scale"></i> under <a>MIT</a></p> <p><i class="fa fa-camera-retro"></i> bg-image from <a href="http://stocksnap.io/">stocksnap</a></p> </div> </body> </html>
/* AlPhaD UI - Posts UI * Version: 1.0 * Build Date : 07-04-2018 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.github.com/alphadsy/ * License : MIT [Layout] [Color codes] [Typography] [content table] - post main css - post main css (lg) - #post1 css - #post1 css (lg) . . . - demo css (for demo purpose only) */ /* ======================================= post ========================================*/ .post { position: relative; width: 92vw; height: auto; margin: auto; margin-bottom: 1rem; background-color: #fff; color: #000; border-radius: 5px; margin-bottom: 3rem; } .post .caption { position: relative; height: inherit; background-color: inherit; padding: 10px; } .post .content { position: relative; height: inherit; padding: 10px; } .post .content .img { width: 100%; height: auto; } .post .author { position: relative; margin-bottom: 3rem; } .post .author .avatar { position: relative; float: left; width: 3rem; border-radius: 50%; } .post .author .name { position: relative; float: left; font-size: 1rem; font-weight: 500; padding-left: 1rem; } .post .meta { float: left; padding-left: 1rem; size: .6rem; color: #000; } .post .caption .text { margin: .5rem 0; } .post .category { visibility: hidden; } /*=== Large devices (desktops, 992px and up) ===*/ @media (min-width: 992px) { .post { width: 75vw; height: 500px; } .post .caption { float: left; padding: 2rem; } .post .author { margin-bottom: 5rem; } .post .author .avatar { } .post .author .name { } .post .caption .meta { } .post .caption .text { margin: 1rem 0; } .post .content { float: left; padding: 0; } .post .content .img { height: 100%; } .post .category { visibility: visible; } } /* ======================================= post#1 ========================================*/ /*=== Large devices (desktops, 992px and up) ===*/ @media (min-width: 992px) { #post1 { background-color:#212226; color: #fff; } #post1 .caption { width: 30%; } #post1 .caption .meta { float: left; padding-left: 1rem; color: #808080; } #post1 .caption .text { } #post1 .category { position: absolute; top: 10%; right: 0; padding: .5rem; background-color: #808080; z-index: 5; } #post1 .content { width: 70%; } } /* ======================================= post#2 ========================================*/ /*=== Large devices (desktops, 992px and up) ===*/ @media (min-width: 992px) { #post2 { } #post2 .caption { width: 30%; } #post2 .content { width: 70%; } #post2 .caption .content { position: absolute; left: 50%; top: 50%; height: auto; padding: 0; transform: translate(-50%, -50%); text-align: center; } #post2 .author { margin: 2rem; } #post2 .author .avatar { float: none; width: 5rem; margin: 1rem; } #post2 .author .name { float: none; } #post2 .caption .text { color: #212226; } } /* ======================================= post#3 ========================================*/ /*=== Large devices (desktops, 992px and up) ===*/ @media (min-width: 992px) { #post3 { } #post3 .content { width: 30%; } #post3 .author { padding: 2rem; z-index: 5; } #post3 .author .meta { float: left; padding-left: 1rem; } #post3 .content .img { position: absolute; top: 0; } #post3 .caption { width: 70%; background-color:#212226; color: #fff; } #post3 .caption .text { position: absolute; top: 50%; padding: 2rem; transform: translate(0, -50%); color: #ddd; } #post3 .caption .category { margin-top: 1rem; margin-bottom: 1rem; font-size: 1.2rem; font-weight: 400; } } /* ======================================= post#4 ========================================*/ /*=== Large devices (desktops, 992px and up) ===*/ @media (min-width: 992px) { #post4 { } #post4 .author { z-index: 5; margin-top: 2rem; } #post4 .author .meta { float: left; padding-left: 1rem; } #post4 .caption { width: 60%; background-color:#fff; color: #212226; } #post4 .caption .text { position: absolute; top: 50%; padding: 2rem; transform: translate(0, -50%); color: #212226; } #post4 .category { position: absolute; top: 5%; right: 2rem; padding: .5rem; z-index: 5; color: #808080; display: inline-block; } #post4 .category::before { content:''; position: absolute; top: -40%; left: 100%; width: 2rem; height: 100%; display: inline-block; margin-right: 100%; border-bottom: 2px solid #000; } #post4 .content { width: 40%; } #post4 .content .img { position: absolute; top: 0; } } /* ======================================= post#5 ========================================*/ #post5 { background-color:#212226; color: #fff; } #post5 .author .meta { color: #fff; } #post5 .images { overflow:hidden } #post5 .images .img { float: left; width: 50%; height: 150px; opacity: 1; } /*=== Large devices (desktops, 992px and up) ===*/ @media (min-width: 992px) { #post5 { } #post5 .caption { width: 30%; } #post5 .author { } #post5 .caption .text { color: #ddd; } #post5 .content { width: 70%; padding: 2rem; } #post5 .images .img { height: 50%; opacity: .6; } #post5 .images .img:hover { opacity: 1; } } /* ======================================= demo css ========================================*/ /*=== for demo only ===*/ body { background-color: #f8f8f8; } .demo-title { text-align: center; color: #808080; padding-top: 20vh; padding-bottom: 20vh; } .post { border: 1px solid #eee; /* box-shadow: 2px 2px 2px 2px #ddd; */ } .demo-more { text-align: center; color: #808080; padding-top: 10vh; padding-bottom: 10vh; } .demo-more i { color: #696969; } .update-note { position: absolute; top: 2%; left: 2%; background-color: rgb(33, 33, 33); color: #fff; border-radius: 10px; padding: 0 15px; } a { text-decoration: underline; color: #696969; font-weight: 600; } a:hover { color: #696969; } body { overflow-x: hidden; }

Related: See More


Questions / Comments: