Text Simplifier Style Guide

Interactive Elements

In-text link

CSS selector:

p

Sample code:

<a href="https://www.youtube.com/watch?v=aW2LvQUcwqc" class="P">In-text link </a>

Rendered element:

How you ever found yourself in a situation where you have no idea what someone is saying? The Text Simplifier helps to simplify any text you find confusing without sacrificing any of the context.

Navigation Link

CSS selector:

.nav-item

Sample code:

<a href="#" class="nav-item">Navigation Button </a>

Rendered element:

Navigation Button

Text Input Field with Label

CSS selector:

Input,Label

Sample code:

<form method="post" action="#" input type="text" id="form-name">Text Input Field

Rendered element:

Image Link

CSS selector:

a:hover img, a:focus img

Sample code:

<a href="https://www.betterup.com/blog/corporate-jargon">Image Link </a>

Rendered element:

Website article that talks about 7 corporate jargon phrases to avoid
A short tutorial for our product.

Text Elements

Headings

CSS selector:

h1,h2,h3,h4

Sample code:

< h1>"Heading 1: The quick brown fox jumps over the lazy dog">Headings< /h1>

Rendered element:

Heading 1: The quick brown fox jumps over the lazy dog

Heading 2: The quick brown fox jumps over the lazy dog

Heading 3: The quick brown fox jumps over the lazy dog

Heading 4: The quick brown fox jumps over the lazy dog

Paragraphs

CSS selector:

p

Sample code:

< p>"EG: We have metamorphosed from an asset-based pipeline">Paragraphs </p>

Rendered element:

EG: We have metamorphosed from an asset-based pipeline, power generating to a marketing logistics company whose biggest assets are well-established business approach and its innovative people. The sentenct becomes: We have a lot of companies and our biggest strength is our creativity from our employees.

Numbered Lists

CSS selector:

ol,li

Sample code:

< ol>= "< li>" Understanding difficult and unique vocabulary from university classes.">Numbered Lists < /li> </ol>

Rendered element:

  1. Understanding difficult and unique vocabulary from university classes.
  2. Corporate buzz words from people that are trying to hard to impress/confuse you.
  3. Check to see if your own essay is coherant and make sense.

Combined Elements

Main Navigation

How you ever found yourself in a situation where you have no idea what someone is saying?

The Text Simplifier helps to simplify any text you find confusing without sacrificing any of the context.

The Text Simplifier can help you with...

  1. Understanding difficult and unique vocabulary from university classes.
  2. Corporate buzz words from people that are trying to hard to impress/confuse you.
  3. Check to see if your own essay is coherant and make sense.

Product Listing

Try Text Simplifier Today and upgrade to the Pro Version.

The Pro version will help you...

  1. Add more filters on how to simplify words
  2. Instant 24/7 help from our expert staff.
  3. First access to our new features
  4. Plus many more feature only avaliable in the Pro version

Only $1.99

Upgrade Now
Two colored speech bubbles with the letters t and s are intersecting.

Description of services

Color palettes

Many Branded websites such as Grammarly or HemingwayApp use more cooler colours. Cooler colours tend to promote stability and trust which is important for a program like this.

5 column Aquamarine Colour palette ranging from Aquamarine to Turquiose 6 column Green Colour palette ranging from mint green to dark blue
5 column monochromatic Dark Blue Colour palette. 5 column Sky Blue Colour palette ranging from sky blue to white

Description of product

The Text simplifer is software that simplifies a sentence to something more understandable. Just copy paste a sentence or word and the program will automatically simplify the pasted sentence.

For example a sentence could read:We have metamorphosed from an asset-based pipeline, power generation into revolutionized state of the art marketing logistics. The program will simplify this sentence to: We have changed industries, from energy and pipelines into a marketing firm.

Images to use

An Icon with pencil writing on a book surrounded by a purple circle An Icon with s magnify glass inspecting a book surrounded by a blue circle Two intersecting speech bubbles with the letters a and あ inside.
Person on the left is saying ABC, person on the right is confused Two square symbols with two white letters a and 文 pointing to each other The letters a and 文 are pointing to each other like a circular loop.

References

  1. Grammarly.
  2. DeepTl_Translator.
  3. HemingwayApp
  4. w3schools_centering
  5. w3schools_margins
  6. w3schools_navbar
  7. w3schools_forms
  8. w3schools_align
  9. tutorialbrain
  10. mailchimp
  11. Help with image positions