CMP5-Opdracht11
How do I make an cmp5-opdracht11?
What is a cmp5-opdracht11? How do you make a cmp5-opdracht11? This script and codes were developed by Sanne Van Gastel on 30 July 2022, Saturday.
CMP5-Opdracht11 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CMP5-Opdracht11</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav"> <h2>MIX YOUR LIST</h2> </nav>
<div class="sounds"> <div class="list a"><div class='background'>MAKE YOUR OWN</div></div> <div class="list b"><div class='background'>ROMANCE</div></div> <div class="list c"><div class='background'>NATURE</div></div> <div class="list d"><div class='background'>OLD SKOOL</div></div> <div class="list e"><div class='background'>CALM DOWN</div></div> <div class="list f"><div class='background'>FEEL GOOD</div></div> <div class="list g"><div class='background'>MOTIVATION</div></div> <div class="list h"><div class='background'>FLIRTATIOUS</div></div> <div class="list i"><div class='background'>ROADTRIP</div></div>
</div> <script src='https://unpkg.com/[email protected]/dist/scrollreveal.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CMP5-Opdracht11 - Script Codes CSS Codes
body { margin: 50px;
}
h2 { font-family: 'Roboto', sans-serif; font-size: 200%; text-align: right; padding-right: 30px; margin-right: 100px
}
nav{ color: white; padding: 5px; margin: -50px auto 20px -50px; width: 106%; background-color: rgba(0,0,0,0.6);
}
nav ul{ float: right;
}
nav li{ display: inline-block; margin: 1em 2.5em 1em 0em;
}
a { color: white; text-decoration: none;
}
a:hover{ color: brown;
}
.sounds { display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px; background-color: #fff; color: black; margin:auto; text-align: center;
}
.list { background-color: #444; color: #fff; border-radius: 5px; padding: 30px; margin: 10px; font-size: 130%; width: 300px; height: 300px; display:inline-block; font-family: 'Roboto', sans-serif;
}
.a { background-image: url(https://www.retrostylemedia.co.uk/media/400x400/img_577c081b38db9.jpg); background-repeat: no-repeat; background-size:cover;
}
.b { background-image: url(http://www.blogthingsimages.com/thesunsettest/sunset-3.jpg); background-repeat: no-repeat; background-size:cover;
}
.c { background-image: url(http://www.fullhdwallpapersfind.com/images/nature/thumb/blue-lake-mountain-landscape-wallpaper-1920x1080.jpg); background-repeat: no-repeat; background-size:cover;
}
.d { background-image: url(http://www.imusiciandigital.com/wp-content/uploads/2015/05/unplugged-400.jpg); background-repeat: no-repeat; background-size:cover;
}
.e { background-image: url(https://www.homepolish.com/wp-content/uploads/Homepolish-interior-design-65624-400x400.jpg); background-repeat: no-repeat; background-size:cover;
}
.f { background-image: url(http://s8.favim.com/orig/150226/beach-food-fruit-hawaii-Favim.com-2512938.jpg); background-repeat: no-repeat; background-size:cover;
}
.g { background-image: url(http://images.8tracks.com/cover/i/000/208/695/book-coffee-5835.jpg?rect=154,0,400,400&q=98&fm=jpg&fit=max); background-repeat: no-repeat; background-size:cover;
}
.h { background-image: url(https://s-media-cache-ak0.pinimg.com/736x/9a/c5/7f/9ac57fad8259d0339a5c895aba6f7e2d.jpg); background-repeat: no-repeat; background-size:cover;
}
.i { background-image: url(http://s5.favim.com/orig/140910/friends-hipster-road-trip-Favim.com-2060775.jpg); background-repeat: no-repeat; background-size:cover;
}
.background { background-color: rgba(0,0,0,0.3); padding-top: 30px; padding-bottom: 20px; height: 40px; width: 360px; margin-left: -30px; margin-top: -30px;
}
CMP5-Opdracht11 - Script Codes JS Codes
window.sr = ScrollReveal();
sr.reveal('.list', { duration: 1000 });
Developer | Sanne Van Gastel |
Username | SannevanGastel |
Uploaded | July 30, 2022 |
Rating | 3 |
Size | 2,642 Kb |
Views | 22,264 |
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 |
CMP5-Opdracht5 | 1,990 Kb |
CMP5-Opdracht4 | 1,941 Kb |
CMP5-Opdracht7 | 13,558 Kb |
Vex-theme-bottom-right-corner | 2,903 Kb |
CMP5-Opdracht6 | 2,799 Kb |
CMP5-Opdracht13 | 2,195 Kb |
CMP5-Opdracht14 | 3,780 Kb |
Flexslider.js | 9,370 Kb |
CMP5-Opdracht2 | 10,976 Kb |
CMP5-Opdracht3 | 2,327 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 |
Typefaces with descriptions | Megandoty | 2,944 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Getting Started | Viblast | 1,500 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
Video mute | Leon9208 | 2,131 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 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!