Skip to content

Instantly share code, notes, and snippets.

@globule

globule/index.html

Created May 19, 2021 12:51
Show Gist options
  • Save globule/b0cc7a281dbac2092c890de935797471 to your computer and use it in GitHub Desktop.
Save globule/b0cc7a281dbac2092c890de935797471 to your computer and use it in GitHub Desktop.
Download ZIP
Wild Circus Template - Blockchain training
Raw
index.html
<!--
In order to validate your HTML code, click on the arrow at the top right of this window. If you have some problems with validation, you can have a look here : https://blog.codepen.io/2017/10/11/analyze-css-now-using-stylelint/
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Wild Circus</title>
<link href="http://fonts.cdnfonts.com/css/cowboya-bifurcated" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/gunfighter-academy" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/mulled-wine-season" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/anderson-four-feather-falls" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div class="shadow">
<header>
<h1 class="goldy">Wild Circus</h1>
<nav>
<ul class="menu">
<!-- TODO: each menu link drive us to the specific section -->
<li><a class="big" href="#performances">Performances</a></li>
<li><a class="big">About Us</a></li>
<li><a class="big" href="#prices">Prices</a></li>
<li><a class="big">Contact</a></li>
</ul>
</nav>
</header>
<section>
<div class="announce">
<p class="blinking">COMING</p>
<p class="blinking">SOON !</p>
</div>
</section>
<section>
<div id="performances">
<h2>Performances</h2>
<!-- TODO: With your CSS, put the three performances here ("laugh", "dream, "marvel at") on the same line, without the generated dot. Becareful, only use the CSS in order to align everything, you must not remove the <li> tags.-->
<ul class="boxed-list">
<!-- performance 1 -->
<li>
<h3>Laugh</h3>
<p>As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
</li>
<!-- performance 2 -->
<li>
<h3>Dream</h3>
<p>Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
</li>
<!-- performance 3 -->
<li>
<h3>Marvel at</h3>
<p>Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
</li>
</ul>
</div>
</section>
<section>
<form action="" method="post">
<h2 id="prices">Prices</h2>
<div class="hidden">
<div class="adult ticket">
<div class="price">
<p>8$</p>
</div>
<div class="for">
<p class="l1">ADMIT 1</p>
<p class="l2">ADULT</p>
</div>
</div>
<div class="child ticket">
<div class="price">
<p>5$</p>
</div>
<div class="for">
<p class="l1">ADMIT 1</p>
<p class="l2">CHILD</p>
</div>
</div>
</div>
<div class="quote">
<div class="adult ticket">
<div class="price">
<label for="a-qty">Adults</label>
<span>(8$)</span>
</div>
<div class="for">
<p class="l1">Admit</p>
<input type="number" name="a-qty" id="a-qty" />
</div>
</div>
<div class="child ticket">
<div class="price">
<label for="c-qty">Childs</label>
<span>(5$): </span>
</div>
<div class="for">
<p class="l1">Admit</p>
<input type="number" name="c-qty" id="c-qty" />
</div>
</div>
</div>
<div class="due">
<div class="receipt jagged-border">
<h4>RECEIPT
<input type="text" readonly value="56202" name="receipt_no"/>
</h4>
<hr>
<div class="children">
<div class="label">0 child</div>
<div class="amount">0.00$</div>
</div>
<div class="adults">
<div class="label">0 adult</div>
<div class="amount">0.00$</div>
</div>
<hr>
<div class="total">
<div class="label">TOTAL</div>
<div class="amount" id="total">0.00$</div>
</div>
<hr>
<div class="submit">
<button type="submit">Submit</button>
</div>
</div>
</div>
</form>
</section>
<hr />
<footer>
<p style="text-align: center;">Design by Laurent BELLOEIL for the <a href="https://wildcodeschool.com" target="_blank">Wild Code School</a></p>
<!-- TODO:
Please also add the link to your own website, blog and Github profile.
-->
</footer>
</div>
</body>
</html>
Raw
script.js
document.addEventListener("DOMContentLoaded", function(){
const quantityInput = document.querySelectorAll( `input[type="number"]` );
quantityInput.forEach(ipt => {
ipt.addEventListener("input", quantityChange);
});
function quantityChange(e) {
/*
"e" is the event
but it is non usefull here;
*/
let total = 0;
let totalInput = document.getElementById('total');
let childrenInput = document.getElementById('c-qty');
let adultsInput = document.getElementById('a-qty');
let childrenLine = document.getElementsByClassName('children')[0];
let adultLine = document.getElementsByClassName('adults')[0];
let childrenLabel=childrenLine.getElementsByClassName('label')[0];
let childrenAmount=childrenLine.getElementsByClassName('amount')[0];
let adultsLabel=adultLine.getElementsByClassName('label')[0];
let adultsAmount=adultLine.getElementsByClassName('amount')[0];
totalChildren = 5*parseInt(childrenInput.value)||0;
totalAdults = 8*parseInt(adultsInput.value)||0;
if(totalChildren<0){
totalChildren=0;
childrenInput.value=0;
}
if(totalAdults<0){
totalAdults=0;
adultsInput.value=0;
}
if(parseInt(childrenInput.value)<2)
{
childrenLabel.innerHTML = childrenInput.value+" child";
}else{
childrenLabel.innerHTML = childrenInput.value+" children";
}
if(parseInt(adultsInput.value)<2)
{
adultsLabel.innerHTML = adultsInput.value+" adult";
}else{
adultsLabel.innerHTML = adultsInput.value+" adults";
}
childrenAmount.innerHTML = totalChildren.toFixed(2)+" $";
adultsAmount.innerHTML = totalAdults.toFixed(2)+" $";
total = totalChildren+totalAdults;
totalInput.innerHTML = total.toFixed(2)+" $";
}
});
Raw
style.less
/* In order to validate your CSS code, click on the arrow at the top right of this window. Don't forget, you can have a look here : https://blog.codepen.io/2017/10/11/analyze-css-now-using-stylelint/
*/
/* Your CSS code here */
body {
background: repeating-conic-gradient(
from 0deg at 50% 480px,
rgba(48, 151, 156, 1) 0 4deg,
rgba(237, 229, 193, 1) 4deg 8deg,
rgba(227, 58, 53, 1) 8deg 12deg,
rgba(237, 229, 193, 1) 12deg 16deg
);
font-size: 1.2em;
}
.hidden {
display: none;
}
.shadow {
background: rgb(255, 255, 255);
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.25) 25%,
rgba(0, 0, 0, 1) 100%
);
float: left;
margin: -8px;
padding: 0 0;
}
.goldy {
font-family: "Cowboya Bifurcated", sans-serif;
background: linear-gradient(
180deg,
rgba(249, 238, 0, 1) 0%,
rgba(255, 255, 255, 1) 25%,
rgba(255, 246, 153, 1) 33%,
rgba(255, 236, 51, 1) 36%,
rgba(255, 145, 0, 1) 41%,
rgba(255, 252, 0, 1) 66%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: thin chocolate;
}
.big {
font-family: "Righteous", cursive;
}
a {
color: gold;
}
a:visited {
color: darkorange;
}
h1 {
font-size: 6em;
text-align: center;
text-transform: uppercase;
margin-bottom: 0;
}
h2 {
font-size: 2em;
font-family: "Amatic SC", cursive;
font-weight: initial;
text-align: center;
color: darkorange;
letter-spacing: 32px;
background: rgb(30, 0, 16, 0.6);
}
h4 {
font-size: 2em;
text-align: center;
margin: 15px 0 0 0;
padding: 15px 0 0 0px;
}
h4 input {
border: 0 none;
position: absolute;
top: 30px;
right: 0;
width: 20%;
}
ul.menu {
margin: 0 0;
padding: 0 0;
text-align: center;
}
ul.menu li {
display: inline-block;
padding: 10px 2%;
background: rgb(30, 0, 16, 0.6);
border-radius: 8px;
vertical-align: top;
text-align: center;
}
ul.menu li:hover {
background-color: firebrick;
}
ul.menu li a {
font-size: 2.5em;
font-family: "Amatic SC", cursive;
}
ul.boxed-list {
text-align: center;
}
.announce {
display: block;
background: #000 no-repeat
url("https://image.freepik.com/free-vector/empty-stage-with-red-curtain-falling-confetti_107791-2124.jpg")
0 0;
width: 626px;
height: 357px;
margin: 25px auto;
padding-top: 1px;
border: 15px inset gold;
}
.announce p {
font-family: "Gunfighter Academy", sans-serif;
font-size: 4em;
text-align: center;
margin: 0.8em;
}
.boxed-list li {
display: inline-block;
vertical-align: top;
background-color: burlywood;
text-align: left;
padding: 0 15px;
margin: 0 10px;
width: 25%;
border-radius: 10px;
}
.boxed-list li h3 {
font-family: "Amatic SC", cursive;
}
.boxed-list li p,
.ticket,
h4,
.receipt {
font-family: "Mulled Wine Season", sans-serif;
}
.quote {
width: 80%;
margin: 0 auto;
text-align: center;
}
.quote > div {
display: inline-block;
background-color: #fce023;
width: 250px;
height: auto;
border-right: dotted;
border-left: dotted;
margin: 0 15px;
}
.ticket {
border-radius: 5px;
border: 2px solid #4d2925;
margin: 0 auto;
cursor: pointer;
}
.ticket > div {
padding: 5px;
}
.ticket .price {
border-right: 2px solid #4d2925;
float: left;
width: 40%;
font-size: 140%;
}
.ticket label {
display: inline-block;
margin-right: 10px;
}
.ticket input {
display: inline-block;
width: 3em;
border: 2px solid;
border-radius: 4px;
font-size: 1rem;
margin: 0.25rem;
padding: 0.5rem;
transition: border-color 0.5s ease-out;
}
.price p {
font-size: 220%;
margin: 5px 0;
}
.for p {
margin: 0;
}
.ticket .for .l1 {
}
.ticket .for .l2 {
font-size: 150%;
}
.due {
width: 400px;
margin: 15px auto;
padding: 30px;
}
.receipt {
background: #fff;
margin: 15px auto;
padding-bottom: 15px;
}
.receipt:before,
.receipt:after {
.dojaggerborder(transparent, #fff, 20px, 40px);
}
.receipt > div {
margin: 0 15px;
}
.receipt .label {
width: 50%;
float: left;
}
.receipt .amount {
width: 50%;
text-align: right;
float: right;
}
.dojaggerborder(@sc,@ec,@sx,@sy) {
background: linear-gradient(
45deg,
@sc 33.333%,
@ec 33.333%,
@ec 66.667%,
@sc 66.667%
),
linear-gradient(-45deg, @sc 33.333%, @ec 33.333%, @ec 66.667%, @sc 66.667%);
background-size: @sx @sy;
}
.jagged-border {
position: relative;
width: 100%;
&:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
}
&:after {
content: "";
display: block;
position: absolute;
bottom: -10px;
width: 100%;
height: 10px;
background-position: -20px 10px;
}
}
.blinking {
animation: blinkingText 1.2s infinite;
}
@keyframes blinkingText {
0% {
color: floralwhite;
}
49% {
color: floralwhite;
}
60% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: floralwhite;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment