• jollyyau

Week 9: Adaptive Responses


How to make pictures scale?

  1. add an id tag inside the image called map (HTML)

  • <img src="stars.jpg" id="map" alt="map">

  • ATL is when you hover over the image

  1. add a #map tag and define the image MAX width and height (CSS)

  • max-width:500px;

  • max-height:700px;

  • width:100%;

  • height:100%;

  • these are important because then the image doesn't squish

How to add a video?

  • add the video in the body and link it (HTML)

  • <video poster="timelapse.jpg" loop autoplay muted>

  • <source src="Timelapse.mp4" type="video/mp4"/>

  • <source src="Timelapse.ogv" type="video/ogv"/>

  • <source src="Timelapse.webm" type="video/webm"/>

  • </video>

  • then you add a tag to the video

  • <video poster="timelapse.jpg" loop autoplay muted id="videobg">

How to add a linked text on top of the video?

  1. make a <div> around the text (HTML)

  • <div id=TEXT>

  • <h1>TEXT HERE<h1>

  • </div>

  • -video-

  1. then you go define h1. (CSS)

  • h1 {

  • color:white;

  • font-family: 'nightingaleregular', serif;

  • font-style:normal;

  1. around the #TEXT, make it align to centre & absolute (CSS)

  2. align:center;

  3. position:absolute

  4. make a <div> around the video (HTML)

  5. <h1>TEXT HERE<h1>

  6. <div id=VIDEO>

  7. -video-

  8. </div>

  9. around the #VIDEO, make it align to centre & absolute

  • #awesomevideo {

  • position:absolute;

  • top:0;

  • width: 100%;

  • z-index: -1;

  • the z-index is to push down the video below the text!

  1. Add a link to the text!

  • <h1><a href="http://google.com">Welcome to New York</a></h1>

  1. get rid of the disgusting blue line and text

  • text-decoration:none

  1. NOW, time for the transition! Make a hover # for both the link and the text

  • #text:hover {

  • margin-top:50px;

  • #text a:hover {

  • font-size:200px;

  • color: black;

  1. Then! we add a "transition" to both the link and the text

  • #text {

  • text-align:center;

  • transition: 1s;

  • #text a {

  • text-decoration:none;

  • color:white;

  • opacity: 0.5;

  • transition: 1s;

  1. YOU ARE OFFICIALLY DONE!

About the flow.

  • relative

  • absolute

  • fixed

  • float

Relative: relative to its current position

Absolute: goes out of the flow

z-index: depth!

How to add jQuery to your website!

  1. Download the lightbox.css file

  2. http://lokeshdhakar.com/projects/lightbox2/


4 views

jollyyau.design © 2020

  • LinkedIn - White Circle
  • Facebook - White Circle
  • Instagram - White Circle