Add images to page and credits to README

README.md

@@ -1,2 +1,15 @@
 # landing-page
+
 The Odin Project - Landing Page assignment
+
+Images - credits:
+
+Photo by Inna Lesyk: https://www.pexels.com/photo/winnie-the-pooh-plush-toy-on-seesaw-283937/
+
+Photo by Tahir Osman: https://www.pexels.com/photo/a-winnie-the-pooh-stuffed-toy-10987077/
+
+Photo by CARLOSCRUZ ARTEGRAFIA: https://www.pexels.com/photo/winnie-the-pooh-balloon-near-green-leaves-11098665/
+
+https://pixabay.com/vectors/baby-pooh-winnie-2028307/ Winnie the Pooh
+
+Photo by <a href="https://unsplash.com/@bermixstudio?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Bermix Studio</a> on <a href="https://unsplash.com/photos/a-jar-of-honey-sitting-on-top-of-a-table-KXpWrHwU4hA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

index.html

@@ -18,12 +18,13 @@
         </div>
         <div class="header-bottom">
             <div class="header-bottom-left">
-                <div class="hero-main">This website is awesome</div>
+                <div class="hero-main">This is an awesome website about Winnie</div>
                 <div class="hero-secondary">This website has some subtext that goes here under the main title. It's a smaller font and the colour is lower contrast.</div>
                 <button>Sign up</button>
             </div>
             <div class="header-bottom-right">
-                <div class="img-box">Image placeholder</div>
+                <!-- <div class="img-box">Image placeholder</div> -->
+                <img src="https://images.pexels.com/photos/11098665/pexels-photo-11098665.jpeg" alt="Winnie the Pooh baloon, credits: Carlos Cruz" class="img-01">
             </div>
         </div>
     </div>
@@ -33,19 +34,23 @@
     <div class="information">
         <div class="items">
             <div class="item">
-                <div class="box"></div>
+                <!-- <div class="box"></div> -->
+                <img src="https://images.pexels.com/photos/283937/pexels-photo-283937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Winnie the Pooh toy, credits: Inna Lesyk" class="img-box-info">
                 <div class="text">this is some subtext under an illustration or an image</div>
             </div>
             <div class="item">
-                <div class="box"></div>
+                <!-- <div class="box"></div> -->
+                <img src="https://images.pexels.com/photos/10987077/pexels-photo-10987077.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Winnie the Pooh toy, credits: Tahir Osman" class="img-box-info">
                 <div class="text">this is some subtext under an illustration or an image</div>
             </div>
             <div class="item">
-                <div class="box"></div>
+                <!-- <div class="box"></div> -->
+                <img src="https://cdn.pixabay.com/photo/2017/01/31/23/52/baby-2028307_960_720.png" alt="Winnie the Pooh vector graphic, credits: Open Clipart Vectors" class="img-box-info">
                 <div class="text">this is some subtext under an illustration or an image</div>
             </div>
             <div class="item">
-                <div class="box"></div>
+                <!-- <div class="box"></div> -->
+                <img src="https://images.unsplash.com/photo-1676313699709-dae4ad20cd3a?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Honey Jar, credits: Bermix Studio/Unsplash" class="img-box-info">
                 <div class="text">this is some subtext under an illustration or an image</div>
             </div>
         </div>

style.css

@@ -1,5 +1,4 @@
 body {
-    font-style: ;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     margin: 0;
     min-height: 100vh;
@@ -62,6 +61,14 @@ body {
     align-items: center;
 }
 
+.img-01 {
+    width: 420px;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 button {
     display: flex;
     flex-shrink: 0;
@@ -131,6 +138,15 @@ button {
     /* align-self: center; */
 }
 
+.img-box-info {
+    border: 3px none;
+    border-radius: 15px;
+    width: 180px;
+    height: 180px;
+    display: flex;
+    padding: 0% 0% 0% -25%; 
+}
+
 .quote {
     background-color: #E5E7EB;
     padding: 120px;