Question: Please type it 1. In your HTML editor, a. Update the HTML files to modify the link to the external style sheet to reference portfoliostyles07
Please type it
1. In your HTML editor,
a. Update the HTML files to modify the link to the external style sheet to reference portfoliostyles07 css.
b. Wrap your picture in a figure element.
c. Integrate an article element on the portfolio page.
d. Integrate a section element on the education page.
2. Update the CSS file to:
a. Style the figure element for mobile, tablet, and desktop viewports.
b. Style the article element for mobile, tablet, and desktop viewports.
c. Style the section element for mobile, tablet, and desktop viewports.
d. Apply a text-shadow property to your name.
portfoliostyles07 css file:
Media Queries
Tablet
Desktop
/* NAME - N
DATE - 02/26/2021 */
body {
font-family: Arial, Helvetica, sans-serif;
background: gray;
color: white;
text-align: center;
padding-top: 100px;
}
/* This will display the content of Mobile class only.
The width of the Tablet is around 768 pixels. */
/* Tablet */
@media(min-width: 501px) and (max-width: 769px) {
/* The desktop class will be hidden once the screen width is between 501 pixel to 769 pixel and background color will be Blue */
body {
background: blue;
}
.desktop{
display: none;
}
}
/* This will display the content of Desktop class only.*/
/* Desktop */
@media(min-width: 769px) {
/* The mobile class will be hidden once the screen width is more than 769 pixels and background color will be Green */
body {
background: green;
}
.mobile {
display: none;
}
}
/* If the screen size is of smartphone i.e. below 500 pixels none of the class will be visible */
@media(max-width: 500px){
body {
background:grey;
}
.mobile, .desktop{
display: none;
}
}
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help