Add icons

Author: selvakumardhivakar

css/index.css

@@ -27,6 +27,10 @@ ul {
 //   background-color: rgba(0, 0, 0, 0.938);
 // }
 
+.hero__content {
+  // margin-top: 1em;
+}
+
 .wrapper {
   padding: 1.5em;
   max-width: 1200px;
@@ -38,6 +42,7 @@ header {
   justify-content: space-between;
   .logo {
     font-weight: bold;
+    font-size: 2em;
   }
   ul {
     display: flex;
@@ -77,13 +82,13 @@ header {
   }
 }
 
-.arrows {
-  display: none;
-}
+// .arrows {
+//   display: none;
+// }
 
 .extended-wrapper {
   padding: 0 1.5em 2em;
-  max-width: 1230px;
+  max-width: 1100px;
   margin: 0 auto;
 }
 
@@ -98,8 +103,8 @@ ul.carousal {
 
 blockquote {
   margin: 0;
-  font-size: 0.8em;
-  line-height: 1.8em;
+  font-size: 0.9em;
+  // line-height: 1.8em;
   margin-bottom: 2.5em;
 }
 
@@ -111,6 +116,7 @@ cite {
   position: relative;
   padding-left: 25px;
 }
+
 cite::before {
   content: "";
   position: absolute;
@@ -145,11 +151,14 @@ h2::before {
   .tech {
     width: 50px;
   }
+  img {
+    width: 50px;
+  }
   li {
     margin: 2em 0;
   }
   p {
-    display: inline;
+    // display: inline;
     font-size: 1.4em;
   }
 }
@@ -197,6 +206,7 @@ h2::before {
   }
   ul.carousal {
     display: flex;
+    align-items: center;
     margin-bottom: 0;
     li {
       margin-right: 1em;

css/index.css.map

@@ -27,7 +27,7 @@
         </nav>
       </header>
       <div class="hero__content">
-        <h1>Software developer & Youtube instructor!</h1>
+        <h2>Software developer & Youtube instructor!</h2>
         <p class="subtitle">Full-stack development</p>
       </div>
     </div>
@@ -36,19 +36,19 @@ <h1>Software developer & Youtube instructor!</h1>
     <div class="wrapper">
       <ul class="stats">
         <li>
-          <strong> > 100 </strong>
+          <strong> 100 </strong>
           <span> followers on Youtube </span>
         </li>
         <li>
-          <strong> > 350 </strong>
+          <strong> 350 </strong>
           <span> followers on DEV Community </span>
         </li>
         <li>
-          <strong> ~ 6000 </strong>
+          <strong> 6000 </strong>
           <span> views on Youtube </span>
         </li>
         <li>
-          <strong> > 100000 </strong>
+          <strong> 100000 </strong>
           <span> post views on DEV Community </span>
         </li>
       </ul>
@@ -59,11 +59,11 @@ <h1>Software developer & Youtube instructor!</h1>
           id="left-arrow"
           src="https://img.icons8.com/metro/26/000000/down--v1.png"
         /> -->
-      <ul class="carousal">
+      <ul class="wrapper">
         <li>
           <a href="https://www.youtube.com/channel/UC0hmXRqXYVO0mocVt5D3GkQ">
             <blockquote>
-              Created a youtube channel `Vuelancer` for making videos on
+              Maintaining a youtube channel `Vuelancer` for making videos on
               full-stack development.
             </blockquote>
             <cite>Youtube</cite>
@@ -88,16 +88,31 @@ <h1>Software developer & Youtube instructor!</h1>
     </div>
   </div>
   <div class="wrapper move-up v-padding">
-    <h2>Technologies I'm interested in...</h2>
+    <h2>Known technologies</h2>
     <ul class="technologies">
       <li>
+        <img
+          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/vuejs-colored.svg">
         <p>Vuejs</p>
       </li>
+
+      <li>
+        <img
+          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/mongodb-colored.svg"
+          alt="" srcset="">
+        <p>Mongodb</p>
+      </li>
       <li>
+        <img
+          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/nodejs-colored.svg"
+          alt="" srcset="">
         <p>Node</p>
       </li>
       <li>
-        <p>Flutter</p>
+        <img
+          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/svelte-colored.svg"
+          alt="" srcset="">
+        <p>Svelte</p>
       </li>
     </ul>
   </div>