My resume by @Zhanna - Codewith.it

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

References

application-x-www-form-urlencodedCodifica dei caratteri di un form
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<table>Tag primario per la creazione di tabelle
widthImposta la larghezza di un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

sito_donne_afghane

Design, Marketing & AI News (Portf

Pagina prova html

Congettura di Collatz

Template prodotti Meguiar

input non capiti

Mostra/nascondi password

congettura collatz

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>