CMT3 - Opdracht 07 - Flickity
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 - 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();
}
Developer | Samuel |
Username | SamuelVDP |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 3,349 Kb |
Views | 16,192 |
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!
Name | Size |
CMT3 - Herhalingsoefening 01 | 2,366 Kb |
IT3 - Opdracht 01 - Drop The Needle | 6,566 Kb |
IT3 - Opdracht 04 - Responsive Weekplanner | 3,898 Kb |
IT2 - Vault | 2,673 Kb |
IT3 - Opdracht 05 - Battery API | 3,894 Kb |
CMT3 - Opdracht 02 - OBEY | 5,499 Kb |
IT3 - Opdracht 06 - PureCSS | 5,220 Kb |
CMT3 - Herhalingsoefening 02 | 2,246 Kb |
IT2 - Record Player | 2,907 Kb |
CMT3 - Opdracht 06 - Isotope | 3,686 Kb |
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!
Name | Username | Size |
Header | Er40 | 1,542 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Css3 loader | Clknap | 2,391 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!