Skip to content

fix: delete closed tag <img> #8

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
MaestroFront wants to merge 8 commits into
base: main
Choose a base branch
from
Open

fix: delete closed tag <img> #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0d5b038
fix: delete closed tag <img>
Sep 6, 2022
388c380
fix: change "<" to "&gt;"
Sep 6, 2022
ff70dca
fix: change ">" to "&gt;"
Sep 6, 2022
e2a9231
fix: fix font size and skills value
Sep 6, 2022
7bf5948
fix: add menu-item
Sep 6, 2022
745aa53
feat: add videos
MaestroFront Sep 6, 2022
2070b42
feat: add video and js animation
Sep 6, 2022
c7bd291
fix: fix mistake
Sep 7, 2022
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
114 changes: 60 additions & 54 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="style.css" />
<link type="text/css" rel="stylesheet" href="nullstyle.css" />
<link rel="icon" href="./img/logo.png" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="style.css">
<link type="text/css" rel="stylesheet" href="nullstyle.css">
<link rel="icon" href="./img/logo.png">
<title>CV</title>
</head>

Expand All @@ -20,9 +20,8 @@
<li class="menu__item"><a href="#about">About Me</a></li>
<li class="menu__item"><a href="#skills">Skills</a></li>
<li class="menu__item"><a href="#code">Code Example</a></li>
<li class="menu__item">
<a href="#experience">Experience and Education</a>
</li>
<li class="menu__item"><a href="#experience">Experience and Education</a></li>
<li class="menu__item"><a href="#projects">Projects</a></li>
<li class="menu__item"><a href="#eng">English Level</a></li>
</ul>
</nav>
Expand All @@ -32,39 +31,39 @@
<div class="info__author">
<div class="author" id="contacts">
<img class="author__avatar" src="./gif/CV.gif" alt="Avatar" width="240" height="300"
title="Yes, it's me!" />
title="Yes, it's me!">
<h1 class="author__name">Aleksandr Akiev</h1>
</div>
<div class="contacts">
<ul class="contacts__list">
<li class="contacts__item">
<a href="tel:+79915142716" title="+7(991)514-27-16">
<img src="./svg/whatsapp.svg" alt="WhatsApp" width="25" height="25" />
<a target="_blank" href="tel:+79915142716" title="+7(991)514-27-16">
<img src="./svg/whatsapp.svg" alt="WhatsApp" width="25" height="25">
</a>
</li>
<li class="contacts__item">
<a href="https://vk.com/alex_notsimple" title="alex_notsimple">
<img src="./svg/vk.svg" alt="Vkontakte" width="25" height="25" />
<a target="_blank" href="https://vk.com/alex_notsimple" title="alex_notsimple">
<img src="./svg/vk.svg" alt="Vkontakte" width="25" height="25">
</a>
</li>
<li class="contacts__item">
<a href="https://web.telegram.org/k/" title="@aleksandr_akiev">
<img src="./svg/telegram.svg" alt="Telegram" width="25" height="25" />
<a target="_blank" href="https://web.telegram.org/k/" title="@aleksandr_akiev">
<img src="./svg/telegram.svg" alt="Telegram" width="25" height="25">
</a>
</li>
<li class="contacts__item">
<a href="#" title="akiev_aleksandr_">
<img src="./svg/instagram.svg" alt="Instagram" width="25" height="25" />
<a target="_blank" href="#" title="akiev_aleksandr_">
<img src="./svg/instagram.svg" alt="Instagram" width="25" height="25">
</a>
</li>
<li class="contacts__item">
<a href="#" title="Maestro(@MaestroFront)">
<img src="./svg/discord.svg" alt="Discord" width="25" height="20" />
<a target="_blank" href="#" title="Maestro(@MaestroFront)">
<img src="./svg/discord.svg" alt="Discord" width="25" height="20">
</a>
</li>
<li class="contacts__item">
<a href="mailto:akievaleksandr@mail.ru" title="akievaleksandr@mail.ru">
<img src="./svg/mail.svg" alt="mail" width="25" height="20" />
<a target="_blank" href="mailto:akievaleksandr@mail.ru" title="akievaleksandr@mail.ru">
<img src="./svg/mail.svg" alt="mail" width="25" height="20">
</a>
</li>
</ul>
Expand Down Expand Up @@ -115,10 +114,8 @@ <h2>Skills</h2>
<li class="skills__item">SASS</li>
<li class="skills__item">learn.js</li>
<li class="skills__item">Codewars</li>
<li class="skills__item">HTML Academy</li>
</ol>
<ol class="skills__list" start="13">
<li class="skills__item">Htmlbook.ru</li>
<ol class="skills__list" start="12">
<li class="skills__item">Functions</li>
<li class="skills__item">Objects</li>
<li class="skills__item">Arrays</li>
Expand All @@ -128,23 +125,26 @@ <h2>Skills</h2>
<section class="code" id="code">
<div class="code__title">
<h2>Code Example (Codewars)</h2>
<a href="https://www.codewars.com/users/Maestro_">
<img src="./svg/codewars.svg" alt="codewarslogo" title="Maestro_" width="30" height="30" />
<a target="_blank" href="https://www.codewars.com/users/MaestroFront">
<img class="codewars-logo" src="./svg/codewars.svg" alt="codewarslogo" title="Maestro_" width="30" height="30">
</a>
</div>
<div class="code__content">
<div class="code__item">
<div class="screen screen_1">
<div class="click click_1"></div>
</div>
<pre>
<code>const convert = (input, source, target, s = 0, str = '') => {
<code>const convert = (input, source, target, s = 0, str = '') =&gt; {

const fromInputToSourceSystem = () => {
input.split('').map(item => s = s * source.length + source.indexOf(item));
const fromInputToSourceSystem = () =&gt; {
input.split('').map(item =&gt; s = s * source.length + source.indexOf(item));
}

fromInputToSourceSystem();

const fromSourceSystemToTargetSystem = () => {
while (s > 0) {
const fromSourceSystemToTargetSystem = () =&gt; {
while (s &gt; 0) {
str = target[s % target.length] + str;
s = Math.floor(s / target.length);
}
Expand All @@ -154,12 +154,15 @@ <h2>Code Example (Codewars)</h2>
</pre>
</div>
<div class="code__item">
<div class="screen screen_2">
<div class="click click_2"></div>
</div>
<pre>
<code>function getParticipants(handshakes){

let i = 0

while (handshakes >0) {
while (handshakes &gt; 0) {
handshakes = handshakes-i;
i++
}
Expand All @@ -169,8 +172,11 @@ <h2>Code Example (Codewars)</h2>
</pre>
</div>
<div class="code__item">
<div class="screen screen_3">
<div class="click click_3"></div>
</div>
<pre>
<code>const isPrime = (number) => {
<code>const isPrime = (number) =&gt; {

if (number &lt; 2) return false;

Expand All @@ -193,42 +199,42 @@ <h2>Experience and Education</h2>
<p>I have No work experience</p>
<p>
I am going through simulations at the
<a href="https://htmlacademy.ru/study" title="link">HTML Academy</a>, self-study on
<a href="https://learn.javascript.ru/" title="link">learn.js</a>
<a target="_blank" href="https://htmlacademy.ru/study" title="link">HTML Academy</a>, self-study on
<a target="_blank" href="https://learn.javascript.ru/" title="link">learn.js</a>
and practice on the
<a href="https://www.codewars.com/" title="link">Codewars</a>
platform. And just recently I finished <a href="https://rs.school/js-stage0/" title="link">Stage#0</a> on
<a target="_blank" href="https://www.codewars.com/" title="link">Codewars</a>
platform. <br>And just recently I finished <a target="_blank" href="https://rs.school/js-stage0/" title="link">Stage#0</a> on
the RSSchool.
</p>
</div>
<div class="proof__screenshots stats">
<img class="stats__stage0" src="./img/stage0.png" height="300" title="stage0" alt="stage0" />
<img class="stats__codewars" src="./img/codewarsStats.png" height="350" title="codewars" alt="codewars" />
<img class="stats__click stage0" src="./img/stage0.png" height="300" title="stage0" alt="stage0">
<img class="stats__codewars" src="./img/codewarsStats.png" height="350" title="codewars" alt="codewars">
<img class="stats__htmlAcademy" src="./img/htmlAcademyStats.png" height="450" title="htmlacademy"
alt="htmlacademy" />
alt="htmlacademy">
</div>
</div>
</section>
<section class="projects">
<section class="projects" id="projects">
<div class="projects__title">
<h2>Projets</h2>
<h2>Projects</h2>
</div>
<div class="project__first project_1">
<img width="200" height="400" src="./img/project1.png" alt="project1(codejam)">
<video controls preload="auto" loop width="800" src="./video/Codejam.mp4"></video>
<div class="project_1__title">
<h3>codejam-eldritch (<a href="https://maestrofront.github.io/codejam-eldritch/">link</a>)</h3>
<h3>codejam-eldritch (<a target="_blank" href="https://maestrofront.github.io/codejam-eldritch/">link</a>)</h3>
</div>
</div>
<div class="project__second project_2">
<img width="200" height="400" src="./img/project2.png" alt="project2(momentum)">
<video controls preload="auto" loop width="800" src="./video/Momentum.mp4"></video>
<div class="project_2__title">
<h3>momentum (<a href="https://rolling-scopes-school.github.io/maestrofront-JSFEPRESCHOOL2022Q2/momentum/">link</a>)</h3>
<h3>momentum (<a target="_blank" href="https://rolling-scopes-school.github.io/maestrofront-JSFEPRESCHOOL2022Q2/momentum/">link</a>)</h3>
</div>
</div>
<div class="project__third project_3">
<img width="200" height="400" src="./img/project3.png" alt="project3(travel)">
<video controls preload="auto" loop width="800" src="./video/Travel.mp4"></video>
<div class="project_3__title">
<h3>travel (<a href="https://rolling-scopes-school.github.io/maestrofront-JSFEPRESCHOOL2022Q2/travel/">link</a>)</h3>
<h3>travel (<a target="_blank" href="https://rolling-scopes-school.github.io/maestrofront-JSFEPRESCHOOL2022Q2/travel/">link</a>)</h3>
</div>
</div>
</section>
Expand All @@ -240,16 +246,16 @@ <h2 class="english__title">English level</h2>
<footer class="footer">
<div class="footer__container">
<div class="rsschool__logo">
<a href="https://rs.school/js/">
<img src="./svg/rs.svg" alt="course" title="Course «JavaScript/Front-end»" width="100" height="40" />
<a target="_blank" href="https://rs.school/js/">
<img src="./svg/rs.svg" alt="course" title="Course «JavaScript/Front-end»" width="100" height="40">
</a>
</div>
<div class="github__page">
<a href="https://github.com/MaestroFront">
<img src="./svg/git.svg" alt="github" title="GitHub" width="45" height="45" />
<a target="_blank" href="https://github.com/MaestroFront">
<img src="./svg/github.svg" alt="github" title="GitHub" width="45" height="45">
</a>
</div>
<div class="today__year">2022</div>
<div class="today__year">© 2022</div>
</div>
</footer>
</div>
Expand Down
31 changes: 31 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
const screen_1 = document.querySelector('.screen_1');
const screen_2 = document.querySelector('.screen_2');
const screen_3 = document.querySelector('.screen_3');

const click_1 = document.querySelector('.click_1');
const click_2 = document.querySelector('.click_2');
const click_3 = document.querySelector('.click_3');

click_1.addEventListener('click', () => {
if (screen_1.classList.contains('move-top')) {
screen_1.classList.remove('move-top');
} else {
screen_1.classList.add('move-top');
};
});

click_2.addEventListener('click', () => {
if (screen_2.classList.contains('move-top')) {
screen_2.classList.remove('move-top');
} else {
screen_2.classList.add('move-top');
};
});

click_3.addEventListener('click', () => {
if (screen_3.classList.contains('move-top')) {
screen_3.classList.remove('move-top');
} else {
screen_3.classList.add('move-top');
};
});
55 changes: 52 additions & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,18 +102,20 @@ h2 {
width: 25px;
height: 25px;
transition-duration: 1s;
opacity: .2;
}
.contacts__item img:hover {
transform: scale(1.5);
transition-duration: 1s;
opacity: 1;
}
.about__title {
margin-bottom: 15px;
text-align: center;
letter-spacing: 5px;
}
.about__text {
font-size: 20px;
font-size: 14px;
line-height: 40px;
padding: 0px 15px;
text-indent: 20px;
Expand Down Expand Up @@ -170,13 +172,52 @@ h2 {
flex-direction: column;
}
.code__item {
overflow: hidden;
position: relative;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
}
.code__item:not(:last-child) {
margin-bottom: 10px;
}
.screen {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(80, 80, 80, 0.9);
top: 0px;
left: 0px;
border-radius: 10px;
transition-duration: 5s;
}
.click {
position: absolute;
cursor: pointer;
bottom: 0px;
left: 47%;
width: 50px;
height: 5px;
background-color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transition-duration: 1s;
}
.click:hover {
transform: scaleX(1.5);
transition-duration: 1s;
}
.codewars-logo {
transition-duration: 5s;
}
.codewars-logo:hover {
transform: rotate(600deg);
transition-duration: 5s;
}
.move-top {
top: -98%;
transition-duration: 5s;
}

/* */

Expand Down Expand Up @@ -231,8 +272,8 @@ h2 {
color: black;
text-decoration: underline;
}
.projects img {
width: 80%;
.projects video {
border-radius: 50px;
margin-bottom: 10px;
}
.project_1,
Expand Down Expand Up @@ -262,6 +303,14 @@ h2 {
.rsschool__logo,
.github__page {
margin-right: 15px;
opacity: .2;
transition-duration: 1s;
}
.rsschool__logo:hover,
.github__page:hover {
opacity: 1;
transition-duration: 1s;
transform: scale(1.2);
}
.github__page a img {
width: 45px;
Expand Down
1 change: 0 additions & 1 deletion svg/git.svg
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions svg/github.svg
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.
Binary file added video/Codejam.mp4
View file
Open in desktop
Binary file not shown.
Binary file added video/Momentum.mp4
View file
Open in desktop
Binary file not shown.
Binary file added video/Travel.mp4
View file
Open in desktop
Binary file not shown.