Mission alt

day-1-flexbox/4-flexbox-exercises/4a-collections/begin/css/style.css

@@ -12,6 +12,7 @@ Clearly there is more you could place in variables, up to you if you want to use
     --color8: #bb3e03;
     --color9: #ae2012;
     --color10: #9b2226;
+    --color11: whitesmoke;
 }
 
 
@@ -44,15 +45,97 @@ section h2 {
     font-size: 2.5rem;
 }
 
+img {
+    width: 100%;
+    display: block;
+    max-height: 300px;
+}
+
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+}
+
+figure {
+    position: relative;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 5px;
+}
+
+figcaption {
+    background-color: var(--color11);
+    width: 100%;
+    bottom: 0px;
+    position: absolute;
+    opacity: 0.7;
+    font-size: 1.5rem;
+}
+
+figcaption a {
+    display: block;
+    text-decoration: none;
+    color: var(--color1);
+    padding: 1rem;
+}
+
+
+/* border styling */
+
+.one, 
+.one a:hover {
+    border-color: var(--color7);
+    color: var(--color7);
+}
+.two,
+.two a:hover{
+    border-color: var(--color2);
+    color: var(--color2);
+}
+.three,
+.three a:hover {
+    border-color: var(--color6);
+    color: var(--color6);
+}
+.four,
+.four a:hover {
+    border-color: var(--color9);
+    color: var(--color9);
+}
+.five, 
+.five a:hover {
+    border-color: var(--color4);
+    color: var(--color4);
+}
+.six,
+.six a:hover {
+    border-color: var(--color3);
+    color: var(--color3);
+}
+
+
+
 
 /* Initial mobile layout: a series of images stacked on top of each other with the figure caption over the image. */
 
 
 /* At this breakpoint, transition to 2 figures per line */
 
-@media (min-width: 550px) {}
+@media (min-width: 550px) {
+    li {
+        flex-basis: 48%;
+    }
+}
 
 
 /* At this breakpoint, transition to 3 figures per line */
 
-@media (min-width: 800px) {}
+@media (min-width: 800px) {
+li {
+    flex-basis: 33%;
+}
+}

day-1-flexbox/4-flexbox-exercises/4a-collections/begin/index.html

@@ -14,37 +14,37 @@
         <h2>Collections</h2>
         <ul>
             <li>
-                <figure>
+                <figure class="one">
                     <img src="img/pop-art.jpg" alt="Pop Art: This must be the place" />
                     <figcaption><a href="#">Pop Art</a></figcaption>
                 </figure>
             </li>
             <li>
-                <figure>
+                <figure class="two">
                     <img src="img/abstract.jpg" alt="Abstract: grey and green squares." />
                     <figcaption><a href="#">Abstract</a></figcaption>
                 </figure>
             </li>
             <li>
-                <figure>
+                <figure class="three">
                     <img src="img/vivid.jpg" alt="Tree on island in lake with purple sunrise." />
                     <figcaption><a href="#">Vivid</a></figcaption>
                 </figure>
             </li>
             <li>
-                <figure>
+                <figure class="four">
                     <img src="img/music.jpg" alt="Music: guitar leaning against wall." />
                     <figcaption><a href="#">Music</a></figcaption>
                 </figure>
             </li>
             <li>
-                <figure>
+                <figure class="five">
                     <img src="img/vehicles.jpg" alt="Vehicles: 1930's car on street." />
                     <figcaption><a href="#">Vehicles</a></figcaption>
                 </figure>
             </li>
             <li>
-                <figure>
+                <figure class="six">
                     <img src="img/landscape.jpg" alt="Landscape: moonrise over tree-covered mountains." />
                     <figcaption><a href="#">Landscape</a></figcaption>
                 </figure>

day-1-flexbox/4-flexbox-exercises/4b-mission/begin/css/style.css

@@ -44,6 +44,10 @@ section h2 {
     font-size: 2.5rem;
 }
 
+p {
+    padding: 1rem;
+}
+
 
 /*****************
 New styles begin here and continue to the end of the page 
@@ -55,6 +59,11 @@ section ul {
     margin: 0;
 }
 
+div {
+    margin: 0;
+    padding: 0;
+}
+
 
 /* To keep mobile screens from being stupid long, consider setting a max height on the images and hide the overflow. 
 
@@ -140,10 +149,40 @@ figcaption a {
     color: var(--color8);
 }
 
+/* mobile styling for img */
+
+.logo-img {
+    max-width: 400px;
+    display: block;
+}
+
 
 /* turn on flexbox here - prior to this, elements stacked individually as blocks */
 
 @media (min-width: 550px) {
+    header {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    }
+
+   .logo {
+        /* flex-basis: 32.5%;  */
+        margin: 0;
+        padding: 0;
+
+
+    } 
+    .logo-img {
+        width: 50%;
+        float: left;
+        shape-outside: polygon(0px 0px, 23.29% 105.72%, 51.54% 3px);
+        margin-right: 1rem;
+        padding-right: 2rem;
+    }
+   .mission-statement {
+       /* flex-basis: 65%; */
+    } 
     section ul {
         display: flex;
         flex-flow: row wrap;
@@ -159,6 +198,16 @@ figcaption a {
 }
 
 @media (min-width: 800px) {
+    header {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    }
+    .logo-img{
+        flex-basis: 35%;
+
+    }
+
     section h2 {
         margin-left: 100px;
     }

day-1-flexbox/4-flexbox-exercises/4b-mission/begin/index.html

@@ -10,6 +10,12 @@
 </head>
 
 <body>
+    <section class="mission">
+    <h2>Our Mission</h2>
+    <header class="logo-mission-container">
+        <p class="mission-statement"><img class="logo-img" src="../logo2.png" alt="Wall of Wonder logo" />We strive to bring people interesting and unique art that inspires them to be more creative and enjoy their homes. We know art can be expensive, so we work with a rotating set of artists and photographers to being you fantastic prints - all for free. We just ask that you donate what you think is fair, or share the site with someone who might like great art as much as you do. </p>
+    </header>
+    </section>
     <section id="collections">
         <h2>Collections</h2>
         <ul>

day-1-flexbox/4-flexbox-exercises/4c-footer/begin/css/style.css

@@ -51,6 +51,10 @@ section ul {
     margin: 0;
 }
 
+h4 {
+    padding: 0;
+    margin: 0;
+}
 
 /* To keep mobile screens from being stupid long, consider setting a max height on the images and hide the overflow. 
 
@@ -153,16 +157,48 @@ figcaption a {
     display: block;
 }
 
+/* footer styling */ 
+
+.footer {
+background-color: var(--color5);
+}
+
+footer {
+    display: flex;
+    flex-flow: column wrap;
+    max-width: 1200px;
+    padding-top: 3rem;
+}
+
+footer ul {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+footer a {
+    text-decoration: none;
+}
+
+address {
+    font-style: normal;
+    font-weight: bolder;
+}
+
 
 /* turn on flexbox here - prior to this, elements stacked individually as blocks */
 
 @media (min-width: 550px) {
-    section ul {
+    section ul, footer {
         display: flex;
         flex-flow: row wrap;
         justify-content: space-between;
     }
-    section li {
+    section li, 
+    .social, 
+    .address {
         flex-basis: 49.5%;
     }
     /* turn off object position, inherit object-fit: cover */

day-1-flexbox/4-flexbox-exercises/4c-footer/begin/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Collections</title>
     <link href="css/style.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/3bddb0bb72.js" crossorigin="anonymous"></script>
 </head>
 
 <body>
@@ -60,15 +61,16 @@ <h2>Collections</h2>
             </li>
         </ul>
     </section>
+    <div class="footer">
     <footer>
         <div class="social">
             <h4>Stay Connected!</h4>
             <ul>
                 <li>
-                    <a href="https://www.facebook.com" target="_blank"><img src="img/facebook-icon.svg" alt="Visit us at Facebook." /></a>
+                    <a href="https://www.facebook.com" target="_blank"><span class="fa-brands fa-facebook" alt="Visit us at Facebook."></span></a>
                 </li>
                 <li>
-                    <a href="https://www.instagram.com" target="_blank"><img src="img/instagram-icon.svg" alt="Visit us on Instagram." /></a>
+                    <a href="https://www.instagram.com" target="_blank"><span class="fa-brands fa-instagram" alt="Visit us on Instagram."></span></a>
                 </li>
             </ul>
         </div>
@@ -79,6 +81,7 @@ <h4>Stay Connected!</h4>
         Minneapolis, MN 55402
       </address>
     </footer>
+    </div>
 </body>
 
 </html>

day-1-flexbox/4-flexbox-exercises/4c-footer/end/css/style.css

@@ -241,11 +241,8 @@ footer address {
     section h2 {
         margin-left: 100px;
     }
-    section li,
-    .social {
+    section li {
         flex-basis: 32.5%;
     }
-    address {
-        flex-basis: 65.5%;
-    }
+
 }