"layouts - ugarit user interface grid card"
Bootstrap 4.0.0 Snippet by shu3aybbadran

<!-- AlPhaD UI - Ugarit layout * Version: 1.0.0 * Build Date : 18 12 2017 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * contribute on github : https://github.com/alphadsy/alpha-ui more ui & layout https://github.com/alphadsy --> <!DOCTYPE html> <html lang="en"> <head> <!-- meta tags --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- website meta --> <!-- set website Info --> <meta name="description" content="website description goes here"> <meta name="keywords" content="website keywork goes here"> <meta name="author" content="ALPHA D"> <!-- set Website Title --> <title>Ugarit - AlphaD UI</title> <!-- Favicon set link to website favicon in href="" ex:href="img/icon.png" --> <link href="#" rel="icon" type="image/png"> <!-- css --> <!-- Bootstrap 4 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <!-- simplebar --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"> <!-- ugarit css --> <link href="ugarit.css" rel="stylesheet"> </head> <body class="background"> <!-- page --> <div class="page-container"> <!-- ====================== left side ======================= --> <div class="left-side"> <!-- brand --> <div class="brand"> <h2>Left Side</h2> <h4>main information section.</h4> <p>you can use color-bg image-bg carousel-bg...</p> </div> </div><!-- / .left-side --> <!-- ====================== right side ======================= --> <div class="right-side"> <!-- wall --> <div class="wall" data-simplebar> <!-- ====================== intro ======================= --> <div class="section intro" id="intro"> <h2>Intro/summary</h2> <p>Scroll down for more details</p> <p>recommendation: tell user that this part is scrollable</p> <i class="fa fa-angle-double-down"></i> </div><!-- / .intro --> <!-- ====================== section ======================= --> <div class="section" id="#"> <h2>More Information</h2> <p>Scroll down</p> <p>you may use different bg-color or <a href="https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/">Separators</a> to divide sections</p> </div><!-- / .sections --> <!-- ====================== section ======================= --> <div class="section" id="#"> <h2>Last Section</h2> <p>no more scrolling.</p> <a href="#"> <p>Demo(working on one!)</p> </a> <a href="https://github.com/alphadsy/alpha-ui"> <p>Report Issue & Join Us on Github.</p> </a> <a href="https://github.com/alphadsy"> <p>More Free Layouts & UI.</p> </a> </div><!-- / .section --> </div><!-- / .wall --> </div><!-- / .left-side --> </div><!-- / .page-container --> <!-- JavaScript --> <!-- jQuery v3.2 --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- bootstrap 4 js --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script><!-- simplebar --> <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.js"></script> </body> </html>
/* AlPhaD UI - Ugarit layout * Version: 1.0.0 * Build Date : 18 12 2017 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * contribute on github : https://github.com/alphadsy/alpha-ui more ui & layout https://github.com/alphadsy -------------------- [Layout] * body /.background + Page-container + Left-side - Brand + Right-side + Wall - Section -------------------- [Color codes] Background: #232741 (dark-blue) -------------------- [Typography] -------------------- [content table] 1- Extra small devices (portrait phones, less than 576px) 2- Small devices (landscape phones, 576px and up) 3- Medium devices (tablets, 768px and up) 4- Large devices (desktops and landscape tablets, 992px and up) 5- Extra large devices (large desktops and tv, 1200px and up) */ /* ======================================= 1- Extra small devices (portrait phones, less than 576px) ========================================*/ /* === full page ===*/ html, body { height:100%; width:100%; overflow-y: visible; overflow-x: hidden; } .background { background-color: #232741; min-height: 100vh; min-width: 100vw; } /* === page-container ===*/ .page-container { margin-bottom: 3vh; margin-top: 2vh; margin-right: 0vw; margin-left: 0vw; padding-right: 0px; padding-left: 0px; } .left-side, .right-side { width: calc(100% - 12px); padding: 6px; float: left; } /* === left-side ===*/ .left-side { } .brand { min-height: 20vh; margin-top: 0vh; color: #fff; text-align: left; } /* === right-side ===*/ .wall { overflow-y: hidden; height: 100%; width: 100%; background-color: #fff; color: #000; border-radius: 15px; } /* === wall content ===*/ .wall .section { padding: 20px; text-align: center; } /* intro */ .section.intro { /* any spacial css for this section */ } /* ======================================= 2- Small devices (landscape phones, 576px and up) ========================================*/ @media (min-width: 576px) { } /* ======================================= 3- Medium devices (tablets, 768px and up) ========================================*/ @media (min-width: 768px) { } /* ======================================= 4- Large devices (desktops, 992px and up) ========================================*/ @media (min-width: 992px) { /* === 1-1 full page ===*/ html, body { overflow-y: hidden; } .background { } /* === page-container ===*/ .page-container { margin-bottom: 8vh; margin-top: 7vh; margin-right: 8vw; margin-left: 8vw; padding-right: 10px; padding-left: 10px; } .left-side, .right-side { width: 50%; padding:10px; } /* === left-side ===*/ .left-side { } .brand { min-height: 40vh; margin-top: 30vh; } /* === wall ===*/ .wall { height: calc(85vh); overflow-x: hidden!important; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* === wall content ===*/ .wall .section { min-height: calc(85vh); } /* intro */ .section.intro { /* any spacial css for this section */ } } /* ======================================= 5- Extra large devices (large desktops, 1200px and up) ========================================*/ @media (min-width: 1200px) { }
### Credits: - [Bootstrap](https://getbootstrap.com) - [simpleBar](https://github.com/Grsmto/simplebar)

Questions / Comments:

Related: See More