GSchool Workshop Demo - Winter 2015

Developer
Size
2,017 Kb
Views
48,576

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 Previews

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;
}
GSchool Workshop Demo - Winter 2015 - Script Codes
GSchool Workshop Demo - Winter 2015 - Script Codes
Home Page Home
Developer Chris Holder
Username see8ch
Uploaded June 20, 2022
Rating 3
Size 2,017 Kb
Views 48,576
Do you need developer help for GSchool Workshop Demo - Winter 2015?

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!

Chris Holder (see8ch) Script Codes
Create amazing art & images 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!