67 lines
1.7 KiB
HTML
67 lines
1.7 KiB
HTML
<label for="toggle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="100" height="100">
|
|
<path fill="white" id="cloud_icon" d="M11.5 15H5c-2.757 0-5-2.243-5-5 0-2.204 1.446-4.126 3.511-4.769C4.395 3.277 6.335 2 8.5 2c2.773 0 5.058 2.034 5.434 4.727C15.205 7.548 16 8.972 16 10.5c0 2.481-2.019 4.5-4.5 4.5zm-3-11c-1.493 0-2.819.962-3.3 2.394-.115.342-.407.596-.762.664C3.025 7.326 2 8.563 2 10c0 1.654 1.346 3 3 3h6.5c1.379 0 2.5-1.121 2.5-2.5 0-.972-.553-1.835-1.441-2.254-.339-.16-.561-.495-.573-.869C11.918 5.483 10.387 4 8.5 4z"/>
|
|
</svg>
|
|
</label>
|
|
<input type="checkbox" id="toggle" />
|
|
|
|
<div class="main">
|
|
<p align="center" >Once the Cloud Service Provider is selected, this link will take you to the CSP's {{ text }}!</p>
|
|
</div>
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0px;
|
|
}
|
|
|
|
.main p {
|
|
font-family: "Source Sans Pro", sans-serif;
|
|
margin: 1.6rem 0;
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: black;
|
|
position: fixed;
|
|
top: 9em;
|
|
width: 70%;
|
|
left: 15%;
|
|
}
|
|
|
|
/* Toggle Switch */
|
|
label {
|
|
display: block;
|
|
height: 100px;
|
|
width: 100px;
|
|
margin: 20px 0;
|
|
position: fixed;
|
|
left: 50%;
|
|
margin-left: -50px;
|
|
top: 8em;
|
|
}
|
|
|
|
input#toggle {
|
|
position: absolute;
|
|
top: -9999px;
|
|
left: -9999px;
|
|
}
|
|
|
|
/* Wrapper */
|
|
.main {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(static/img/cloud_background.jpg);
|
|
background-size: cover;
|
|
}
|
|
|
|
/* Toggle Background Image */
|
|
input#toggle:checked + .main {
|
|
background: url(static/img/cloud-background-2.gif);
|
|
/* background: url(static/img/cloud-background-3.jpg); */
|
|
background-size: cover;
|
|
}
|
|
|
|
input#toggle:checked + .main p {
|
|
color: white;
|
|
}
|
|
</style>
|