add svgs and add styling

Lopputyö/index.html

@@ -46,11 +46,11 @@
             <article class="container">
                     <article class="left">
                         <h3>What is lorem ipsum?</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <img class="svgimg" src="src/check.svg" alt="check"> </p>
                     </article>
                     <article class="right">
                         <h3>Why do we use it?</h3>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <img class="svgimg" src="src/kone.svg" alt="monitor"></p>
                     </article>
 
             </article>

Lopputyö/style.css

@@ -16,7 +16,15 @@ article {
   overflow-y: scroll;
   height: 100vh;
 }
+article .svgimg {
+  width: 1vw;
+}
 
+@media only screen and (max-width: 810px) {
+  .svgimg {
+    width: 2.5vw !important;
+  }
+}
 section {
   height: 100vh;
   scroll-snap-stop: always;

Lopputyö/style.scss

 @import "./colors.scss";
 
 * {
-    margin: 0;
-    color: $font;
-    text-decoration: none;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  *::-webkit-scrollbar {
-    display: none;
-  }
+  margin: 0;
+  color: $font;
+  text-decoration: none;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+*::-webkit-scrollbar {
+  display: none;
+}
   
 article{
-    scroll-snap-type: y mandatory;
-    overflow: hidden;
-    overflow-y: scroll;
-    height: 100vh;
+  scroll-snap-type: y mandatory;
+  overflow: hidden;
+  overflow-y: scroll;
+  height: 100vh;
+  // SVGs in about section
+  .svgimg{
+    width: 1vw;
+  }
 }
-
-    // GENERAL SECTIONS: HOME, ABOUT, PORTFOLIO, CONTACT
-    section{
-        height: 100vh;
-        scroll-snap-stop: always;
-        scroll-snap-align: start;
-        display: flex;
+@media only screen and (max-width: 810px) {
+    .svgimg{
+      width: 2.5vw !important;
     }
+}
+
+
+// GENERAL SECTIONS: HOME, ABOUT, PORTFOLIO, CONTACT
+section{
+  height: 100vh;
+  scroll-snap-stop: always;
+  scroll-snap-align: start;
+  display: flex;
+}
 
-    // SECTIONS INDIVIDUALLY
-    @import "./home.scss";
-    @import "./about.scss";
-    @import "./portfolio.scss";
-    @import "./contact.scss";
-    @import "./navbar.scss";
\ No newline at end of file
+// SECTIONS INDIVIDUALLY
+@import "./home.scss";
+@import "./about.scss";
+@import "./portfolio.scss";
+@import "./contact.scss";
+@import "./navbar.scss";
\ No newline at end of file