Toggle background

templates/mock_csp.html

@@ -1,24 +1,66 @@
-<div class="csp_container" align="center" >
+<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" />
 
-  <p align="center" >You are now being taken to the Cloud Service Provider's {{ text }}!</p>
+<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>
-  p {
+  html, body {
+    height: 100%;
+  }
+
+  .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%;
   }
-  body {
-    background-image: url(static/img/cloud_background.jpg);
+
+  /* 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 {
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    background: url(static/img/cloud_background.jpg);
     background-size: cover;
   }
-  .csp_container {
-    align: center;
-    padding-top: 10rem;
+
+  /* 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>