index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Simple resume website created be Maxim Skorokhodov">
    <title>Résumé</title>

    <link rel="stylesheet" href="https://binary-studio-academy.github.io/stage-2/assets/stylesheets/base.css">
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body>

    <main class="gradient-bg">
      <article>
        <div class="page" style="border-color: #330867;">
          
          <div class="stackable grid">

            <div class="row">
              <div class="three wide center aligned column avatar-padding">
                <div class="avatar-wrapper">
                  <object class="avatar" data="./assets/img/avatar.png" role="img" aria-label="My profile picture"></object>
                </div>
              </div>

              <div class="thirteen wide column">
                <div class="stackable grid">
                  <div class="sixteen wide column">
                    <h1 class="name">Maxim Skorokhodov</h1>
                    <div class="job">student of KPI</div>
                    <ul class="contacts">
                      <li>
                        <a href="skorokhodov.maxim.444@gmail.com" rel="author" class="mail">
                          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>
                          <span>Gmail</span>
                        </a>
                      </li>

                      <li>
                        <a href="https://github.com/Max44444" rel="author" class="github">
                          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
                          <span>Github</span>
                        </a>
                      </li>

                      <li>
                        <a href="https://t.me/S_010011010110000101111000" rel="author" class="telegram">
                          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>
                          <span>Telegram</span>
                        </a>
                      </li>

                      <li>
                        <a href="tel:+380985516646" rel="author" class="phone">
                          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
                          <span>+38 (098)-551-66-46</span>
                        </a>
                      </li>

                    </ul>
                  </div>

                  <div class="sixteen wide mobile only column">
                    <div class="divider"></div>
                  </div>

                  <div class="sixteen wide column">
                    <h2>Résumé</h2>
                    <p>Hello, everyone!</p>
                    <p>
                      My name is Max and I am a student of the KPI National Technical University of Ukraine. For almost two years now, I have enjoyed studying information systems and technologies. At this point I am interested in learning and developing my skills in web development, namely the development of web applications on the Java platform.
                    </p>
                  </div>

                </div>
              </div>
            </div>

            <div class="row">
              <div class="sixteen wide column">
                <div class="fat divider purple-border"></div>
              </div>
            </div>

            <div class="row">
              <div class="ten wide column">
                <section>
                  <h3>Timeline</h3>
                  <h6>Recent</h6>
                  <ul class="timeline">
                    <li>
                      <p><em>1<sup>th</sup> September 2019 &ndash; present</em></p>
                      <p><strong>Student</strong> of the <strong><a href="https://kpi.ua/">KPI</a></strong></p>
                    </li>

                    <li>
                      <p><em>1<sup>th</sup> October 2019 &ndash; present</em></p>
                      <p><strong>Student</strong> of the <strong><a href="https://greenforest.com.ua/">Green Forest English School</a></strong></p>
                    </li>
                  </ul>
                  <h6>Back then</h6>
                  <ul class="timeline">
                    <li>
                      <p><em>August 2019</em></p>
                      <p><strong>Relocated</strong> to <strong><a href="https://www.google.com.ua/maps/place/%D0%9A%D0%B8%D0%B5%D0%B2,+02000/@50.4016991,30.2525178,10z/data=!3m1!4b1!4m5!3m4!1s0x40d4cf4ee15a4505:0x764931d2170146fe!8m2!3d50.4500992!4d30.5234098?hl=ru">Kyiv</a></strong></p>
                    </li>
                    <li>
                      <p><em>1<sup>th</sup> September 2008 &ndash; 31<sup>th</sup> May 2019</em></p>
                      <p><strong>School life</strong></p>
                    </li>
                    <li>
                      <p><em>10<sup>th</sup> November 2001</em></p>
                      <p><strong>Was born</strong> in <strong><a href="https://www.google.com/maps/place/%D0%9F%D0%B5%D0%BD%D0%B7%D0%B0,+%D0%9F%D0%B5%D0%BD%D0%B7%D0%B5%D0%BD%D1%81%D0%BA%D0%B0%D1%8F+%D0%BE%D0%B1%D0%BB.,+%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F/@53.1948244,44.7504437,10z/data=!3m1!4b1!4m5!3m4!1s0x41410062a40af0d1:0xbaed6ceca1cba901!8m2!3d53.2272903!4d45">Penza, Russia</a></strong></p>
                    </li>
                  </ul>
                </section>

              </div>

              <div class="six wide column">
                <div class="dropdown-section">
                  <div class="details">
                    <input type="checkbox" class="drop-list-checkbox" id="languages-drop-list">
                    <label for="languages-drop-list" class="summary">Languages</label>
                    
                    <div class="dropdown-content">
                      <p class="tags small"><span class="language" lang="uk">&#x1f1fa;&#x1f1e6; UKRAINIAN</span> <span class="language" lang="ru">&#x1f1f7;&#x1f1fa; RUSSIAN</span> <span class="language" lang="en">&#x1f1fa;&#x1f1f8; ENGLISH</span></p>
                    </div>
                  </div>
                </div>

                <div class="dropdown-section">
                  <div class="details">
                    <input type="checkbox" class="drop-list-checkbox" id="skills-drop-list">
                    <label for="skills-drop-list" class="summary">Skills</label>
                    
                    <div class="dropdown-content">
                        <ul>
                          <li>Java, Maven, Basics of: Spring Beans, Spring MVC, Spring Security, Junit</li>
                          <li>Html, Css, Scss, Sass, Bootstrap, JavaScript, NodeJs, NPM, Basics of: WebPack, Angular, React</li>
                          <li>PostgreSQL, Basics of MongoDB</li>
                          <li>Rest API, Websocket, Networking</li>
                          <li>OOP, GoF Patterns, MVC, UML, Agile methodologies</li>
                        </ul>
                    </div>
                  </div>
                </div>

                <div class="dropdown-section">
                  <div class="details">
                    <input type="checkbox" class="drop-list-checkbox" id="character-drop-list">
                    <label for="character-drop-list" class="summary">Character</label>
                    
                    <div class="dropdown-content">
                      <p class="tags small">HUMBLE, HONEST, CONFIDENT, CURIOUS, STUBBORN</p>
                    </div>
                  </div>
                </div>

                <div class="dropdown-section">
                  <div class="details">
                    <input type="checkbox" class="drop-list-checkbox" id="likes-drop-list">
                    <label for="likes-drop-list" class="summary">Likes&#x1f603;</label>
                    
                    <div class="dropdown-content">
                      <p class="tags small">ROCK POP INDIE MUSIC, DRAMA MYSTERY SCI-FI MOVIES, HUMOR, PLAY THE GUITAR, TESLA, PIZZA, MONEY, TECHNOLOGIES</p>
                    </div>
                  </div>
                </div>

                <div class="dropdown-section">
                  <div class="details">
                    <input type="checkbox" class="drop-list-checkbox" id="dislikes-drop-list">
                    <label for="dislikes-drop-list" class="summary">Dislikes&#x1f61e;</label>
                    
                    <div class="dropdown-content">
                      <p class="tags small">BAD HABITS, POLITICS, STUPID PEOPLE, VIOLENCE ON ANIMAL, WAR, BUREAUCRACY, QUARANTINE</p>
                    </div>
                  </div>
                </div>

                <div class="dropdown-section">
                  <div class="details">
                    <input type="checkbox" class="drop-list-checkbox" id="wants-drop-list">
                    <label for="wants-drop-list" class="summary">Wants&#x1f97a;</label>
                    
                    <div class="dropdown-content">
                      <p class="tags small bulleted">TRAVEL, TESLA, TO BE FIT AND HEALTHY, OWN COMPANY</p>       
                    </div>
                  </div>
                </div>

                <div class="dropdown-section">                  
                    <div class="details">
                      <input type="checkbox" class="drop-list-checkbox" id="education-drop-list">
                      <label for="education-drop-list" class="summary">Education</label>
                      
                      <div class="dropdown-content">
                        <ul class="timeline">
                          <li>
                            <div><em>Every day</em></div>
                            <p class="tags bulleted">
                              <span class="tag"><a href="https://www.udemy.com/" rel="external"><strong>Udemy</strong></a></span><span class="tag"><a href="https://ru.coursera.org/" rel="external"><strong>Coursera</strong></a></span><span class="tag"><a href="https://www.youtube.com/" rel="external"><strong>YouTobe</strong></a></span>
                            </p>
                          </li>
      
                          <li>
                            <div><em>September 2020</em></div>
                            <div><strong><a href="https://www.udemy.com/certificate/UC-dd349eb7-8a40-439e-ab98-f03935869e43/">Certificate</a> of PostgreSQL Course</strong> at <a href="https://www.udemy.com/course/bestpostgres" rel="external"><strong>Udemy</strong></a></div>
                          </li>
      
                          <li>
                            <div><em>July 2020</em></div>
                            <div><strong><a href="https://www.udemy.com/certificate/UC-bf5d006b-21b4-46ff-83ea-0e67377810dc/">Certificate</a> of Java Course</strong> at <a href="https://www.udemy.com/course/java-simple2advanced" rel="external"><strong>Udemy</strong></a></div>
                          </li>
      
                          <li>
                            <div><em>July 2020</em></div>
                            <div><strong><a href="https://testprovider.com/ru/search-certificate/tp71410023">Certificate</a> of JavaScript Essential Course</strong> at <a href="https://itvdn.com" rel="external"><strong>ITVDN</strong></a></div>
                          </li>
      
                          <li>
                            <div><em>July 2020</em></div>
                            <div><strong><a href="https://testprovider.com/ru/search-certificate/tp06392281">Certificate</a> of HTML5 & CSS3 Course</strong> at <a href="https://itvdn.com" rel="external"><strong>ITVDN</strong></a></div>
                          </li>
      
                          <li>
                            <div><em>July 2020</em></div>
                            <div><strong><a href="https://testprovider.com/ru/search-certificate/tp70257081">Certificate</a> of Java Starter Course</strong> at <a href="https://itvdn.com" rel="external"><strong>ITVDN</strong></a></div>
                          </li>
      
                          <li>
                            <div><em>June 2019</em></div>
                            <div>Graduated <a href="http://dymer-gymnasium.org.ua/"><strong>Dymer Gymnasium</strong></a></div>
                          </li>
                        </ul>
                      </div>

                    </div>
                </div>

                <div class="dropdown-section">
                  <div class="details">
                    <input type="checkbox" class="drop-list-checkbox" id="articles-drop-list">
                    <label for="articles-drop-list" class="summary">Articles</label>
                    
                    <div class="dropdown-content">
                      <p>None published <sup><em>yet</em></sup></p>       
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </article>
    </main>

  </body>
</html>