italanta / elewa-website-html Goto Github PK

Repository of the elewa website redesign. This is a website which uses HTML, CSS and TypeScript.

License: MIT License

Shell 0.07% HTML 31.24% CSS 61.46% TypeScript 7.23%

elewa-website-html's Introduction

iTalanta "Discover" Program Contribution Guide

Welcome to the iTalanta "Discover" program! This guide provides students and contributors with essential information and guidelines for making contributions to the iTalanta "Discover" program. In this guide, we'll cover what to expect from the program and provide details on our workflow documentation.

iTalanta "Discover" Program Contribution Guide

1. Introduction to iTalanta "Discover" Program

The iTalanta "Discover" program is designed to prepare learners for their first job, internship, or apprenticeship In this program, you will work in a simulated work environment, collaborating on open-source software projects. You will be mentored by experienced developers who will act as project managers, answer your questions, review your work, and provide guidance throughout your journey.

2. Program Objectives

The primary objectives of the iTalanta "Discover" program include:

Preparing learners for their first job, internship, or apprenticeship.
Teaching timeless fundamentals of software development.
Providing a simulated work environment for practical experience.
Offering mentorship and guidance by experienced developers.

Please review our Workflow Documentation before beginning your contribution.

3. Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run the App.

Node.js
npm

Setup

Fork then clone repo from your public GitHub repository (fork https://github.com/italanta/elewa-website-html/fork).
```
git clone https://github.com/{yourusername}/elewa-website-html.git
```
Go to the project folder
```
cd elewa-website-html
```
Install packages with npm
```
npm i
```
Compile typescript to js and watch for live changes
```
npm run watch:ts
```
Start the dev server.
```
npm run serve
```

elewa-website-html's People

Contributors

Stargazers

Watchers

Forkers

angugo muilipato cliff-mudigo pychangeric volatyl francis-gi paul-nadola andrew-nzioki jessemutua kimathi72 elizabethkerubo02 ase020 brianrono iamkinglana bonfacenyatangi seruyara jobkoech610 kiprutokelvin kat-kimani mshekerotokiti mumbi58 babamboga munkushir james-kamau3 michal379 alex-munezz dmuguti godwin-yampoi makig10 mwangitess medrine-jepkemoi brianbett1998 jessywaweru augasha04 ngaremaina afrikhana skaranjan patrickwide teddy5456 tyler-k254 sharoun-madoya willtemmy limisimike jelizasilatei winniegithubrit john-muchuku ciciwanja254 azharahmed-bot tugi-ngunjiri sarah-wambui brienjuma soundmoney254 vickynjoroge carenwaks kevin-wairi nicole-devs yazeed62 marvin-kabugi schola-droid melmuya wesebebe jessyvee max-mahinda de65 0maddox dmwanza pat-nganga stevenmolvin faithwangare rolex46 marykaheti arnold959 fartun2023 bsquiat1 richardmiruka nkathaglow mjomba60 christinenanu vkerubo sammun1926 manotim danielsdgg malcomowilla marsmwau edwinaloo dennis-nganga kongkabuu lord-gitonga koima-sam mueni5 420morganjason asmadeous feisalkeli the-tribe-2-0 byron00123 erickmwangi allenamaya erhic alexkibe chepkoech1

elewa-website-html's Issues

✨📝 Create Content-Development Page HTML file

User stories

As a Developer I need a Page HTML file where I can add the different sections of my content development page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page HTML file where I can add the different sections of my content development page.

Technical Analysis

The file should be placed in the library src/features/pages. The name of the file is content-development-page.html.

Acceptance Criteria

The code is isolated to the libs/features/pages unless a justified reason is specified.
A separate commit is used for each small change
The commits and PR are well formatted/use proper documentation

🎨 Create Website header

Create the website header

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a header I can use to navigate the website.

Description

Your task is to add the website header as described below.

The content of this header will include:

1. "Elewa" logo on the left
2. A transparent background 
3. Black text in correct font 
4. Contact button on the right

The header looks as follows:

Full design reference:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

The container adapts naturally to the following screen widths:

Device	Screen width	Container width
Large Screens (Desktops and Laptops)	1440px	1200px
Tablets	768px	728px
Mobiles	360px	320px

Assets

Logo URL

https://res.cloudinary.com/dyl3rncv3/image/upload/v1695970671/elewa-education-website/Shared/elewa-logo_eocvkz.png

Technical Analysis

Create a header element in the HTML file.
Create styles in the CSS file.
Add the logo image to assets/images

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The header adapts naturally to different screen widths

🎴 🎠 Create the Projects Carousel Section

Create the Projects Carousel Section.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice carousel to display all my projects as a list. I should be able to move the carousel and view projects that are not yet in view.

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Technical Analysis

This feature can be found in index.html. Elements out of view are not displayed. The carousel is responsive (i.e the project cards get smaller as the width decreases).

Data

You'll be required to provide mock data for the projects of type: ProjectItem[]. The project Item interface has been provided below. The mock data should be stored in the index.ts file for now (will be moved later).

interface ProjectItem {
  title: string
  description: string
  tag: string
  imgSrc: string
}

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The main code is isolated to the index.html file.
The project interface is defined. No any types are being used anywhere.
The design is responsive for screen, tablet and phone.
Mock data for the projects has been provided.

🎨 Create Home Page Overview Section

Create the home Page "Overview" section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a section that shows an Overview section that describes what Elewa does as shown in the image below

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Assets.

Image URL

https://res.cloudinary.com/dyl3rncv3/image/upload/v1695278606/elewa-education-website/Home-And-About/gettyimages-98473330-2048x2048_2x_ozuvtq.png

Technical Analysis

This feature can be found in index.html

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The design is responsive for screen, tablet and phone

✨📝 Create Consultancy Page HTML file

User stories

As a Developer I need a Page HTML file where I can add the different sections of my consultancy page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page HTML file where I can add the different sections of my consultancy page.

Technical Analysis

The file should be placed in the library src/features/pages. The name of the file is consultancy-page.html.

Acceptance Criteria

The code is isolated to the libs/features/pages unless a justified reason is specified.
A separate commit is used for each small change
The commits and PR are well formatted/use proper documentation

🎨 Create Menu Solutions Component on the Header.

Create the menu solutions component

NB: This issue depends on #1

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a menu on the header section that opens when the solutions tab is clicked and drops from the top (if possible animate this) that captures my attention and introduces the menu content with router links to the different pages shown in the design below. I want a good experience on the web and phone. inside the components folder. If you need to update the header component to achieve this feel free to do so.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in index.html.

Acceptance Criteria

When rendered the component is pixel perfect compared to the design above.
The design is responsive for screen, tablet and phone

🎨 Website header

Create the website header

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a header I can use to navigate the website.

Description

Your task is to add the website header as described below.

The content of this header will include:

1. "Elewa" logo on the left
2. A transparent background 
3. Black text in correct font 
4. Contact button on the right

The header looks as follows:

The header needs to be of higher z-index so that it appears on top of the page banner.

Full design reference: https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

The container adapts naturally to the following screen widths:

Device	Screen width	Container width
Large Screens (Desktops and Laptops)	1440px	1200px
Tablets	768px	728px
Mobiles	360px	320px

Technical Analysis

Create a header element in the HTML file.
Create styles in the CSS file.
Add the logo image to assets/images

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The header adapts naturally to different screen widths

💄 🎨 Create the consultancy page hero section

Create the consultancy page hero section

NB: This issue depends on #11 and #1

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the consultancy page that captures my attention and introduces the page content. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in src/features/pages inside consultancy-page.html.

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The design is responsive for screen, tablet and phone

🎨 App Layout - Create Website Footer

Create the website footer

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a simple footer that displays my information in a structured way.

Description

Currently, the website page has no footer. Your job is to add one. The footer needs to appear well on the web and mobile:

Web:

Mobile:

NB: The mobile design is for a different website, ours should look exactly the same apart from the textual content itself

Link to full design:

https://xd.adobe.com/view/30f592fb-2ceb-4ea9-a6b9-2aee6239a957-65a6/screen/9ce6f3d4-3ff5-4c36-86f0-bf3a67e02b13

Technical Analysis

Create a footer.html file in src/elements/layout/footer/footer.html

Assets.

Logo URL

https://res.cloudinary.com/dyl3rncv3/image/upload/v1695970671/elewa-education-website/Shared/elewa-logo_eocvkz.png

Right Arrow URL

https://res.cloudinary.com/dyl3rncv3/image/upload/v1695972080/elewa-education-website/Shared/toRightArrow_tlcdnk.svg

Social media links

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690295/elewa-group-website/Icons/SVG/_Social/instagram_x8ujcq.svg

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690294/elewa-group-website/Icons/SVG/_Social/linkedin_x8smhm.svg

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690294/elewa-group-website/Icons/SVG/_Social/facebook_lhhwk2.svg

Acceptance Criteria

When rendered the component is pixel perfect compared to the design above.
The code is isolated to the src/elements/layout/footer package, unless a justified reason is specified.
The design is responsive for screen, tablet and phone

🎨 Create the home landing page

Create the Home Landing page

NB: This issue is dependent on #1

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the home page that captures my attention and introduces the page content. I want a good experience on the web and phone. Use the header created in #1.

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Assets.

Logo URL

https://res.cloudinary.com/dyl3rncv3/image/upload/v1695970671/elewa-education-website/Shared/elewa-logo_eocvkz.png

Right Arrow URL

https://res.cloudinary.com/dyl3rncv3/image/upload/v1695972080/elewa-education-website/Shared/toRightArrow_tlcdnk.svg

Technical Analysis

This feature can be found in index.html.

Acceptance Criteria

When rendered the hero is pixel-perfect compared to the design above.
The design is responsive for screen, tablet and phone

✨📝 Create About Page HTML file

User stories

As a Developer I need a Page HTML file where I can add the different sections of my about page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page HTML file where I can add the different sections of my about page.

Technical Analysis

The file should be placed in the library src/features/pages. The name of the file is about-page.html.

Acceptance Criteria

The code is isolated to the libs/features/pages package unless a justified reason is specified.
A separate commit is used for each small change
The commits and PR are well formatted/use proper documentation

✨📝 Create Conversational Learning Page HTML file

User stories

As a Developer I need a Page HTML file where I can add the different sections of my conversational learning page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page HTML file where I can add the different sections of my conversational learning page.

Technical Analysis

The file should be placed in the library src/features/pages. The name of the file is conversational-learning-page.html.

Acceptance Criteria

The code is isolated to the libs/features/pages unless a justified reason is specified.
A separate commit is used for each small change
The commits and PR are well formatted/use proper documentation

🎨 Create Home Page News Section Component

🎨 Create the Home Page News Section Component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a section that displays all news- items(blogs) that I have on my homepage.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This component will be created in index.html

Acceptance Criteria

When rendered the section is pixel-perfect compared to the design above.
The section is aligned using CSS grid
The design is responsive for screen, tablet and phone

✨📝 Create Contact Page HTML file

User stories

As a Developer I need a Page HTML file where I can add the different sections of my contact page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer, I need a Page HTML file where I can add the different sections of my contact page.

Technical Analysis

The file should be placed in the library src/features/pages. The name of the file is contact-page.html.

Acceptance Criteria

The code is isolated to the libs/features/pages unless a justified reason is specified.
A separate commit is used for each small change
The commits and PR are well formatted/use proper documentation

🎨 HomePage Partners Section

🎨 Create the partner's section on the HomePage

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a section that shows/lists all our core business partners. Check the full design below for section placement. Use the assets provided below.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Assets.

Company Logos

VVOB:

https://res.cloudinary.com/dyl3rncv3/image/upload/v1681380406/elewa-group-website/client-logos/vvob-logo_qyvjbp.jpg

KSA:

https://res.cloudinary.com/dyl3rncv3/image/upload/v1681380406/elewa-group-website/client-logos/Kenya_Scouts_Association_kcoka5.svg

farmbetter:

https://res.cloudinary.com/dyl3rncv3/image/upload/v1681380406/elewa-group-website/client-logos/farmbetter-logo_x2acda.png

WWF:

https://res.cloudinary.com/dyl3rncv3/image/upload/v1681380406/elewa-group-website/client-logos/wwf-4-logo-png-transparent_tbkfcq.png

Enabel:

https://res.cloudinary.com/dyl3rncv3/image/upload/v1681380405/elewa-group-website/client-logos/Enabel-logo_afiel7.png

Spotlights:

https://res.cloudinary.com/dyl3rncv3/image/upload/v1681380412/elewa-group-website/client-logos/Spotlights_7_pplnvm.jpg

Technical Analysis

This section should be present in the index.html file

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The component is clean and does not have more than 50 lines
The design is responsive for screen, tablet and phone

💄 🎨 Create the content development page hero section

Create the content development page hero section

NB: This issue depends on #12 and #1

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the content-development page that captures my attention and introduces the page content. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in src/features/pages inside content-development-page.html.

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The design is responsive for screen, tablet and phone

💄 🎨 Create the conversational learning page hero section

Create the conversational learning page hero section.

NB: This issue depends on #10 and #1

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the conversational learning page that captures my attention and introduces the page content. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in src/features/pages inside conversational-learning-page.html.

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The design is responsive for screen, tablet and phone

💄 🎨 Create the booklets page hero section

Create the booklets page hero section

NB: This issue is depends on #9 and #1

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the booklets page that captures my attention and introduces the page content. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in src/features/pages inside booklets-page.html.

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The design is responsive for screen, tablet and phone

💄 🎨 Create the about page hero section

Create the about page hero section

NB: This issue depends on #76 and #1

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the about page that captures my attention and introduces the page content. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Use the SVG below to clip the image.

<div class="svg-wrapper">
  <svg xmlns="http://www.w3.org/2000/svgs" width="100%" height="100%" viewBox="0 0 803 781">
    <g id="Union_1" data-name="Union 1">
      <clipPath id="stacked-mask">
        <path
          d="M 603.9998779296875 780.500244140625 L 198.9999084472656 780.500244140625 C 185.5316009521484 780.500244140625 172.0720062255859 779.1434326171875 158.9948120117188 776.4674072265625 C 146.2502136230469 773.8594360351562 133.7142028808594 769.968017578125 121.7350082397461 764.9013061523438 C 109.9732055664062 759.9263916015625 98.62890625 753.7689208984375 88.0172119140625 746.5997924804688 C 77.50611114501953 739.4987182617188 67.62200927734375 731.343505859375 58.63940811157227 722.36083984375 C 49.65670776367188 713.3782348632812 41.50150680541992 703.494140625 34.40040969848633 692.9830322265625 C 27.23130798339844 682.371337890625 21.07380867004395 671.0270385742188 16.09890937805176 659.2651977539062 C 11.03220844268799 647.2860107421875 7.140808582305908 634.75 4.532808303833008 622.0054321289062 C 1.856808423995972 608.92822265625 0.5000084638595581 595.4686279296875 0.5000084638595581 582.0003051757812 C 0.5000084638595581 559.7752075195312 4.146608352661133 537.9541015625 11.33840847015381 517.1431274414062 C 18.29080772399902 497.0248107910156 28.41520881652832 478.2247314453125 41.43010711669922 461.26513671875 C 47.82180786132812 452.9363098144531 54.93100738525391 445.051025390625 62.56030654907227 437.8283081054688 C 70.19841003417969 430.5973205566406 78.46840667724609 423.9258117675781 87.14051055908203 417.9992370605469 C 104.8544082641602 405.8932189941406 124.2647094726562 396.8030090332031 144.8322143554688 390.9811096191406 L 146.5318145751953 390.5000305175781 L 144.8322143554688 390.0189208984375 C 124.2647094726562 384.197021484375 104.8544082641602 375.1068115234375 87.14051055908203 363.000732421875 C 78.46840667724609 357.0740356445312 70.19841003417969 350.4025268554688 62.56030654907227 343.1715087890625 C 54.93100738525391 335.9488220214844 47.82180786132812 328.0635070800781 41.43010711669922 319.734619140625 C 28.41520881652832 302.7750244140625 18.29080772399902 283.9750366210938 11.33840847015381 263.8567199707031 C 4.146608352661133 243.0458221435547 0.5000084638595581 221.2248229980469 0.5000084638595581 198.9999237060547 C 0.5000084638595581 185.5316162109375 1.856808423995972 172.072021484375 4.532808303833008 158.9948272705078 C 7.140808582305908 146.2502288818359 11.03220844268799 133.7142181396484 16.09890937805176 121.7350234985352 C 21.07380867004395 109.9732208251953 27.23130798339844 98.62892150878906 34.40040969848633 88.01721954345703 C 41.50150680541992 77.50611877441406 49.65670776367188 67.62202453613281 58.63940811157227 58.63942337036133 C 67.62200927734375 49.65672302246094 77.50611114501953 41.50152206420898 88.0172119140625 34.40042114257812 C 98.62890625 27.23132133483887 109.9732055664062 21.07382202148438 121.7350082397461 16.09892272949219 C 133.7142028808594 11.03222179412842 146.2502136230469 7.140821933746338 158.9948120117188 4.532822132110596 C 172.0720062255859 1.85682201385498 185.5316009521484 0.5000220537185669 198.9999084472656 0.5000220537185669 L 603.9998779296875 0.5000220537185669 C 617.4682006835938 0.5000220537185669 630.9277954101562 1.85682201385498 644.0050048828125 4.532822132110596 C 656.7496337890625 7.140821933746338 669.2855834960938 11.03222179412842 681.2648315429688 16.09892272949219 C 693.026611328125 21.07382202148438 704.3709106445312 27.23132133483887 714.9826049804688 34.40042114257812 C 725.4937133789062 41.50152206420898 735.3778076171875 49.65672302246094 744.3604125976562 58.63942337036133 C 753.3430786132812 67.62202453613281 761.498291015625 77.50611877441406 768.5994262695312 88.01721954345703 C 775.7684936523438 98.62892150878906 781.926025390625 109.9732208251953 786.90087890625 121.7350234985352 C 791.9675903320312 133.7142181396484 795.8590087890625 146.2502288818359 798.4669799804688 158.9948272705078 C 801.1430053710938 172.072021484375 802.4998168945312 185.5316162109375 802.4998168945312 198.9999237060547 C 802.4998168945312 221.2248229980469 798.8532104492188 243.0458221435547 791.6614379882812 263.8567199707031 C 784.7089233398438 283.9750366210938 774.5845947265625 302.7750244140625 761.569580078125 319.734619140625 C 755.177978515625 328.0635070800781 748.0687866210938 335.9488220214844 740.4393920898438 343.1715087890625 C 732.8013305664062 350.4025268554688 724.5313110351562 357.0740356445312 715.8591918945312 363.000732421875 C 698.1453247070312 375.1068115234375 678.735107421875 384.197021484375 658.1676025390625 390.0189208984375 L 656.468017578125 390.5000305175781 L 658.1676025390625 390.9811096191406 C 678.735107421875 396.8030090332031 698.1453857421875 405.8932189941406 715.8591918945312 417.9992370605469 C 724.5313110351562 423.9258117675781 732.8013305664062 430.5973205566406 740.4393920898438 437.8283081054688 C 748.0687866210938 445.051025390625 755.177978515625 452.9363098144531 761.569580078125 461.26513671875 C 774.5845947265625 478.2247314453125 784.7089233398438 497.0248107910156 791.6614379882812 517.1431274414062 C 798.8532104492188 537.9541015625 802.4998168945312 559.7752075195312 802.4998168945312 582.0003051757812 C 802.4998168945312 595.4686279296875 801.1430053710938 608.92822265625 798.4669799804688 622.0054321289062 C 795.8590087890625 634.75 791.9675903320312 647.2860107421875 786.90087890625 659.2651977539062 C 781.926025390625 671.0270385742188 775.7684936523438 682.371337890625 768.5994262695312 692.9830322265625 C 761.498291015625 703.494140625 753.3430786132812 713.3782348632812 744.3604125976562 722.36083984375 C 735.3778076171875 731.343505859375 725.4937133789062 739.4987182617188 714.9826049804688 746.5997924804688 C 704.3709106445312 753.7689208984375 693.026611328125 759.9263916015625 681.2648315429688 764.9013061523438 C 669.2855834960938 769.968017578125 656.7496337890625 773.8594360351562 644.0050048828125 776.4674072265625 C 630.9277954101562 779.1434326171875 617.4682006835938 780.500244140625 603.9998779296875 780.500244140625 Z"
          stroke="none" />
        <path
          d="M 603.9998779296875 780.000244140625 C 617.4346313476562 780.000244140625 630.8605346679688 778.6468505859375 643.90478515625 775.9775390625 C 656.6170043945312 773.376220703125 669.1212158203125 769.4947509765625 681.0700073242188 764.4407958984375 C 692.8021240234375 759.478515625 704.1177978515625 753.3365478515625 714.7026977539062 746.185546875 C 725.1873779296875 739.1022338867188 735.0466918945312 730.967529296875 744.0068969726562 722.00732421875 C 752.9671020507812 713.047119140625 761.101806640625 703.1878051757812 768.1851196289062 692.703125 C 775.3361206054688 682.1182250976562 781.4780883789062 670.8025512695312 786.4404296875 659.0704345703125 C 791.4943237304688 647.1216430664062 795.3757934570312 634.617431640625 797.9771118164062 621.9052124023438 C 800.6464233398438 608.8609008789062 801.9998168945312 595.4349975585938 801.9998168945312 582.0003051757812 C 801.9998168945312 559.8309326171875 798.3624877929688 538.064697265625 791.1887817382812 517.306396484375 C 784.2540283203125 497.239013671875 774.1552124023438 478.4864196777344 761.1730346679688 461.5695190429688 C 754.7974243164062 453.2616271972656 747.7059326171875 445.3960266113281 740.095703125 438.1914367675781 C 732.4766845703125 430.9786071777344 724.2274780273438 424.3238220214844 715.5770874023438 418.4120178222656 C 697.9080200195312 406.3365173339844 678.5468139648438 397.2693176269531 658.0314331054688 391.4622192382812 L 654.6322021484375 390.5000305175781 L 658.0314331054688 389.5378112792969 C 678.5468139648438 383.730712890625 697.9078979492188 374.6634216308594 715.5770874023438 362.5879211425781 C 724.2274780273438 356.6761169433594 732.4766845703125 350.0213317871094 740.095703125 342.8084106445312 C 747.7059326171875 335.6038208007812 754.7974243164062 327.7382202148438 761.1730346679688 319.4302368164062 C 774.1552124023438 302.5133361816406 784.2540283203125 283.7607116699219 791.1887817382812 263.6934204101562 C 798.3624877929688 242.9351196289062 801.9998168945312 221.1691284179688 801.9998168945312 198.9999237060547 C 801.9998168945312 185.5652160644531 800.6464233398438 172.1393280029297 797.9771118164062 159.0950164794922 C 795.3757934570312 146.3828277587891 791.4943237304688 133.8786163330078 786.4404296875 121.9298248291016 C 781.4780883789062 110.1977233886719 775.3361206054688 98.88201904296875 768.1851196289062 88.297119140625 C 761.101806640625 77.81242370605469 752.9671020507812 67.953125 744.0068969726562 58.99292373657227 C 735.0466918945312 50.03272247314453 725.1873779296875 41.89802169799805 714.7026977539062 34.81472396850586 C 704.1177978515625 27.66372299194336 692.8021240234375 21.5217227935791 681.0700073242188 16.55942153930664 C 669.1212158203125 11.50552177429199 656.6170043945312 7.624022006988525 643.90478515625 5.022722244262695 C 630.8605346679688 2.353422164916992 617.4346313476562 1.000022053718567 603.9998779296875 1.000022053718567 L 198.9999084472656 1.000022053718567 C 185.5652160644531 1.000022053718567 172.1393127441406 2.353422164916992 159.0950012207031 5.022722244262695 C 146.3828125 7.624022006988525 133.8786010742188 11.50552177429199 121.9298095703125 16.55942153930664 C 110.1977081298828 21.5217227935791 98.88201141357422 27.66372299194336 88.29711151123047 34.81472396850586 C 77.81240844726562 41.89802169799805 67.95310974121094 50.03272247314453 58.9929084777832 58.99292373657227 C 50.03270721435547 67.953125 41.89801025390625 77.81242370605469 34.8147087097168 88.297119140625 C 27.6637077331543 98.88201904296875 21.52170753479004 110.1977233886719 16.55940818786621 121.9298248291016 C 11.50550842285156 133.8786163330078 7.624008655548096 146.3828277587891 5.022708415985107 159.0950164794922 C 2.353408336639404 172.1393280029297 1.000008463859558 185.5652160644531 1.000008463859558 198.9999237060547 C 1.000008463859558 221.1691284179688 4.637308597564697 242.9351196289062 11.81100845336914 263.6934204101562 C 18.74580764770508 283.7608337402344 28.84460830688477 302.5133361816406 41.82680892944336 319.4302368164062 C 48.20240783691406 327.7382202148438 55.29380798339844 335.6038208007812 62.90410995483398 342.8084106445312 C 70.52301025390625 350.0213317871094 78.77230834960938 356.6761169433594 87.422607421875 362.5879211425781 C 105.0918121337891 374.6634216308594 124.453010559082 383.730712890625 144.9684143066406 389.5378112792969 L 148.3676147460938 390.5000305175781 L 144.9684143066406 391.4622192382812 C 124.453010559082 397.2693176269531 105.0918121337891 406.3365173339844 87.422607421875 418.4120178222656 C 78.77230834960938 424.3238220214844 70.52301025390625 430.9786071777344 62.90410995483398 438.1914367675781 C 55.29380798339844 445.3960266113281 48.20240783691406 453.2616271972656 41.82680892944336 461.5695190429688 C 28.84460830688477 478.4864196777344 18.74580764770508 497.239013671875 11.81100845336914 517.306396484375 C 4.637308597564697 538.064697265625 1.000008463859558 559.8309326171875 1.000008463859558 582.0003051757812 C 1.000008463859558 595.4349975585938 2.353408336639404 608.8609008789062 5.022708415985107 621.9052124023438 C 7.624008655548096 634.617431640625 11.50550842285156 647.1216430664062 16.55940818786621 659.0704345703125 C 21.52170753479004 670.8025512695312 27.6637077331543 682.1182250976562 34.8147087097168 692.703125 C 41.89801025390625 703.1878051757812 50.03270721435547 713.047119140625 58.9929084777832 722.00732421875 C 67.95310974121094 730.967529296875 77.81240844726562 739.1022338867188 88.29711151123047 746.185546875 C 98.88201141357422 753.3365478515625 110.1977081298828 759.478515625 121.9298095703125 764.4407958984375 C 133.8786010742188 769.4947509765625 146.3828125 773.376220703125 159.0950012207031 775.9775390625 C 172.1393127441406 778.6468505859375 185.5652160644531 780.000244140625 198.9999084472656 780.000244140625 L 603.9998779296875 780.000244140625 M 603.9998779296875 781.000244140625 L 198.9999084472656 781.000244140625 C 89.09550476074219 781.000244140625 8.447265827271622e-06 691.9047241210938 8.447265827271622e-06 582.0003051757812 C 8.447265827271622e-06 490.9246215820312 61.19060897827148 414.13720703125 144.6960144042969 390.5000305175781 C 61.19060897827148 366.8627319335938 8.447265827271622e-06 290.0748291015625 8.447265827271622e-06 198.9999237060547 C 8.447265827271622e-06 89.09552001953125 89.09550476074219 2.207031320722308e-05 198.9999084472656 2.207031320722308e-05 L 603.9998779296875 2.207031320722308e-05 C 713.904296875 2.207031320722308e-05 802.9998168945312 89.09552001953125 802.9998168945312 198.9999237060547 C 802.9998168945312 290.0748291015625 741.80908203125 366.8627319335938 658.3038330078125 390.5000305175781 C 741.80908203125 414.13720703125 802.9998168945312 490.9246215820312 802.9998168945312 582.0003051757812 C 802.9998168945312 691.9047241210938 713.904296875 781.000244140625 603.9998779296875 781.000244140625 Z"
          stroke="none" fill="#707070" />
      </clipPath>
    </g>
    <image height="100%" width="100%" preserveAspectRatio="none" clip-path="url(#stacked-mask)" />
  </svg>
</div>

Technical Analysis

This feature can be found in src/features/pages inside about-page.html.

Acceptance Criteria

When rendered the component is pixel-perfect compared to the design above.
The design is responsive for screen, tablet and phone

🎨 Home Page Educational Section Component

Create the home Page "Educational Solution" section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a section that shows an Educational section that describes what Elewa does as shown in the image below

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Technical Analysis

This feature can be found in index.html

Acceptance Criteria

When rendered the section is pixel-perfect compared to the design above.
The section is aligned using CSS grid
The design is responsive for screen, tablet and phone

✨📝 Create Booklets Page HTML file

User stories

As a Developer I need a Page HTML file where I can add the different sections of my booklets page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page HTML file where I can add the different sections of my booklets page.

Technical Analysis

The file should be placed in the library src/features/pages. The name of the file is booklets-page.html.

Acceptance Criteria

The code is isolated to the libs/features/pages package unless a justified reason is specified.
A separate commit is used for each small change
The commits and PR are well formatted/use proper documentation

italanta / elewa-website-html Goto Github PK

elewa-website-html's Introduction

iTalanta "Discover" Program Contribution Guide

Table of Contents

1. Introduction to iTalanta "Discover" Program

2. Program Objectives

3. Getting Started

Prerequisites

Setup

elewa-website-html's People

Contributors

Stargazers

Watchers

Forkers

elewa-website-html's Issues

User stories

Description

Technical Analysis

Acceptance Criteria

Create the website header

Summary

Description

Assets

Technical Analysis

Acceptance Criteria

Create the Projects Carousel Section.

Summary

Description

Technical Analysis

Data

Acceptance Criteria

Create the home Page "Overview" section

Summary

Description

Assets.

Technical Analysis

Acceptance Criteria

User stories

Description

Technical Analysis

Acceptance Criteria

Create the menu solutions component

Summary

Technical Analysis

Acceptance Criteria

Create the website header

Summary

Description

Technical Analysis

Acceptance Criteria

Create the consultancy page hero section

Summary

Technical Analysis

Acceptance Criteria

Create the website footer

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

Description

Technical Analysis

Assets.

Social media links

Acceptance Criteria

Create the Home Landing page

Summary

Description

Assets.

Technical Analysis

Acceptance Criteria

User stories

Description

Technical Analysis

Acceptance Criteria

User stories

Description

Technical Analysis

Acceptance Criteria

🎨 Create the Home Page News Section Component

Summary

Link to full design:

Technical Analysis