Criteria B

Strand 1: Develop a design specification which clearly states the success criteria

Design Design Description of Design Specification

Aspects Specification
Function Type of Product The type of product I will create is a Website. The website will aim to
be informative, persuasive, interactive and engaging.
Details – Number The number of webpages that I will include in my website is 4-6
of pages webpages. This is so that the amount of information passed on to the
viewer is maximized while still preventing the website from becoming
too length and boring.
Menu bar My website will contain a menu bar that extends the whole width of
the page and contains the logo as well as links to important pages in
the website. This helps in easy navigation. It may also contain some
animation feature to be more interactive.
Aesthetics Color scheme The color scheme that I will use is a combination of any of the following
colors:
Light Blue, Pastel Red, White, Beige, Brown, Bright Orange, Sea Green,
Yellow, Dark Grey, White, Whitesmoke
Font styles The fonts that I might include in my website are as follows: Sans Serif,
Calibri, Arial, Cursive, Fantasy, Nunito, Verdana, Kelly Slab, Optima,
Monospace, Didot, Copperplate.
Font sizes The font sizes that I might incorporate in my website are from 40 px to
10 px. These include the titles, headings, subheadings and paragraphs
and footers.
Backgrounds The backgrounds that I will try to incorporate into my website are as
follows: Plain backgrounds, Gradient Backgrounds, Image Backgrounds
Images and Around 0 – 7 images will be used per page. Slideshows may also be
Photos used.
Audiovisual Around 0 – 3 videos will be used per webpage.
content
Tables and I will use approximately 0-2 tables in my website.
Tabular Data
Lists used I will use around 0-3 lists in my website.

Requirements Hardware MacBook Air (13-inch, Early 2015)

Processor 1,6 GHz Intel Core i5
Memory 8 GB 1600 MHz DDR3
Graphics Intel HD Graphics 6000 1536 MB
Serial Number C02SG16EH3QD
Software • Sublime Text 4 (Build 4113)
• Safari Version 14.1.2 (14611.3.10.1.5)
Strand 2: develops a range of feasible design ideas, using an appropriate medium(s) and
detailed annotation, which can be correctly interpreted by others

Design Idea 1:

Number Explanation and description

1 Vertical Menu bar: Ctrl + Posture, Home, Overview, Solutions, About
Color: Beige
Width: 20%
Text color, font, size: White, Didot, 20 pixels
2 Heading
Text color, font, size: Blue, Fantasy, 37.5 pixels
Alignment: Center
3 Slideshow
Contains 6 images
Height: 422 pixels
Width: 799 pixels
Alignment: center
4 Paragraph
Alignment: 10 pixels from the left
Text font, color, size: verdana, white, 25 pixels
5 Video
Width: 950pixels
Height: 534 pixels
Alignment: Center
6 Image
Width: 500 pixels
Border style, width, radius, color: Double, 10 pixels, 10 pixels, blue
7 Footer
Text font, color, size: monospace, black, 13 pixels
Alignment: Center
8 Footer
Text font, color, size: monospace, brown, 13 pixels
 Alignment: Center
9 Background-color: white
10 Table
Border width, style, color: 1 pixel, solid, blue
Text size, color, font: 25pixels, dark grey, Copperplate & Didot

Design Idea 2:

Number Explanation and description

1 Horizontal Menu bar: Ctrl + Posture, Home, Overview, Solutions, About
Color: Brown
Width: 20%
Text color, font, size: White, Didot, 20 pixels
2 Heading
Text color, font, size: Blue, Fantasy, 37.5 pixels
Alignment: Center
3 Slideshow
Contains 5 images
Height: 422 pixels
Width: 799 pixels
Alignment: center
4 Paragraph
Alignment: 10 pixels from the left
Text font, color, size: Arial, Black, 25 pixels
5 Video
Width: 950pixels
Height: 534 pixels
Alignment: Center
6 Image
Width: 500 pixels
Border style, width, radius, color: Double, 10 pixels, 10 pixels, green
7 Footer
 Text font, color, size: monospace, black, 13 pixels
Alignment: Center
8 Table
Border width, style, color: 1 pixel, solid, blue
Text size, color, font: 25pixels, dark grey, Calibri & Optima
9 Background-color: beige

Design Idea 3:

Number Explanation and description

1 Animated Horizontal Menu bar: Ctrl + Posture, Home, Overview, Solutions,
Common Misconceptions, About
Color: Green
Width: 80%
Text color, font, size: Black, Kelly Slab, 20 pixels
2 Heading
Text color, font, size: Red, Kelly Slab, 37.5 pixels
Alignment: Center
3 Image
Width: 1100 pixels
Alignment: center
Border style, color, width, radius: double, yellow, 10 pixels, 50 pixels
4 Subheading
Alignment: Center
Text font, color, size: Kelly Slab, blue, 37.5pixels,
5 Subheading
Alignment: Center
Text font, color, size: Kelly Slab, yellow, 37.5 pixels
6 Paragraph
Alignment: 10 pixels from the left
Text font, color, size: Nunito, white, 25 pixels
7 Slideshow
Contains 4 images
Height: 422 pixels
Width: 799 pixels
Alignment: center
8 Footer
Text font, color, size: monospace, white, 13 pixels
Alignment: Center
9 Video
Width: 950pixels
Height: 534 pixels
Alignment: Center
10 Unordered list
Alignment: 10 pixels from the left
Text font, color, size: Nunito, white, 25 pixels
11 Subheading
Text font, size, color: Kelly Slab, 37.5 pixels, blue
12 Subheading
Text font, size, color: Kelly Slab, 25 pixels, yelllow
13 Background color : Black
14 Table
Border width, style, color: 1 pixel, solid, green
Text size, color, font: 25pixels, white & whitesmoke, Kelly Slab & Nunito
15 Unordered list
Alignment: 10 pixels from the left
Text font, color, size: Nunito, white, 25 pixels
16 Image
Width: 500 pixels
Border style, width, radius, color: Double, 10 pixels, 10 pixels, blue
17 Image
Width: 500 pixels
Border style, width, radius, color: Double, 10 pixels, 10 pixels, red
18 Image
Width: 500 pixels
Border style, width, radius, color: Double, 10 pixels, 10 pixels, green
19 Ordered list
Text font: Kelly Slab
Text size: 25 pixels
Text color: yellow
20 Parallax background
Height: 500 pixels
Width: 100%
Image: high resolution picture about yoga with logo
Strand 3: Presents the chosen design and justifies fully and critically its selection with
detailed reference to the design specification.

My Success Criteria for my product includes:

• Appearance
• Organization
• Attractiveness
• Ease of Navigation
• No. of Webpages
• Purpose Achieved
• Color Scheme
• Font style
• Font size
• Backgrounds
• Audio-visuals
• Images

These 13 criterions are very important as they will help assess my product effectively and
help analyze the strengths and weaknesses of my product. Most importantly, they will help
to judge how successful my product is in informing and persuading my target audience
about good posture.
To select the best design idea out of the 3 that I have made, I will carry out a survey with my
target audience. I will use the data obtained from this to justify my chosen design. For that I will
first mark 13 main criteria that need to be met out of 10. The highest mark being 10 and the
lowest being 1. The total marks will be 130 and the highest marked idea will be my chosen
design. The target audience I am interviewing are the students of Grade 10A in GMIS. This will
help me understand exactly what my target audience expects to see in my product as well as
those features that they don’t wish to see. An average score per criteria will be taken. After
critical examination by the students of this class, the data obtained will help me select the most
successful design. Therefore, the inputs of my classmates will be extremely valuable in this
decision and selection.

Data gathered from the interview conducted:

Criteria (Scale 1- Design Idea 1 Design Idea 2 Design Idea 3

10)
Appearance 5 6 7
Organization 2 5 8
Attractiveness 4 4 6
Ease of Navigation 4 7 9
No. of Webpages 2 4 8
 Purpose Achieved 5 7 9
Colour Scheme 1 4 7
Font style 2 5 8
Font size 2 8 7
Backgrounds 2 4 7
Audio-visuals 7 8 8
Images 3 7 8
Tables 5 8 7
Total Score 44 77 99

On the basis of data collected by the survey conducted, these were the markings given by
the target audience. Overall, Design 3 has a much higher score than the other Design ideas.
This means that based on my success criteria, Design 3 is overall more successful than the
rest of the designs. Therefore, in order to maximize the success and the impact of my
product on my target audience, I have decided to design my website as per the design idea
in Design Idea 3.
 Strand 4: develops accurate and detailed planning drawings/diagrams and outlines
requirements for the creation of the chosen solution
Criteria C
Strand 1: constructs a detailed and logical plan, which describes the efficient use of time and
resources, sufficient for peers to be able to follow to create the solution

Step Task Details Duration Resources

No
1 Create a 1. Open Finder (i.e. Turn on the computer) Day 1 Finder
project 2. Go to Desktop 5
folder with 3. Right-click and select New Folder minutes
all the 4. Name the Folder “Ctrl + Posture”
images 5. Using the cursor, drag and drop all images needed for the website
into this file.
2 Create the 1. Open Sublime Text Day 1 Finder,
HTML and 2. Click File in the menu bar 20 Sublime
CSS files 3. Click New File minutes Text,
4. Save the documents in the project folder with file extension “.html” Safari
5. Click File in the menu bar
6. Click New File
7. Save the document in the project folder with file extension “.css”
8. Declare the doctype of the HTML documents.
9. Then, below it, write the html tags.
10. Inside the html tags, nest the head and body tags.
3 Link HTML 1. Inside the head tags of the documents, write a link tag. Day 1 Sublime
documents 2. Inside the link tag write the link relation attribute, “stylesheet” 10 Text,
to the CSS 3. Next to the link relation attribute, write the hypertext reference minutes Safari
document attribute to the file, “styles.css”
and add the 4. Inside the head tags of the documents, write a title tag.
title 5. Inside the title write the title of the documents.
5 Add the 1. Use “body” as the selector to specify the body element in the html Day 2 Sublime
background documents. 10 Text,
of the 2. In the curly brackets, write the background-color property. minutes Safari
webpage 3. Inside the property write the color of the background.
6 Add the 1. Visit the Google Fonts site: https://fonts.google.com Day 2 Sublime
google fonts 2. Search for the desired font 10 Text,
to the HTML 3. Click the font minutes Safari,
documents 4. Choose the desired font style Google
5. Once chose, click, “select this style” and copy the code displayed. fonts
6. Paste it in the head tags in the html documents
7. In order to use the fonts, use the CSS rule specified below the code
7 At the top of 1. Create header tags and inside it, create an empty division with the Day 2 Sublime
each HTML class name “container” 45 Text,
page, add 2. In the CSS document, use the class name as the selector to specify minutes Safari
and style a the element and in the curly brackets, write the width and margin
menu bar property. Use the element name of “header” to set the background
property. Use the “header::after selector” and set the content,
display and clear property.
 3. Inside the “container” class, use an img tag to insert the logo and give
the img tag a class of “logo”
4. In the CSS document, use the class “logo” name as the selector to
specify the element and in the curly brackets, set the float, width,
height, margin-left and padding property.
5. Write nav tags and inside it, use the ul tags for an unordered list.
6. In the ul tags, write li tags. Inside each li tag, insert an a tag and
before the ending of the first a tag, use the href attribute to link the
bullet to the page.
7. Use the nav selector and set the float and font-weight property.
8. Use the nav ul selector and set the margin, padding and list-style
property.
9. Use the nav and li selector and set the margin-left, padding, position
and display property.
10. Use the nav and li selector and set the margin-left, padding, position
and display property.
11. Use the nav a selector and set the color, text-decoration, font-family
and font-size property.
12. Use the a:hover selector and set the color property.
13. Use the nav a:: before selector and set the content, display, width,
height, background-color, top and transition property.
14. Use the nav a:hover::before selector and set the width property.
8 Add and 1. In the body tags of the html document, write the h1, h2, footer or p Day 3 Sublime
style the tags for headings, subheadings, footer and paragraphs respectively. 35 Text,
headings, 2. Write the contents of the element in the suitable tag minutes Safari
subheadings, 3. Give each of the elements a class name.
footer and 4. In the CSS document, use the class name as the selector and set the
paragraphs margin-left, text-align, font-family, font-size, top, position, and color
property. This should be done according to the chosen design idea.
9 Insert videos 1. Open Safari and visit the desired vide on YouTube Day 3 Sublime
via the 2. Right-click the video and select “Copy embed code” 5 Text,
embed tag 3. Paste the embed code in the desired location in the html documents minutes Safari,
4. After the allowscreen attribute, give the html element a class name. YouTube
5. In the CSS document, use the class name as the selector and set the
margin-left, margin-right and display property.
10 Add and 1. In the body tags of the html document, write the img tag. Day 4 Sublime
style any 2. Give the image a src attribute with the name of the image. 40 Text,
images 3. After the src attribute, give the html element a class name. minutes Safari
4. In the CSS document, use the class name as the selector and set the
width, border-style, border-color, border-width, border-radius,
margin-left, margin-right and display property.
11 Add and 1. In the body tags of the html document, write the ol (ordered list)or ul Day 4 Sublime
style any (unordered list)tags and give them a class name. 25 Text,
lists 2. For each bullet in the list, place the content within an li tag. minutes Safari
3. In the CSS document, use the class name as the selector and set the
width, border-style, border-color, border-width, border-radius,
margin-left, margin-right and display property.
12 Add and 1. Use the table tags to create an empty table and give it a class name Day 5 Sublime
style any 2. Inside the table tag, create 10 empty tr tags. 20 Text,
tables 3. In the first tr tag, use 2 th tags and for the rest of the tr tags, use 2 td minutes Safari
tags for the heading and content respectively.
4. In the CSS document, use the class name as the selector to specify
the element and set the font-family, font-size and text-align.
5. Use the table, th, td element selector and using the border property,
set the border-width, style and color.
6. Use the th, td selector and set the padding property
7. Use the th element selector and set the color and font-size property
8. Use the td element selector and set the color and font-family.
13 Add a 1. In the HTML document, create an empty division and give it a class Day 5 Sublime
Parallax name. 10 Text,
background 2. Inside this division, use the img tag to insert the logo. minutes Safari,
3. In the CSS document, use the class name as the selector Finder
4. Used the background-image attribute to insert the image that will be
used as the background.
5. Use the min-height property to specify the height of the division.
6. Set the background-attachment property to fixed, the background-
position property to center, the background-repeat property to no-
repeat and the background-size property to cover.
14 Add and 1. Create a division and give it a class name of “slide-container” Day 5 Sublime
style a 2. In the CSS file, set the width, height, margin-left, margin-right, 35 Text,
Slideshow overflow and text-align properties. minutes Safari,
3. Create another division and give it a class name of “image-container”
and set the width, height, position and transition property. Use
vendor-specific properties for good compatibility.
4. Insert 4 images and give them all the same class name of “slide-
image.” Set the float, margin and padding properties.
5. Create another division and give it a class name of “button-
container” and set the position. Insert 4 links and give them the same
class “slider-button”
6. Inside the slide-container division, write 4 span tags and give each of
them an id. Set the display, height, width, border, background color,
and padding properties.
7. Use a target selector and sibling combinator to specify the ids and set
the left properties.
The Gantt Chart below will help me track my progress as I make my product and will therefore
determine whether I have used time and resources efficiently or not. The green bars stand for
completed within the time and the red bars stand for not completed within the time.

Task Day 1 Day 2 Day 3 Day 4 Day 5

Task 1
Task 2
Task 3
Task 4
Task 5
Task 6
Task 7
Task 8
Task 9
Task 10
Task 11
Task 12
Task 13
Task 14
Strand 2: demonstrates excellent technical skills when making the solution.
Strand 3: follows the plan to create the solution, which functions as intended and is
presented appropriately.

Step 7: At the top of the html document, add and style a menu bar

The purpose of this step is to create a menu bar that will be used in the website. In my website,
I used it in every page. A menu bar is extremely important as it helps with easy navigation. In my
html document, I used the header tags in order to represent the navigational aids. Inside it I
created a division and gave it a class called “container.” I then inserted the image logo and gave
it a class called “logo.” I then used the nav tags because its purpose is to provide navigation
links. Inside the nav tags, I used the ul tags to create an unordered list of the headings in my
navigation bar. I then used the li tags to write the contents of each bullet in the list. Inside the li
tags, I used the a tag and the href attribute to link it to the other pages in my website.

In the CSS styles document, I used the class name of “container” to specify the division which I
want to style. I set the width property to 80% and the margin to 0 pixels and auto so that the
menu bar fits the website perfectly. I then used the element name of header and set the
background property to the color of green. I used the header::after selector to display the
following properties after the contents of the header element. I set the content property to ‘’ in
order to replace the element with the value. I set the display property as table so that it displays
an element as an inline element. I also set the clear property to both so that floating element
are not allowed to float on both sides. I then used the class name of logo to specify the image I
wish to style. I set the float property to left so that the image is located in the left side of the
menu bar. I set the width and height property to 268.875 pixels and 50.4 pixels respectively in
order to control the size of the image. I set the margin-left property to -30 pixels so that the
image can move towards the left a little more. I also set the padding property to 10 pixels and 0
so that there is a little space from the logo. I used the element name of nav to specify the html
element I wish to style. I set the float property to the right so that the links are located towards
the right of the menu bar. I set the font-weight property to 400 so that the font is bolder than
usual. I used the element names of nav and ul to specify the html elements I wish to style. I set
the margin property to 0 and the padding property to 0 so that there is no spacing between the
elements individually and from the end of the menu bar. I also set the list-style to none in order
to remove the bullet points in the list. I used the element names of nav and li to specify the html
elements I wish to style. I set the display to inline-block. This is because it allows the other items
in the list to sit to on the left and right and it respects the top & bottom margins, padding,
height and width. I set the margin-left to 70 pixels and the padding top to 23 pixels so that the
links are positioned properly. I also set the position property to relative so that the image is
positioned relative to its normal position. I used the element names of nav and a to specify the
html elements I wish to style. I set the color to black so that the color of the text is black. I set
the text-decoration to none so that the text is simple and easy to read. I also set the font-family
property to ‘Kelly Slab’ and cursive. The reason why there are two fonts is that, since the first
main font (Kelly Slab) is a google font, if the document fails to use the font, then it will
automatically use the cursive font. I also set the font-size property to 20 pixels. I used the
selector a:hover so that when the mouse of cursor hovers above the link, the color of the text
will still be black and not a different color. I used the nav a::before selector to insert the
following properties before the link. I set the content property to ‘’ in order to replace the
element with the value. I set the display property as blocks so that it displays an element as a
block. I set the width and height property to 100% and 5 pixels respectively to control the size of
the animated rectangle that shows up. I set the background color to black and the position to
absolute so that the position of the black, animated rectangle is fixed. I then set the top to 0 and
the width to 0%. This is so that, before the link, the animated rectangle is hidden. I then set the
transition property to all ease-in-out 175 ms. This means that the type of animation is ease-in-
out and it happens at a rate of 175 milliseconds. I used the nav a:hover::before selector to insert
the following properties before the cursor hovers above the link. I set the width to 100% to
create the black animation bars.

Step 10: Add and style any images

In this website, as per my design idea, I decided to use many images. However, since I have used
many images in this website, I will mention the steps taken to add and style the first image in
the home page. In my html document I used the img tags to add my image. I used the src
attribute to specify the path to that image. I use the alt attribute so that if the path to that
image is not specified, then there will be an alternate text. I also gave it a class called “mainpic”.

In the CSS styles document, I used the class name to specify the table that I want to style. Inside
the curly brackets, I then used the width property to specify width and therefore the size of the
image. I set the width of the image to 1110 pixels. I then used the margin-left, margin-right and
display properties to center the image in the middle of the screen. I set the margin-left and
margin right to auto and the display to block which helped me achieve the purpose. Then I had
to style it by using a border. I used the border-style property and set it to double. I used the
border-color property and set it to a shade of the color yellow. I used the border-width property
and set it to 10 pixels. I used the border-radius property and set it to 50 pixels which helped me
round the edges of my image.

Step 12: Add and style any tables

In this website, as per my design idea, I decided to create only one table. Since one main
function of tables is for comparison, I decided to create a table that would compare the physical
characteristics of Good and Poor posture in the Overview page. In my html document I used the
table tags and created an empty table. I also gave it a class called “Posdifftable”. Inside the table
tag, I then created 10 empty tr tags. This creates 10 empty rows for my table. In the first row or
tr tag, I used the th tag. This helps to make the text which I inserted in between the tag, a
heading for the table. For the rest of the rows, I used the td tag which allows me to insert data,
or in this case, text, into the rows of the table. For each row, I used 2 td or th tags in order to
create two columns for the table.

In the CSS styles document, I used the class name to specify the table that I want to style. Inside
the curly brackets, I then used the font-family property to specify the font that will be used for
the whole table. The reason why there are two fonts is that, since the first main font (Kelly Slab)
is a google font, if the document fails to use the font, then it will automatically use the cursive
font. I then used the font-size property to set the default font size of 25px. I then used the text-
align property to set the alignment of the text in the table to be centered. Then I used the table,
th and td element name to specify the style of the table. I then used the border property and set
the border width as 1 pixel, the style as solid and the color as a shade of green. Next I used the
th and td element name to specify the style of the contents of the table. I used the padding
property and set the padding (spacing on all sides) to 15 pixels. Then I used the th element
name alone to specify the style of the heading of the table. I then used the color property and
set the color of the heading to white. I also used the font-size property and set it to 25 pixels.
Then I used the td element name alone to specify the style of the contents of the table
excluding the heading. I then used the color property and set the color of the heading to
whitesmoke. I also used the font-family property and set the font to Nunito.

Step 13: Add a Parallax background

The purpose of this step is to create a parallax background that will be used in the website. In
my website, I used it in the “About” page and inserted my logo in it. A parallax background is a
technique in which the image or the background content is moving at different speeds than the
foreground content (other elements) while scrolling. This helps to create a 3D effect and an
optical illusion. In my html document, I created an empty division and created its class called
“parallax”. Inside this empty division, I used the img tag to insert my logo.

In the CSS styles document, I used the class name to specify the division in which I want to insert
the parallax background. Inside the curly brackets, I then used the background-image attribute
to insert the image that will be used as the background. This style makes the background of the
division, the image I selected. I then used the min-height property to specify the maximum
height of the division. I then set the background-attachment property to fixed. This helps to
create the actual parallax scrolling effect. I then set the background-position property to center,
the background-repeat property to no-repeat and the background-size property to cover. These
properties help to center and scale the image so that it fits perfectly in the division. Therefore,
using this method, I created the Parallax background for my website.

Step 14: Add and style a slideshow

Slideshows are extremely important features as they can show a wide number of images in a
single frame. Due to this, I used 1 slideshow in my website. A division called “slide-container” is
created and used to hold all the images and buttons. In the CSS file, I used the class name to
specify the division. The width and height property is set to 759 pixels and 422 pixels
respectively since all images are the same size. The property margin-right and margin-left are
set to auto so that the image is centered. Since the image container (later explained) is located
inside the slide container, its content is going to be overflowing. Therefore, the property of
overflow is set to hidden in order to hide the images so that only one shows up. The text-align
property is set to center in order to align the slider buttons.

The division “image-container” is used to contain all the images. Images are then inserted inside
the image container division and given a class called “slide-image”. In the CSS file, I used the
class name to specify the division. The width of this division is based on the number of images
present. Since there are 4 images in the slideshow, the width of 759 pixels is multiplied by 4
which gives the width of this division as 3036 pixels. This is because the slideshow scrolls from
left to right. Height is the same as the image height. The position is set to relative so that the
image is positioned relative to its normal position. The transition property is set to left and 2
seconds. This means that in the slideshow, the images will be scrolled leftwards in the starting
position at a speed of 2 seconds between two adjacent slides. The –webkit-transition property,
–moz-transition property and –o-transition property are a vendor-specific property that is
shorthand for the transition’s set of individual components, The –webkit-transition property is
supported by Safari and Google Chrome web browsers, the –moz-transition property is
supported by Firefox web browser and the –o-transition property is supported by Opera web
browser. In the CSS file, I used the “slide-image” class name to specify the images. The property
float is set to left in order to align the images to the left. The margin and padding properties are
set to 0 pixels so that there are no extra, unwanted spaces between the images.

The button container is then created to hold the link buttons and is given the class “button-
container”. Since the button container division is placed below the image container division, the
buttons would show up below the images and not on them. In order to correct this, the position
property must be set to relative and the top property must be used and set to -20 pixels.

Inside the slide-container division and above the image-container division, span tags will be
used. Span tags are generic inline container elements that will be used to move the images to
the left of the screen using the left property in CSS. Each span tag is given an id to point to a
specific style declaration in the CSS stylesheet. In the “button-container” division, there will be 4
links that will be given the same class “slider-button” and target the image spans that were
created which in turn will target the image container where the images are located. In the
slider-button class in css, the display property is set to inline block. This is because it allows the
other buttons to sit to on the left and right and it respects the top & bottom margins, padding,
height and width. The height property is set to 10 pixels and the width property is set to 10
pixels. The border will be set to 10 pixels to make it circular. Next the background color will be
set to a shade of green and the padding property will be set to 2.5 pixels.

Target selector and a tilde called a sibling combinator which is used to target another division
will be used. The following left properties are set in order to slide the images into view. For the
first image, the left property is set to 0 pixels. For the second image, the left property is set to -
759 pixels. For the third image, the left property is set to -1518 pixels. For the fourth image, the
left property is set to -2277 pixels.

Strand 4: fully justifies changes made to the chosen design and plan when making the
solution.

After comparison with my design specification, design idea, and my detailed logical plan, I
found that there were no changes made to the initial plan. The plan was executed step-by-
step in the aforementioned order based on the design idea and specifications.
Sir this is the link to my folder where my website is as I am unable to upload in managebac:
https://drive.google.com/drive/folders/1PRRjbp2isAAIEWqgZhFD1BIR7F3kwGlr?usp=sharing