< Style guide - />

{ Design : System }

PacMAn Adventure! The CSS Style @System

Important:

"This webpage uses ONLY HTML and CSS to create,position, transition And animate all images. Use your browser's ZOOM +/- and the MOUSE pointer to check ALL the TRICKS!"

  </ develop yourself  >
[  codecademy_  ]
f-SantosDev

NO ANIMATEDANIMATED .GIF

Intro.

Down

Introduction

1UP

This page was created to provide developers and designers a quick and creative guide to assit during the webpage creation process.


Into of this guide, we'll show you a few programing concepts just like colors, fonts and text Styles to boost your brain into of a enthusiastic and creative atmosphere and also help you with the hands on with the code structure.


Inside of the webpage building process we find several types of concepts to implement it. These concepts help the developers and designers to built a greater User Experence, making the website diving a enjoyable and exciting time.


Well !! You might be wondering: "Why did this guy create a Pac Man layout to talk about CSS styles??"

So, the biggest answer is: "I DON'T KNOW !! I just thought it would be cool and the color palette would match."


Hey!!! Look at those guys. They will mess up my CSS styles. Let's finish with this party!

Colors

So, we need to check "ASAP" because the ghosts can be anywhere, messing up our CSS Styles and breaking down our webpage.


On this page we have some colorful trays that contain text headlings and link buttons.


Oh, NO!! ... The ghosts have invaded the CSS System_Comm@nd ... they disable the Box_Content Colors SCROLL_BAR system, but the scroll roll is still working.


Let's recover the properties of the color trays and entire CSS system in them through terminal commands before it collapse:


\%.terminal>command_line>_

\%./@recover -cssColors -g /sys_
\%...._

\%.response_recover: 87%_
\%._


Tray CSS System_Comm@nd

rgba(0,0,0,.9)

Built by CSS Properties:

background-color: rgba(0,0,0,.9);

border: 2px solid rgb(255,165,0);

border-radius: 7px 7px 0 0;

color: rgb(255,255,255);

rgba(0,0,0,.3)

Built by CSS Properties:

border: 1px solid rgb(0,0,0);

border-radius: 5px;

transform: skew(-30deg);

background-color: rgba(0,0,0,.3);

rgba(0,0,0,.7)

Built by CSS Properties:

border: 1px solid rgb(0,0,0);

border-radius: 5px;

transform: skew(-30deg);

background-color: rgba(0,0,0,.7);

rgba(0,0,255,.1)

Built by CSS Properties:

border: 1px solid rgb(0,0,0);

border-radius: 5px;

transform: skew(-30deg);

background-color: rgba(0,0,255,.1);

box-shadow: 2px 2px 5px;

Font Color System

Built by CSS Properties:

color: rgb(255,165,0);

-webkit-text-stroke: 0.1px;

-webkit-text-stroke-color: rgb(0,0,255);

text-shadow: 2px 2px 8px rgb(0,0,0);


Adicional Class_Information:

font-family: "Krona One", sans-serif;

font-size: 20px;

font-weight: 700;

font-weight: bold;

Uffa! We'have resolved the issue for now .. Let's check the Box_Content Font_System and cross our fingers to the system being in better conditon than Colors one.

Fonts

ƒir§t 0n€, l€t'§ ch€ck iƒ i§ §till ri§€ th€ ƒ0nt_§y§t€m|?


\%.terminal>command_line>_

\%./@font__system /sys_ -v
\%._
\%.._
\%..._
\%...._

\%.response @font_system: FAILURE
\%._


S€ri0u§ly| The Clyd€'§ gh0§t g0t hi§ h@nd§ h€r€  I c@n §€€ hi§ §ign@tur€ 0n it.

Ex@ctly @§ i w@§ thinking| H€ put th€ ƒ0nt_§y§t€m d0wn  i ju§t h0lp€ t0 §0lv€ thi§ pr0bl€m €@§y€r @nd ƒ@§t€r th@n the @n0th€r 0n€|


L€t m€ try thi§ c0mm@nd lin€ up:


\%./@font__system /sys_ -UP
\%._
\%.._
\%...99.9%

\%.response @font_system: DONE
\%._


GREAT!!! The Font_System is rising again .. Let me check if everything is working properly.


WebPage CSS Font Styles @SYSTEM



  • Bungee Spice
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • Krona One
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • Nanum Brush Script
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • Bebas Neue
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • Silkscreen
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.

Now, the CSS Style System is working normally for font styles (Normal and Italic) and font weight(bold).

The last stop now is the Box_Content TextStyles_System, let's see how messed up it's.


"CROSS YOUR FINGERS, GUYS!" .....

Text Styles

That's the final STOP of this game guys .. Finally, the FINAL Box_Content💀TextStyle_System.


Let me check how is the system but, Apparently! - everything is OK!


\%.terminal>command_line>_

\%./@textStyle__system /sys_ -v
\%._
\%.._
\%..._
\%...._

\%.response @textStyle: version 1.1.0


Uffa!! The automatic recover system rised the oldest TextStyles_System version. The TextStyles_System older could be broken the page due to incompatible version system .. but i belive the UP line command can fix easily it!!


So, let's do it!


\%./@textStyle__system /sys_ -UPD
\%._
\%.._
\%...99.9%

\%.response @textStyle: version 23.5.24 LTS


Done...

Let's check the results:

Webpage CSS Text Style @System:


Text Style CSS System_Comm@nd

h1: Main page heading

Built by CSS Properties:

font-family: "Bungee Spice", sans-serif;

font-size: 70px;

font-style: normal;

h2: Subheading

a: Link Buttons

Built by CSS Properties:

font-family: "Bungee Spice", sans-serif;

font-size: 50px; { h2: Subheading }

font-size: 16px; { a: Link Buttons }

font-style: normal;

a: GitHub Link

Built by CSS Properties:

font-family: "Krona One", sans-serif;

font-size: 30px;

font-weight: 700;


Adicional Class_Information:

color: rgb(255,165,0);

-webkit-text-stroke: 0.1px;

-webkit-text-stroke-color: rgb(0,0,255);

text-shadow: 2px 2px 8px rgb(0,0,0);

p: Box Content Paragraph Text

Built by CSS Properties:

font-family: "Krona One", sans-serif;

font-size: 14px;

font-style: normal;

p: PostIt Paragraph Text

Built by CSS Properties:

font-family: "Nanum Brush Script", cursive;

font-size: 20px;

font-weight: 400;


Adicional Class_Information:

width: 175px;

height: auto;

text-align: center;

background-color: rgb(255,255,255);

transform: rotate(10deg);

padding: 3px 0 0 0;

border: 0.5px solid rgb(128,128,128);

box-shadow: 2px 2px 5px;

CONGRATULATIONS!! We have complete and fixed the Design System for this complete CSS Style Guide webpage.

Now you know how POWERFUL CSS Styles are and you are ready to face many more challenges ahead!


So, have a sit, grab you keyboard and keep coding to show the world how powerful you have become!


\%.terminal>command_line>_

\%./@End_Game /exit