From 493b4d33b77ad75e59611ca7edced6eeebed9a14 Mon Sep 17 00:00:00 2001
From: xxiicode <leandrobilokapic@gmail.com>
Date: Mon, 27 Nov 2023 17:57:34 +0100
Subject: [PATCH] span solution

---
 app/styles.css | 26 +++++++++++++++++++++++++-
 index.php      | 29 +++++++++++++++++++----------
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/app/styles.css b/app/styles.css
index d6c329e..fdf1281 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -180,11 +180,35 @@ section#cover p {
     max-width: 490px;
 }
 
+/* h1 with images ///////////////////////*/
+.--sub-brand a::before { content: none;}
+.polyfen a { width:153px; height:50px;}
+.polyatlas a { width:175px; height:50px;}
+.polycookies a { width:206px; height:50px;}
+.polyforum a { width:194px; height:50px;}
+.polyqwerty a { width:223px; height:50px;}
+.polynucleus a { width:207px; height:50px;}
+
+.--sub-brand a span {
+    display:block;
+    position:absolute;
+    width:100%;
+    height:100%;
+    z-index:100;
+}
+
+.polyfen a span { background:#ecf0f3 url(../imgs/sub-brands/polyfen-logo.svg) no-repeat left top;}
+.polyatlas a span { background:#ecf0f3 url(../imgs/sub-brands/poly-atlas-logo.svg) no-repeat left top;}
+.polycookies a span { background:#ecf0f3 url(../imgs/sub-brands/poly-cookies-logo.svg) no-repeat left top;}
+.polyforum a span { background:#ecf0f3 url(../imgs/sub-brands/poly-forum-logo.svg) no-repeat left top;}
+.polyqwerty a span { background:#ecf0f3 url(../imgs/sub-brands/poly-qwerty-logo.svg) no-repeat left top;}
+.polynucleus a span { background:#ecf0f3 url(../imgs/sub-brands/poly-nucleus-logo.svg) no-repeat left top;}
+
+
 /* issue to talk, this is not mobile first polynucleus*/
 section#cover {
     padding-top: 0;
 }
-
 h2.title-2 {
     margin-top: 0;
     padding-top: 0;
diff --git a/index.php b/index.php
index 0964068..2e2c8a5 100644
--- a/index.php
+++ b/index.php
@@ -41,51 +41,60 @@
     </header>
     <main>
         <section id="cover">
-            <h2 class="title-2">We explore new ways of using tech in creative projects.</h2>
+            <h1 class="title-2">We explore new ways of using tech in creative projects.</h1>
             <p>The Polyfen Group LLC is a small corporation parent of multiple brands related to software development and the creative industry.</p>
         </section>
         <section class="sub-brands-container">
             <h2 class="heading-1">Family of Brands</h2>
             <hr>
             <section class="sub-brand">
-                <img src="imgs/sub-brands/polyfen-logo.svg" alt="Polyfen">
+                <h3 class="polyfen --sub-brand">
+                    <a href="https://polyfen.com" target="_blank" class="web-url">Polyfen<span></span></a>
+                </h3>
                 <p>Creative agency offering design, marketing, and software development services for new and emerging businesses.</p>
                 <a href="https://polyfen.com" target="_blank" class="web-url"><img src="imgs/icons/globe.svg" class="web-icon"  alt="">polyfen.com</a>
             </section>
             <hr>
             <section class="sub-brand">
-                <img src="imgs/sub-brands/poly-atlas-logo.svg" alt="Poly Atlas">
+                <h3 class="polyatlas --sub-brand">
+                    <a href="https://polyatlas.wiki" target="_blank" class="web-url">Polyatlas<span></span></a>
+                </h3>
                 <p>Open-source step-by-step guide to the Branding process, including practical tips, case studies, template files, and many other useful resources.</p>
                 <a href="https://polyatlas.wiki" target="_blank" class="web-url"><img src="imgs/icons/globe.svg" class="web-icon"  alt="">polyatlas.wiki</a>
             </section>
             <hr>
             <section class="sub-brand">
-                <img src="imgs/sub-brands/poly-cookies-logo.svg" alt="Poly Cookies">
+                <h3 class="polycookies --sub-brand">
+                    <a href="https://polycookies.com" target="_blank" class="web-url">Polycookies<span></span></a>
+                </h3>
                 <p>Open-source solution to privacy policy implementing a cookie consent banner with Google Tag Manager.</p>
                 <a href="https://polycookies.com" target="_blank" class="web-url"><img src="imgs/icons/globe.svg" class="web-icon">polycookies.com</a>
             </section>
             <hr>
             <section class="sub-brand">
-                <img src="imgs/sub-brands/poly-forum-logo.svg" alt="Poly Forum">
+                <h3 class="polyforum --sub-brand">
+                    <a href="https://polyforum.org" target="_blank" class="web-url">Polyforum<span></span></a>
+                </h3>
                 <p>Non-profit organization dedicated to promoting free and open education and professional growth in the creative industry.</p>
                 <a href="https://polyforum.org" target="_blank" class="web-url"><img src="imgs/icons/globe.svg" class="web-icon">polyforum.org</a>
             </section>
             <hr>
-            <section class="sub-brand" style="display:none;">
-                <img src="imgs/sub-brands/poly-qwerty-logo.svg" alt="Poly Qwerty">
-            </section>
         </section>
         <section class="sub-brands-container">
             <h2 class="heading-1">Works in Progress</h2>
             <hr>
             <section class="sub-brand">
-                <img src="imgs/sub-brands/poly-qwerty-logo.svg" alt="Poly Qwerty">
+                <h3 class="polyqwerty --sub-brand">
+                    <a href="https://polyqwerty.com" target="_blank" class="web-url">polyqwerty<span></span></a>
+                </h3>
                 <p>Your keyboard's assistant. Click on a character to copy it.</p>
                 <a href="https://polyqwerty.com" target="_blank" class="web-url"><img src="imgs/icons/globe.svg" class="web-icon">polyqwerty.com</a>
             </section>
             <hr>
             <section class="sub-brand">
-                <img src="imgs/sub-brands/poly-nucleus-logo.svg" alt="Poly Nucleus">
+                <h3 class="polynucleus --sub-brand">
+                    <a href="https://polynucleus.com" target="_blank" class="web-url">polynucleus<span></span></a>
+                </h3>
                 <p>Open-source design system... in early development. Very — early — development.</p>
                 <a href="https://polynucleus.com" target="_blank" class="web-url"><img src="imgs/icons/globe.svg" class="web-icon" alt="">polynucleus.com</a>
             </section>