Subject: HTML and CSS Please help I messed up the code somewhere Instructions: my code: HTML page: CSS Page:
Posted: Sat May 14, 2022 7:17 pm
Subject: HTML and CSS
Please help I messed up the code somewhere
Instructions:
my code:
HTML page:
CSS Page:
Create a style rule for figcaption elements within the hovered figure element, that sets the font size to 1.2em and applies the change in font size over a 2-second transition.
Create a style rule for the #figi through #fig6 elements which are hovered, that rotates the elements to o degrees using the transform property, and applies a 2- second transition to all properties of those figures.
<meta charset="utf-8"> <title> Coding Challenge 8-1</title> klink href="code8-2_styles.css" rel="stylesheet": <link href="code8-2_trans.css" rel="stylesheet"> </head> <body> <h1>Artist Sketchpad</h1> <div id="wall"> <figure id="figl"> <img src="image01.png" alt="" /> <figcaption><em> Heads of the Apostles</em> - Raphael</figcaption> </figure> <figure id="fig2"> <img src="image02.png" alt="" /> <figcaption><em>Battle Scene</em> - Leonardo da Vinci</figcaption> </figure> <figure id="fig3"> <img src="image03.png" alt="" /> <figcaption><em>Head of a Maid</em> Pontormo</figcaption> </figure> <figure id="fig4"> <img src="image04.png" alt="" /> <figcaption><em>Prophet</em> - Giorgio Vasari</figcaption> </figure> <figure id="fig5"> <img src="image05.png" alt="" /> <figcaption><em> Head of a Maid</em> - Peter Paul Rubens</figcaption> </figure> <figure id="fig6"> <img src="image06.png" alt="" /> <figcaption><em>Woman's Portrait</em> Andre del Sarto</figcaption> </figure> </div> </body>
Filename: code8-2_trans.css */ figure { display: block; width: 150px; position: absolute; z-index: 1; cursor: pointer; } figure img { display: block; width: 100%; filter: drop-shadow( 3px 3px 10px Iblack) grayscale(1); width: 150px; } Ly figure figcaption { font-size: Opx; text-align: center; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sa "sans-serif"; background-color: Orgba(255, 255, 255, 0.7); } #figl { top: 0px; left: Opx; transform: rotate(-30deg) }
#figi { top: 0px; left: 0px; transform: rotate(-30deg) } #fig2 { top: 0px; left: 180px; transform: rotate(30deg) } Ly #fig3 { top: 0px; left: 350px; transform: rotate(-40deg) } #fig4 { top: 200px; left: 0px; transform: rotate(20deg) } #fig5 { top: 220px; left: 200px; transform: rotate(-30deg) } #fig6 { top: 210px; left: 400px; transform: rotate(30deg) } figure:hover{ width: 400px; z-index: 2; transition: width 2-seconds;
#fig6 { top: 210px; left: 400px; transform: rotate(30deg) } } figure:hover{ width: 400px; z-index: 2; transition: width 2-seconds; } pl figure:hover img{ width: 100%; filter: drop-shadow(10px 10px 20px black) grayscale(0); - transition: filter 2-seconds; } figure:hover fig-caption{ font-size: 1.2em; transition: font-size 2-seconds; } #figl:hover, #fig2:hover, #fig3:hover, #fig4:hover, #fig5:hover, #figh:hover{ transform: rotate (Odeg); transition: all 2-seconds; }
Please help I messed up the code somewhere
Instructions:
- Subject Html And Css Please Help I Messed Up The Code Somewhere Instructions My Code Html Page Css Page 1 (11.18 KiB) Viewed 39 times
HTML page:
- Subject Html And Css Please Help I Messed Up The Code Somewhere Instructions My Code Html Page Css Page 2 (70.75 KiB) Viewed 39 times
- Subject Html And Css Please Help I Messed Up The Code Somewhere Instructions My Code Html Page Css Page 3 (37.15 KiB) Viewed 39 times
Create a style rule for the #figi through #fig6 elements which are hovered, that rotates the elements to o degrees using the transform property, and applies a 2- second transition to all properties of those figures.
<meta charset="utf-8"> <title> Coding Challenge 8-1</title> klink href="code8-2_styles.css" rel="stylesheet": <link href="code8-2_trans.css" rel="stylesheet"> </head> <body> <h1>Artist Sketchpad</h1> <div id="wall"> <figure id="figl"> <img src="image01.png" alt="" /> <figcaption><em> Heads of the Apostles</em> - Raphael</figcaption> </figure> <figure id="fig2"> <img src="image02.png" alt="" /> <figcaption><em>Battle Scene</em> - Leonardo da Vinci</figcaption> </figure> <figure id="fig3"> <img src="image03.png" alt="" /> <figcaption><em>Head of a Maid</em> Pontormo</figcaption> </figure> <figure id="fig4"> <img src="image04.png" alt="" /> <figcaption><em>Prophet</em> - Giorgio Vasari</figcaption> </figure> <figure id="fig5"> <img src="image05.png" alt="" /> <figcaption><em> Head of a Maid</em> - Peter Paul Rubens</figcaption> </figure> <figure id="fig6"> <img src="image06.png" alt="" /> <figcaption><em>Woman's Portrait</em> Andre del Sarto</figcaption> </figure> </div> </body>
Filename: code8-2_trans.css */ figure { display: block; width: 150px; position: absolute; z-index: 1; cursor: pointer; } figure img { display: block; width: 100%; filter: drop-shadow( 3px 3px 10px Iblack) grayscale(1); width: 150px; } Ly figure figcaption { font-size: Opx; text-align: center; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sa "sans-serif"; background-color: Orgba(255, 255, 255, 0.7); } #figl { top: 0px; left: Opx; transform: rotate(-30deg) }
#figi { top: 0px; left: 0px; transform: rotate(-30deg) } #fig2 { top: 0px; left: 180px; transform: rotate(30deg) } Ly #fig3 { top: 0px; left: 350px; transform: rotate(-40deg) } #fig4 { top: 200px; left: 0px; transform: rotate(20deg) } #fig5 { top: 220px; left: 200px; transform: rotate(-30deg) } #fig6 { top: 210px; left: 400px; transform: rotate(30deg) } figure:hover{ width: 400px; z-index: 2; transition: width 2-seconds;
#fig6 { top: 210px; left: 400px; transform: rotate(30deg) } } figure:hover{ width: 400px; z-index: 2; transition: width 2-seconds; } pl figure:hover img{ width: 100%; filter: drop-shadow(10px 10px 20px black) grayscale(0); - transition: filter 2-seconds; } figure:hover fig-caption{ font-size: 1.2em; transition: font-size 2-seconds; } #figl:hover, #fig2:hover, #fig3:hover, #fig4:hover, #fig5:hover, #figh:hover{ transform: rotate (Odeg); transition: all 2-seconds; }