The goal of the assignment 6 is to create an enhanced photo album with advanced artistic effects using the various HTML elements and the CSS style rules.
This assignment covers the basic skills of HTML And CSS.
You are required to submit both HTML and CSS files to Blackboard. Any other formatted files (e.g., docx, doc) will not be graded and receive a zero grade.
To prevent any submission errors, please create a zipped file containing all HTML and CSS files.
Create Two HTML Files:
Myalbum_yourname.html and
Mystyles_yourname.css
Creating a HTML Page
2. Go back to the Myalbum_yourname.html file (e.g., Myalbum_SooShin.html) that you saved as at step 1 (NOT the original file). Directly after linking the grids.css file, using the <link> elements, link Mystyles_yourname.css (e.g., Mystyles_SooShin.css).
3. Directly after <div class="row"> and before <h1> My Family </h1> , add the <figure> and </figure> elements.
4. Within the figure element, insert an image (Myfamily.jpg) using the img element with the alternative text “myfamily”.
5. Within the figure element, add the figure caption element with the content, “My Family Portrait”. Both img and figcaption elements should be nested within the figure element
Applying Style Rules in the MyStyles_yourname.css file
6. Go to HTML Styles section in the Mystyles_yourname.css file. Add an additional rule for the html element to insert an image (msubackground.jpg) using the background property with the value of round and content-box.
Go to Page Body Styles section
7. Add additional style rules for the body element that set both left and right borders to 3px solid black.
8. Add additional style rules for the body element that add the box shadows:
a. creating a yourcolor shadow which is 20px to the right, 0px down from the box with blur of 40px.
b. creating a yourcolor shadow which is 20px to the left, 0px down from the box with blur of 40px.
Go to Figure Box Styles section.
9. Create the following style rules for the figure selector that set:
a. margin to 20px auto 0px
b. width to 80%.
c. border-style to solid.
d. border-width to 5px
e. box shadows to the left and right border with an offset of 10 pixels, a blur of 50 pixels, and rgb(144, 170, 144).
10. Create style rules for the img element nested within a figure element as a parent selector that set the display images as block and set the image width to 100%.
11. Create style rules for the figcaption element nested within a figure element as a parent selector that set the background color to gray, font-style to italic and text alignment to center.
Go to Travel Styles section in the Mystyles_yourname.css file.
12. Add style rules for the img element nested within the division element with the class value of travel that set
a. all four corners of each destination image radii to 25px.
b. all four borders to 4px inset rgb(your value, your value, your value)
c. box shadow to rgba(your value, your value, your value, 0.4) 0px 0px 20px 20px
d. a radial color gradient to the background with a white center, transitioning to rgb(151, 151, 151)
13. Add style rules for the paragraph elements nested within the division element with the class value of travel that set:
a. text color to white
b. font size to 1em
c. text shadows that is 10 pixels to the right and 10 pixels down from the text with blur of 10 pixels.
Save all your codes. Compress three files (Myalbum_your name.html and Mystyles_yourname.css) and submit a zipped file to the Blackboard
Import Points Which Needs To Remember To do this
Creating new files with a directed file names
Linking a style file
Adding the figure element
Inserting an image
Adding the figure caption
Adding an image for the HTML element
Adding border style rules for the body element
Adding box shadow style rules for the body element
Adding box shadow style rules for the body element
Creating style rules for the figure element - margin
Creating style rules for the figure element - width
Creating style rules for the figure element – border style
Creating style rules for the figure element – border-width
Creating style rules for the figure element – box shadows
Creating style rules for img element – display & width
Creating style rules for the figure caption – color, font style, text alignment
Adding style rules for the img element within the div element - radii
Adding style rules for the img element within the div element - borders
Adding style rules for the img element within the div element – box shado
If you need solution above HTML problem or need any other HTML assignment related help with an affordable price then send your request at realcode4you@gmail.com and get instant help with an our HTML expert.
Comments