Project van de cursus

My project for course: HTML, CSS and JavaScript for Beginners

My project for course: HTML, CSS and JavaScript for Beginners

van Kobi Berlinger @kobiberlinger

293
1
1

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Portfolio</title>
<link rel="stylesheet" href="./resource/style.css">

<section id="about" class="about">
<div class="empty"></div>
<article>
<div class="title"><h1>Creative Developer</h1></div>
<div class="description"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat consequuntur explicabo blanditiis molestias aliquid ut totam, animi fugiat, fugit aspernatur quidem eligendi, nemo hic? Eum, voluptatem! Harum deserunt laborum cumque.</p></div>
</article>
</section>

<section id="services" class="service service-html sticky">
<article>
<figure>
<img src="./resource/img/Rectangle 10.png" width="200px"/>
</figure>
<div class="text">
<h2>HTML</h2>
<p>Sed ut👋 perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
<a href="https://www.wikipedia.org/">More About HTML</a>
</div>
</article>
</section>

<section class="service service-css sticky">
<article>
<figure>
<img src="./resource/img/Polygon 1.png" width="200px"/>
</figure>
<div class="text">
<h2>CSS</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
<a href="https://www.wikipedia.org/">More About CSS</a>
</div>
</article>
</section>

<section class="service service-js sticky">
<article>
<figure>
<img src="./resource/img/Polygon 2.png" width="200px"/>
</figure>
<div class="text">
<h2>JS</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
<a href="https://www.wikipedia.org/">More About JS</a>
</div>
</article>
</section>

<section id="contact" class="contant full-screen">
<a href="mailto:yakkovberli@gmail.com">yakkovberli@gmail.com</a>
</section>

let figureElement = document.querySelectorAll('.service figure');

window.addEventListener( 'mousemove', handleMouseMove);

function handleMouseMove( event ) {

emptyElement.style.flexBasis = event.clientX + 'px';
titleElement.style.flexBasis = event.clientY / 2 + 'px';

figureElement.forEach( function( element ) {
element.style.flexBasis = window.innerWidth - event.clientX + 'px';
} );

}

</script>

</body>
</html>

* {
box-sizing: border-box;
}

html, body {
--border-radius: 100px;
--blue:#1c47ff;
--pink:#d6a3fb;
--green:#d0ff94;
--grey:#e5e5e5;
--gutter: 3.125vw 6.25vw;

margin: 0;
padding: 0;
background: black;
color: white;
font-size: 30px;
font-family: 'syne', sans-serif;
}

h1 {
font-size: 70px;
line-height: 1em;
margin: 0px;
}

h2 {
font-size: 60px;
margin: 0;
}

a {
color: white;
text-decoration: none;
}

section {
position: relative;
display: flex;
width: 100%;
height: calc(100vh - 100px);
top: 100px;
z-index: 2;
}

section.sticky {
position: sticky;
margin-top: 100px;
}

section.full-screen {
height: 100vh;
top: 0;
margin-top: 0;
z-index: 3;
}

/*Navigation*/

nav {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
font-size: 20px;
z-index: 1;
}

nav ul {
display: flex;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

nav ul li {
list-style: none;
margin-left: 45px;
}

nav ul li a {
color: white;
font-family: "Space Mono", monospace;
}

/*about section*/

section.about .empty {
flex-basis: 37.5vw;
background: var(--grey);
border-radius: var(--border-radius);
transition: flex-basis 1s cubic-bezier(0,.89,.37,.99);
}

section.about article {
flex: 1;
display: flex;
flex-direction: column;
}

section.about article .title {
flex: 1;
display: flex;
align-items: flex-end;
background: var(--blue);
border-radius: var(--border-radius);
padding: var(--gutter);
transition: flex-basis 1s cubic-bezier(0,.89,.37,.99);
}

section.about article .description {
flex: 1;
display: flex;
align-items: center;
background: var(--pink);
border-radius: var(--border-radius);
padding: var(--gutter);
color: black;
}

/*service section*/

section.service article {
display: flex;
width: 100%;
}

section.service figure {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 56.25vw;
margin: 0;
background: var(--green);
border-radius: var(--border-radius);
max-width: 62.5vw;
}

section.service figure img {
width: 50%;
}

section.service .text {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
background: #1f1a1c;
padding: var(--gutter);
border-radius: var(--border-radius);

}

section.service .text a {
font-family: "Space Mono", monospace;
}

/*service section animation*/

section.service.service-html figure img {
animation-name: float;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

section.service.service-css figure img {
animation-name: float;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

section.service.service-js figure img {
animation-name: spin;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

@keyframes float {
0% {
transform: translateY(-5%);
}

100% {
transform: translateY(5%);
}
}

@keyframes spin {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}

/*service section overrrides*/

section.service.service-html figure {
background: var(--green);
}

section.service.service-html .text h2,
section.service.service-html .text a {
color: var(--pink);
}

section.service.service-css figure {
background: var(--blue);
}

section.service.service-css .text h2,
section.service.service-css .text a {
color: var(--green);
}

section.service.service-js figure {
background: var(--pink);
}

section.service.service-js .text h2,
section.service.service-js .text a {
color: var(--blue);
}

/*contact section*/

section.contant {
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
background: linear-gradient(var(--blue), var(--green) 60%, var(--pink) 70%, var(--grey));
}

section.contant a {
font-size: 70px;
color: #000000;
font-weight: bold;
transition: filter 2s ease-in-out;
will-change: filter;
}

section.contant a:hover {
filter: blur(20px);
}

/*responsive*/

@media only screen and (max-width: 768px) {
html, body {
border-radius: 50px;
--gutter: 6.25vw;
}

h1 {
font-size: 60px;
}

h1 {
font-size: 40px;
}

nav ul li {
margin-left: 25px;
}

section.service article {
flex-direction: column;
}

section.service figure {
flex-basis: 25vh;
}

section.service figure img {
width: 40%;
}

section.contant a {
font-size: 50px;
transform: rotate(90deg);
}

}