Welcome to LEGOMan Online shop

Interactive Elements

In-text link

CSS selector:

.

Sample code:

<a herf="">LEGOMAN Website</a>

Rendered element:

LEGOMAN Website

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">Default Button</a>

Rendered element:

Default Button

Text Input Field with Label

CSS selector:

Sample code:

<label class="input">Amount you want</label><input class="input" type="text"> <p></p> <label class="input">Deliver Date</label><input class="input" type="date">

Rendered element:

Image as a Link

CSS selector:

Sample code:

<a herf=""><img src = "img/lego.jpg" alt="This is a red LEGO man "></a>

Rendered element:

This is a red LEGO man

Text Elements

Headings

CSS selector:

Sample code:

<h2> Hat</h2> <h3>Head</h3> <h4>Body</h4> <h5>Legs</h5>

Rendered element:

Hat

Head

Body

Legs

Paragraphs

CSS selector:

Sample code:

<p>This is a website selling LEGOman!</p> <p>You can design your own LEGOman here!</p>

Rendered element:

This is a website selling LEGOman!

You can design your own LEGOman here!

Numbered Lists

Sample code:

Rendered element:

  1. BLUE LEGO
  2. RED LEGO
  3. YELLOW LEGO

Combined Elements

Main Navigation

Product/Service Listing

Citations

https://www.cleanpng.com/png-lego-minifigure-the-lego-group-history-of-lego-leg-909736/

https://canvas.sfu.ca/courses/62314/assignments/630642

https://fonts.google.com/specimen/Odibee+Sans