Get Lookover icon Get Lookover

chevron_leftDownload Page

Learn Get Lookover v0.5

<!-- import Get Lookover CSS -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/get-lookover/cdn@v0.5/css/get-lookover.min.css">

<!-- import jquery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- import Get Lookover JS -->

<script src="https://cdn.jsdelivr.net/gh/get-lookover/cdn@v0.5/js/get-lookover.min.js"></script>

Use .navbar class to the header tag

Use .right-navbar / .left-navbar / .center-navbar , to align the navbar links.

When using .sticky class to the header the .navbar-nav class getting absolute position


<!-- Navbar Without sticky class-->

<header class="navbar center-navbar bg-dark">

<h4 class="logo"><b>Brand</b></h4>

<nav class="navbar-nav">

<ul class="navbar-links">

<li class="navbar-items">

<a class="navtab active">Home</a>

</li>

<li class="navbar-items">

<a class="navtab">Download</a>

</li>

<li class="navbar-items">

<a class="navtab">Docs</a>

</li>

<li class="navbar-items">

<a class="navtab">About</a>

</li>

</ul>

</nav>

<span class="navmenu">☰</span>

</header>


<!-- Navbar with sticky class-->

<header class="navbar center-navbar sticky bg-dark">

<h4 class="logo"><b>Brand</b></h4>

<nav class="navbar-nav">

<ul class="navbar-links">

<li class="navbar-items">

<a class="navtab active">Home</a>

</li>

<li class="navbar-items">

<a class="navtab">Download</a>

</li>

<li class="navbar-items">

<a class="navtab">Docs</a>

</li>

<li class="navbar-items">

<a class="navtab">About</a>

</li>

</ul>

</nav>

<span class="navmenu">☰</span>

</header>


Output


Use right-navbar / center-navbar / left-navbar to align the navigation link.


☰

☰

primary...

info...

success...

danger...

warning...

red...

pink...

purple...

indigo...

blue...

cyan...

green...

yellow...

orange...

brown...

dark...

light...

twitter...

messenger...

skype...

wordpress...

whatsapp...

snapchat...

behance...

quora...

pinterest...

linkedin...

facebook...

yahoo...

github...

reddit...


To use Background color addbg- before color's name.


Example

<div class="bg-twitter">

...

</div>


Output

...

To use Text color addtext- before color's name.


Example

<div class="text-orange">

Text with orange Color

</div>


Output

Text with orange Color

Alert Background Colors


To use Alerts add.alert-${color-name} / .alert bg-${color-name}.


Example

<div class="alert-reddit">

<b>Alert</b> text here

</div>


<div class="alert bg-reddit">

<b>Alert</b> text here

</div>


<div class="alert bg-primary">

<b>Alert</b> text here

</div>


Output

Alert text here

Alert text here

Alert text here

Alert default Colors


To use Alerts add after.alertClass following classes-primary/-success/-danger/-warning/-info.


Example

<div class="alert-danger">

<b>Alert</b> text here

</div>


Output

Alert text here

Alert with close button


Add a button/span with class.close / .close-slide to deside the closing animation inside Alert parent class.


Example

<-- Close with Fade closing animation -->

<div class="alert-info">

<spanclass="close">&times;</span>

<b>Alert</b> text here

</div>


<-- Close with Slide closing animation -->

<div class="alert-primary">

<spanclass="close-slide">&times;</span>

<b>Alert</b> text here

</div>


Output

× Alert text here

× Alert text here

Buttons


To use Buttons add.btnClass. To use Get Lookover colors add.btn-${color-name} .


Example

<button class="btn-green">Btn Green</button>

<button class="btn-red bar">Btn Red</button>


Output


Outline Buttons


To use Buttons add.btn-out-${color-name}Class.

To use full width Buttons add.barClass.


Example

<button class="btn-out-success">Btn Outline Success</button>

<button class="btn-out-dark">Btn Outline Dark</button>


Output


Buttons Group


To use a group of Buttons add inside.group-btnButtons classes.

When using.barclass to button inside.group-btnit given the full width of the rest of empty space.

When adding .barclass for all buttons it giving an equal width.

Example

<!-- Button Group -->

<div class="group-btn">

<button class="btn-danger">1st Button</button>

<button class="btn-primary">2nd Button</button>

<button class="btn-success">3rd Button</button>

<button class="btn-warning">4th Button</button>

<button class="btn-blue bar">5th Button</button>

</div>


<div class="group-btn">

<button class="btn-danger bar">1st Button</button>

<button class="btn-primary bar">2nd Button</button>

<button class="btn-success bar">3rd Button</button>

<button class="btn-warning bar">4th Button</button>

<button class="btn-blue bar">5th Button</button>

</div>


Output



Containers types

There is two types of containers:

  1. Container Fluid : Full width with a padding 0.4rem.
  2. Container : Full width with a padding 0.4rem and margin 0.4rem from left and right.


To use Container add.containerClass.

To use Container Fluid add.container-fluidClass.


Example

<!-- container -->

<div class="bg-red container">

A text Here

</div>

<!-- container-fluid -->

<div class="bg-red container-fluid">

A text Here

</div>


Output

A text Here


A text Here


Jumbotrons types


There is two types of containers:

  1. Jumbotron Fluid : Full width with a padding 0.4rem and margin 0.4rem from top and bottom and border-radius 0.4rem.
  2. Jumbotron : Full width with a padding 0.4rem and margin 0.4rem and border-radius 0.4rem.


To use Jumbotron add.jumboClass.

To use Jumbotron Fluid add.jumbo-fluidClass.


Example

<!-- jumbo -->

<div class="bg-red jumbo">

A text Here

</div>

<!-- jumbo-fluid -->

<div class="bg-red jumbo-fluid">

A text Here

</div>


Output

A text Here

A text Here


Margin (all sides)

To use margin add.margin-class before margin sizes.

Margin sizes

To use Margin for the Top side add.margin-topClass.

To use Margin for the Bottom side add.margin-bottomClass.

To use Margin for the Left side add.margin-leftClass.

To use Margin for the Right side add.margin-rightClass.



Example

<!-- container with each margin value-->

<div class="margin-3em bg-red container">

A text Here

</div>

<div class="margin-bottom-04em bg-red container">

A text Here

</div>

<div class="margin-right-24rem bg-red container">

A text Here

</div>

<div class="margin-left-16px bg-red container">

A text Here

</div>

<div class="margin-top-30px bg-red container">

A text Here

</div>


Output

A text Here

A text Here

A text Here

A text Here

A text Here


Padding (all sides)

To use padding add.padding-class before padding sizes.

Padding sizes

To use padding for the Top side add.padding-topClass.

To use padding for the Bottom side add.padding-bottomClass.

To use padding for the Left side add.padding-leftClass.

To use padding for the Right side add.padding-rightClass.



Example

<!-- container with each padding value-->

<div class="padding-3em bg-red container">

A text Here

</div>

<div class="padding-bottom-04em bg-red container">

A text Here

</div>

<div class="padding-left-24rem bg-red container">

A text Here

</div>

<div class="padding-left-16px bg-red container">

A text Here

</div>

<div class="padding-top-30px bg-red container">

A text Here

</div>


Output

A text Here


A text Here


A text Here


A text Here


A text Here


How to use display:

  1. Display Container : Is allow you to display HTML elements in specific positions inside parent HTML elements.
  2. Display top right : Is allow you to display HTML elements in the right top of the parent HTML elements.
  3. Display top left : Is allow you to display HTML elements in the left top of the parent HTML elements.
  4. Display top center : Is allow you to display HTML elements in the center top of the parent HTML elements.
  5. Display bottom left : Is allow you to display HTML elements in the left bottom of the parent HTML elements.
  6. Display bottom left : Is allow you to display HTML elements in the left bottom of the parent HTML elements.
  7. Display bottom center : Is allow you to display HTML elements in the center bottom of the parent HTML elements.
  8. Display left : Is allow you to display HTML elements in the left of the parent HTML elements.
  9. Display left : Is allow you to display HTML elements in the left of the parent HTML elements.
  10. Display center : Is allow you to display HTML elements in the center of the parent HTML elements.


N.B : is required to add.display-containeras a parent class.


Example

<!--display-->

<div class="display-container color-reddit-bg" style="height: 15em; width:100%;">

<p class="display-top-left"> display-top-left </p>

<p class="display-top-center"> display-top-center </p>

<p class="display-top-right"> display-top-right </p>

<p class="display-left"> display-left </p>

<p class="display-center"> display-center </p>

<p class="display-right"> display-right </p>

<p class="display-bottom-left"> display-bottom-left </p>

<p class="display-bottom-center"> display-bottom-center </p>

<p class="display-bottom-right"> display-bottom-right </p>

</div>


Output

display-top-left

display-top-center

display-top-right

display-left

display-center

display-right

display-bottom-left

display-bottom-center

display-bottom-right


How to use input:

  1. input : build a modern input tag.
  2. input-large/-large-x/-large-xx/-large-xxx : Is allow you to make the input larger.


Example

<input type="text" name="input" placeholder="Normal input" class="input">


<input type="text" name="input" placeholder="Input Large" class="input-large">


<input type="text" name="input" placeholder="Input Large-x" class="input-large-x">


<input type="text" name="input" placeholder="Input Large-xx" class="input-large-xx">


<input type="text" name="input" placeholder="Input Large-xxx" class="input-large-xxx">



Output


How to use input group:

  1. Group Input: Allow you to display the label and the input inline with moden design.
  2. Before label: Allow you to design the label before the input.
  3. Add -reverse if the label after the input.
  4. After label: Allow you to design the label after the input.


Example

<!-- Inline group -->

<div class="group-input">

<label for="input" class="before-label"></label>

<input type="text" name="input" class="input">

</div>


<!-- Inline group reverse -->

<div class="group-input-reverse">

<input type="text" name="input reverse" class="input">

<label for="input" class="after-label"></label>

</div>


Output



How to use form-control:

  1. Add .form-controlto the <form> tag to design a beautiful form.
  2. You can add any type of inputs designs


Example

<!-- form-control v.1-->

<form class="form-control">

<!-- Inline group -->

<div class="group-input">

<label for="input" class="before-label color-dark-text">Normal Input group</label>

<input type="text" name="input" class="input">

</div>

<!-- Inline group reverse -->

<div class="group-input-reverse">

<input type="text" name="input reverse" class="input">

<label for="input" class="after-label color-dark-text">Reverse Input group</label>

</div>

</form>


<!-- form-control v.2 -->

<form class="form-control">

<label for="input">Label 1 here</label>

<input type="text" name="input" class="input">

<label for="input">Label 2 here</label>

<input type="text" name="input" class="input">

</form>


Output

We add in those examples color-behance-bg for the background color and we add the borders class (you will be able to use border class in the next documentation)


Form-control v.1



Form-control v.2


How to use border:

  1. Add.br-before the borders widths
  2. Add.br-top/bottom/left/rightbefore the borders widths to add the border only for a specific side

Borders widths


Example


<div class="container bg-cyan br-14px">

A text here

</div>

<div class="container bg-cyan br-top-04em">

A text here

</div>

<div class="container bg-cyan br-right-1em">

A text here

</div>

<div class="container bg-cyan br-bottom-2rem">

A text here

</div>

<div class="container bg-cyan br-left-20px">

A text here

</div>


Output

A text here

A text here

A text here

A text here

A text here

How to use rounded corners:

  1. Add.round-before the border radius value

Border radius value


Example


<div class="container padding-1em bg-cyan round-50px">

A text here

</div>

<div class="container padding-1em bg-cyan round-04em">

A text here

</div>

<div class="container padding-1em bg-cyan round-1em">

A text here

</div>

<div class="container padding-1em bg-cyan round-2rem">

A text here

</div>

<div class="container padding-1em bg-cyan round-6px">

A text here

</div>


Output

A text here

A text here

A text here

A text here

A text here

Notes

How to use note:

  1. Add.noteClass to make a beautiful note container.


Example

We add in those examples we add border class.


<div class="note bg-yellow br-7px">

A text here (we don't suggest using the border for all sides)

</div>

<div class="note bg-red br-top-7px">

A text here

</div>

<div class="note bg-pink br-right-7px">

A text here

</div>

<div class="note bg-pinterest br-bottom-7px">

A text here

</div>

<div class="note bg-reddit br-left-7px">

A text here

</div>


Output

A text here (we don't suggest using the border for all sides)

A text here

A text here

A text here

A text here

How to use columns:

  1. Add.cols-containeras a parent class.
  2. Add.col-1/-2/-3/-4to add equal width for each column.
  3. col-1 width : 100%
  4. col-2 width : 50%
  5. col-3 width : 33.33%
  6. col-4 width : 25%
  7. To use custom columns width add.col-5vw/-10vw/-15vw/.../-90vw/-100vw.
  8. N.B : .col-8vw or -23vw or -18vw or ...or -92vw or -98vw are not accepted.
  9. To use space between columns add.col-space-(numbers)-(unit).
  10. Unites : em/px/rem
  11. Numbers less than 1 : From 01 / 015 / 020 / 025 / 030 / ... / 085 / 090 / 095 --> 01 = 0.1
  12. Numbers more than 1 : From 1 / 2 / 3 / 4 / 5 / ... / 8 / 9 / 10 --> 1 = 1


Example

We add in those examples we add border class.


<!-- cols-container with 1 columns-->
<div class="cols-container col-space-03-em">
<div class="bg-light padding-16 col-1"> 100% </div>
</div>
<!-- cols-container with 2 columns-->
<div class="cols-container col-space-03-em">
<div class="bg-light padding-16 col-2"> 50% </div>
<div class="bg-light padding-16 col-2"> 50% </div>
</div>
<!-- cols-container with 3 columns-->
<div class="cols-container col-space-03-em">
<div class="bg-light padding-16 col-3"> 33.33% </div>
<div class="bg-light padding-16 col-3"> 33.33% </div>
<div class="bg-light padding-16 col-3"> 33.33% </div>
</div>
<!-- cols-container with 4 columns-->
<div class="cols-container col-space-03-em">
<div class="bg-light padding-16 col-4"> 25% </div>
<div class="bg-light padding-16 col-4"> 25% </div>
<div class="bg-light padding-16 col-4"> 25% </div>
<div class="bg-light padding-16 col-4"> 25% </div>
</div>
<!-- cols-container with 3 columns with custom widths and 0.3em for the gaps-->
<div class="cols-container col-space-03-em">
<div class="bg-light padding-16 col-30vw"> 30% </div>
<div class="bg-light padding-16 col-25vw"> 25% </div>
<div class="bg-light padding-16 col-45vw"> 45% </div>
</div>

Output

N.B : width for all columns for mobile devices is 100%.


100%

50%
50%

33.33%
33.33%
33.33%

25%
25%
25%
25%

30%
25%
45%

How to use Grids:

  1. Add.grid-containeras a parent class.
  2. Add.col-span-1/-2/-3or.row-span-1/-2/-3to build Masonry Layout.
  3. To use space between Grids add.grid-space-(numbers)-(unit).
  4. Unites : em/px/rem
  5. Numbers less than 1 : From 01 / 015 / 020 / 025 / 030 / ... / 085 / 090 / 095 --> 01 = 0.1
  6. Numbers more than 1 : From 1 / 2 / 3 / 4 / 5 / ... / 8 / 9 / 10 --> 1 = 1


Example


<!-- grid-container -->
<div class="grid-container grid-space-03-em">
<div class="grid-content bg-red row-span-2"> ... </div>
<div class="grid-content bg-red col-span-2"> ... </div>
<div class="grid-content bg-red"> ... </div>
<div class="grid-content bg-red"> ... </div>
</div>

Output

N.B : width for all grid-content for mobile devices is 100%.


...
...
...
...

We integrate Google material-symbols-rounded for the icons.


Example

<span style="font-size:50px;" class="material-symbols"> home </span>
<span style="font-size:50px;" class="material-symbols"> docs </span>
<span style="font-size:50px;" class="material-symbols"> block </span>
<span style="font-size:50px;" class="material-symbols"> lunch_dining </span>
<span style="font-size:50px;" class="material-symbols"> devices </span>

Output

home docs block lunch_dining devices

How to use Spacer and hr:

  1. Add.spacer-before the spacer sizes value
  2. Add.hrclass to an <hr> tage

Spacer sizes


Example


<div class="container padding-06em bg-red">

A text here

</div>

<div class="spacer-04em">

<div class="container padding-06em bg-red">

A text here

</div>

<div class="spacer-1em">

<div class="container padding-06em bg-red">

A text here

</div>

<div class="spacer-2px">

<div class="container padding-06em bg-red">

A text here

</div>

<div class="spacer-10px">

<div class="container padding-06em bg-red">

A text here

</div>

<hr class="hr">

<hr style="width:50% !important;" class="hr">

<hr style="width:100% !important;" class="hr">


Output

A text here
A text here
A text here
A text here
A text here


To add tabs to your HTML page you must specify the tab's container by adding .tabs.

Add to list of buttons the following class.tab-btnsas a parent class, add to the buttons.tab class and .active class to the opened Tab.
Add the content class by using.tab-content as the container of the content.
To add colors add .tabs-followed by the color's name.
Add unique id="..." to the .tab-content, to target the id using the tab button, add target-id="..tab-content-id.." Attribute to the .tab class.


Example


<div class="tabs tabs-cyan">

<ul class="tab-btns">

<li class="tab active" target-id="tab1">Tab 1</li>

<li class="tab" target-id="tab2">Tab 2</li>

<li class="tab" target-id="tab3">Tab 3</li>

<li class="tab" target-id="tab4">Tab 4</li>

<li class="tab" target-id="tab5">Tab 5</li>

</ul>


<div class="tab-content" id="tab1">

<b>Tabs 1</b><br>

<p>Text here</p>

</div>


<div class="tab-content" id="tab2">

<b>Tabs 2</b><br>

<p>Text here</p>

</div>


<div class="tab-content" id="tab3">

<b>Tabs 3</b><br>

<p>Text here</p>

</div>


<div class="tab-content" id="tab4">

<b>Tabs 4</b><br>

<p>Text here</p>

</div>


<div class="tab-content" id="tab5">

<b>Tabs 5</b><br>

<p>Text here</p>

</div>

</div>


Output

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5
Tabs 1

Text here

Tabs 2

Text here

Tabs 3

Text here

Tabs 4

Text here

Tabs 5

Text here

To use opacity class add.op-Class befor the number value.

The numbers values :

0 , 5 , 10 , 15 , ... , 90 , 95 , 100, For each number in the numbers values is define the percentage of the opacity.

To use the hover for the opacity class add .op-hoverClass

Example

<div>

<p class="op-50">Text opacity 50%</p>

<p class="op-50 op-hover">Text Hover opacity 50%</p>

</div>

Output

Hover the 2nd Text

Text opacity 50%

Text Hover opacity 50%

Font size

To use the font-size class add.fot-Class befor the number's value or the Size's name.

Font-size Size's Names :

The number's values :

the number are from 1 to 30 followed by the size unit em/px/rem

Font weight

To use the font-weight class add.fot-wg--Class befor the size's name.

Font-weight Size's Names :

Example

<p class="fot-xxxlg">Extra Large Text</p>
<p class="fot-27px">Font size 27px</p>
<p class="fot-wg--lt">Light text</p>
<p class="fot-wg--bd">Bold text</p>

Output

Extra Large Text

Font size 27px

Light text

Bold text

To use accordion add .accordionclass to a button tag.

To use The collapsible panel add .panelclass to the next tag after the button.

To use The accordion button colors effect add .accordion-{color-name}class,
Or to use outline buttons add.accordion-out-{color-name}

Example

<section>
<button class="accordion round-04em accordion-primary">Accordion</button>
<div class="panel round-04em bg-dark">
This is the panel.<br>
Text Text<br>
Text text<br>
</div>
</section>
<section>
<button class="accordion round-04em accordion-out-primary">Accordion</button>
<div class="panel round-04em bg-dark">
This is the panel.<br>
Text Text<br>
Text text<br>
</div>
</section>

Output

This is the panel.
Text Text
Text text
This is the panel.
Text Text
Text text

To use accordion add .z-index-class followed by the number's value.

The number's values are from -2000 to 2000.

Example

<div class="display-container">
<div style="width:30px; height:30px;" class="display-top-left bg-dark z-index--1"></div>
<div style="width:30px; height:30px;" class="display-top-left bg-red margin-4px z-index-1"></div>
<div style="width:30px; height:30px;" class="display-top-left bg-reddit margin-8px z-index-2"></div>
</div>

Output