Issue 4797 - Separate white box and text from eyeo.com homepage banner

includes/index/style.html

 <style>
 
 #media
 {
   text-align: center;
 }
 
 #media-links
 {
   list-style: none;
@@ skipping 56 matching lines @@
 }
 
 @media (min-width: 930px)
 {
   #media small
   {
     display: none;
   }
 }
 
+#home-image-container div

[juliandoucette, 2018/01/25 14:27:29]

NIT: It seems like #home-image-container is really more about providing a
background color and the div within is really about "containing". Perhaps we
should re-consider these names. e.g.

<header class="bg-something">
  <div class"container">
    <img ...>
    <div id="home-header-overlay-text">
      <h1>...
      <p>...

(or similar)

Detail: I used an ID for the only thing that is actually unique to this
page/component.

[ire, 2018/01/26 10:11:01]

Done. I kept the ID on the <header> because I need to style more than jus the
overlay text

[juliandoucette, 2018/01/30 04:22:19]

Acknowledged.

+{
+  position: relative;
+  max-width: 1080px;
+  margin: 0 auto;
+}
+
+#home-image-container p
+{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 10px;
+  background-color: #fff;
+  text-transform: uppercase;
+  font-size: 18px;
+  box-sizing: border-box;
+}
+
+@media (min-width: 350px)
+{
+  #home-image-container p
+  {
+    width: 80%;
+  }
+}
+
+@media (min-width: 450px)
+{
+  #home-image-container p
+  {
+    width: 60%;
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 767px)
+{
+  #home-image-container p
+  {
+    padding: 15px;
+    width: 40%;
+    font-size: 22px;
+  }
+}
+
 </style>