IT 3- Opdracht8
How do I make an it 3- opdracht8?
What is a it 3- opdracht8? How do you make a it 3- opdracht8? This script and codes were developed by Karlien Huygels on 29 October 2022, Saturday.
IT 3- Opdracht8 Previews
IT 3- Opdracht8 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IT 3- Opdracht8</title> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="/path/to/isotope.pkgd.min.js"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body> <input type="checkbox" id="drawer-toggle" name="drawer-toggle"/> <label for="drawer-toggle" id="drawer-toggle-label"></label> <header>KARLIEN HUYGELS</header> <div id="drawer"class="button-group filters-button-group"> <button class="button is-checked" data-filter="*">show all</button> <button class="button bwebdesign" data-filter=".webdesign">Webdesign</button> <button class="button bvideo" data-filter=".video">Video</button> <button class="button c4d" data-filter=".c4d">3D</button> <button class="button bother" data-filter=".other">Other</button> </div> <div id="page-content"> <div class="grid"> <div class="grid-item other" data-category="other"> <img src="https://68.media.tumblr.com/c641aa15daceaac640665d80262d4a9f/tumblr_oglggrAIq71vso4dpo3_1280.png"> </div> <div class="grid-item video" data-category="video"> <iframe src="https://www.youtube.com/embed/BW8_6e4nMyk" frameborder="0" allowfullscreen></iframe> </div> <div class="grid-item webdesign" data-category="webdesign"> <img src="https://68.media.tumblr.com/056f5681931bd852295e69571f769a3b/tumblr_ofz0f1FzeX1vso4dpo1_1280.jpg"> </div> <div class="grid-item other" data-category="other"> <img src="https://68.media.tumblr.com/b619fe44627f6e2676db61458902afd2/tumblr_of8zqbBeYw1vso4dpo2_1280.png"> </div> <div class="grid-item c4d" data-category="c4d"> <img src="https://68.media.tumblr.com/3b2f8928bc0671a6625a285330801351/tumblr_oglgbry0su1vso4dpo3_400.jpg"> </div> <div class="grid-item webdesign" data-category="webdesign"> <img src="https://s16.postimg.org/o9pfstg8l/opdracht8_01.jpg"> </div> <div class="grid-item other" data-category="other"> <img src="https://68.media.tumblr.com/2be81c6fe80df0ea67a59f82a1d7abe4/tumblr_ob6wxt0j3f1vso4dpo2_1280.png"> </div> <div class="grid-item other" data-category="other"> <img src="https://68.media.tumblr.com/e273b0ef0743b7671ecb452a31daa018/tumblr_oec1u6JRaX1vso4dpo1_1280.jpg"> </div> <div class="grid-item webdesign" data-category="webdesign"> <img src="https://s18.postimg.org/5gf9axnvd/opdracht8_02.jpg"> </div> </div> </div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/pure.js/2.83/pure.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/isotope.pkgd.js'></script>
<script src='http://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
IT 3- Opdracht8 - Script Codes CSS Codes
/*GENERAL*/
html,body { height: 100%; overflow: hidden; font-family: 'Open Sans', sans-serif;
}
img, iframe{ width: 100%;
}
iframe{ height: 320px;
}
/*FILTER BUTTONS*/
.button { display: inline-block; padding: 10px 18px; margin-bottom: 10px; background-color: white; border: 2px solid lightgrey; color: lightgrey; font-family: sans-serif; font-size: 16px; font-weight: bold; cursor: pointer; text-transform: uppercase; border-radius: 5%;
}
.button:hover { background-color: white; border-color: mediumaquamarine; transition: all 0.25s ease; color: mediumaquamarine;
}
.button:active,
.button.is-checked { background-color: mediumaquamarine; border-color: mediumaquamarine; color: white;
}
.button:active { background-color: white; border-color: white; color: white;
}
/*ISOTOPE*/
.grid{ width: 100%; margin: auto;
}
.grid:after { content: ''; display: block; clear: both;
}
.grid-item{ float: left; width: 32%; margin: 15px 0px 0px 15px;
}
/*DRAWER*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* adds animation for all transitions */ -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; margin: 0; padding: 0; -webkit-text-size-adjust: none;
}
/* gets the actual input out of the way;
we're going to style the label instead */
#drawer-toggle { position: absolute; opacity: 0;
}
#drawer-toggle-label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 0px; height:50px; width: 50px; display: block; position: fixed; background: rgba(255,255,255,.0); z-index: 1;
}
/* adds our "hamburger" menu icon */
#drawer-toggle-label:before { content: ''; display: block; position: absolute; height: 2px; width: 24px; background: mediumaquamarine; left: 13px; top: 18px; box-shadow: 0 6px 0 mediumaquamarine, 0 12px 0 mediumaquamarine;
}
header { width: 100%; position: fixed; left: 0px; padding: 10px 10px 10px 50px; font-size: 30px; line-height: 30px; z-index: 0; font-family: 'Oswald', sans-serif;
}
/* drawer menu pane - note the 0px width */
#drawer { position: fixed; top: 0; left:-300px; height: 100%; width: 300px; background: gainsboro; overflow-x: hidden; overflow-y: scroll; padding: 20px; -webkit-overflow-scrolling: touch;
}
/* actual page content pane */
#page-content { margin-left: 0px; margin-top: 50px; width: 100%; height: calc(100% - 50px); overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; padding: 20px;
}
/* checked styles (menu open state) */
#drawer-toggle:checked ~ #drawer-toggle-label { height: 100%; width: calc(100% - 300px); background: rgba(255,255,255,.8);
}
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ header { left: 300px;
}
#drawer-toggle:checked ~ #drawer { left: 0px;
}
#drawer-toggle:checked ~ #page-content { margin-left: 300px;
}
/* Responsive MQ */
@media all and (max-width:350px) { #drawer-toggle:checked ~ #drawer-toggle-label { height: 100%; width: 50px; } #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header { left: calc(100% - 50px); } #drawer-toggle:checked ~ #drawer { width: calc(100% - 50px); padding: 20px; } #drawer-toggle:checked ~ #page-content { margin-left: calc(100% - 50px); }
}
/*MEDIA QUERY*/IT 3- Opdracht8 - Script Codes JS Codes
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, { // options itemSelector: '.grid-item', layoutMode: 'fitRows', getSortData: { name: '.name', }
});
// element argument can be a selector string
// for an individual element
var iso = new Isotope( '.grid', { // options
});
// filter functions
var filterFns = { // show if number is greater than 50 numberGreaterThan50: function( itemElem ) { var number = itemElem.querySelector('.number').textContent; return parseInt( number, 10 ) > 50; }, // show if name ends with -ium ium: function( itemElem ) { var name = itemElem.querySelector('.name').textContent; return name.match( /ium$/ ); }
};
// bind filter button click
var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener( 'click', function( event ) { // only work with buttons if ( !matchesSelector( event.target, 'button' ) ) { return; } var filterValue = event.target.getAttribute('data-filter'); // use matching filter function filterValue = filterFns[ filterValue ] || filterValue; iso.arrange({ filter: filterValue });
});
// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for ( var i=0, len = buttonGroups.length; i < len; i++ ) { var buttonGroup = buttonGroups[i]; radioButtonGroup( buttonGroup );
}
function radioButtonGroup( buttonGroup ) { buttonGroup.addEventListener( 'click', function( event ) { // only work with buttons if ( !matchesSelector( event.target, 'button' ) ) { return; } buttonGroup.querySelector('.is-checked').classList.remove('is-checked'); event.target.classList.add('is-checked'); });
}
| Developer | Karlien Huygels |
| Username | KarlienHuygels |
| Uploaded | October 29, 2022 |
| Rating | 3 |
| Size | 4,178 Kb |
| Views | 6,072 |
Do you need developer help for IT 3- Opdracht8?
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!
Karlien Huygels (KarlienHuygels) Script Codes
| Name | Size |
| IT3 - Opdracht12 | 3,165 Kb |
| CMT3 - Opdracht9 | 2,464 Kb |
| IT3 - Opdracht6 | 7,888 Kb |
| IT3 - Opdracht3 | 3,379 Kb |
| CMT3 - Opdracht11 | 3,981 Kb |
| CMT3 - Opdracht7 | 4,781 Kb |
| CMT3 - Opdracht16 | 8,632 Kb |
| IT3 - Opdracht10 | 2,877 Kb |
| IT3 - Opdracht11 | 9,420 Kb |
| CMT3 - Opdracht15 | 3,648 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Awesome | Samarthpd | 2,901 Kb |
| Starfield using KineticJS | Asp | 3,512 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
| Wikipedia API | Coderpilot | 2,802 Kb |
| Canvas Fireworks | Jackrugile | 6,200 Kb |
| React Vote Component | Souporserious | 5,465 Kb |
| Loading animation | Codeams | 2,408 Kb |
| Portfolio Layout Flex | Lahvjal | 3,489 Kb |
| A cube | KyleDavidE | 18,627 Kb |
| Virtual vinyl | Davidpanik | 3,474 Kb |
Do you want hide your ip address?
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!