<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,600,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Martel+Sans:200,400,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Biryani:200,300,400,600,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Exo+2:400,100' rel='stylesheet' type='text/css'>
<!-- CSS (WebKit) -->
<h1>Hello</h1>
<h2>Meet the</h2>
<h3>Judges</h3>
<!-- SVG -->
<svg width="100%" height="900" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" y1="0" y2="1">
<stop stop-color="#EEF85B" offset="0"/>
<stop stop-color="#09E5C3" offset="1"/>
</linearGradient>
</defs>
<g>
<text id="text" y="100" font-family="intro" font-size="120" font-weight="400" stroke-width="2" stroke="url(#gradient)" fill="#232d2d">54 HOURS</text>
</g>
</svg>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600,800);
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,100);
body {
padding: 50px;
background: #121D1D;
}
h1 {
font-size: 100px;
font-family: 'Intro', sans-serif;
font-weight: 800;
text-transform: uppercase;
/* Warning: no fallback */
background: -webkit-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
-webkit-background-clip: text;
-webkit-text-stroke: 4px transparent;
color: #232d2d;
}
h2 {
font-size: 64px;
font-family: 'Exo 2', sans-serif;
font-weight: 100;
background: -webkit-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h3 {
font-family: Intro;
font-size: 48px;
background: -webkit-linear-gradient(-91deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 58px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.