Get Lookover icon Get Lookover

chevron_leftDownload Page

Learn Get Lookover v0.1

<!-- import Get Lookover CSS -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/get-lookover/cdn@v0.1/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.1/js/get-lookover.min.js"></script>

Follow the following steps on the example, to build full responsive Navigation bar.

<!-- Navbar -->

<header class="navbar center-navbar color-red-bg">

<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.


☰

color-red-bg/text...

color-pink-bg/text...

color-purple-bg/text...

color-indigo-bg/text...

color-blue-bg/text...

color-cyan-bg/text...

color-green-bg/text...

color-yellow-bg/text...

color-orange-bg/text...

color-brown-bg/text...

color-dark-bg/text...

color-light-bg/text...

color-twitter-bg/text...

color-messenger-bg/text...

color-skype-bg/text...

color-wordpress-bg/text...

color-whatsapp-bg/text...

color-snapchat-bg/text...

color-behance-bg/text...

color-quora-bg/text...

color-pinterest-bg/text...

color-linkedin-bg/text...

color-facebook-bg/text...

color-yahoo-bg/text...

color-reddit-bg/text...


To use Background color add-bg after color's name.


Example

<div class="color-twitter-bg">

...

</div>


Output

...

To use Text color add-text after color's name.


Example

<div class="color-orange-text">

Text with orange Color

</div>


Output

Text with orange Color

Alert Background Colors


To use Alerts add.alertClass before background color's class.


Example

<div class="alert color-green-bg">

<b>Alert</b> text here

</div>


Output

Alert text here

Alert default Colors


To use Alerts add after.alertClass following classes-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 with class.alert-hideandonclick="closeAlert(this)" attribute inside Alert parent class.


Example

<div class="alert-info">

<span onclick="closeAlert(this)" class="alert-hide">&times;</span>

<b>Alert</b> text here

</div>


Output

× Alert text here

Buttons Background Colors


To use Buttons add.btnClass before background color's class.


Example

<button class="btn color-green-bg">Btn</button>


Output


Buttons default Colors


To use Buttons add after.btnClass following classes.btn-primary/-success/-danger/-warning/-dark/-light.


Example

<button class="btn btn-danger">Btn Danger</button>

<button class="btn btn-primary">Btn Primary</button>


Output


Buttons Group


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


Example

<!-- Button Group -->

<div class="group-btn">

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

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

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

<button class="btn btn-warning">4th 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="color-red-bg container">

A text Here

</div>

<!-- container-fluid -->

<div class="color-red-bg 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="color-red-bg jumbo">

A text Here

</div>

<!-- jumbo-fluid -->

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

A text Here

</div>


Output

A text Here

A text Here


Margin (all sides)

There is a default Get lookover margin value by adding.marginclass to an object.
To add more margin sizes use-12/16/20/24after.marginclass.


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.


N.B : For the default Get lookover margin value for each side add.margin-top/-left/-right/bottomclass to an object. To add more margin sizes use-12/16/20/24after.margin-top/-left/-right/bottomclass.


Example

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

<div class="margin-12 color-red-bg container">

A text Here

</div>

<div class="margin-bottom-20 color-red-bg container">

A text Here

</div>

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

A text Here

</div>

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

A text Here

</div>

<div class="margin-top-24 color-red-bg container">

A text Here

</div>


Output

A text Here

A text Here

A text Here

A text Here

A text Here


Padding (all sides)

There is a default Get lookover padding value by adding.paddingclass to an object.
To add more padding sizes use-12/16/20/24after.paddingclass.


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.


N.B : For the default Get lookover margin value for each side add.padding-top/-left/-right/bottomclass to an object. To add more margin sizes use-12/16/20/24after.padding-top/-left/-right/bottomclass.


Example

<!-- padding value-->

<div class="padding-24 color-light-bg">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium quaerat eum excepturi voluptas magnam dolor harum nemo nam molestiae inventore alias tenetur ipsa laboriosam, aperiam, sequi nulla dolore earum voluptates.

</div>

<div class="padding-bottom-20 color-light-bg">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium quaerat eum excepturi voluptas magnam dolor harum nemo nam molestiae inventore alias tenetur ipsa laboriosam, aperiam, sequi nulla dolore earum voluptates.

</div>

<div class="padding-right-24 color-light-bg">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium quaerat eum excepturi voluptas magnam dolor harum nemo nam molestiae inventore alias tenetur ipsa laboriosam, aperiam, sequi nulla dolore earum voluptates.

</div>

<div class="padding-left-16 color-light-bg">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium quaerat eum excepturi voluptas magnam dolor harum nemo nam molestiae inventore alias tenetur ipsa laboriosam, aperiam, sequi nulla dolore earum voluptates.

</div>

<div class="padding-top-24 color-light-bg">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium quaerat eum excepturi voluptas magnam dolor harum nemo nam molestiae inventore alias tenetur ipsa laboriosam, aperiam, sequi nulla dolore earum voluptates.

</div>


Output

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi magnam, rerum porro enim laboriosam illo aliquam consequatur iure quis at quas iste, voluptate cumque nisi provident alias, debitis consequuntur.


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi magnam, rerum porro enim laboriosam illo aliquam consequatur iure quis at quas iste, voluptate cumque nisi provident alias, debitis consequuntur.


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi magnam, rerum porro enim laboriosam illo aliquam consequatur iure quis at quas iste, voluptate cumque nisi provident alias, debitis consequuntur.


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi magnam, rerum porro enim laboriosam illo aliquam consequatur iure quis at quas iste, voluptate cumque nisi provident alias, debitis consequuntur.


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi magnam, rerum porro enim laboriosam illo aliquam consequatur iure quis at quas iste, voluptate cumque nisi provident alias, debitis consequuntur.


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-solidbefore one of the following border width classe-1/-2/-3/.../-19/-20 .
  2. You can add border to a specific side by using.br-solid-top/-right/-bottom/-leftbefore one of the border width classe-1/-2/-3/.../-19/-20 .
  3. For each borders widths 1 = 1px & 20 = 20px .


Example

We add in those examples color-cyan-bg for the background color and we add the container class.


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

A text here

</div>

<div class="container color-cyan-bg br-solid-top-14">

A text here

</div>

<div class="container color-cyan-bg br-solid-right-14">

A text here

</div>

<div class="container color-cyan-bg br-solid-bottom-14">

A text here

</div>

<div class="container color-cyan-bg br-solid-left-14">

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 color-yellow-bg br-solid-7">

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

</div>

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

A text here

</div>

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

A text here

</div>

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

A text here

</div>

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

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="color-light-bg padding-16 col-1"> 100% </div>
</div>
<!-- cols-container with 2 columns-->
<div class="cols-container col-space-03-em">
<div class="color-light-bg padding-16 col-2"> 50% </div>
<div class="color-light-bg padding-16 col-2"> 50% </div>
</div>
<!-- cols-container with 3 columns-->
<div class="cols-container col-space-03-em">
<div class="color-light-bg padding-16 col-3"> 33.33% </div>
<div class="color-light-bg padding-16 col-3"> 33.33% </div>
<div class="color-light-bg padding-16 col-3"> 33.33% </div>
</div>
<!-- cols-container with 4 columns-->
<div class="cols-container col-space-03-em">
<div class="color-light-bg padding-16 col-4"> 25% </div>
<div class="color-light-bg padding-16 col-4"> 25% </div>
<div class="color-light-bg padding-16 col-4"> 25% </div>
<div class="color-light-bg 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="color-light-bg padding-16 col-30vw"> 30% </div>
<div class="color-light-bg padding-16 col-25vw"> 25% </div>
<div class="color-light-bg 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 color-light-bg row-span-2"> ... </div>
<div class="grid-content color-light-bg"> ... </div>
<div class="grid-content color-light-bg"> ... </div>
<div class="grid-content color-light-bg col-span-2"> ... </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