Social Media Animated Navigation Menu Bar and Form using CSS No JavaScript ThumbNail

Social Media Animated Navigation Menu Bar and Form using CSS and SASS

Uncategorized
Norbert BM0

Tutorial Description :

In this Tutorial I will create a Responsive Social Media Animated Navigation Menu Bar and a Login Form using CSS only and No JavaScript.

I will use font Font Awesome for the icons and google fonts with the font style of Roboto for the main font.

For the navigation I will use display flex so CSS3 flexbox.

I will also use pseudo element and pseudo classes as hover, after, before, and active in order to hide and make content visible .

Img:

woman-wearing-white-top-852793Download

Font Awesome

Google Fonts

HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Social Media Nav and Form</title>
  </head>
  <body>
    <nav class="icon_bar">
      <a href="#" class="active icon">
        <i class="fa fa-user"></i>
        <span class="icon_text">Home</span>
      </a>
      <a href="#insta" class="icon instagram">
        <i class="fa fa-instagram"></i>
        <span class="icon_text">Instagram</span>
      </a>
      <a href="#face" class="icon facebook">
        <i class="fa fa-facebook"></i>
        <span class="icon_text">Facebook</span>
      </a>
      <a href="#link" class="icon linkedin">
        <i class="fa fa-linkedin"></i>
        <span class="icon_text">LinkedIn</span>
      </a>
      <a href="#twit" class="icon twitter">
        <i class="fa fa-twitter"></i>
        <span class="icon_text">Twitter</span>
      </a>
      <a href="#you" class="icon youtube">
        <i class="fa fa-youtube"></i>
        <span class="icon_text">YouTube</span>
      </a>
    </nav>
    <section class="main">
      <div class="form_container">
        <h1>
          <span id="insta"></span>
          <span id="face"></span>
          <span id="link"></span>
          <span id="twit"></span>
          <span id="you"></span>
        </h1>
        <h2>Social Media</h2>
        <form class="social_form">
          <label for="">Username</label>
          <input type="text" />
          <label for="">Password</label>
          <input type="password" />
          <input class="submit" type="submit" value="Login" />
        </form>
      </div>
    </section>
    <footer>
      <p>Menyhart <span>Media</span> ©2020</p>
    </footer>
  </body>
</html>

CSS:

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-size: 16px;
}
:root {
  --user: blue;
  --insta: #ce2f82;
  --face: #395599;
  --link: #4064ad;
  --twit: #1c9deb;
  --yt: #f80000;
}
body {
  font-family: "Roboto";
  max-width: 768px;
  margin: auto;
  background-color: #fff;
}
.icon_bar {
  width: 100%;
  display: flex;
}
.icon_bar a {
  flex-grow: 1;
  text-align: center;
  padding: 0.25rem 0;
  color: #eee;
  background-color: rgba(1, 1, 1, 0.8);
  font-size: 1.5rem;
  border-right: 1px solid #fff;
}
.icon_bar a:hover {
  background-color: rgba(1, 1, 1, 0.8);
  color: #fff;
}
.icon_bar a:hover > .fa-instagram,
.icon_bar a:hover {
  color: var(--insta);
  background-color: #fff;
  box-shadow: inset 0 0 8px 2px #727072;
  font-weight: 700;
  transition: 0.5s ease-in-out;
}
.icon_bar a:active > .fa-instagram {
  color: #fff;
  transition: 0.2s ease;
}
.icon_bar a.instagram:active {
  background-color: var(--insta);
  transition: 0.2s ease;
}

.icon_bar a:hover > .fa-facebook {
  color: var(--face);
}
.icon_bar a:active > .fa-facebook {
  color: #fff;
  transition: 0.2s ease;
}
.icon_bar a.facebook:active {
  background-color: var(--face);
  transition: 0.2s ease;
}
.icon_bar a:hover > .fa-linkedin {
  color: var(--link);
}
.icon_bar a:active > .fa-linkedin {
  color: #fff;
  transition: 0.2s ease;
}
.icon_bar a.linkedin:active {
  background-color: var(--link);
  transition: 0.2s ease;
}
.icon_bar a:hover > .fa-twitter {
  color: var(--twit);
}
.icon_bar a:active > .fa-twitter {
  color: #fff;
  transition: 0.2s ease;
}
.icon_bar a.twitter:active {
  background-color: var(--twit);
  transition: 0.2s ease;
}
.icon_bar a:hover > .fa-youtube {
  color: var(--yt);
}
.icon_bar a:active > .fa-youtube {
  color: #fff;
  transition: 0.2s ease;
}
.icon_bar a.youtube:active {
  background-color: var(--yt);
  transition: 0.2s ease;
}
/* Icon Title */
.icon_bar .active {
  background-color: #eee;
  color: var(--user);
}
.icon_bar .active:hover {
  background-color: #111;
  color: #eee;
}
.icon {
  position: relative;
  display: inline-block;
}
.icon .icon_text {
  width: 100%;
  text-align: center;
  padding: 0.25rem 0;
  font-size: 0.05rem;
  color: #333;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.icon:hover .icon_text {
  opacity: 1;
  font-size: 1.5rem;
}

/* main */
.main {
  background-image: url(/img/woman-wearing-white-top-852793.jpg);
  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-shadow: 0 0 10px 1px #333;
  border-radius: 10px;
}
/* form */
.form_container {
  position: relative;
  margin: 20% auto;
  height: 450px;
  width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.form_container h1,
.form_container h2 {
  margin-bottom: 0.5rem;
}
.form_container h1 span {
  font-size: 4rem;
}
.form_container h2 {
  font-size: 2rem;
}

.social_form label,
.social_form input {
  display: block;
  margin: 1rem;
  padding: 0.2rem;
  width: 300px;
}
.social_form label {
  color: #111;
  font-size: 1.5rem;
  font-weight: bold;
}
.social_form input {
  border-radius: 4px;
  height: 2rem;
  border: 1px solid #111;
  background-color: rgba(1, 1, 1, 0.2);
}
.social_form input.submit {
  height: 50px;
  font-size: large;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: transparent;
  cursor: pointer;
  border: 1px solid #111;
  box-shadow: 10px 5px #111;
  margin-top: 1rem;
}
.social_form input.submit:active {
  background-color: #00ff40;
  box-shadow: 0 0 10px 5px #00ff40;
  transition: 0.5s ease;
}
h1 span {
  visibility: hidden;
  font-size: 4rem;
}
h1 {
  margin-bottom: 2rem;
}

@keyframes social {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

h1 span#insta:target::after {
  content: "Instagram";
  visibility: visible;
  position: relative;
  color: var(--insta);
  animation: social 2s;
  text-shadow: 1px 1px #111;
  font-size: 4rem;
}
h1 span#face:target::after {
  content: "Facebook";
  visibility: visible;
  position: relative;
  color: var(--face);
  animation: social 2s;
  text-shadow: 1px 1px #111;
  font-size: 4rem;
}
h1 span#link:target::after {
  content: "LinkedIn";
  visibility: visible;
  position: relative;
  color: var(--link);
  animation: social 2s;
  text-shadow: 1px 1px #111;
  font-size: 4rem;
}
h1 span#twit:target::after {
  content: "Twitter";
  visibility: visible;
  position: relative;
  color: var(--twit);
  animation: social 2s;
  text-shadow: 1px 1px #111;
  font-size: 4rem;
}
h1 span#you:target::after {
  content: "YouTube";
  visibility: visible;
  position: relative;
  color: var(--yt);
  animation: social 2s;
  text-shadow: 1px 1px #111;
  font-size: 4rem;
}
/* Footer */
footer {
  background-color: #111;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #eebb33;
  font-size: 1.5rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
}
footer span {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.1rem;
}

My Course: Web Development HTML CSS & JS Beginner to Advance

In this is Video I redue the tutorial using SASS

Source Code for the SASS Tutorial:

main:

@import "config";
@import "variables";
@import "mixin";
@import "nav";
@import "form";

body {
  font-family: "Roboto";
  max-width: 768px;
  margin: auto;
  background-color: rgba($color: #d3f800, $alpha: 0.5);

  background-image: url(/img/white-ceramic-teacup-on-white-ceramic-saucer-on-round-table-3626734.jpg)
    ;
  background-position: center;
  background-clip: center;
  background-size: cover;
  background-repeat: no-repeat;
}

_config:

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-size: 16px;
}

_variables:

// Social media colors

$prim-c: $prim-c;
$sec-c: $sec-c;
$user: blue;
$insta: #ce2f82;
$face: #395599;
$link: #4064ad;
$twit: #1c9deb;
$yt: #f80000;

_mixin:

// Form label and input  base style

@mixin baseStyle_label_input {
  display: block;
  margin: 1rem;
  padding: 0.2rem;
  width: 300px;
}

@mixin social_title($color) {
  visibility: visible;
  position: relative;
  color: $color;
  animation: social 2s;
  text-shadow: 1px 1px $sec-c;
  font-size: 4rem;
  text-shadow: 1px 1px 5px #fff;
}

@mixin transition {
  transition: 0.2s ease;
}

@mixin active-icon {
  @include transition;
  color: $prim-c;
}

@mixin active($color) {
  background-color: $color;
  @include transition;
}

// Icon color Map

$icons: (
  "user": $user,
  "instagram": $insta,
  "facebook": $face,
  "linkedin": $link,
  "twitter": $twit,
  "youtube": $yt
);

@mixin bg-active {
  @each $icon-name, $icon-color in $icons {
    a.#{$icon-name}:active {
      background-color: $icon-color;
      @include transition;
    }
  }
}

_form:

/* form */
.form_container {
  position: relative;
  margin: 20% auto;
  height: 450px;
  width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  h1 {
    margin-bottom: 0.5rem;
    span {
      font-size: 4rem;
      visibility: hidden;
      &#insta:target::after {
        content: "Instagram";
        @include social_title($insta);
      }
      &#face:target::after {
        content: "Facebook";
        @include social_title($face);
      }
      &#link:target::after {
        content: "LinkedIn";
        @include social_title($link);
      }

      &#twit:target::after {
        content: "Twitter";
        @include social_title($twit);
      }
      &#you:target::after {
        content: "YouTube";
        @include social_title($yt);
      }
    }
    // after creating it in the bottom
  }

  h2 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: $prim-c;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  .social_form {
    label {
      display: block;
      margin: 1rem;
      padding: 0.2rem;
      width: 300px;
      color: $prim-c;
      font-size: 1.5rem;
      font-weight: bold;
      text-shadow: 1px 1px 5px #111;
    }
    input {
      display: block;
      margin: 1rem;
      padding: 0.2rem;
      width: 300px;
      border-radius: 4px;
      height: 2rem;
      border: 1px solid $prim-c;
      background-color: rgba(1, 1, 1, 0.2);
      &.submit {
        color: $prim-c;
        height: 50px;
        font-size: large;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        background-color: transparent;
        cursor: pointer;
        border: 1px solid $prim-c;
        box-shadow: 10px 5px $sec-c;
        margin-top: 1rem;
        &:active {
          background-color: $link;
          box-shadow: 0 0 5px 2px #333;
          transition: 0.5s ease;
        }
      }
    }
  }
}

@keyframes social {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

_nav:

.icon_bar {
  width: 100%;
  display: flex;
  a {
    flex-grow: 1;
    text-align: center;
    padding: 0.25rem 0;
    color: #eee;
    background-color: rgba(1, 1, 1, 0.8);
    font-size: 1.5rem;
    border-right: 1px solid$prim-c;
    &:hover {
      background-color: rgba(1, 1, 1, 0.8);
      color: $prim-c;
    }
  }
}

.icon_bar a:hover > .fa-instagram,
.icon_bar a:hover {
  color: $insta;
  background-color: $prim-c;
  box-shadow: inset 0 0 8px 2px #727072;
  font-weight: 700;
  transition: 0.5s ease-in-out;
}
.icon_bar {
  .active {
    background-color: $prim-c;
    color: $user;
    border: 2px solid $sec-c;
    &:hover {
      background-color: $sec-c;
      color: $prim-c;
    }
  }
  & {
    @include bg-active;
  }
  a {
    &.instagram:active {
      @include active($insta);
    }
    &.facebook:active {
      @include active($face);
    }
    &.linkedin:active {
      @include active($link);
    }
    &.twitter:active {
      @include active($twit);
    }
    &.youtube:active {
      @include active($yt);
    }
    &:hover {
      & > .fa-facebook {
        color: $face;
      }
      & > .fa-linkedin {
        color: $link;
      }
      & > .fa-twitter {
        color: $twit;
      }
      & > .fa-youtube {
        color: $yt;
      }
    }
    &:active {
      & > .fa-instagram {
        @include active-icon;
      }
      & > .fa-facebook {
        @include active-icon;
      }
      & > .fa-linkedin {
        @include active-icon;
      }
      & > .fa-twitter {
        @include active-icon;
      }
      & > .fa-youtube {
        @include active-icon;
      }
    }
  }
}

/* Icon Title */
.icon_bar {
  .active {
    background-color: #eee;
    color: var(--user);
    &:hover {
      background-color: $sec-c;
      color: #eee;
    }
  }
}

.icon {
  position: relative;
  display: inline-block;
}
.icon .icon_text {
  width: 100%;
  text-align: center;
  padding: 0.25rem 0;
  font-size: 0.05rem;
  color: #333;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.icon:hover .icon_text {
  opacity: 1;
  font-size: 1.5rem;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.