"Softcorp Industries"

Welcome

Welcome to the "Home Work" web site, the second of three web sites that I'm building on my path to becoming a Front-End Web Developer. I've created this page to display small projects and skills that I'm learning.

Get with "The Program"

Learn to "Code"

Buttons

Synopsis:

Buttons are everywhere from, "button" & "div" elements or an "input". They can function differntly but styled to look the same

Toggle Buttons

Design by: Softcorp Industries

Synopsis:

These Toggle's are created with 'button' elements. They also use Local Storage.

JS
5%
JS
15%
JS
35%
JS
45%

Toggle Summary

This toggle section uses the local storage to save the color and the toggle position. It's also programmed so only one toggle is active at any one time.

Default Theme

HTML Theme

CSS Theme

SASS Theme

JavaScript Theme

Toggle Input

Inspired by: Design Course

Synopsis:

These Toggle's are created with "input" elements. They also use Local Storage.

JS
5%
JS
10%
JS
50%
JS
35%

Dark Mode Toggle

5 Burger Menu

Design by: Softcorp Industries
Synopsis:

The "Menu" navigation bar is familiar to most people. It can be created with "div" elements or the ":before :after" seudo-elements.

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

"Click Events"

Design by: Softcorp Industries
Synopsis:

This Button section groups all the buttons with one attribute. DOM manipulation is then used to display any actions from the "event".

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

Regular Buttons

btn 100

  • btn

btn 105

  • btn
  • btn-active

btn 110

  • btn
  • btn-caution

btn 115

  • btn
  • btn-danger

Rounded Corners

btn 200

  • btn
  • btn-rndCorner

btn 205

  • btn
  • btn-rndCorner
  • btn-active

btn 210

  • btn
  • btn-rndCorner
  • btn-caution

btn 215

  • btn
  • btn-rndCorner
  • btn-danger

Round Buttons Small

btn 300

  • btn
  • btn-smRnd

btn 305

  • btn
  • btn-smRnd
  • btn-active

btn 310

  • btn
  • btn-smRnd
  • btn-caution

btn 315

  • btn
  • btn-smRnd
  • btn-danger

Round Buttons Large

btn 400

  • btn
  • btn-lgRnd

btn 405

  • btn
  • btn-lgRnd
  • btn-active

btn 410

  • btn
  • btn-smRnd
  • btn-caution

btn 415

  • btn
  • btn-lgRnd
  • btn-danger

Images

Synopsis:

Displaying images on the web is a big part of the UX & a great business tool.

Image Carousel

Design by: Softcorp Industries
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0
Anorei Collins
Photo by Chandler Cruttenden
Anorei Collins
Photo by Laura Chouette
Anorei Collins
Photo by Daniel Sessler
Anorei Collins
Photo by Jarrad Horne
Anorei Collins
Photo by Quaid Lagan
Anorei Collins
Photo by Sebastien Jermer
Anorei Collins
Photo by Lewis Roberts
Anorei Collins
Photo by Nicolas I
Anorei Collins Photo by Sajad Nori
II

Product Gallery

Design by: Softcorp Industries
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

Image Gallery

Design by: Softcorp Industries
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0
Img1

Image Slider

Design by: Softcorp Industries

Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

Slide 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!

Slide 7

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, excepturi!



Animations

Synopsis:

Animations can be done various ways. I tried to give some examples of the different kinds of movement & the properties that can be used.

On Hover

Inspired by: Kyle at Web Dev Simplified
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

Transform

Transition

Animation

Web Dev Simplified

para


On Hover

Inspired by: the Net Ninja
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0
I

Guycorp Industries

I

When Quality

Counts

Multiple @keyframes

The Net Ninja

para


On Hover

Inspired by: Dev-Tips
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

Dev-Tips

para


Canvas

Design by: Softcorp Industries
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

"Time keeps on

slippin,

slippin,

slippin,

into

the Future"

"Fly like an eagle - Steve Miller Band"
I
I
|
I
I
|
I
I
|
I
I
|


Storage

Synopsis:

Local Storage projects

ToDo List 1

Design by: Kyle at Web Dev Simplified & Kevin Powell
Synopsis:

The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

HTML:
8
CSS:
8
Sass:
8
JavaScript:
0

Stuff I need to do

My Lists

    YouTube

    3 Tasks Remaining

    Kevin Powell

    para

    Web Dev Simplified

    para



    Web Players

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Basic Audio Player

    inspired by Adam Khoury
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0
    00:00 / 00:00

    Audio Player V2

    Design by: Softcorp Industries
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0

    Audio Track Library V1

    inspired by Adam Khoury
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0

    Custom Video Player

    Video
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0

    Video Player V1



    Custom UI

    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    Tablet V1

    Design by: Kyle at Web Dev Simplified & Kevin Powell
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0

    Stuff I need to do

    **************
    Softcorp Tablet
    **************


    Tablet V2

    Design by: Kyle at Web Dev Simplified & Kevin Powell
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0

    Stuff I need to do


    Phone V1

    Design by: Kyle at Web Dev Simplified & Kevin Powell
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0

    Stuff I need to do


    Phone V2

    Design by: Kyle at Web Dev Simplified & Kevin Powell
    Synopsis:

    The primary goal was to design toggle buttons with 'input' and 'div' elements and use differnt effects for each

    HTML:
    8
    CSS:
    8
    Sass:
    8
    JavaScript:
    0

    Apple Rip-Off