Top

style template for Cat On the Way

text elements
combined elements
interactive elements
citation page

headings

h1 heading

css selector

<h1>

h2 heading: page titles

css selector

<h2>

h3 heading: product title on the product list, or subtitles

css selector

<h3>

body paragraph

css selector

<p>

Lorem ipsum dolor sit amet, torquent ac morbi vestibulum condimentum, hendrerit fringilla integer amet, quia sapien enim. In sit rhoncus duis vehicula nonummy, aliquam mauris, sit dictumst consectetuer morbi, in sapien vulputate. Metus nec odio a integer laoreet neque. Cum magna nec et eget consectetuer ipsum, augue mattis, rutrum dictum in etiam mi pede, velit curabitur nulla senectus pulvinar condimentum turpis.

product detail paragraph

css selector

.productDetail

sample code


				 <p class="productDetail">

bulletted list

css selector


				 <ul>
				 <li>list item1</li>
				 </ul>

list item1
list item2
list item3

number list

css selector


				 <ol>
				 <li>list item1</li>
				 </ol>

list item1
list item2
list item3

in-text link

css selector

<a>

cat swimsuit

navigation

css selector

.productBtn, .productBtnBox, .productBtnBox, .menuBox

...
...
...

PRODUCTS

CAT ON THE WAY

ABOUT

CONTACT

|||

submit buttons

css selector

.btn

sample code


				<a>
				 <section class="btn">
				 </a>

SUBMIT

input text and label

css selector

sample code


				<label> name:</label> 
				

				<input type="text" name="name">

name:

navigation button

css selector

sample code


				<div class="boxLong">
				<a href="contact.html"> CONTACT</a>
				</div>

CONTACT

color swatches

#E52952

linear-gradient(#B7C1EA, #C3ABC7);

rgb(200,200,200)

product list

css selector

.productList, .productListItem

sample code


				<div class="productList flexContainer">

					<a href="bagpack.html"> 

					<figure class="productListItem"> 

					<img src="img/backpack7.jpg" alt="product1">

					<figcaption>

					<p>cat carrier</p>

					<p>$290</p>
					</figcaption>

					</figure>

					</a>

				<div>