change

README.md

@@ -1,2 +1,12 @@
-# web-2-framework
-Web 2 Framework
+# Longest Yard
+
+## Description
+
+Description of movie. 
+
+## Sources
+
+* [Plyr library](plyr.io/)
+* [Google Fonts](https://fonts.google.com/)
+* [A CodePen Pen](URL_TO_PEN)
+* [ANOTHER_SOURCE]()

css/styles.css

@@ -5,6 +5,221 @@
   * Outline Elements
 */
 
-* {
+/* {
     outline: 1px dotted black;
-}
+}*/
+
+
+
+main{
+  display:grid;
+  grid-template-columns:repeat(1,1fr);
+  background:lightpink;
+}
+.cast{
+  display:flex;
+  flex-wrap:wrap;
+}
+h1{
+  color:red;
+  font-family: 'Lobster', cursive;
+  font-family: 'Romanesco', cursive;
+  font-size:200px;
+  padding-left:300px;
+  transition: all .2s ease-in-out;
+}
+h1:hover
+{
+  transform:scale(1.2);
+}
+blockquote{
+  color:red;
+  font-size:75px;
+  font-family: 'Lobster', cursive;
+  font-family: 'Romanesco', cursive;
+  text-align:center;
+  transition: all .2s ease-in-out;
+
+}
+
+blockquote:hover
+{
+  font-size:100px;
+  transform:scale(1.2);
+}
+.backImage{
+  display:block;
+
+  width: 100%;
+  position:absolute;
+  z-index:0;
+  opacity:.2;
+}
+
+p{
+  color:red;
+  font-family: 'Lobster', cursive;
+font-family: 'Romanesco', cursive;
+  font-size:38px;
+}
+h2{
+  color:red;
+  font-family: 'Lobster', cursive;
+font-family: 'Romanesco', cursive;
+  transition: all .2s ease-in-out;
+  font-size:34px;
+}
+h2:hover
+{
+  transform:scale(1.2);
+}
+img{
+  width:500px;
+
+  border-style:outset;
+  border-width:7px;
+  transition: all .2s ease-in-out;
+}
+img:hover{
+  transform:scale(1.2);
+ }
+div{
+  width:90%;
+  padding-left:300px;
+}
+script{
+  font-family: 'Lobster', cursive;
+font-family: 'Romanesco', cursive;
+  font-size:38px;
+}
+
+/*  Custom UI Controls */
+.plyr--full-ui input[type="range"]
+{
+  color:red;
+
+}
+
+
+
+
+/* Media Queries */
+/* 
+  Mobile: 
+  * 384px = 24em
+*/
+@media only screen and (min-width: 0) { 
+
+  /* Diagnostic Styling. Delete When Done. */
+  body:before {
+       background: yellow;
+       content: "Mobile Size";
+  }
+
+}
+
+/* Tablet:  
+  * 768px = 48em 
+*/
+@media only screen and (min-width: 24em)  {
+
+  /* Diagnostic Styling. Delete When Done. */
+  body:before {
+       background: yellow;
+       content: "Tablet Size";
+  }
+
+}
+
+/* Desktop: 
+  * 1152px = 72em
+*/
+@media screen and (min-width: 72em)  { 
+
+  /* Diagnostic Styling. Delete When Done. */
+  body:before {
+       background: yellow;
+       content: "Desktop Size";
+  }
+
+}
+
+/* Wide Desktop: 
+  * 1440px = 90em
+*/
+@media screen and (min-width: 90em) { 
+
+  /* Diagnostic Styling. Delete When Done. */
+  body:before {
+       background: yellow;
+       content: "Wide Desktop Size";
+  }
+
+}
+
+
+
+
+@media only screen 
+  and (min-width: 0) 
+  and (max-width: 48em)  { 
+
+    /* Diagnostic Styling. Delete When Done. */
+    body:before {
+         background: yellow;
+         content: "Mobile Size";
+    }
+
+    .cast {
+      text-align: center;
+      justify-content: center;
+    }
+
+}
+
+/* Tablet:  
+  * 768px = 48em 
+    1023px = 63.9375em;
+*/
+@media only screen 
+  and (min-width: 48em) 
+  and (max-width: 64em)  {
+
+  /* Diagnostic Styling. Delete When Done. */
+  body:before {
+       background: yellow;
+       content: "Tablet Size";
+  } 
+
+}
+
+/* Desktop: 
+  * 1024px = 64em
+  * 64em and larger
+*/
+@media screen 
+  and (min-width: 64em) 
+  and (max-width: 90em) { 
+
+  /* Diagnostic Styling. Delete When Done. */
+  body:before {
+       background: yellow;
+       content: "Desktop Size";
+  }
+
+}
+
+/* Wide Desktop: 
+  * 1440px = 90em
+  * 90em and wider
+*/
+@media screen and (min-width: 90em) { 
+
+  /* Diagnostic Styling. Delete When Done. */
+  body:before {
+       background: yellow;
+       content: "Wide Desktop Size";
+  }
+
+}
+

favicons/site.webmanifest

@@ -6,11 +6,6 @@
             "src": "/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
         }
     ],
     "theme_color": "#ffffff",