Create and style the "Contact Information" block on the contact form and style the contact form

[AliHassan7]

Your contact form should exist at http://dev-1.academyvm.dev/proj-me/web/form/contact-me

• Note: When styling the contact form, it is best to open up an "Incognito" or "Private" window on your browser as that will allow you to see the contact form the way your site's visitors will see it. Same goes for applying styling in general.
• Before working on this task, ensure that you have successfully downloaded Drupal Console by completing this short task: Install Drupal Console
• To begin working on this task, create a branch based off of the currently checked out branch using the following convention: proj-me-initials-63-contact
• For your convenience, an image of the design has been added to the bottom of this issue.
• This task involves creating a custom block that will be placed inside our custom proj_me_core custom module. Ensure that you have already created the custom module from the following task: Create a custom module using the Drupal Console
• Let us use the Drupal console to create a custom block which will contain HTML for the "Contact information" block! This is the block that you see on the left side of the contact page design.
  • Inside of vagrant and in proj-me, run the following command to create a custom block using Drupal Console: vendor/drupal/console/bin/drupal generate:plugin:block.
  • First question that the Drupal Console will ask you is "Enter the module name". Drupal Console is asking which module you want to put this custom block in. We want to put this custom block in our custom module that we created in the task mentioned earlier, so answer this question by typing the module's machine name: proj_me_core.
  • Enter the plugin class name: ContactInformation
  • Enter the plugin label: Contact Information Block
  • Enter the plugin id: contact_information_block
  • Enter the theme region to render the Plugin Block: (Just hit Enter on your keyboard and it'll go to the next question)
  • Do you want to load services from the container: no
  • Do you want to generate a form structure: no
  • Do you confirm generation: yes
  • You have successfully created a custom block inside of a custom module. How impressive is that!
• To place your block in the footer region, navigate to Structure » Block Layout and place it in the Highlighter region. (Under highlighter region, click on Place block and Search for the "Contact Information" custom block).
• We only want this block to show up on our contact form. the URL of our contact form is /form/contact-me. You can get this URL by navigating to Structure » Webforms and clicking on the "Contact Me" form. On the Block Layout page, click on configure next to the block you created. On the "Pages" tab in the bottom left corner, type this in the "Pages" field: /form/contact-me. When "Show for the listed pages" is checked, this will ensure that this block will only show on the page you listed.
  To see the code of your block, use your file finder to navigate to your custom module located at proj-me/web/modules/custom/proj_me_core/ and use sublime text to open the file located at src/Plugin/Block/ContactInformation.php.
  • To add HTML to your custom block, place your HTML inside the single quotation marks following $build['contact-information']['#markup'] =.
• Style the rest of this page according to the design and apply SASS as necessary. Note: You do not need to worry about the map background.
• 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).

[AliHassan7]

[msheikh12]

Started working on this task

[msheikh12]

Finished #80