„resume.html“ ändern

resume.html

@@ -69,54 +69,46 @@ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e3140",endCo
         Founder and IT consultant of
         <a href="https://m-csc.de">M-CSC</a><br> 
         Gearhead, technology and smart home enthusiast.
-         
+ 
-         
+
-         
+
-         <br><br>
+
-          <a href="https://twitter.com/search?q=%23cybersecurity&src=hashtag_click">#cybersec</a>
+
-          <a href="https://twitter.com/search?q=%23teamlinux&src=hashtag_click">#teamlinux</a> 
+
-          <a href="https://twitter.com/search?q=%23cars&src=hashtag_click">#cars</a> and
+
-          <a href="https://twitter.com/search?q=%23coffee&src=hashtag_click">#coffee</a>
+<div class='wrapper'>
-        <p>
+<div class='steps' id='steps'>
+  <div class='step'>
+    <div class='number completed'>
+      <svg viewBox="0 0 512 512" width="100" title="check">
+        <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
+      </svg>
+    </div>
+    <div class='info'>
+      <p class='title'>
+        Verify Identity
+      </p>
+      <p class='text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat pariatur minima nemo? Facilis veniam reprehenderit quaerat aspernatur, quis voluptas voluptate.</p>
+    </div>
+  </div>
+
+  <div class='step'>
+    <div class='number'>2</div>
+    <div class='info'>
+      <p class='title'>Create Account</p>
+      <p class='text'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat pariatur minima nemo? Facilis veniam reprehenderit quaerat aspernatur, quis voluptas voluptate.</p>
+    </div>
+  </div>
+</div>
+</div>
+
 
-        <!-- LinkedIn -->
-        <a class="button button-linked zoom-box animate-zoom-1" href="https://de.linkedin.com/in/yannmoelle" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
-        <br>
-       
-        
-        <!-- XING -->
-        <a class="button button-xing zoom-box animate-zoom-2" href="https://www.xing.com/profile/Yann_Moelle" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/xing.svg" alt="xing Logo">Xing</a>
-        <br>
 
-        <!-- Gitea -->
-        <a class="button button-gitea zoom-box animate-zoom-3" href="https://git.moelle.space/hxcde" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/gitea.svg" alt="Gitea Logo">Gitea</a>
-        <br>
 
-        <!-- GitHub -->
-        <a class="button button-github zoom-box animate-zoom-4" href="https://github.com/hxcde" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
-        <br>
 
-        <!-- Twitter -->
-        <a class="button button-twit zoom-box animate-zoom-5" href="https://twitter.com/hxcde" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>
-        <br>
 
-        <!-- Twitter -->
-        <a class="button button-mcsc zoom-box animate-zoom-6" href="https://m-csc.de" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/mcsc.svg" alt="MCSC Logo">My company</a>
-        <br>
 
-        <a style="font-size:24px;color:White;"><strong> Contact me </strong></a><br>
-        <br>
 
-        <!-- Email -->
-        <a class="button button-default zoom-box animate-zoom-7" href="mailto:contact@yannmoelle.de" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/email.svg" alt="Email Icon">Email</a>
-        <br>
   
     <br>
      <p><a href="https://git.moelle.space/hxcde/mylinks">This site on my Git</a></p>