My Portfolio

Developer
Maxim Konoval
Size
6,798 Kb
Views
28,336
  1. My Portfolio Previews
  2. My Portfolio HTML Codes
  3. My Portfolio CSS Codes
  4. My Portfolio JS Codes

How do I make an my portfolio?

My work samples. Project deployed on https://webdevs.co.ua. What is a my portfolio? How do you make a my portfolio? This script and codes were developed by Maxim Konoval on 16 September 2022, Friday.

My Portfolio Previews
IQ Test

My Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My Portfolio</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#222">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Max Konoval | Portfolio</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<header class="header header__main">	<h1>Front-End Works by Max Konoval</h1>	<nav>	<ul class="menu menu--flex">	<!-- <li class="menu__item"><a href="#my-projects">My Projects</a></li> -->	<li class="menu__item"><a data-scroll href="#about-me">About Me</a></li>	<li class="menu__item"><a data-scroll href="#contacts">Contacts</a></li>	</ul>	</nav>	<ul class="header__profiles profiles--flex">	<li class="profile__link"><a href="https://github.com/Said-FD">github.com</a></li>	<li class="profile__link"><a href="https://codepen.io/Said_FD">codepen.io</a></li>	<li class="profile__link"><a href="https://www.linkedin.com/in/maxim-konoval-89454583">linkedin.com</a></li>	<li class="profile__link profile__link__button"><button type="button" class="email-me modal-toggler">Email Me</button></li>	</ul>	</header>	<main class="main-content">	<section id="my-projects" class="my-projects">	<h2 class="my-projects__title">My Projects</h2>	<div class="projects--flex">	<div class="project-preview">	<picture>
<!--	<source sizes="1920px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/travel-agency--large.jpg 1920w, https://www.congress-security.com/other-projects/portfolio/images/projects/travel-agency--large-hi-dpi.jpg 3840w" media="(min-width: 1380px)">	<source sizes="1380px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/travel-agency--medium.jpg 1380w, https://www.congress-security.com/other-projects/portfolio/images/projects/travel-agency--medium-hi-dpi.jpg 2760w" media="(min-width: 640px)"> -->
<!--	<img sizes="640px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/travel-agency--large.jpg 640w, https://www.congress-security.com/other-projects/portfolio/images/projects/travel-agency--large-hi-dpi.jpg 1280w" alt="Travel Agency"> -->	<img src="https://www.congress-security.com/other-projects/portfolio/images/projects/travel-agency--large.jpg" alt="Travel Agency">	</picture>	<ul class="project-preview__description description--flex">	<li><a href="https://said-fd.github.io/Travel-Site-Test">Take a Look</a></li>	<li><a href="https://github.com/Said-FD/Travel-Site-Test">Repository on GitHub</a></li>	</ul>	</div>	<div class="project-preview">	<picture>
<!--	<source sizes="1920px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/work-agency--large.jpg 1920w, https://www.congress-security.com/other-projects/portfolio/images/projects/work-agency--large-hi-dpi.jpg 3840w" media="(min-width: 1380px)">	<source sizes="1380px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/work-agency--medium.jpg 1380w, https://www.congress-security.com/other-projects/portfolio/images/projects/work-agency--medium-hi-dpi.jpg 2760w" media="(min-width: 640px)">	<img sizes="640px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/work-agency--large.jpg 640w, https://www.congress-security.com/other-projects/portfolio/images/projects/work-agency--large-hi-dpi.jpg 1280w" alt="Work and Travel Agency"> -->	<img src="https://www.congress-security.com/other-projects/portfolio/images/projects/work-agency--large.jpg" alt="Work and Travel Agency">	</picture>	<ul class="project-preview__description description--flex">	<li><a href="https://said-fd.github.io/HiIsrael-Landing-Page">Take a Look</a></li>	<li><a href="https://codepen.io/Said_FD/pen/yaXYxL">Code on CodePen</a></li>	<li><a href="https://github.com/Said-FD/HiIsrael-Landing-Page">Repository on GitHub</a></li>	</ul>	</div>	<div class="project-preview">	<picture>
<!--	<source sizes="1920px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/security-service--large.jpg 1920w, https://www.congress-security.com/other-projects/portfolio/images/projects/security-service--large-hi-dpi.jpg 3840w" media="(min-width: 1380px)">	<source sizes="1380px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/security-service--medium.jpg 1380w, https://www.congress-security.com/other-projects/portfolio/images/projects/security-service--medium-hi-dpi.jpg 2760w" media="(min-width: 640px)">	<img sizes="640px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/security-service--large.jpg 640w, https://www.congress-security.com/other-projects/portfolio/images/projects/security-service--large-hi-dpi.jpg 1280w" alt="Security Service"> -->	<img src="https://www.congress-security.com/other-projects/portfolio/images/projects/security-service--large.jpg" alt="Security Service">	</picture>	<ul class="project-preview__description description--flex">	<li><a href="https://www.congress-security.com">Take a Look</a></li>	<li><a href="https://codepen.io/Said_FD/pen/zBJQzK">Code on CodePen</a></li>	<li><a href="https://github.com/Said-FD/Congress-Security-Landing-Page">Repository on GitHub</a></li>	</ul>	</div>	<div class="project-preview display-none">	<picture>
<!--	<source sizes="1920px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-form--large.jpg 1920w, https://www.congress-security.com/other-projects/portfolio/images/projects/animated-form--large-hi-dpi.jpg 3840w" media="(min-width: 1380px)">	<source sizes="1380px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-form--medium.jpg 1380w, https://www.congress-security.com/other-projects/portfolio/images/projects/animated-form--medium-hi-dpi.jpg 2760w" media="(min-width: 640px)">	<img sizes="640px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-form--large.jpg 640w, https://www.congress-security.com/other-projects/portfolio/images/projects/animated-form--large-hi-dpi.jpg 1280w" alt="CSS3 Animated Form"> -->	<img src="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-form--large.jpg" alt="CSS3 Animated Form">	</picture>	<ul class="project-preview__description description--flex">	<li><a href="https://said-fd.github.io/Animated-Registration-Form">Take a Look</a></li>	<li><a href="https://codepen.io/Said_FD/pen/RazXVb">Code on CodePen</a></li>	<li><a href="https://github.com/Said-FD/Animated-Registration-Form">Repository on GitHub</a></li>	</ul>	</div>	<div class="project-preview display-none">	<picture>
<!--	<source sizes="1920px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-carousel--large.jpg 1920w, https://www.congress-security.com/other-projects/portfolio/images/projects/animated-carousel--large-hi-dpi.jpg 3840w" media="(min-width: 1380px)">	<source sizes="1380px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-carousel--medium.jpg 1380w, https://www.congress-security.com/other-projects/portfolio/images/projects/animated-carousel--medium-hi-dpi.jpg 2760w" media="(min-width: 640px)">	<img sizes="640px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-carousel--large.jpg 640w, https://www.congress-security.com/other-projects/portfolio/images/projects/animated-carousel--large-hi-dpi.jpg 1280w" alt="CSS3 Animated Carousel"> -->	<img src="https://www.congress-security.com/other-projects/portfolio/images/projects/animated-carousel--large.jpg" alt="CSS3 Animated Carousel">	</picture>	<ul class="project-preview__description description--flex">	<li><a href="https://said-fd.github.io/CSS-Animated-Carousel">Take a Look</a></li>	<li><a href="https://codepen.io/Said_FD/pen/YWpLag">Code on CodePen</a></li>	<li><a href="https://github.com/Said-FD/CSS-Animated-Carousel">Repository on GitHub</a></li>	</ul>	</div>	<div class="project-preview">	<picture>
<!--	<source sizes="1920px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/test-landing--large.jpg 1920w, https://www.congress-security.com/other-projects/portfolio/images/projects/test-landing--large-hi-dpi.jpg 3840w" media="(min-width: 1380px)">	<source sizes="1380px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/test-landing--medium.jpg 1380w, https://www.congress-security.com/other-projects/portfolio/images/projects/test-landing--medium-hi-dpi.jpg 2760w" media="(min-width: 640px)">	<img sizes="640px" srcset="https://www.congress-security.com/other-projects/portfolio/images/projects/test-landing--large.jpg 640w, https://www.congress-security.com/other-projects/portfolio/images/projects/test-landing--large-hi-dpi.jpg 1280w" alt="Responsive Test Landing Page"> -->	<img src="https://www.congress-security.com/other-projects/portfolio/images/projects/test-landing--large.jpg" alt="Responsive Test Landing Page">	</picture>	<ul class="project-preview__description description--flex">	<li><a href="https://said-fd.github.io/Take-landing-htmlAcademy">Take a Look</a></li>	<li><a href="https://codepen.io/Said_FD/pen/ezdgmN">Code on CodePen</a></li>	<li><a href="https://github.com/Said-FD/Take-landing-htmlAcademy">Repository on GitHub</a></li>	</ul>	</div>	</div>	</section>	<section id="about-me" class="about-me">	<h2 class="about-me__title">About Me</h2>	<article class="about-me__content">	<h2 class="about-me__content__title">About Me</h2>	<p>Hi, my name is Maxim.</p>	<p>I like clear responsive designs and I stand for semantics, functional minimalism and accessibility for everyone on any device.</p>	<p>Persistence, responsibility, fairness and punctuality - are my strengths.</p>	<p>If you have any questions, propositions or, maybe, interesting job offer - feel free to Contact Me.</p>	</article>	</section>	<section id="contacts" class="contacts">	<h2 class="contacts__title">Contacts</h2>	<div class="contacts__content--flex">	<div class="contacts__content__item">	<p>Email: &nbsp; <span>[email protected]</span></p>	<p>Modile &amp; Viber: &nbsp; <span>+380 99 170 6494</span></p>	</div>	<div class="contacts__content__item">	<p>Skype: &nbsp; <span>nato.shop</span></p>	<p>Telegram: &nbsp; <a href="https://telegram.me/Said_FD"><span>@Said_FD</span></a></p>	</div>	</div>	</section>	</main>	<footer class="footer footer__main">	<div class="footer__wrapper--flex">	<div class="footer__copyright">	<span>&copy; 2016 &nbsp; Max Konoval</span>	</div>	<ul class="footer__profiles profiles--flex">	<li class="profile__link">	<a href="https://github.com/Said-FD">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/github-logo-200.png" alt="Go to GitHub Profile">	</a>	</li>	<li class="profile__link">	<a href="https://codepen.io/Said_FD">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/codepen-logo-200.png" alt="Go to CodePen Profile">	</a>	</li>	<li class="profile__link">	<a href="https://www.linkedin.com/in/maxim-konoval-89454583">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/linkedin-logo-200.png" alt="Go to LinkedIn Profile">	</a>	</li>	<li class="profile__link">	<a href="https://www.facebook.com/airsoft.nato">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/facebook-logo-200.png" alt="Go to My Facebook Profile">	</a>	</li>	<li class="profile__link">	<button type="button" class="email-me modal-toggler"></button>	</li>	</ul>	</div>	</footer>	<!-- Modal -->	<div id="modal" class="modal">	<div class="modal__inner">	<h2 class="modal__title"><img class="modal__title-icon" src="https://www.congress-security.com/other-projects/portfolio/images/icons/envelope-black-200.png" alt="Letter Icon"> Get in <strong>Touch</strong></h2>	<p class="modal__description">If you have any questions, propositions or, maybe, interesting job offer - feel free to email me	<br>OR<br>	You can contact me in <a data-scroll href="#contacts" class="modal__description__link modal-toggler">comfortable for you</a> way	</p>	<form method="post" id="form" class="form" name="form" action="">	<fieldset form="form">	<legend>Leave a message for me</legend>	<input type="email" name="email" form="form" placeholder="Enter your email" title="Please enter a valid email" required>	<textarea rows="3" maxlength="200" name="text" form="form" placeholder="Enter your message (200 symbols max)" title="Please enter your message" required></textarea>	</fieldset>	<input type="submit" name="submit" form="form" value="Send Email">	</form>	<ul class="modal__profiles profiles--flex">	<li class="profile__link">	<a href="https://github.com/Said-FD">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/github-logo-200.png" alt="Go to GitHub Profile">	</a>	</li>	<li class="profile__link">	<a href="https://codepen.io/Said_FD">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/codepen-logo-200.png" alt="Go to CodePen Profile">	</a>	</li>	<li class="profile__link">	<a href="https://www.linkedin.com/in/maxim-konoval-89454583">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/linkedin-logo-200.png" alt="Go to LinkedIn Profile">	</a>	</li>	<li class="profile__link">	<a href="https://www.facebook.com/airsoft.nato">	<img src="https://www.congress-security.com/other-projects/portfolio/images/icons/facebook-logo-200.png" alt="Go to My Facebook Profile">	</a>	</li>	</ul>	</div>	<div class="modal__close modal-toggler">X</div>	</div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js'></script>
<script src='https://www.congress-security.com/other-projects/portfolio/scripts/smooth_scroll.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

My Portfolio - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
/* Reset Styles */
* {	margin: 0;	padding: 0;	box-sizing: border-box;	border: 0;	outline: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
}
ol,
ul {	list-style: none;
}
a {	text-decoration: none;
}
:focus {	outline: 0;
}
/* Reset END */
/* General Styles */
body {	position: relative;	max-width: 1920px;	margin: 0 auto;	line-height: 1.3;	font-family: Roboto, sans-serif;
}
[class$='--flex'] {	display: flex;	flex-flow: row wrap;	justify-content: center;
}
/* Flexbox Backup for IE9+ */
.no-flexbox [class$='--flex'] {	margin: 0 auto;	text-align: center;
}
.no-flexbox [class$='--flex']::after {	content: "";	clear: both;	display: table;
}
.no-flexbox [class$='--flex'] .menu__item,
.no-flexbox .footer__profiles .profile__link {	display: inline-block;
}
.no-flexbox .project-preview {	float: left;
}
.no-flexbox .project-preview__description {	padding-top: 8%;
}
.no-flexbox .project-preview:first-of-type .project-preview__description {	padding-top: 15%;
}
.no-flexbox .contacts__content__item,
.no-flexbox .footer__copyright,
.no-flexbox .footer__profiles {	display: inline-block;	width: 49%;
}
/* End Flexbox Backup */
section,
.header__main,
.footer__main {	padding-right: .5rem;	padding-left: .5rem;
}
section {	padding-top: 3rem;	padding-bottom: 2rem;
}
h2 {	text-align: center;	font-size: 1.8rem;	font-weight: 300;	color: #222;
}
p {	line-height: 1.65;	font-size: 1.2rem;	font-weight: 400;	color: #333;
}
img {	width: 100%;	height: auto;
}
/* Main Header Styles */
.header__main {	position: relative;	padding-top: 2rem;	padding-bottom: .25rem;	background: #252527 url('https://www.congress-security.com/other-projects/portfolio/images/bg/1.jpg') no-repeat top center;	background-size: cover;
}
h1 {	text-align: center;	font-size: 2rem;	font-weight: 400;	color: #fff;
}
.menu {	padding-top: 1rem;
}
.menu__item {	margin: .5rem 2rem;	text-transform: uppercase;
}
.menu__item a,
.menu__item a:visited,
.profile__link a,
.profile__link a:visited {	color: #ccc;
}
.menu__item a:hover,
.menu__item a:focus {	color: #fff;
}
.header__profiles {	justify-content: flex-end;	margin-top: 10px;	border-top: 2px solid #555;	transition: all .3s ease-out;
}
.header__profiles .profile__link {	margin: 2px .5rem;
}
.header__profiles .profile__link:not(.profile__link__button) {	padding-top: 7px;	font-weight: 300;
}
.header__profiles .profile__link a:hover,
.header__profiles .profile__link a:focus {	color: #fff;
}
.email-me {	cursor: pointer;
}
.header__profiles .email-me {	margin-top: 5px;	padding: 0 5px 2px;	text-transform: lowercase;	color: #ccc;	background: transparent;	border: 2px solid #ccc;	border-radius: 5px;
}
.header__profiles .email-me:hover,
.header__profiles .email-me:focus {	color: #fff;	border: 2px solid #fff;
}
/* My Projects - Section-1 Styles */
.my-projects {	position: relative;	padding-top: 2.5rem;	background: #ddd;
}
.my-projects__title {	padding-bottom: 1rem;
}
.project-preview {	position: relative;	width: 33.33%;	transition: all .25s ease;
}
.project-preview img {	height: 100%;
}
.project-preview__description {	position: absolute;	z-index: -1;	visibility: hidden;	overflow: hidden;	top: 0;	right: 0;	bottom: 0;	left: 0;	text-align: center;	transition: all .5s ease;
}
.description--flex {	flex-flow: column nowrap;
}
.project-preview__description li {	visibility: hidden;	overflow: hidden;	padding: .5rem .4rem;	font-size: 1.5rem;	font-weight: 400;	transform: scale(1.1);	transform-origin: center;	transition: all .15s ease;
}
.project-preview__description li a,
.project-preview__description li a:visited {	color: #fff;
}
.project-preview:hover .project-preview__description,
.project-preview:focus .project-preview__description {	z-index: 1;	visibility: visible;	background: rgba(187, 187, 187, .9);
}
.project-preview:hover .project-preview__description li,
.project-preview:focus .project-preview__description li {	visibility: visible;	transform: scale(1);
}
/*.projects--flex .project-preview picture img {	animation: project-preview--scale-back linear .3s forwards;	transform-origin: right bottom;
}
.projects--flex .project-preview:hover picture img,
.projects--flex .project-preview:focus picture img {	animation: project-preview--scale linear .3s forwards;	transform-origin: right bottom;
}
@keyframes project-preview--scale {	from {	transform: scale(1);	}	to {	transform: scale(.3);	}
}
@keyframes project-preview--scale-back {	from {	transform: scale(.3);	}	to {	transform: scale(1);	}
}*/
/* About Me - Section-2 Styles */
.about-me__content__title {	position: absolute;	top: 0;	left: -9999px;	margin: 0;	padding: 0;
}
.about-me__content,
.contacts__content--flex,
.footer__wrapper--flex {	position: relative;	width: 85%;	margin: 0 auto;
}
.about-me__title,
.contacts__title {	padding-bottom: 3rem;
}
/* Contacts - Section-3 Styles */
.contacts__content--flex {	justify-content: space-between;
}
.contacts__content__item span {	font-weight: 300;
}
.contacts__content__item a,
.contacts__content__item a:visited {	color: #006ec3;
}
/* Main Footer Styles */
.footer__main {	padding-top: 1.5rem;	padding-bottom: .3rem;	background: #252527 url('https://www.congress-security.com/other-projects/portfolio/images/bg/1.jpg') no-repeat bottom center;	background-size: cover;
}
.footer__wrapper--flex {	justify-content: space-between;	height: 3.5rem;
}
.footer__copyright {	position: relative;	width: 240px;	height: 40px;	text-align: right;	font-weight: 300;	color: #fff;
}
.footer__copyright span {	position: absolute;	top: 50%;	left: 0;	transform: translateY(-50%);
}
.footer__profiles.profiles--flex {	justify-content: space-between;	width: 240px;	height: 40px;
}
.footer__profiles .profile__link {	width: 40px;	height: 40px;	opacity: .7;
}
.footer__profiles .profile__link:hover,
.footer__profiles .profile__link:focus {	opacity: 1;
}
.footer__profiles .email-me {	width: 37px;	height: 37px;	margin-top: 1px;	background: url('https://www.congress-security.com/other-projects/portfolio/images/icons/envelope-white-200.png') no-repeat center;	background-size: 60%;	border: 4px solid #fff;	border-radius: 100%;
}
.no-flexbox .footer__profiles .email-me {	width: 39px;	height: 39px;
}
/* Modal Email Form */
.modal {	position: fixed;	top: 0;	right: 0;	bottom: 0;	left: 0;	z-index: -5;	opacity: 0;	visibility: hidden;	background: rgba(225, 225, 225, .95);	transform: scale(1.2);	transition: all .3s ease-out;
}
.modal--is-visible {	z-index: 5;	opacity: 1;	visibility: visible;	transform: scale(1);
}
.modal__inner {	position: absolute;	top: 50%;	left: 50%;	width: 80%;	transform: translate(-50%, -50%);
}
.modal__title {	font-size: 3rem;
}
.modal__title-icon {	position: relative;	top: 3px;	width: 50px;	opacity: .7;
}
.modal__description {	text-align: center;	line-height: 1.55;	font-size: 1.3rem;	font-weight: 300;
}
.modal__description__link {	opacity: .7;	font-weight: 700;	color: #000;
}
.form {	width: 100%;	margin: 0 auto;	text-align: center;
}
legend {	visibility: hidden;
}
input,
textarea {	display: block;	width: 90%;	margin: 0 auto 1rem;
}
input {	padding: 0 1rem;	line-height: 2.5;
}
input[type=submit] {	opacity: .8;	text-transform: uppercase;	font-weight: 700;	color: #fff;	background: #000;
}
textarea {	padding: 1rem;	resize: none;
}
.modal__profiles {	position: absolute;	display: none;	opacity: 0;	transform: scale(1.2);
}
.modal__profiles .profile__link {	width: 60px;	height: 60px;	margin: 1rem .5rem;	opacity: .8;	background: #000;	border-radius: 100%;
}
.modal__profiles .profile__link img {	width: 70px;	height: 70px;	margin-top: -4px;	margin-left: -4px;
}
.modal__close {	position: absolute;	top: 15px;	right: 20px;	z-index: 10;	opacity: .7;	font-size: 2rem;	transform: scaleX(1.2);	transform-origin: 100% 0;	color: #000;	cursor: pointer;
}
.modal__description__link:hover,
.modal__description__link:focus,
input[type=submit]:hover,
input[type=submit]:focus,
.modal__profiles .profile__link:hover,
.modal__profiles .profile__link:focus,
.modal__close:hover,
.modal__close:focus {	opacity: .9;
}
/* Media Queries */
@media (min-width: 1600px) {	section {	padding-top: 6rem;	padding-bottom: 4.5rem;	}	.header__profiles.profiles--flex {	position: absolute;	right: 10%;	bottom: 7px;	border-top: none;	}	.project-preview__description li {	font-size: 1.7rem;	}	.about-me__content,	.contacts__content--flex,	.footer__wrapper--flex {	width: 850px;	}	input,	textarea {	width: 30%;	}
}
@media (min-width: 1366px) {	.modal__profiles {	display: flex;	position: relative;	opacity: 1;	transform: scale(1);	transition: all .3s ease-out;	}
}
@media (min-width: 900px) and (max-width: 1599px) {	section {	padding-top: 4.5rem;	padding-bottom: 3.5rem;	}	.menu__item {	margin: .5rem 3rem;	}	.header__profiles.profiles--flex {	position: absolute;	top: 50%;	right: 1.5rem;	flex-flow: column nowrap;	margin-top: 0;	border-top: none;	transform: translateY(-50%);	}	.header__profiles .profile__link:not(.profile__link__button) {	padding-top: 0;	}	.about-me__content,	.contacts__content--flex,	.footer__wrapper--flex {	width: 680px;	}	.modal__inner {	width: 50%;	}	input,	textarea {	width: 60%;	}
}
@media (max-width: 900px) {	.no-flexbox .header__profiles .profile__link {	display: inline-block;	}	.about-me__title,	.contacts__title {	padding-bottom: 2rem;	}	.project-preview {	width: 50%;	}	.no-flexbox .contacts__content__item {	width: 100%;	}
}
@media (max-width: 640px) {	.my-projects {	padding-top: 2.2rem;	height: 10%;	}	.project-preview {	width: 100%;	}	.project-preview.hide-mobile {	display: none;	}	.project-preview__description li {	font-size: 1.7rem;	}	.about-me__content {	width: 90%;	}	.contacts__content--flex,	.footer__wrapper--flex {	justify-content: center;	width: 100%;	}	.contacts__content__item {	width: 100%;	text-align: center;	}
}
@media (max-width: 515px) {	.menu__item {	margin: .5rem 1rem;	}	.profiles--flex {	justify-content: center;	}	.about-me__content,	.modal__inner {	width: 95%;	}	.footer__wrapper--flex {	height: 5.5rem;	padding: 0 .6rem;	}	.footer__copyright {	order: 1;	text-align: center;	}	.footer__copyright span {	position: relative;	transform: translateY(0);	}	.no-flexbox .footer__copyright {	width: 100%;	margin-top: 40px;	}	.no-flexbox .footer__profiles {	position: absolute;	top: 0;	left: 0;	width: 100%;	margin: 0 auto;	}	.modal__title {	font-size: 1.8rem;	}	.modal__title-icon {	top: 2px;	width: 30px;	}	.modal__description {	text-align: center;	line-height: 1.3;	font-size: 1.1rem;	font-weight: 300;	}
}
@media (max-width: 420px) {	section {	padding-top: 2rem;	padding-bottom: 1.5rem;	}	.header__profiles .profile__link.profile__link__button {	order: -1;	flex-basis: 100%;	margin: 10px 0 0;	text-align: center;	}	.project-preview__description li {	font-size: 1.3rem;	}
}
@media (max-width: 395px) {	.header__main {	padding-top: 1rem;	}	h1,	h2 {	font-size: 1.5rem;	}	.menu {	padding-top: .5rem;	}	.about-me__content p,	.contacts__content__item p {	line-height: 1.6;	font-size: 1.1rem;	}
}
@media (max-width: 325px) {	.about-me__title,	.contacts__title {	padding-bottom: 1rem;	}	.about-me__content p,	.contacts__content__item p {	line-height: 1.4;	font-size: .9rem;	}
}

My Portfolio - Script Codes JS Codes

// Smooth Scroll to Anchor
// smoothScroll.init();
// Modal Form Events
var modal = document.querySelector('.modal');
var modalToggle = document.querySelectorAll('.modal-toggler');
modalToggle.forEach(clickEvent);
function clickEvent(item) {	item.addEventListener('click', function() {	modal.classList.toggle('modal--is-visible');	return false;	});
}
document.addEventListener('click', function(e) {	if(e.target === modal) {	modal.classList.remove('modal--is-visible');	}
});
document.addEventListener('keyup', function(e) {	if(e.keyCode === 27) {	modal.classList.remove('modal--is-visible');	}
});
My Portfolio - Script Codes
My Portfolio - Script Codes
Home Page Home
Developer Maxim Konoval
Username Said_FD
Uploaded September 16, 2022
Rating 3
Size 6,798 Kb
Views 28,336
Do you need developer help for My Portfolio?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maxim Konoval (Said_FD) Script Codes
Name
Tactical Monkey
CS-Service Landing Page
Structure Test
Brutal Responsive Landing Page Prototype
Fully Flexbox Landing Page
Animated Carousel on CSS with Minimal JS
Vanilla CSS Switcher
Animated Form
CSS Transforms Test
SVG Scalable Text
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!