caputomarcos

Hexagonal Spider Web Animation

Animation project for landing page background made in HTML and Stylus. This project is oriented to preserve the performance of browser.

A Pen by Guillermo on CodePen.

License.

caputomarcos

hexagon animation

hexagonal game of life animation in a html5 canvas.

A Pen by Olivier BERNARD on CodePen.

License.

caputomarcos

Honeycomb Menu

A Pen by B. Saroha on CodePen.

License.

caputomarcos

ul.menu
  li.active
    a.menu-handle
      .menu-handle-container
        .menu-handle-content
          i.menu-handle-hamburger ☰
          strong.menu-handle-icon
            i.fa.fa-home
    ul.sub-menu
      li.menu-item

caputomarcos

Hexagonal side navigation WiP

Work in progress.

A Pen by Tom Miller on CodePen.

License.

caputomarcos

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'><main class="site-wrapper">
<div class="pt-table desktop-768">
<div class="pt-tablecell page-home relative" style="background-image: url(https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
    background-position: center;
    background-size: cover;">
<div class="overlay"></div>
<div class="container">
<div class="row">

caputomarcos

Hexagon Menu [CSS]

A Pen by Niel app on CodePen.

License.

caputomarcos

<main class="site-wrapper">
  <div class="pt-table desktop-768">
    <div class="pt-tablecell page-home relative" style="background-image: url(https://www.daimler.com/bilder/innovation/autonomes-fahren/04-lkw-technologie/15c466-028-klein-w1366xh683-cutout.jpg);
    background-position: center;
    background-size: cover;">
                    <div class="overlay"></div>

                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8">

caputomarcos

<div class="loader">
  <ul class="hexagon-container">
    <li class="hexagon hex_1"></li>
    <li class="hexagon hex_2"></li>
    <li class="hexagon hex_3"></li>
    <li class="hexagon hex_4"></li>
    <li class="hexagon hex_5"></li>
    <li class="hexagon hex_6"></li>
    <li class="hexagon hex_7"></li>
  </ul>

caputomarcos

Honeycomb Menu - Inspired by TechRomancer

A work in progress. I was inspired by the the UI for a Dreamcast title called 'Tech Romancer'. Feel free to cycle through each element by clicking on the arrows or using the left and right keys. Thanks

A Pen by Miguel Fondeur on CodePen.

License.