Naija Yellow Page Catalogue TEAM Elite Project<<<<<<<<<<
Ganiyu Omotayo (Team Lead) Chioma Okeke Vivian Isiaka Abdulahi Arimoro Olamilekan Ezekiel Samuel Yusuf
Project Contribution Guideline
HTML files should end with .html suffix. File names should not be more than 32 characters Use relative links/paths for links and images from your branch project web pages to other web pages in the project. We strongly suggest using all lowercase for letters because people make fewer mistakes. The first character of the file should be a letter. Use relative short name that are indicative to the content of the page. Name files with images, with names that will help remember what is in them. Class and id names must be relative to the bearing tags. Use 2 space indentation both in html code and css code
Projects Tags' class and id naming Convention
class name must include page info i.e. about.html
Css Styling
A space before opening curly bracket i.e. about.html
.about-container { }
No space between previous closing curly bracket and next selector } #about-heading {}
New line after last styling }\n
Colors: #EBBA32 (yellow) #000000 (black) #FFFFFF (white)
Fonts: Avenir Next LT Pro Regular 15px line height: auto. (PS: if you can't find the font, "which is almost impossible" use roboto)
More Guidelines:
-
All files have been created and are in the necessary folders (HTML files are in the "content Folder" and CSS files in the "Asset folder") no need to change any names, just open the file you're working on, input your codes and save when done, use live server to view and ensure all is working well before you commit.
-
Images would be saved in the asset folder, the images used in the UI design will also be saved with indentifiable names to avoid confusion
-
Please use a CSS reset to reset all margin and padding before you begin
-
I'll grant everyone edit privileges on figma so we can all see the sizes and specification of each element to be used, please do not alter anything.
-
Please strongly adhere to the rules/requirements specified by Mr. PK, there should be responsiveness across all screens on all pages, also cross-browser compatibility (i heard you can use VScode's auto prefixer to do this). Also if possible, let's add the hamburger menu thing for the responsiveness.
-
Icons used should be from font-awesome.
-
Combine colors as you please, but do not go beyond the three specified colors, as for UI inspiration, check dribbble.com, behance.com or wherever, just type the kind of page design you want (e.g about page, contact page) and they will present you with good designs you can get inspiration from.
-
The maintenance files (CSS and HTML) are for me, because of some tweaks i may want to include on the landing page.
Ganiyu : Sign - Up page Arimoro : About page Isiaka: Contact page Chioma: Login page Samuel: Landing page. Thanks, and let's get working, everyone has to finish their pages latest 9PM today.
FONTS USED FOR THE DIFFERENT UI DESIGN SCREENS
About Page: Heading: EB Garamond description text: Rubik How it all started text: Zilla Slab Everything else: Rubik