GSchool Workshop Demo - Winter 2015
How do I make an gschool workshop demo - winter 2015?
Opaque background image over a CSS background pattern.. What is a gschool workshop demo - winter 2015? How do you make a gschool workshop demo - winter 2015? This script and codes were developed by Chris Holder on 20 June 2022, Monday.
GSchool Workshop Demo - Winter 2015 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gSchool Workshop Demo - Winter 2015</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pattern-bkgd"></div>
<div class="image-bkgd"></div>
<p>Your site content can still sit on top of the backgrounds.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
GSchool Workshop Demo - Winter 2015 - Script Codes CSS Codes
.image-bkgd,
.pattern-bkgd { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -999;
}
.pattern-bkgd { background:
-webkit-linear-gradient(315deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
-webkit-linear-gradient(135deg, #ECEDDC 25%, transparent 25%),
-webkit-linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A;
}
.image-bkgd { background-image: url('https://ununsplash.imgix.net/photo-1422479516648-9b1f0b6e8da8?q=75&w=1080&h=1080&fit=max&fm=jpg&s=4a294400a04811c06ba14774a7b28c62'); background-position: center; background-size: cover; /* Magic Happens Here */ opacity: 0.75;
}
p { margin: 35vh 5% 0; padding: 1em; border-radius: 8px; background: rgba(255,255,255,0.425); text-align: center; color: white; font-size: 2em; text-shadow: 1px 1px 2px #444;
}
Developer | Chris Holder |
Username | see8ch |
Uploaded | June 20, 2022 |
Rating | 3 |
Size | 2,017 Kb |
Views | 48,576 |
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 |
A Pen by Chris Holder | 2,538 Kb |
DevCamp 2014 - Denver Public Library | 5,033 Kb |
Localhost Directory GUI | 3,997 Kb |
Readable typography mixin - auto line height | 2,827 Kb |
Code Motel Logo | 3,759 Kb |
GSchool Workshop Demo - Winter 2015 | 3,433 Kb |
My Logo | 2,811 Kb |
Contact Form Template | 5,229 Kb |
Northerli Logo | 5,477 Kb |
One from many. | 2,423 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 |
React TODO | Enieste | 3,320 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Under construction | GhostRider | 1,642 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!