P1 Style Guide Template

P1 Style Guide Template

Menu

Interactive Elements

Default Button

CSS Selector:

.button-nav

Sample Code:

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

Rendered Element:

Default Button

Text Input field with a label

Image as a link

Text Styling

Headings

This is h1

This is h2

This is h3

This is h4

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Numbered List

  1. Item 1
  2. Item 2
  3. Item 3

Combined Elements

Menu

Product Listing

icon of translation between Chinese and English

Chinese to English document translation

$50.00/3 page A4 document

Translation done by professional interpreters...

Purchase

Color Palette

#ffffff

#e6e8f2

#8ca8ee

#616e8b

#3a427c

Citations

    Flaticon.n.d.Translation Free Icon. Retrived from https://www.flaticon.com/free-icon/translation_2793765

    Change image on hover with CSS - image rollover effect. Sirv Help Center. (2021, January 15). Retrieved June 1, 2022, from https://sirv.com/help/articles/hover-change-image/

    How to - product card. How To Create a Product Card. (n.d.). Retrieved June 1, 2022, from https://www.w3schools.com/howto/howto_css_product_card.asp

    HTML links. HTML Links Hyperlinks. (n.d.). Retrieved June 1, 2022, from https://www.w3schools.com/html/html_links.asp

    Tarjama.2020.The-Nonmonetary-Cost-of-Online-Translation-Services.Retrived from https://www.tarjama.com/wp-content/uploads/2020/03/The-Nonmonetary-Cost-of-Online-Translation-Services-1024x595.jpg

    TTF to WOFF2 converter. CloudConvert. (n.d.). Retrieved May 31, 2022, from https://cloudconvert.com/ttf-to-woff2