<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
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)
