Begin styling footer

thegreenwebfoundation · Aug 1, 2023 · 49af29d · 49af29d
1 parent 0c784b0
commit 49af29d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 3 deletions.
diff --git a/apps/theme/static/img/GWF-logo-white.svg b/apps/theme/static/img/GWF-logo-white.svg
diff --git a/apps/theme/templates/greencheck/partials/directory_ctas.html b/apps/theme/templates/greencheck/partials/directory_ctas.html
@@ -12,21 +12,21 @@ <h2 class="text-2xl md:text-4xl md:text-black border-none mb-0">Found this Direc
 
 			<h3 class="heading-icon__sunburst--yellow uppercase text-xl md:text-med font-normal">Talk<br/> about us</h3>
 			<p class="mt-0.5 pt-4 border-t-2">When you use our open source work and cite us publically it helps us show our impact to funders.</p>
-			<a class="btn btn-white btn-sm mt-4 mb-12" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/how-to-cite-our-work/">
+			<a class="btn btn-white btn-sm mt-4 mb-12 md:mb-0" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/how-to-cite-our-work/">
 				How to cite our work
 				<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link.svg' %}" alt="Visit {{ obj.name }}'s website"/>
 			</a>
 
 			<h3 class="heading-icon__plant--orange uppercase text-xl md:text-med font-normal">Share your<br/> suggestions</h3>
 			<p class="mt-0.5 pt-4 border-t-2">We welcome your feedback and perspectives on how to make this Directory better.</p>
-			<a class="btn btn-black text-white btn-sm mt-4 mb-12" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/support-form/">
+			<a class="btn btn-black text-white btn-sm mt-4 mb-12 md:mb-0" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/support-form/">
 				Send us a message
 				<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link-white.svg' %}" alt="Visit {{ obj.name }}'s website"/>
 			</a>
 
 			<h3 class="heading-icon__lightning--purple uppercase text-xl md:text-med font-normal">Donate<br/> to us</h3>
 			<p class="mt-0.5 pt-4 border-t-2">We are non-profit working for the public benefit, with more funding we can have more impact.</p>
-			<a class="btn btn-green btn-sm mt-4 mb-12" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/donate/">
+			<a class="btn btn-green btn-sm mt-4" target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/donate/">
 				Support us financially
 				<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link.svg' %}" alt="Visit {{ obj.name }}'s website"/>
 			</a>

diff --git a/apps/theme/templates/greencheck/partials/directory_footer.html b/apps/theme/templates/greencheck/partials/directory_footer.html
@@ -0,0 +1,67 @@
+{% load static %}
+
+<footer class="bg-black">
+	<div class="container mx-auto text-white py-8 md:pt-12 lg:pb-12 px-2 sm:px-4 min-[450px]:flex min-[450px]:flex-wrap">
+
+		<div class="mb-8 md:mb-0 min-[450px]:w-full md:w-1/2">
+			<div class="flex gap-8 justify-between items-center py-6 md:pt-0">
+				<div class="">
+					<a href="/">
+						<img width="200px" height="48px" src="{% static 'img/GWF-logo-white.svg' %}" alt="The Green Web Foundation logo"/>
+					</a>
+				</div>
+
+				<div class="flex-grow border-l border-white text-medium pl-8 h-12 flex items-center">
+					<p class="font-bold">Directory</p>
+				</div>
+			</div>
+
+			<p>Towards a fossil-free internet by 2030</p>
+		</div>
+
+		<div class="mb-8 min-[450px]:w-1/2 md:w-1/4">
+			<h4 class="text-green text-base uppercase font-normal">Help</h4>
+
+			<ul class="list-none">
+				<li>
+					<a class="text-white text-sm target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/get-verified/">
+						Get listed
+					</a>
+				</li>
+				<li>
+					<a class="text-white text-sm target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/support-form/">
+						Submit correction
+					</a>
+				</li>
+				<li>
+					<a class="text-white text-sm target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/support-form/">
+						General queries
+					</a>
+				</li>
+			</ul>
+		</div>
+
+		<div class="mb-4 min-[450px]:w-1/2 md:w-1/4">
+			<h4 class="text-green text-base uppercase font-normal">About</h4>
+
+			<ul class="list-none">
+				<li>
+					<a class="text-white text-sm target="_blank" rel="noopener noreferrer" href="#">
+						About the data
+					</a>
+				</li>
+				<li>
+					<a class="text-white text-sm target="_blank" rel="noopener noreferrer" href="https://www.thegreenwebfoundation.org/about/">
+						About Green Web Foundation
+					</a>
+				</li>
+				<li>
+					<a class="text-white text-sm target="_blank" rel="noopener noreferrer" href="#">
+						Privacy policy
+					</a>
+				</li>
+			</ul>
+		</div>
+
+	</div>
+</footer>