My resume by @Zhanna - Codewith.it

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

References

<video>Integra e controlla video in una pagina HTML
<ul>Usato per la creazione di liste non ordinate.
maxImposta il valore numerico o temporale massimo per un elemento input
_selfApre collegamenti ipertestuali nella stessa pagina del browser
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<br>Inserisce uno spazio vuoto tra due elementi HTML.

Users

Log in to search for users

Explore

Find inspiration

Esercitazione STA 16/03

3 LS 29-01 IPERTESTI INTERNI

Inserimento di un\'immagine

Table (prove)(2)

HTML OR. LISTA TAGS TEST

Esercitazione 1

Resiliant Material

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>