Team Canada World Cup of Hockey

Developer
Carlin Scuderi
Size
2,777 Kb
Views
24,288
  1. Team Canada World Cup of Hockey Previews
  2. Team Canada World Cup of Hockey HTML Codes
  3. Team Canada World Cup of Hockey CSS Codes

How do I make an team canada world cup of hockey?

In light of the World Cup of Hockey, tried to make the Canada logo with HTML and CSS.. What is a team canada world cup of hockey? How do you make a team canada world cup of hockey? This script and codes were developed by Carlin Scuderi on 12 August 2022, Friday.

Team Canada World Cup of Hockey Previews
IQ Test

Team Canada World Cup of Hockey - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Team Canada World Cup of Hockey</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flag">	<div class="canada">	<div class="vein"></div>	<div class="leaf left"></div>	<div class="leaf center"></div>	<div class="leaf right"></div>	</div>
</div>
</body>
</html>

Team Canada World Cup of Hockey - Script Codes CSS Codes

body { background: #e51937;
}
.flag { width: 95%; margin: calc(3% - 2px) auto 0 auto; box-sizing: border-box;
}
.canada { position: relative; margin: 25vh auto 0 auto; left: -5vw; width: 70px;
}
.vein { top: 133px; left: 87px; right: 0; margin: 0 auto;
}
.vein, .vein:before, .vein:after { content: ''; position: absolute; border-bottom: 150px solid #e51937; border-left: 10px solid transparent; border-right: 10px solid transparent; z-index: 3;
}
.vein:before { top: 35px; left: 47px; -webkit-transform: rotate(55deg); transform: rotate(55deg);
}
.vein:after { top: 35px; left: -65px; -webkit-transform: rotate(-55deg); transform: rotate(-55deg);
}
.leaf:after { content: ''; position: absolute;
}
.leaf:before { content: ''; position: absolute; z-index: 1;
}
.leaf.left,
.leaf.right { position: absolute; -webkit-transform-origin: bottom; transform-origin: bottom; border-top: 160px solid white; border-left: 105px solid transparent; border-right: 105px solid transparent; width: 30px;
}
.leaf.center { width: 25px; border-top: 300px solid white; border-left: 85px solid transparent; border-right: 85px solid transparent;
}
.leaf.center:after { border: 100px solid transparent; border-top: 35px solid #e51937; top: 0; left: 0;
}
.leaf.center:before { top: -120px; left: 50px; border-top: 25px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 130px solid white;
}
.leaf.left { top: 135px; left: -18px; -webkit-transform: rotate(-99deg) skewX(-46deg) skewY(25deg); transform: rotate(-99deg) skewX(-46deg) skewY(25deg);
}
.leaf.left:after { top: -161px; left: -105px; border: 120px solid transparent; border-top: 45px solid #e51937;
}
.leaf.left:before { top: -240px; left: -75px; border-top: 30px solid transparent; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 100px solid white; -webkit-transform: rotate(-5deg) skewY(5deg) skewX(5deg); transform: rotate(-5deg) skewY(5deg) skewX(5deg);
}
.leaf.right { top: 135px; left: -28px; -webkit-transform: rotate(99deg) skewX(45deg) skewY(-25deg); transform: rotate(99deg) skewX(45deg) skewY(-25deg);
}
.leaf.right:after { top: -161px; left: -105px; border: 120px solid transparent; border-top: 45px solid #e51937; z-index: 1;
}
.leaf.right:before { top: -240px; left: -60px; border-top: 30px solid transparent; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 105px solid white; z-index: 2;
}
Team Canada World Cup of Hockey - Script Codes
Team Canada World Cup of Hockey - Script Codes
Home Page Home
Developer Carlin Scuderi
Username carlinscuderi
Uploaded August 12, 2022
Rating 3
Size 2,777 Kb
Views 24,288
Do you need developer help for Team Canada World Cup of Hockey?

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!

Carlin Scuderi (carlinscuderi) Script Codes
Name
Client software demo 2
Greensock tests
Handy project delta
Input form with progress bar
Accessible modal with keyboard trap
Basic Flexbox stuff
Fork and fix 01
SVG clipping mask test
Accessible floating labels
A Pen by Carlin Scuderi
Create amazing blog posts 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!