Task 10 – Animations

by

Portfolio

  1. Add animation(s) & specify where they are
  2. Complete  About Me page, Portfolio/Works page(s) & Contact page.
  3. Header/Footer customized & done
  4. Create submenus for at least 3 genres, with associated posts
  5. Install All-In-One WP Migration Plugin & create backup

HTML/CSS Practice

W3S

  2. Quiz 10

CodePen

Add the following code to your CCS stylesheet in Codepen– Note what the CSS changes in your website.


.section {
/* 35. Give the section content some breathing room. */
padding: 1.5em;
/* 36. Space out the children horizontally in proportion to their flex properties. */
display: flex;
justify-content: space-around;
gap: 1em;
}
.card {
/* 37. Color the cards to stand out from each section. */
background-color: dimgray;
color: palegoldenrod;
/* 38. Give the card content some breathing room. */
padding: 1em;
/* 39. Space out card children vertically. */ 
display: flex;
flex-direction: column;
gap: 1em;
}
/* 40. Customize vertical spacing and borders for cards in different sections. */
#reserve-section .card {
justify-content: space-between;
border: dimgray solid 1px;
border-radius: 1em; 
}
#footer .card {
justify-content: flex-start; 
border-left: palegoldenrod solid 1px;
}

ALSO add the following code: notice that the crossed out text IS ALREADY in your document, and is only added here to show WHERE you need to add these last 41 & 42 lines of code.  Cheek your result to make sure you’ve done this properly.


/* When finished with the HTML, continue with step 1 etc. in the CSS. */
/* Global properties. */
html {
/* 42. Scroll after clicking a link, leaving room for the menu at top. */
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
/* 13. Set the main font. */
font-family: Geometria, Tahoma, sans-serif;
font-size: 1.2em;
/* 14. Set the main colors. */
background-color: papayawhip ;
color: dimgray;
/* 15. Eliminate gap around the viewport. */
padding: 0;
margin: 0;
}
h1 {
/* 41. Adjust the page title to match the layout. */
padding-top: 1.4em;
margin-left: .7em;
margin-bottom: 0;
}
h2 {
/* 16. Set the heading size and spacing. */
font-size: 2em;
margin: 0;
padding-left: .5em;
}

Post

  1. Subject: Task 10-yourname
  2. Category: Task 10
  3. Codepen URL
  4. Quick description of your changes/updates, where to find your animations, and screenshot of your backup, added as an image within your post.