CMT3 - Opdracht 06 - Isotope

Developer
Samuel
Size
3,686 Kb
Views
16,192
  1. CMT3 - Opdracht 06 - Isotope Previews
  2. CMT3 - Opdracht 06 - Isotope HTML Codes
  3. CMT3 - Opdracht 06 - Isotope CSS Codes
  4. CMT3 - Opdracht 06 - Isotope JS Codes

How do I make an cmt3 - opdracht 06 - isotope?

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

CMT3 - Opdracht 06 - Isotope Previews
IQ Test

CMT3 - Opdracht 06 - Isotope - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CMT3 - Opdracht 06 - Isotope</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <ul> <li><a href="#" class="anchor" data-sort-value="personal">personal rating</a></li> <li><a href="#" class="anchor" data-sort-value="public">public rating</a></li> <li><a href="#" class="anchor sort-by-button-group" data-sort-value="name">name</a></li> </ul>
</header>
<main class="grid"> <div class="grid-item"> <h1 class="name">A Tribe Called Quest</h1> <p class="personal">01</p> <p class="public">05</p> </div> <div class="grid-item"> <h1 class="name">Action Bronson</h1> <p class="personal">02</p> <p class="public">04</p> </div> <div class="grid-item"> <h1 class="name">Pete Rock &amp; C.L. Smooth</h1> <p class="personal">03</p> <p class="public">13</p> </div> <div class="grid-item"> <h1 class="name">Camp Lo</h1> <p class="personal">04</p> <p class="public">14</p> </div> <div class="grid-item"> <h1 class="name">Kendrick Lamar</h1> <p class="personal">05</p> <p class="public">01</p> </div> <div class="grid-item"> <h1 class="name">Pharcyde, The</h1> <p class="personal">06</p> <p class="public">07</p> </div> <div class="grid-item"> <h1 class="name">Denzel Curry</h1> <p class="personal">07</p> <p class="public">08</p> </div> <div class="grid-item image-bottom"> <h1 class="name">Freddie Gibbs</h1> <p class="personal">08</p> <p class="public">03</p> </div> <div class="grid-item"> <h1 class="name">MF Doom</h1> <p class="personal">09</p> <p class="public">12</p> </div> <div class="grid-item image-bottom"> <h1 class="name">DJ Krush</h1> <p class="personal">10</p> <p class="public">15</p> </div> <div class="grid-item"> <h1 class="name">Madlib</h1> <p class="personal">11</p> <p class="public">11</p> </div> <div class="grid-item"> <h1 class="name">Mick Jenkins</h1> <p class="personal">12</p> <p class="public">02</p> </div> <div class="grid-item"> <h1 class="name">Slum Village</h1> <p class="personal">13</p> <p class="public">09</p> </div> <div class="grid-item"> <h1 class="name">Isaiah Rashad</h1> <p class="personal">14</p> <p class="public">06</p> </div> <div class="grid-item"> <h1 class="name">Pouya</h1> <p class="personal">15</p> <p class="public">10</p> </div>
</main> <script src='http://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script> <script src="js/index.js"></script>
</body>
</html>

CMT3 - Opdracht 06 - Isotope - Script Codes CSS Codes

/* body */
body { color: #000; font-family: 'Helvetica Neue', sans-serif; font-size: 62.5%;
}
/* header & nav */
header { margin: 170.5px 0 0 -130px; position: fixed; text-transform: capitalize; -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
ul li { display: inline; font-size: 1.6em; font-weight: 900; letter-spacing: 0.02em; margin-right: 25px;
}
ul li a { color: #000; text-decoration: none; -webkit-transition: all .4s; transition: all .4s;
}
ul li a:hover { color: #17c2a3;
}
/* main */
.grid { margin: 50px auto; width: 80%;
}
.grid-item { height: 288px; width: 288px;
}
div { background: rgba(0, 0, 0, 0); background-position: center center; background-size: cover; -webkit-transition: all .6s; transition: all .6s;
}
div:hover { background-color: rgba(0, 0, 0, 0.7); -webkit-filter: grayscale(1); filter: grayscale(1);
}
div:before { background-color: inherit; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
div:hover h1 { opacity: 1; position: relative; z-index: 100;
}
h1 { color: #fff; font-size: 1.8em; font-weight: 200; margin-top: 135px; opacity: 0; text-align: center; -webkit-transition: all .6s; transition: all .6s;
}
p { display: none;
}
.image-bottom { background-position: center top;
}
/* query */
@media screen and (max-width: 915px) { header { margin: 31px 0 0 10%; -webkit-transform: rotate(0); transform: rotate(0); top: 0; } .grid { margin-top: 80px; }
}

CMT3 - Opdracht 06 - Isotope - Script Codes JS Codes

function main() { var anchors = document.getElementsByTagName('a'); var divs = document.getElementsByTagName('div'); var headings = document.getElementsByTagName('h1'); var images = [ 'http://thesource.com/wp-content/uploads/2016/03/ATCQ-low-end-inside-cover-LP1.jpg', 'http://imb.ulximg.com/image/src/artist/1381260982_7d1af5350d0c0d189771c2140409cddf.jpg/26f5f8b2db9331df21ba4303cde26ba9/1381260982_72e46264afba5f79518f039e4f9df0f7.jpg', 'http://cdn.ticketfly.com/i/00/00/72/14/19-atjmbo.jpg', 'https://fanart.tv/fanart/music/a5474ad8-1671-4ace-a5ea-82df42245bda/artistbackground/camp-lo-508deacdd7014.jpg', 'http://scoremoreshows.com/wp-content/uploads/2015/08/Kendrick-Lamar-Skyrockets-to-Top-of-Artist-100-FDRMX.jpg', 'http://image.iheart.com/images/rovi/1080/0001/409/MI0001409278.jpg', 'http://www.radioutd.com/blog/wp-content/uploads/2016/04/Denzel-Curry.jpg', 'http://media.npr.org/assets/img/2016/01/08/esquire-npr-2015--2_vert-abdf7a87643aae1a5101116094ea40b3580d110a-s900-c85.jpg', 'http://images.pigeonsandplanes.com/complex/image/upload/c_limit,w_1030/hhb1u7jetqihzkrs4pmu.jpg', 'http://www.hoopdoopmagazine.com/wp-content/uploads/2016/03/DJ-Krush_COVER-1200x520.jpg', 'http://www.rappcats.com/xxx/madlib-red-bull-bandana.jpg', 'https://i.imgsafe.org/6eaa2e0f38.jpg', 'http://www.subotage.com/wp-content/uploads/2013/04/slum-village.jpg', 'http://www.puna.nl/wp-content/uploads/2016/08/isaiahrashad.png', 'http://ima.ulximg.com/image/500x500/cover/1461959234_7169ecb92c6363fc2534135ebd77f9fc.jpg/72dd19e581654862a4039968b31f90db/1461959234_8f7494302cd7d84fbb9b9e9b0a50c3fa.jpg' ]; for (var i = 0; i < divs.length; i++) { divs[i].style.backgroundImage = 'url(' + images[i] + ')'; } var iso = new Isotope('.grid', { getSortData: { name: '.name', personal: '.personal', public: '.public' } }); for (var i = 0; i < anchors.length; i++) { anchors[i].onclick = function() { var sortValue = this.getAttribute('data-sort-value'); iso.arrange({ sortBy: sortValue }); } }
}
window.onload = function() { main();
}
CMT3 - Opdracht 06 - Isotope - Script Codes
CMT3 - Opdracht 06 - Isotope - Script Codes
Home Page Home
Developer Samuel
Username SamuelVDP
Uploaded November 10, 2022
Rating 3
Size 3,686 Kb
Views 16,192
Do you need developer help for CMT3 - Opdracht 06 - Isotope?

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
Name
CMT3 - Herhalingsoefening 01
IT3 - Opdracht 04 - Responsive Weekplanner
IT2 - Vault
IT3 - Opdracht 05 - Battery API
IT3 - Opdracht 06 - PureCSS
IT2 - Record Player
CMT3 - Opdracht 07 - Flickity
IT3 - Opdracht 03 - FreshCotton
CMT3 - Herhalingsoefening 03
CMT3 - Herhalingsoefening 02
Create amazing marketing copy 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!