My resume by @Zhanna - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<li>Inserisce voci all'interno di una lista
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<h1>Titolo di intestazione di primo livello
selectedPre-seleziona un elemento di input
<head>Tag primario di un documento HTML

Users

Log in to search for users

Explore

Find inspiration

inserimento immagini in un testo

animation background

Il mio primo sito(2)

prova elenco puntato

mental breackdown

esercitazione 3

un casino pazzesco

Esercitazione 3 MORRA

I miei progressi

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/styles.css">
    <title>My resume
    </title>
  </head>
  <body>
    <!--Wrapper-->
    <div class="wrapper">
      <!--Main content-->
      <div class="main-content">
        <!--About me-->
        <div class="about-me-container">
          <h2 class="my-profession"> Front-End Developer 
          </h2>
          <h1 class="my-name">Zhanna Feshchenko
          </h1>
          <p class="my-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
          </p>
        </div>
        <!-- My projects-->
        <div class="projects-container">
          <h3 class="main-content-title">  Projects:  
          </h3>        
          <ol class="project-list">
            <li class="project-item">
              <a href="https://hellen.p.goit.global/" class="project-item-link">https://hellen.p.goit.global/
              </a>
              <span class="project-item-descr">........................ [ HTML5, CSS3 ]
              </span>
            </li>
            <li class="project-item">
              <a href="https://cryptohub.p.goit.global/" class="project-item-link">https://cryptohub.p.goit.global/
              </a>
              <span class="project-item-descr">................[ JavaScript ]
              </span>
            </li>
            <li class="project-item">
              <a href="https://kidslike.p.goit.global/" class="project-item-link">https://kidslike.p.goit.global/
              </a>
              <span class="project-item-descr">......................[ React.js, Node.js ]
              </span>
            </li>
          </ol>
        </div>
        <!-- Work experience-->
        <div class="work-experience-container">
          <h3 class="main-content-title">Work experience
          </h3>
          <!--Company 1-->
          <div class="work-experience-place">
            <h4 class="work-experience-position"> Front-End Developer 
              <span class="work-experience-company">Freelance
              </span>
            </h4>
            <p class="work-period">September 2019 - up to now 
              <span class="text-divider">|
              </span>    Country
            </p>
            <ul class="work-duties-list">
              <li class="work-duties">  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
              </li>
              <li class="work-duties">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </li>
              <li class="work-duties">Risus commodo viverra maecenas.
              </li>
              <li class="work-duties">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
              </li>
            </ul>
          </div>
          <!--Company 2-->
          <div class="work-experience-place">
            <h4 class="work-experience-position">Manager 
              <span class="work-experience-company">Banderogusak & Co.
              </span>
            </h4>
            <p class="work-period">September 2019 - up to now 
              <span class="text-divider">|
              </span>     Country
            </p>
            <ul class="work-duties-list">
              <li class="work-duties">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod labore et dolore magna aliqua.
              </li>
              <li class="work-duties">Quis ipsum suspendisse ultrices gravida.
              </li>
              <li class="work-duties">Risus commodo viverra maecenas.
              </li>
            </ul>
          </div>
          <!--Company 3-->
          <div class="work-experience-place">
            <h4 class="work-experience-position ">Manager 
              <span class="work-experience-company">BestUA Corp.
              </span>
            </h4>
            <p class="work-period"> June 2014 - February 2015 
              <span class="text-divider">|
              </span>     Country
            </p>
            <ul class="work-duties-list">
              <li class="work-duties">Dududdyshhsjsjwnnw
              </li>
              <li class="work-duties">Sujwhwgsyuwuqnbsbxhsujwnwnusiwkjwnxssjsjshhxywhwbs
              </li>
              <li class="work-duties">Hhwhehduwhhwgshhdhdhdywhhwnnw
              </li>
            </ul>
          </div>
        </div>
        <!--Education-->
        <div>
          <h3 class="main-content-title">Education
          </h3>
          <h4 class="education-place">National University of Management
          </h4>
          <h5 class="education-profile">
            Management
          </h5>
          <p class="education-period">
            September 2009 - June 2014 
            <span class="text-divider">|
            </span>  Country
          </p>
        </div>
      </div>
      <!--Sidebar-->
      <aside class="sidebar">
        <img src="https://i.ibb.co/pZWw0qR/9-D1-E8-D3-C-0-E37-4631-A162-A4519-A93-FB13.jpg" alt="My photo" widt="370px" class="my-photo">
        <!--Contacts-->
        <div class="contacts-container">
          <h3 class="sidebar-title">Contacts
          </h3>
          <p class="contacts-item">
            <span class="contacts-type">C: 
            </span> 
            <a href="tel:+388888888888" class="contacts-number">+38 888 888 88 88
            </a>
          </p>
          <p class="contacts-item">
            <span class="contacts-type">E: 
            </span> 
            <a href="mailto:j.feshchenko@gmail.com" class="contacts-email">j.feshchenko@gmail.com
            </a>
          </p>
        </div>
        <!--Tech Skills-->
        <div class="tech-skills-container">
          <h3 class="sidebar-title"> Tech skills
          </h3>
          <ul class="skills-list">
            <li class="skills-list-item">
              <span class="skills-list-text">HTML5
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">CSS3
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">GIT
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">WebPack
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">JavaScript
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">React.js
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">Node.js
              </span>
            </li>
          </ul>
        </div>
        <!--Soft Skills-->
        <div class="soft-skills-container">
          <h3 class="sidebar-title">Soft skills
          </h3>
          <ul class="skills-list">
            <li class="skills-list-item">
              <span class="skills-list-text">Scrum
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">Agile
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">GTD
              </span>
            </li>
            <li class="skills-list-item">
              <span class="skills-list-text">Teamwork
              </span>
            </li>
          </ul>
        </div>
      </aside>
    </div>
    <script src="script.js">
    </script>
    <style>
      body {
        font-family: 'Montserrat', sans-serif;
        background-color: #DCD0FF;
        padding: 40px 40px 40px 40px;
      }
      .wrapper {
        display: flex;
        flex-direction: row-reverse;
        background: #ffffff;
        width: 1000px;
        margin: 0 auto;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)}
      /*Main content*/
      .main-content{
        padding-top: 88px;
        padding-bottom: 88px;
        padding-left: 88px;
        padding-right: 88px
      }
      /*About me*/
      .my-profession{
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 17px;
        color: #000000;
        margin: 0 0 18px 0;
      }
      .my-name{
        font-style: normal;
        font-weight: 700;
        font-size: 45px;
        line-height: 55px;
        color: #000000;
        margin: 0 0 28px 0;
      }
      .my-description{
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #595959;
        width: 525px;
      }
      .about-me-container{
        margin-bottom: 64px;
      }
      /*Projects*/
      .main-content-title{
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 27px;
        color: #000000;
        margin: 0 0 8px 0;
      }
      .project-item{
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 24px;
        color: #000000;
      }
      .project-list{
        padding: 0 0 0 12px;
        margin: 0;
      }
      .projects-container {
        margin-bottom: 48px;
      }
      .project-item-descr{
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #595959;
      }
      .project-item-link{
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        text-decoration-line: underline;
        color: #005FFF;
      }
      /*Work experience*/
      .work-experience-container{
        margin-bottom: 44px;
      }
      .work-experience-position{
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        color: #000000;
        margin: 0;
      }
      .work-experience-place{
        margin-bottom: 16px;
      }
      .work-experience-company{
        color: #6D9BF5;
      }
      .work-period{
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: #A8A8A8;
        margin: 12px 0 8px 0;
      }
      .work-duties{
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #595959;
      }
      .work-duties-list{
        padding: 0 0 0 14px;
        margin: 0}
      /*Education*/
      .education-place{
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        color: #6d9bf5;
        margin: 12px 0 12px 0;
      }
      .education-profile{
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 17px;
        color: #000000;
        margin: 0 0 12px 0;
      }
      .education-period{
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: #A8A8A8;
      }
      .text-divider{
        color: #000000;
      }
      /*Sidebar*/
      .sidebar{
        width: 370px;
        background: #E0EBFE;
      }
      .my-photo{
        margin-top: 40px;
        width: 250px}
      .contacts-container, .tech-skills-container, .soft-skills-container {
        margin-top: 48px;
        margin-left: 40px;
      }
      .sidebar-title{
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 27px;
        color: #161d2a;
      }
      /*Contacts*/
      .contacts-type{
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 24px;
        color: #161D2A;
        margin-right: 8px;
      }
      .contacts-item{
        margin: 0}
      .contacts-number{
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #161D2A;
      }
      .contacts-email{
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #2979FF;
      }
      /*Skills*/
      .skills-list{
        margin: 0;
        padding: 0;
        padding-left: 12px;
      }
      .skills-list-item{
        color: #6d9bf5;
      }
      .skills-list-text{
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #161D2A;
      }
    </style>
    <script type="text/javascript">
    </script>
  </body>
</html>