Add and style the "Web app & development..." view on the homepage

[AliHassan7]

• To begin working on this task, create a branch based off of the currently checked out branch using the following convention: proj-me-initials-48
• For your convenience, an image of the design has been added to the bottom of this issue.
• If you haven't already, create at least 4 pieces of content of the "Portfolio" content type. You can use random titles, descriptions, and pictures.
• This view (Portfolio) should already be created and can be found at Structure » Views.
• Edit this view and add a Block display to it. Save the view.
• To place this view block on the homepage, you will need to use the Panels module. Use composer to download the Panels (panels), and Page Manager (page_manager) Modules. Remember to add each of these modules in their own commits.
• Navigate to Extend and enable the following modules:
  • Panels
  • Panels IPE
  • Page Manager
  • Page Manager UI.
• Navigate to Structure » Pages. Click on "+ Add page". Give this page an administrative title of "Homepage". Give it a path of "home". Make sure that "Variant type" is set to "Panels" and click "Next" when you're finished.
• Give the Variant a label of "home". Click Next. Give it a Layout of "One Column". Click next.
• Once at the "Content" page, give it a title of "Home".
• Click on "+ Add new block" and find and select the "Portfolio" block. Choose to display the title and click on "Add block".
• Update and Save
• To make this new panels page our homepage, navigate to Configuration » System » Basic site settings and set the default front page to point to /home. Save the configuration and visit the homepage and you should see the view being displayed there!
• You should now style this view according to the design. The View title of "Portfolio" should have the color #aaaaaa.
• You can add the "Web app & development..." text by editing the Block display of the Portfolios view and adding a Header. Choose Text Area and add the text there. You can use HTML. Be sure to only apply this to the block display and not all displays. The color of this header text should be #382a3b.
• Let us now add the "View all projects" button. Edit the Portfolio view block display again and under "PAGER", select "More Link" and edit the text to say "View all projects". Then click on "Link Display" and select "Page" then Apply this to the block display only. Save the view and visit your homepage to verify that there is now a "View All Projects" link. Style this link according to the design. The background color should be #bf5829.
• Style the rest of this view according to the design and apply SASS as necessary.
• Upon completion of the task, please commit and push all your work to your fork of the proj-me repository. Additionally, export all your configuration by using the drush cex command while inside vagrant and in /var/www/dev-1/proj-me/web. This configuration will also need to be committed and pushed. Remember to create a pull request.
• Leave a comment on this issue when you:
  • Start working on this task
  • Have a question about this task
  • Complete this task (please comment on this task with a link to your pull request).

[msheikh12]

Completed #56

[AliHassan7]

[ByronGary]

finished
#67