<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 - Hexa-inspertion
* Version: 1.5
* Build Date : 17-08-2018
* Last Update : 4-10-2018 - [add new color]
* 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.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hexa-inspertion | alphad</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
/*demo*/
.section {
position: relative;
height: 75vh;
max-height: 500px;
background-color: #fff;
margin-bottom: 2rem;
border: #DCDBD7 1px solid;
border-radius: 10px;
}
.section .caption {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
}
/*=== for demo only ===*/
.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;
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-5">Hexa-inspertion by Alphad</h1>
<p class="mb-5">contribute on github <a href="https://github.com/alphadsy/alpha-ui">alpha-ui</a></p>
<p class="update-note">Updata Note: Add New Colors</p>
<h3 class="pb-3 mt-4">#White - gray - black</h3>
<div class="row">
<div class="col-md-6">
<section class="section" style="background-color: #fff;">
<div class="caption">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#fff</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #DCDBD7;">
<div class="caption">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#DCDBD7</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #8A8A8A;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#8A8A8A</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #151515;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#151515</h4>
</div>
</section>
</div>
</div>
<h3 class="pb-3 mt-4">#blue - green</h3>
<div class="row">
<div class="col-md-6">
<section class="section" style="background-color: #00A371;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#00A371</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #253F34;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#253F34</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #EAEEF1;">
<div class="caption">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#EAEEF1</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #31A5A9;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#31A5A9</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #7292A5;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#7292A5</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #4C79F7;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#4C79F7</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #8B7695;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#8B7695</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #9663F6;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#9663F6</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #4444A1;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#4444A1</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #634880;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#634880</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #44375F;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#44375F</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #545A7D;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#545A7D</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #2E294C;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#2E294C</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #0E172F;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#0E172F</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #141821;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#141821</h4>
</div>
</section>
</div>
</div>
<h3 class="pb-3 mt-4">#red - pink - orange</h3>
<div class="row">
<div class="col-md-6">
<section class="section" style="background-color: #F6A1AC;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#F6A1AC</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #B75364;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#B75364</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #F64B4B;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#F64B4B</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #D9094A;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#D9094A</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #D0B7B8;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#D0B7B8</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #B664C8;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#B664C8</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #AF1578;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#AF1578</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #D13522;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#D13522</h4>
</div>
</section>
</div>
<div class="col-md-6">
<section class="section" style="background-color: #F7B62C;">
<div class="caption text-white">
<h2>Alphad</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi rerum, vero assumenda voluptatibus aspernatur suscipit!</p>
<h4 class="pt-3">#F7B62C</h4>
</div>
</section>
</div>
</div>
</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>
</div>
</body>
</html>
