Open your text editor and then open the stevescreen.html template $($provided for you in the module$)$ and use it to create the services.html file.

In the services.html document, add a section element within the main element. Create a heading$2$ element within the section with the following text: Patio Screen Services

Add an article element within the section element and then add the following elements within the article element:

heading$4$ element: New Screen Patios

Paragraph element: Let our professional staff design your backyard escape. With over $20$ years of experience, we have the tools and skills needed to create the perfect patio for your home.

Add a second article element after the first article element, but within the section element, and then add the following elements within the second article element.

Heading$4$ element: Screen Repairs

Paragraph element: Are bugs enjoying your patio too? We can replace torn screens and repair door fixtures. No job is too small!

Add a third article element after the second article element, but within the section element, and then add the following elements within the third article element:

Heading$4$ element: Screen Cleaning

Paragraph element: Is your patio looking less than pretty? Our environment$-$friendly cleaning products will have your patio looking brand new in no time.

We offer a $100\%$ satisfaction guarantee.

Open your text editor and then open the stevescreen.html template $($provided for you in the module$)$ and use it to create the gallery.html file.

In the gallery.html document, replace the image file name on Line $22,$ screen$1.$jpg$,$ with galleryBanner.jpg$.$

In the gallery.html document, add an article element within the main element. Create an h$3$ element within the section with

the following text: Big or Small, We Do It All

In the gallery.html document, add a figure element within the article element, below the h$3$ element that contain the following image elements and figure caption:

$1$st image element: Screen$2.$jpg with alt text: Gallery Picture $1$

$2$nd image element: Screen$3.$jpg with alt text: Gallery Picture $2$

$3$rd image element: Screen$4.$jpg with alt text: Gallery Picture $3$

Fig caption: Small patios, large patios, pool enclosures

In the screenstyles.css file, add the following style rules to apply to the mobile viewport $($be sure to apply the appropriate syntax$)$:

center align the text for h$3$ elements in the article article element

center align text in the figure element

set the text color for the figcaption element to #$000066$

add a padding of $1$em to the section elements

add a margin and padding of $1$em and a background color of #ACB$7$E$6$ to the article elements

In the screenstyles.css file, remove the img style rule from the tablet and desktop media queries.

Add the desktop media query identifying min$-$width: $950$px include the $\{$

$($In the file there is a comment labeled for where to enter this. The comment you should see is below: $/*$ Styles for desktop viewport $*/$

$/*$ENTER YOUR DESKTOP VIEWPORT MEDIA QUERY RIGHT BELOW THIS LINE$*/)$

Add the following style rules to the desktop media query:

In the article elements in the section element se the width to $22\%,$ float left and a height of $15$em

Review and check the spelling of your code and textual content. Upload your entire directory to FileZilla and submit your URL.

Mobile

Tablet

Desktop