Categories
CSS Snippets

I was inspired by some LP’s I saw that is all

here linky link.
nothing special just a bunch of splash pages inspired by LP artwork
https://lp-splash.liamanderson.co.uk/

null
Categories
CSS Snippets

CSS-only Responsive Navigation Menu

In one of the many unsuccessful job applications I have completed this one required me to build a navigation menu as a technical test.

I decided to build one entirely in CSS rather than using a JavaScript library like jQuery which was “allowed”.

I didn’t get the job but I can always display what I completed here.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
  margin: 0;
  padding: 0; }

body, button, input, select, textarea {
  font-family: 'Open Sans', sans-serif;
  color: #222; }

a {
  color: #282b34; }

a:visited {
  color: #48516b; }

a:focus {
  outline: thin dotted; }

a:hover, a:active {
  outline: 0; }

nav {
  text-align: center;
  padding: 10px;
  background-color: #e2e2e2; }

nav .menu-item {
  display: inline-block;
  width: 150px;
  border-bottom: solid 2px #ea5a0b;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-top: 2px solid transparent;
  transition: all .75s;
  margin: 3px; }

.has-child ul {
  display: none;
  background-color: #e2e2e2;
  border: solid 2px #ea5a0b; }

.has-child:hover > ul {
  display: block;
  float: left;
  list-style: none;
  width: 150px;
  text-align: left;
  position: absolute;
  margin-top: 10px;
  margin-left: -1.5px; }

nav .menu-item a {
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px; }

.has-child ul li {
  border: none; }

.has-child ul li:hover {
  border: none; }

nav .menu-item:hover {
  border-right: solid 2px #ea5a0b;
  border-left: solid 2px #ea5a0b;
  border-top: solid 2px #ea5a0b; }

.burger {
  display: none;
  cursor: pointer;
  width: 35px;
  margin: auto; }

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s; }

#burger:checked ~ .burger > .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px); }

#burger:checked ~ .burger > .bar2 {
  opacity: 0; }

#burger:checked ~ .burger > .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px); }

#burger:checked ~ .nav {
  display: block !important; }

#burger {
  display: none; }

.container {
  margin: auto;
  width: 90%;
  max-width: 1600px; }

@media only screen and (max-width: 320px) {
  /* BASE
	=================== */
  /* LAYOUT
	=================== */
  /* MODULE
	=================== */ }

@media only screen and (max-width: 480px) {
  .nav {
    display: none; }
  .burger {
    display: block; } }
Categories
CSS Javascript Snippets

CRT Boot Animation – CSS

Recently I had an idea for a simple .io game based on the thought of merging a game I used to play, back in the day called hack the game by chaozz and all those wait timer, checkbox, textbased multiplayer facebook games.

as I’m writing this I’ve just discovered chaozz is working on his own version, but right now I’m showcasing the animation I built while tinkering.


  @keyframes flicker {
    5%{
      background: #000
    }
    10%{
      background: #fff;
    }
    15%{
      background: #000
    }
    20%{
      background: #fff;
    }
    25%{
      background: #000
    }
    30%{
      background: #fff;
    }
    100%{
      background:var(--BC);
    }
  }
  @keyframes wobble {
    33% {
      transform: rotate(1deg);
    }
    66% {
      transform: rotate(-1deg);
    }
  }
  filter{
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: url(../img/scanlines.png);
    background-size: 100% 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
  }
  .screen{
    background:var(--BC);
    width:0;
    height:0;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 50vh;
    transition: margin 2s, width 2s, height 3s;
    animation: wobble 0.25s ease-in-out 2, flicker 2s 1;
  }


window.onload = boot;

function boot(){
  screen.style.marginTop = "0px";
  screen.style.width = "100%";
  screen.style.height = "calc(100vh - 20px)";
  setTimeout(function(){screen.innerHTML = 'Welcome to LeemOS'}, 3000);
  setTimeout(function(){screen.innerHTML = screen.innerHTML + 'Login:'}, 4000);
  setTimeout(function(){addEvent()}, 5000);
}