.link-intext
<a href="#" class="link-intext">In-text link</a>
.label
.input-text
<label class="label" for="text_field">Label for Text Field:
</label>
<input class="input-text" id="text_field" type="text">
.image-as-link
.image-wrapper
<a class="link-intext image-wrapper image-as-link"
href="#">
<img src="img/" alt="Image as Link">
</a>
h1
h2
h3
h4
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
p
<p>Content</p>
The boy walked down the street in a carefree way, playing without notice of what was about him. He didn't hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate. She looked at her student wondering if she could ever get through. "You need to learn to think for yourself," she wanted to tell him. "Your friends are holding you back and bringing you down." But she didn't because she knew his friends were all that he had and even if that meant a life of misery, he would never give them up.
ol
li
<ol>
<li>Content</li>
</ol>
.listing
.product-info
.product-image
.flex-listing
.flex-listing-image
.flex-listing-item
<article id="product#" class="listing flex-listing">
<section class="product-image flex-listing-item">
<a class="link-intext image-as-link" href="#">
<img src="img/" alt="Image as Link">
</a>
</section>
<section class="product-info flex-listing-item">
<h3>Product Name</h3>
<h4>Price</h4>
<p>Short Description</p>
<a href="#" class="link-intext">Details Link</a>
</section>
</article>
Aloe vera is a succulent plant species of the genus Aloe. The plant is stemless or very short-stemmed with thick, greenish, fleshy leaves that fan out from the plant’s central stem. The margin of the leaf is serrated with small teeth.
Details....new-checkout-row
.new-checkout-container
<div class="new-checkout-row">
<div class="new-checkout-col-25">
<div class="new-checkout-container"">
<h3>SHOPPING CART</h3>
<label for="fname"">Accepted Cards:</label>
<div class="icon-container">
<i class="fab fa-cc-visa fa-2x" style="color: navy">
<input class="input-text" id="text_field" type="text">
<a href="products.html" class="button-reset">
<a href="thankyou.html" class="button-submit">
</form>
</div>
.cart
.cart-details
.cart-row
.cart-total
.flex-cart-details
.flex-cart-row
<article id="checkout_cart" class="cart">
<section class="cart-details flex-cart-details">
<table>
<tr>
<th>Products</th>
<th>Price</th><th>Amount</th>
<th>Total</th>
</tr>
<tr>
<td> <a href="" class="link-intext image-wrapper">
<imgclass="image-as-link" src="" alt=""> </a><br
/>Fasciated Haworthia</td>
<td>$19.99/each</td><td>1</td>
<td>$19.99</td>
</tr>
<tr>
<th></th>
<th></th><th>Total</th>
<th>$19.99</th>
</tr>
</table>
</section>
</article>
| Products | Price | Amount |
|---|---|---|
|
Aloe Vera |
$19.99 | 1 |
AGLAONEMA KIWI |
$34.49 | 1 |
| Total | $54.48 |
"Evergreen" is an online company that mainly sells plants such as succulents and bonsai. It provides knowledge and tips on plant care and holds regular online sharing sessions on plant care tips. The company's goal is to build a plant-centered community and attract more young people to have plant companions.
Potential customers will be young people who want to add small plants in the room but do not have the corresponding knowledge and experience.
Quick Personas
Bruce(22, Male, Student)
About
- Bruce is a third-year student who is busy studying all day.
- He lives alone in an apartment with a cat for company.
- He is very experienced in taking care of pets but not plants.
Goals
- Bruce wanted to make the apartment more cozy.
- He hopes to learn about caring for plants and try his hand at
growing them.
Pain Points
- Bruce can't find a suitable place to buy succulents because the
local plant stores are far away from him.
- He fails to find a way to systematically learn to care for plants.
- He doesn't find the right community to exchange ideas about caring
for plants.
Compared with other websites that sell plants online, "Evergreen"
not only provides the option to buy plants, but also provides
customers with sufficient knowledge and skills on caring for plants.
"Evergreen" pays more attention to the whole process of customers
from purchasing plants to taking care of plants than other
companies. It is better than any other company at keeping in touch
with customers after their purchases are over.
Paragraph
Designed by
Ulanovsky et al.
From
Google Fonts
Access and use via
Montserrat Fonts
Tools used: Adobe Color Wheel , Material Theme Builder
The main art direction is to use flat illustrations for icons and minimalist plant photos for product images. (The following pictures are just samples and will not be used in the actual website)
