My resume by @Zhanna - Codewith.it

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

References

<a>Inserisce link e collegamenti ipertestuali
<div>Crea contenitori generici o sezioni in una pagina
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
<h5>Titolo di intestazione di quinto livello
<map>Inserisce immagini mappa cliccabili in un documento
selectedPre-seleziona un elemento di input

Users

Log in to search for users

Explore

Find inspiration

Tabella semplice con bord

Pagina sul lorem ipsum

Condizione esercizio 1

TABELLA ESERCITAZIONE

VERIFICA RANZI LEONARDO

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>