Skip to content

Instantly share code, notes, and snippets.

@globule

globule/index.html

Created April 30, 2021 12:11
Show Gist options
  • Save globule/04b59509f5c085858bacd75106ae5ee2 to your computer and use it in GitHub Desktop.
Save globule/04b59509f5c085858bacd75106ae5ee2 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">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
/* jQuery loading
*/
import $ from "https://cdn.skypack.dev/jquery@3.6.0";
/* Write you JS code here. Solve the problem described under the prices section.
*/
$( document ).ready(function() {
/* Menu management
*/
$('ul.menu li a[href*="#"]')
// Remove non-used links
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// Select the links in the document
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
event.preventDefault();
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
}
});
/* When a quantity is changed, compute invoicing total
*/
$("input#a-qty,input#c-qty").on("change", function(){
recalc_sum();
});
});
function recalc_sum(){
var a_qty=parseInt($("input#a-qty").val()||0);
var c_qty=parseInt($("input#c-qty").val()||0);
var a_label="";
var c_label="";
if( a_qty > 1){
a_label = a_qty+" adults";
}else{
if(a_qty<0){
a_qty=0;
$("input#a-qty").val(0);
}
a_label = a_qty+" adult";
}
if( c_qty > 1){
c_label = c_qty+" children";
}else{
if(c_qty<0){
c_qty=0;
$("input#c-qty").val(0);
}
c_label = c_qty+" child";
}
var c_amount = c_qty*5;
var a_amount = a_qty*8;
var total_due = c_amount+a_amount;
console.log(total_due);
$(".receipt .children .label").text(c_label);
$(".receipt .adults .label").text(a_label);
$(".receipt .children .amount").text( c_amount.toFixed(2)+" $");
$(".receipt .adults .amount").text( a_amount.toFixed(2)+" $");
$(".receipt .total .amount").text( total_due.toFixed(2)+" $");
}
function init_ticket_click(){
$(".ticket").click(function(event){
var el = event.currentTarget;
var qty = 0;
var target = $("input#a-qty");
if( $(el).hasClass("child")){
target = $("input#c-qty");
}
qty = parseInt( target.val()||0 ) +1;
$(target).val(qty);
/* pick the quantities and apply correponding amounts
*/
var invoicing = ($("input#a-qty").val() * 8) + ( $("input#c-qty").val() * 5);
/* display invoicing total
*/
$("#total").text("Price: "+invoicing+"$");
});
}
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: rgb(76,16,8);
background: linear-gradient(90deg, rgba(76,16,8,1) 0%, rgba(76,16,8,1) 49%, rgba(55,5,2,1) 51%, rgba(55,5,2,1) 100%);
background-size: 50px 50px;
*/
background:
/*
repeating-conic-gradient(
from 0deg at 50% 50%,
rgba(193,46,88,1) 0 9deg,
rgba(242,219,177,1) 9deg 18deg);
*/
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