CMT3 - Opdracht 07 - Flickity

Developer
Size
3,349 Kb
Views
16,192

How do I make an cmt3 - opdracht 07 - flickity?

What is a cmt3 - opdracht 07 - flickity? How do you make a cmt3 - opdracht 07 - flickity? This script and codes were developed by Samuel on 10 November 2022, Thursday.

CMT3 - Opdracht 07 - Flickity Previews

CMT3 - Opdracht 07 - Flickity - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CMT3 - Opdracht 07 - Flickity</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://unpkg.com/[email protected]/dist/flickity.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1><span>Samuel</span></h1> <nav> <ul> <li><a href="#" data-section="about">About.</a></li> <li><a href="#" data-section="works">Works.</a></li> </ul> </nav>
</header>
<section id="about"> <p>A passionate student in <strong>design and development</strong> at AP college in Antwerp. My expertise lies mainly in front-end development, but I am also interested in <strong>design</strong> and back-end. I am able to write in <i>HTML</i>, <i>CSS/SaSS</i> and <i>vanilla JS</i>. I would love to add techniques like <i>NodeJS</i>, <i>Angular</i> and <i>PHP</i> to that list soon.</p>
</section>
<section id="works"> <main> <div class="carousel" data-flickity> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> </div> </main>
</section> <script src='https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CMT3 - Opdracht 07 - Flickity - Script Codes CSS Codes

/* body */
* { box-sizing: border-box;
}
html, body { height: 100%;
}
body { background-color: #141414; color: #fff; font-family: 'Helvetica Neue', sans-serif; font-size: 62.5%;
}
/* header */
header { margin: 40px 20%; position: absolute; width: 60%; z-index: 100;
}
h1 { background: url('https://i.imgsafe.org/1f0a9b1eec.png') no-repeat center center; background-size: contain; float: left; height: 50px; width: 70px;
}
h1 span { display: none;
}
nav ul { font-size: 1.4em; letter-spacing: 0.03em; margin-top: 18px;
}
nav ul li { display: inline; float: right; margin-right: 3%;
}
nav ul li:first-child { margin-right: 0;
}
nav ul li a { color: #fff; text-decoration: none; -webkit-transition: all .6s; transition: all .6s;
}
nav ul li a:hover { color: #363636;
}
/* about */
section#about { background-color: #141414; display: none; height: 100%; position: absolute; -webkit-transition: all .6s; transition: all .6s; width: 100%; z-index: 99;
}
p { font-size: 1.4em; font-weight: 200; height: 92px; letter-spacing: 0.03em; line-height: 1.7em; margin: 50vh auto 0 auto; text-align: center; top: -46px; position: relative; width: 532px;
}
strong { font-weight: 500;
}
i { font-style: italic;
}
/* flickity */
.carousel-cell { background-size: cover; box-shadow: 0px 0px 20px 5px rgba(10, 10, 10, 0.5); counter-increment: carousel-cell; -webkit-filter: grayscale(1); filter: grayscale(1); margin-right: 10%; opacity: 0.8; -webkit-transition: all .6s; transition: all .6s; width: 50%;
}
.carousel-cell:hover { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1;
}
.flickity-prev-next-button { background: 0; height: 14px; width: 14px; top: 110.5%;
}
.flickity-prev-next-button:hover { background: 0;
}
.flickity-prev-next-button.previous { left: 24.5%;
}
.flickity-prev-next-button.next { right: 24.5%;
}
.flickity-prev-next-button .arrow { fill: #fff;
}
.flickity-page-dots { bottom: -10.7%;
}
.flickity-page-dots .dot { background-color: #fff; border-radius: 0; height: 1px; margin: 0; width: 11.5%;
}
@media screen and (max-width: 750px) { header { margin-top: 25px; } h1 { width: 56px; } nav ul { font-size: 1.1em; }
}

CMT3 - Opdracht 07 - Flickity - Script Codes JS Codes

var carouselCell = document.getElementsByClassName('carousel-cell');
function main() { var anchors = document.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i++) { anchors[i].onclick = function() { var data = this.getAttribute('data-section'); var sections = document.getElementsByTagName('section'); for (var i = 0; i < sections.length; i++) { sections[i].style.display = 'none'; } document.querySelector('#' + data).style.display = 'block'; } } var images = [ 'https://i.imgsafe.org/1d68ce80cf.jpg', 'https://i.imgsafe.org/1d5e56f6e4.png', 'https://i.imgsafe.org/1d74989f4f.png', 'https://i.imgsafe.org/1d5e6804e0.png' ]; for (var i = 0; i < carouselCell.length; i++) { carouselCell[i].style.backgroundImage = 'url(' + images[i] + ')'; }
}
function controlHeight() { var resCarousel; for (var i = 0; i < carouselCell.length; i++) { var carouselControl = window.getComputedStyle(carouselCell[i]); var carouselWidth = carouselControl.width; if (carouselWidth.length === 5) { resCarousel = carouselWidth.substr(0, 3); } else if (carouselWidth.length === 6) { resCarousel = carouselWidth.substr(0, 4); } else if (carouselWidth.length === 9) { resCarousel = carouselWidth.substr(0, 7); } else if (carouselWidth.length === 10) { resCarousel = carouselWidth.substr(0, 8); } carouselCell[i].style.height = (resCarousel * 0.57) + 'px'; carouselCell[i].style.marginTop = ((window.innerHeight - (resCarousel * 0.57)) / 2) + 'px'; }
}
controlHeight();
window.onresize = function() { controlHeight();
}
window.onload = function() { main();
}
CMT3 - Opdracht 07 - Flickity - Script Codes
CMT3 - Opdracht 07 - Flickity - Script Codes
Home Page Home
Developer Samuel
Username SamuelVDP
Uploaded November 10, 2022
Rating 3
Size 3,349 Kb
Views 16,192
Do you need developer help for CMT3 - Opdracht 07 - Flickity?

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!

Samuel (SamuelVDP) Script Codes
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!