Skip to content

create index.html #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
desevoker wants to merge 2 commits into
base: main
Choose a base branch
from
Open

create index.html #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f98d6e0
create index.html
desevoker Jul 12, 2023
d89a2ff
CV was added
desevoker Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!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;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>CV Dmytro Hrynchyi</title>
</head>
<body>
<div class="page">
<header class="about">
<div>
<h1 class="about__name">Dmytro Hrynchyi</h1>
<div class="about__role">Full Stack Web Developer | Zhytomyr</div>
<p class="about__text">
I'm a goal-oriented, creative and motivated full stack web developer. I am well familiar with CSS/HTML, JS, React, cross-browser and adaptive markup skills. Eager to improve my skills, always try to learn new technologies and stay up-to-date with Web development trends. I also learn quickly and easily communicate with people
</p>
</div>
<img class="about__photo" src="photo.jpg" alt="Dmytro Hrynchyi">
</header>
<main class="main">
<section class="contacts">
<a class="contacts__link" href="tel:+380631234567">+380631234567</a>
<a class="contacts__link" href="mailto:example@gmail.com">example@gmail.com</a>
<a class="contacts__link" href="https://t.me/telegram">Telegram</a>
</section>
<section class="info">
<h2 class="info__title">Experience</h2>
<div class="info__content">
<article class="job">
<h3 class="job__title">Digital Print operator | 2019 - 2022</h3>
<p class="job__description">
<strong>My responsibilities:</strong>
Printing from digital files and setting up complex printing jobs using the document-preparation software associated with the equipment.
</p>
</article>
<article class="job">
<h3 class="job__title">Prepress Engineer | 2014 - 2019</h3>
<p class="job__description">
<strong>My responsibilities:</strong>
Using desktop publishing software to create a print layout for the printing process, preparing and checking digital outputs, creating sample proofs and performing all the steps that lead to the final print project.
</p>
</article>
</div>
</section>
<section class="info">
<h2 class="info__title">Education</h2>
<div class="info__content">
<article class="study">
<h3 class="study__title">Polissia National University | 2015</h3>
<p class="study__description">
Bachelor degree in Accounting and taxation
</p>
</article>
</div>
</section>
<section class="info">
<h2 class="info__title">Skills</h2>
<div class="info__content">
<div class="skills">
<ul class="skills__list">
<li class="skills__item">HTML5</li>
<li class="skills__item">CSS3</li>
<li class="skills__item">Javascript</li>
</ul>
<ul class="skills__list">
<li class="skills__item">React</li>
<li class="skills__item">SQL</li>
<li class="skills__item">PHP</li>
</ul>
</div>
</div>
</section>
<section class="info">
<h2 class="info__title">Tools</h2>
<div class="info__content">
<div class="tools">
<ul class="tools__list">
<li class="tools__item">Figma</li>
<li class="tools__item">GIT</li>
<li class="tools__item">NPM</li>
</ul>
<ul class="tools__list">
<li class="tools__item">VSCode</li>
<li class="tools__item">ESLint</li>
<li class="tools__item">Composer</li>
</ul>
</div>
</div>
</section>
</main>
</div>
</body>
</html>
Binary file added photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
202 changes: 202 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
body {
color: #485268;
background-color: #E5E5E5;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}

strong {
font-weight: 500;
}

.page {
width: 595px;
margin: 40px auto;
box-shadow: 0 0 15px 5px #485268;
}

/* #region about */

.about {
display: flex;
padding: 32px 40px 24px 40px;
background-color: #E25544;
color: white;
}

.about__name {
margin: 0 0 8px 0;
font-size: 30px;
font-weight: 600;
line-height: normal;
}

.about__role {
margin: 0 0 8px 0;
font-size: 12px;
line-height: normal;
text-transform: uppercase;
}

.about__text {
margin: 0;
}

.about__photo {
margin-left: 50px;
width: 114px;
height: 114px;
border-radius: 50%;
}

/* #endregion */

.main {
padding: 0 40px;
background-color: white;
}

/* #region contacts */

.contacts {
display: flex;
justify-content: space-between;
padding: 24px 0;
}

.contacts__link {
color: #485268;
text-decoration: none;
}

/* #endregion */

/* #region info */

.info {
display: flex;
justify-content: space-between;
padding: 24px 0;
border-top: 1px solid #DEE2ED;
}

.info__title {
margin: 0;
color: #E25544;
font-size: 20px;
font-weight: 500;
line-height: normal;
}

.info__content {
width: 360px;
}

/* #endregion */

/* #region job */

.job {
margin-top: 24px;
border-left: 1px dashed #DEE2ED;
padding-left: 8px;
}

.job:first-child {
margin-top: 0;
}

.job__title {
margin: 0;
font-size: 12px;
font-weight: 500;
line-height: 15px;
text-transform: capitalize;
}

.job__description {
margin: 0;
margin-top: 8px;
}

/* #endregion */

/* #region study */

.study {
margin-top: 24px;
border-left: 1px dashed #DEE2ED;
padding-left: 8px;
}

.study:first-child {
margin-top: 0;
}

.study__title {
margin: 0;
font-size: 12px;
font-weight: 500;
line-height: 15px;
text-transform: capitalize;
}

.study__description {
margin: 0;
margin-top: 8px;
}

/* #endregion */

/* #region skills */

.skills {
display: flex;
}

.skills__list {
box-sizing: border-box;
margin: 0;
width: 50%;
border-left: 1px dashed #DEE2ED;
padding-left: 8px;
list-style: none;
}

.skills__item {
margin-top: 8px;
}

.skills__item:first-child {
margin-top: 0;
}

/* #endregion */

/* #region tools */

.tools {
display: flex;
}

.tools__list {
box-sizing: border-box;
margin: 0;
width: 50%;
border-left: 1px dashed #DEE2ED;
padding-left: 8px;
list-style: none;
}

.tools__item {
margin-top: 8px;
}

.tools__item:first-child {
margin-top: 0;
}

/* #endregion */