IT3 - Opdracht2
How do I make an it3 - opdracht2?
What is a it3 - opdracht2? How do you make a it3 - opdracht2? This script and codes were developed by Karlien Huygels on 29 October 2022, Saturday.
IT3 - Opdracht2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IT3 - Opdracht2</title> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="gridcontainer"> <div id="title"> <h1>NEED FOR SPEED</h1> </div> <div id="laps"> <h1>LAPS:</h1> <p>3/5</p> </div> <div id="pos"> <h1>POSITION:</h1> <p>3RD</p> </div> <div id="time"> <p>00.04.12</p> </div> <div id="speed"> <h1>SPEED:</h1> <p>112KM/H</p> </div>
</div>
</body>
</html>
IT3 - Opdracht2 - Script Codes CSS Codes
body{ font-family: 'Fjalla One', sans-serif; background-color: black;
}
h1, p, span{ color: white;
}
p{ font-size: 400%; line-height: 0;
}
#gridcontainer{ display: grid; width: 60%; height: 600px; margin: 50px auto; background-image: url("https://media.giphy.com/media/xT0BKNxBP94HSYh2YU/giphy.gif"); background-size: cover; grid-template-columns: 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px; grid-template-rows: 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px;
}
#title{ grid-column-start: 2; grid-column-end: 5; grid-row: 2;
}
#laps{ grid-column: 2; grid-row-start: 4; grid-row-end: 7;
}
#pos{ grid-column: 2; grid-row-start: 8; grid-row-end: 11;
}
#speed{ text-align: right; grid-column: 10; grid-row-start: 8; grid-row-end: 11;
}
#time{ grid-column: 10; grid-row: 2;
}
@media only screen and (max-width: 1000px) { #gridcontainer{ height: 350px; font-size: 60%; }
}
Developer | Karlien Huygels |
Username | KarlienHuygels |
Uploaded | October 29, 2022 |
Rating | 3 |
Size | 1,894 Kb |
Views | 8,096 |
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 |
CMT - Opdracht12 | 7,616 Kb |
IT3 - Opdracht10 | 2,877 Kb |
IT3 - Opdracht6 | 7,888 Kb |
Grid layout draft | 2,087 Kb |
IT3 - Opdracht11 | 9,420 Kb |
CMT3 - Opdracht14 | 4,342 Kb |
CMT3 - Opdracht2 | 10,529 Kb |
IT 3- Opdracht8 | 4,178 Kb |
CMT3 - Opdracht7 | 4,781 Kb |
CMT3 - Opdracht10 | 4,972 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 |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
After America | Jonathangarner | 2,686 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 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!