Lesson 12 Final Exam Project

This is an image with a caption and citation.

<figure class="filter-image" tabindex="0">
    <picture>
        <source srcset="images/RedSquare_Tuthill.jpg" type="image/jpg">
        <img src="RedSquare_Tuthill-250.jpg" alt="NASA astronomy
         picture of the day" tabindex="0">
    </picture>
    <figcaption>The Red Square Nebular - MWC992</figcaption>
    <div class="image-source"><a href="https://apod.nasa.gov/apod/ap210926.html">
     Source: NASA APOD</a></div>
</figure>

.media-img {
    background-color: var(--main-med-light-color);
    border: solid thin var(--main-med-dark-color);
    box-shadow: 5px 5px 10px var(--main-dark-color);
    border-radius: .5rem;
    width: 25rem;
    margin: auto;
    padding: 1rem;
}
.filter-image {
    width: 23rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.filter-image picture {
    grid-area: 1 / 1;
    overflow: hidden;
}
.filter-image figcaption {
    grid-area: 1 / 1;  /* With the figure caption and picture element placed in the same grid area, the caption will overlay the image. */
    background-color: hsla(0 0% 0% / .5);
    color: var(--main-light-color);
    padding: .5rem;
    height: max-content;  /* to ensure the caption will only take enough space to show the text an not the whole grid area */
    text-align: center;
    transform: rotateX(-90deg);
    transition-duration: 200ms;
    transition-property: all;
    transform-origin: top;
}
figure.filter-image:hover figcaption, figure.filter-image:focus figcaption {
    transform: rotateX(0deg);
}
.filter-image img {
    width: 100%;
    filter: blur(2px);  /* blur has to come first to match example */
    filter: saturate(30%);  /* saturate doesn't seem to work if blur isn't first */
}
.filter-image img:hover, .filter-image img:focus {
    filter: saturate(100%);
    transform: scale(1.15);
}
.filter-image {
    font-size: .85em;
    margin-top: .5rem;
}

Example

Source: NASA APOD

This is a code block in a figure html tag with a figcaption tag.

<figure class="code-block">
    <figcaption>HTML Code</figcaption>
    <pre><code><!-- Add example code here --></code></pre>
</figure>

figure.code-block {
    background-color: var(--main-med-light-color);
    border: solid thin var(--main-med-dark-color);
    border-radius: .5rem;
    width: 90%;
    margin: auto;
    padding: 1rem;
    box-shadow: 5px 5px 10px var(--main-dark-color);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.code-block pre {
    font-family: var(--code-font);
    background-color: var(--main-light-color);
    color: var(--main-med-light-color);
    padding: .5rem;
    overflow: auto;
    border-radius: .5rem;
}
.code-block figcaption {
    font-weight: bold;
    padding-bottom: .5rem;
}
.html-tag {
    /* optional */
    color: var(--main-med-dark-color);
}

<figure class="code-block">
    <figcaption>HTML Code</figcaption>
    <pre><code><!-- Add example code here --></code></pre>
</figure>

This is a pictures widget that loads different images based upon media query.

<figure class="image-caption" tabindex="0">
    <picture>
        <source srcset="images/NGC7822-673.jpg" type="image/jpg"
         media="(min-width: 900px)">
        <source srcset="images/NGC7822-320.jpg" type="image/jpg"
         media="(min-width: 400px)">
        <img src="images/NGC7822-124.jpg" alt="NASA astronomy picture of the day">
    </picture>
    <figcaption>The Cosmic Question Mark - NGC7822</figcaption>
    <div class="image-source"><a href="https://apod.nasa.gov/apod/ap211013.html">
     Source: NASA APOD</a></div>
</figure>

.media-picture {
    background-color: var(--main-med-light-color);
    border: solid thin var(--main-med-dark-color);
    border-radius: .5rem;
    width: 50%;
    margin: auto;
    padding: 1rem;
    box-shadow: 5px 5px 10px var(--main-dark-color);
}
figure.image-caption {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}
.image-caption picture {
    grid-area: 1 / 1;
}
.image-caption figcaption {
    grid-area: 1 / 1;  /* With the figure caption and picture element placed in the same grid area, the caption will overlay the image. */
    background-color: hsla(0 0% 0% / .5);
    color: var(--main-light-color);
    padding: .5rem;
    height: max-content;  /* to ensure the caption will only take enough space to show the text an not the whole grid area */
    text-align: center;
    transform: rotateX(-90deg);
    transition-duration: 200ms;
    transition-property: all;
    transform-origin: top;
}
.image-caption:hover figcaption, .image-caption:focus-within figcaption {
    visibility: visible;
    transform: rotateX(0deg);
}
.image-caption img {
    width: 100%;
}
.image-caption, .image-source {
    font-size: .85em;
    margin-top: .25rem;

}

Example

Source: NASA APOD

This is an embedded video player. The directions for this activity are found on the MDN Video and Audio Content Tutorial website.

<section class="player">
    <video controls
    width="400"
    preload="auto"
    poster="images/pexels-david-bartus-1510544.jpg">
    <source src="audio-video/rabbit320.mp4" type="video/mp4">
    <source src="audio-video/rabbit320.webm" type="video/webm">
    <p>
        Your browser doesn't support this video. Here is a
        <a href="audio-video/rabbit320.mp4">link to the video</a> instead.
    </p>
    </video>
</section>
<a href="transcript.html" class="transcript" target="_blank">Text transcript</a>

.transcript {
    margin-top: 1rem;
    padding: 1rem;
    text-transform: capitalize;
    color: var(--main-dark-color);
}
.transcript:hover, .transcript:focus {
    background-color: var(--main-med-light-color);
    color: var(--main-med-dark-color);
}

This is an embedded audio player. The directions for this activity are found on the MDN Video and Audio Content Tutorial website.

<audio controls>
    <source src="audio-video/viper.mp3" type="audio/mp3">
    <source src="audio-video/viper.ogg" type="audio/ogg">
    <p>
        Your browser doesn't support this audio file. Here is a
        <a href="audio-video/viper.mp3">link to the audio</a> instead.
    </p>
</audio>
<a href="transcript.html" class="transcript" target="_blank">Text transcript</a>

.transcript {
    margin-top: 1rem;
    padding: 1rem;
    text-transform: capitalize;
    color: var(--main-dark-color);
}
.transcript:hover, .transcript:focus {
    background-color: var(--main-med-light-color);
    color: var(--main-med-dark-color);
}

The <iframe> tag specifies an inline frame and is used to embed another document within the current HTML document. The directions for this activity are found on the MDN Other Embedding Technologies website.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6304. 
    450672183549!2d-122.41927150313369!3d37.80819061443039!2m3!1f0!2f0!
    3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580fa79aee3b9%3A0xd0ce5b
    8bf914906a!2sFisherman&#39;s%20Wharf%2C%20San%20Francisco%2C%20CA!
    5e0!3m2!1sen!2sus!4v1687143022449!5m2!1sen!2sus" width="600"
    height="450" style="border:0;" allowfullscreen="" sandbox="allow-scripts"
    loading="lazy" referrerpolicy="no-referrer-when-downgrade" >
</iframe>

<div>Here's a link for browsers that don't support iframes:
    <a href="https://goo.gl/maps/piEDr4uwu2ja4Q3J8"
    target="_blank">Fisherman's Wharf</a>, CA
</div>

iframe {
    margin-left: .5em;
}