Resources

CSS – Final Project

Vegan Store

Demo Website:
https://demoapi-43d03.firebaseapp.com/

Reference Image:
https://edyoda.s3.ap-south-1.amazonaws.com/public/Project++Page+Design+-+Color+Codes-
01.png

Styling Details:

Section 1:

Image Links:

IMAGE IMAGE LINK

https://edyoda.s3.ap-south-1.amazonaws.com/public/landing-
Background Image
background.png

https://mobirise.com/extensions/organicamp/assets/images/log
Top bar Logo
o1.jpg

Menu Items:
Font Family: 'Poppins', sans-serif;
Text Color: black;
Font Thickness: 600;
Font Size: 14px;

EdYoda Digital University https://www.edyoda.com

Page | 1
Dropdown:
Font Family: 'Poppins', sans-serif;
Top Border: 2px solid rgb(170, 210, 54);
Background Color: white;
Shadow: 0 2px 5px #ccc;

Buy-Now Button:
Font Family: 'Poppins', sans-serif;
Text Size: 12px;
Font Thickness: 600;
Text Color: white;
Background Color: rgb(170, 210, 54);
Padding: 9px 34px;
Border Radius: 4px;

Section 1 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;
Letter Spacing: 8.8px;
Line Height: 1.2;

Section 1 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Font Thickness: 400;
Color: #8b8b99;

Section 2:

Step 1:
icon: <i class="fa fa-cut"></i>
Background color: #5acda6

EdYoda Digital University https://www.edyoda.com

Page | 2
Step 2:
icon: <i class="fa fa-paint-brush"></i>
Background color: #91ac41;

Step 3:
icon: <i class="fa fa-shopping-bag"></i>
Background color: #e4b476;

Step 4:
icon: <i class="far fa-smile"></i>
Background color: #f69dad;

Step Icon:
Width/Font-Size: 96px;

Step Label:
Font Family: 'Poppins', sans-serif;
Font Thickness: 600;
Text Size: 24px;

Step Description:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Line Height: 1.6;

Section 3:
Background color: #f7eee2;

EdYoda Digital University https://www.edyoda.com

Page | 3
Fresh Food Text:
Text Color: #91ac41;
Text Size: 24px;
Font Family: 'Caveat', cursive;
Margin: 0;
Margin Top: 35px;

Section 3 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;

Section 3 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 500;
Text Color: #8b8b99;
Letter Spacing: 0.5px;

Icon 1:
<i class="fa fa-camera">

Icon 2:
<i class="fa-rocket fa">

Icon 3:
<i class="fab fa-twitter">

Icon 4:
<i class="fab fa-weixin"></i>

Item Icon:
Background Color: #e3b375
Width/Font-Size: 60px;

Item Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 24px;
Font Thickness: 600;

EdYoda Digital University https://www.edyoda.com

Page | 4
Item Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Letter Spacing: 0.5px;
Font Thickness: 500;
Text Color: #8b8b99;

Section 4:

Image Links:

IMAGE IMAGE LINK

https://mobirise.com/extensions/organicamp/assets/images/fac
Testimonial Image 1
e5.jpg

https://mobirise.com/extensions/organicamp/assets/images/fac
Testimonial Image 2
e6.jpg

https://mobirise.com/extensions/organicamp/assets/images/fac
Testimonial Image 3
e7.jpg

Fresh Food Text:

Text Color: #91ac41;
Text Size: 24px;
Font Family: 'Caveat', cursive;
Margin: 0;
Margin Top: 35px;

Section 4 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;

EdYoda Digital University https://www.edyoda.com

Page | 5
Section 4 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 500;
Text Color: #8b8b99;
Letter Spacing: 0.5px;

Testimonial Card:
Background Color: #f5f6fb;
Top-left Border Radius: 45px;
Bottom-left Border Radius: 45px;
Bottom-right Border Radius: 45px;

Testimonial Card Image:

Border Radius: 50%;
Width: 80px;

Testimonial Card Message:

Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Font Style: Italic;
Text Color: #8b8b99;

Testimonial Card Author:

Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 600;
Testimonial Card Author:
Font Family: 'Poppins', sans-serif;
Text Size: 12px;
Text Color: #8b8b99;
Font Style: Italic;

EdYoda Digital University https://www.edyoda.com

Page | 6
Section 5:

Image Links:

IMAGE IMAGE LINK

https://mobirise.com/extensions/organicamp/assets/images/19.j
Left Image
pg

Right Background https://edyoda.s3.ap-south-1.amazonaws.com/public/strawberry-

Image white.png

Subscribe Button:
Background Color: #f69dad;

Section 6:
Stats Item Green Color:

Section 7:
Video URL: https://player.vimeo.com/video/275412279

Section 8:
Figure it out. The styles are same as other sections.

EdYoda Digital University https://www.edyoda.com

Page | 7
Section 9:
Footer Background Color: #232323

All the Best!

EdYoda Digital University https://www.edyoda.com

Page | 8