CMP5-Opdracht2

Developer
Sanne Van Gastel
Size
10,976 Kb
Views
40,480
  1. CMP5-Opdracht2 Previews
  2. CMP5-Opdracht2 HTML Codes
  3. CMP5-Opdracht2 CSS Codes
  4. CMP5-Opdracht2 JS Codes

How do I make an cmp5-opdracht2?

One page website. What is a cmp5-opdracht2? How do you make a cmp5-opdracht2? This script and codes were developed by Sanne Van Gastel on 29 July 2022, Friday.

CMP5-Opdracht2 Previews
IQ Test

CMP5-Opdracht2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CMP5-Opdracht2</title> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/194554/vex.css'>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/194554/vex-theme-wireframe.css'>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/194554/vex-theme-os.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
<title>STOKETOPIA</title>
<script src="vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os'</script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />
</head>
<body > <nav class="nav"> <h1>STOKETOPIA</h1> <ul> <li><a href='#page1'>HOME</a></li> <li><a href='#page2'>ABOUT</a></li> <li><a href='#page3'>PHOTO GALLERY</a></li> <li><a href='#page4'>CONTACT</a></li> </ul> </nav> <div class='page1'> </div> <div class='page2'> <div class="el element1"><p>STOKETOPIA is an initiative of Dean Newman. Dean is a snowboarder and skater and enjoys these extreme sports all year long.<br><br> He started to built a community of high-resolution and advanced photography of these sport on Instagram. He is still busy completing his website, but he has already 11.4k followers on his Instagram.</p></div> <div class="el element2"><p>LONGBOARDING is the act of riding on a Longboard. Longboarding also has competitive races down hill, with some riders reaching speeds exceeding 50 miles per hour. A longboard varies in shape and size unlike its set counterpart, the skateboard, and has more stability, traction and durability due to larger wheel size and lower wheel durometers. Many, but not all longboards, use trucks (axles) that contain different geometric parameters than a skateboard as well. These factors and their variation have given way to a variety of disciplines, functions and purposes for a longboard. The angles at which some longboards can turn, as well as their ability to coast long distances make them more suitable for cruising, and commuting, on streets than regular skateboards.</p></div> <div class="el element3"><p>SURFING is a surface water sport in which the wave rider, referred to as a surfer, rides on the forward or deep face of a moving wave, which is usually carrying the surfer towards the shore. Waves suitable for surfing are primarily found in the ocean, but can also be found in lakes or in rivers in the form of a standing wave or tidal bore. However, surfers can also utilize artificial waves such as those from boat wakes and the waves created in artificial wave pools.
The term surfing refers to the act of riding a wave, regardless of whether the wave is ridden with a board or without a board, and regardless of the stance used. The native peoples of the Pacific, for instance, surfed waves on alaia, paipo, and other such craft, and did so on their belly and knees. The modern-day definition of surfing, however, most often refers to a surfer riding a wave standing up on a surfboard; this is also referred to as stand-up surfing.</p></div> <div class="el element4"><p>SNOWBOARDING is a recreational activity and Olympic and Paralympic sport that involves descending a snow-covered slope while standing on a snowboard attached to a rider's feet.
The development of snowboarding was inspired by skateboarding, sledding, surfing and skiing. It was developed in the United States in the 1960s, became a Winter Olympic Sport at Nagano in 1998 and first featured in the Winter Paralympics at Sochi in 2014. Its popularity (as measured by equipment sales) in the United States peaked in 2007 and has been in a decline since.</p></div> </div> <div class='page3'> <div class='square1'><img src='http://66.media.tumblr.com/d1b9215047519266f80c0b7c91b414e4/tumblr_npo1pwoyoe1qflpkjo1_500.jpg' class='sq'> <img src='http://s8.favim.com/orig/73/cool-longboard-photography-summer-Favim.com-748881.jpg' class='sq'> <img src='http://40.media.tumblr.com/6767e96be0d6fc6919a01572f1f911d3/tumblr_ngbol6ThNI1r1xlqjo1_500.png' class='sq'> <img src='http://65.media.tumblr.com/dd522977e8bcfe2a7565c33a92678169/tumblr_nu5tzziDRY1rq8bx3o1_500.jpg' class='sq'></div> <div class='square2'><img src='https://66.media.tumblr.com/a931c2925680a93928b65a120f9f146a/tumblr_niphupla9r1u5p5v7o1_500.jpg' class='sq'> <img src='https://41.media.tumblr.com/4be01d89390c593acd6829c44fdb075f/tumblr_nm8pabEOjH1u9rjjqo1_500.jpg' class='sq'> <img src='http://thewhiskywolf.com/bigcartel_pics/rocky/whiskywolfpack-rocky-poole-longboard-skate-1.jpg' class='sq'> <img src='https://65.media.tumblr.com/5172c8b5ff455aff2e9ead96f9a59b34/tumblr_o4ixrf5QjW1u7fq5do1_500.jpg' class='sq'></div></div> <div class='page4'> <div class='contact ct' id='buttons'>E-MAIL</div> <div class='contact ct' id='buttons'><a1 href='https://www.instagram.com/stoketopia/' >INSTAGRAM</a></div> <div class='contact ct' id='buttons'><a1 href='https://www.facebook.com/Stoketopia-1801350216755593/?fref=ts' >FACEBOOK</a></div> </div> </div> </body> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/194554/please-compressed.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/194554/vex.combined.min.js'></script>
<script src='js/4032af61ca0478304ab7b31b7.js'></script>
<script src='https://code.jquery.com/jquery-3.1.1.js'></script> <script src="js/index.js"></script>
</body>
</html>

CMP5-Opdracht2 - Script Codes CSS Codes

body{ width: 100%; margin: auto; background-color: ; font-family: helvetica;
}
h1 { text-align: right; margin-top: 40px; margin-bottom: -55px; margin-right: 200px;
}
/* NAV BAR */
.nav{ position: fixed; font-weight: 200; color: white; width: 100%; background-color: rgba(0,0,0,1);
}
.nav ul{ text-align: left; width: 800%; margin: auto;
}
.nav li{ display: inline-block; margin: 2em 2em 2em 0em;
}
a { color: white; text-decoration: none;
}
a:hover{ color: orange;
}
/* page 1¨*/
.page1{ background: url('https://s-media-cache-ak0.pinimg.com/originals/c6/27/30/c627306c68f6bbe5c27f149641eb0bfa.jpg'); width: 100%; height: 1000px; background-color: red;
}
/* page 2*/
.page2{ background-color: black; width: 100%; height: 650px; }
.element1, .element2, .element3, .element4 { width: 23%; height: 650px; float: left; margin: 15px; margin-top: 40px;
}
h3 { font-weight: 10; font-size: 15px; margin: 50px;
}
p{ font-weight: 30; font-size: 15px; margin: 50px;
}
/* page 3 */
.page3{ background-color: black ; width: 100%; height: 800px; }
.square1, .square2{ width: 100%; height: 400px; float: left; display: inline-block; margin-bottom: 30px;
}
img{ width: 23%; height: 100%; margin: 14px;
}
sq{ width: 23%;
}
.square1{ margin-top: 14px;
}
/* page 4 */
.page4{ background-color: black; width: 100%; height: 800px; }
.contact { color: black; margin-left: 17em; margin-top: 12em; float: left; background-color: white; padding: 15px; font-size: 17px; font-weight: bold;
}
a1 { color: black; text-decoration: none;
}
a1:hover{ color: orange;
}

CMP5-Opdracht2 - Script Codes JS Codes

// page2 Please.js
var main = function() { var els = document.getElementsByClassName("el"); var colors = Please.make_color({colors_returned: 4}); var teller = 0; while (teller < els.length) { els[teller].style.backgroundColor = colors[teller]; els[teller].onmouseover = function() { this.style.backgroundColor = Please.make_color(); } teller++; }
}
// page3 anime.js
var animation;
// anime JS settings
animationSettings = { targets: ['.ct'], rotate: 360, borderRadius: '2px', duration: 3000, loop: false
};
// animate button on hover
handlerIn = function(event){ animationSettings.targets = ['#' + event.target.id]; animation = anime( animationSettings );
};
handlerOut = function(e){ animationSettings.rotate = animationSettings.rotate + 360;
};
// register hover
$( '.ct' ).hover( handlerIn, handlerOut );
// page4 vex.js
vex.defaultOptions.className = 'vex-theme-wireframe'; var els = document.getElementsByClassName('ct'); var element = document.getElementById('buttons'); element.onclick = function(){ vex.dialog.confirm({ message: 'We are sorry, but this page is currently under construction... :/', callback: function (value) { if (value) { console.log('WoopWoop party!') } else { console.log('Lamp.') } } }) };
window.onload = function() { main();
}
CMP5-Opdracht2 - Script Codes
CMP5-Opdracht2 - Script Codes
Home Page Home
Developer Sanne Van Gastel
Username SannevanGastel
Uploaded July 29, 2022
Rating 3
Size 10,976 Kb
Views 40,480
Do you need developer help for CMP5-Opdracht2?

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!

Sanne Van Gastel (SannevanGastel) Script Codes
Name
CMP5-Opdracht15
Flexslider.js
CMP5-Opdracht6
CMP5-Opdracht11
CMP5-Opdracht16
CMP5-Opdracht14
CMP5-Opdracht7
CMP5-Opdracht5
Vex-theme-bottom-right-corner
CMP5-Opdracht10
Create amazing love letters 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!