Monday, January 12th

Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Welcome to Week 17
Make sure your Ruth Food Truck is up on your Website for us to look at
Room opens at 9:30 today in case you have some last minute adjustments.

10:10 Monday Mail

10:15 Ruth Food Truck – Let’s see your designs!

During your presentation you will can address the following prompts:

Walk us through your food truck design / What inspired the design of your site?
Discuss your design inspirations and challenges (did you adhere to your wireframe?)
Why should the client choose your design?
If you had more time, what area would you like to improve with your website?

Presentation Order will be random with a wheel spin…

10:50 Morning Break (10 minutes)

11:00 Lightbox – No JS CSS Lightbox –

No JS, just good old html and CSS.

This one is easy and effective. I think you’ll like it. You are going to need some images. Go collect about 5 images for this or use mine – I have them in public folders. You might consider a page for your website from some of your favorite work. This might be an idea for displaying and including a description.

Sample Code CSS

.container {
    width: 50%;
    display: flex;
    margin: auto;
    gap:5px;

}

img {
    max-width: 100%;
    height: auto;
}

/* lightbox markup */

.lightbox span {
    display: block;
    width: 50%;
    height: 100vh;  /* makes span height of viewport */
    /* to center the content on the screen */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;

}

.lightbox> div >p {
    color: white;
    font-size: 1.5em;
}

.lightbox {
    /* default to hidden */
    display: none;
    background: rgba(0, 0, 0, .9);
    width: 100%;
    /* Overlay the screen */
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* space around image */
    padding: 2em;
    text-decoration: none;
}

/* to unhide the lightbox when it is targeted */
.lightbox:target {
    display: block;
}

Sample Code – HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightbox</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>CSS Lightbox</h1>
    <main class="container">
        <!-- images container -->
      <div class="img-container">
        <a href="#img1">
            <img src="https://robohash.org/rmasterp" alt="robot">
        </a>
        <a href="#" class="lightbox" id="img1">
            <div>
                <img src="https://robohash.org/rmasterp" alt="robot">
                <p>This is a Robot</p>
            </div>
        </a>
      </div>
    </main>
    
</body>
</html>

11:55 Lunch

*Creative Commons Attribution 4.0* – Animal Style Burgers from In-n-Out

12:25 Afternoon Programming

Unity IRC Coursework

1:10 Afternoon Break

1:25 Speed Design

1:45 Independent Production & Guided Support

About Me write up and photo – Due Today! (photo, write up, on server)
Ruth Food Truck website using Bootstrap – Due Today!
Visual Resume – Due Tuesday, January 20th along with downloadable version (On your website)
Resume Dropbox Round Two is up if you want me to review your again resume for typos, content, etc