My resume by @Zhanna - Codewith.it

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

Referenze

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<option>Serve ad inserire una voce in un menu di selezione.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
formnovalidateImpedisce la convalida di un singolo elemento input
<h5>Titolo di intestazione di quinto livello
Inserisce un commento nel codice

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Éclat Couture - Alta Moda Artigia

Gesù nostro signore(2)

Inserimento di un\'immagine

Design, Marketing & AI News (Y)

Conta vocali prof

La mia prima pagina HTML

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>