Improves the badge on the special offer page + includes the live example.

2 files changed, 45 insertions, 47 deletions

diff --git a/angebote/angebote.php b/angebote/angebote.php
index 7e67526..b6129fe 100644
--- a/angebote/angebote.php
+++ b/angebote/angebote.php
@@ -22,48 +22,9 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 			<main class="site-main offer-page" id="main">
 
-    <div class="card">
-      <div class="row ">
-        <div class="col-md-4">
-            <img src="https://res-2.cloudinary.com/boozeboodcdn/image/upload/e_trim:10/c_pad,g_south,h_400,w_280/c_limit,h_910,w_280/f_auto,q_auto:best/v1/HD/27727.jpg" class="w-100 card-img">
-	    <div class="card-img-overlay">
-                <p class="card-text float-right rounded off-badge">15%</p>
-            </div>
-          </div>
-          <div class="col-md-8 px-10">
-	    <div class="card-header">
-		<p><strong>
-		Whisky <span class="float-right">Drankdozijn</span>
-		</strong></p>
-	    </div>
-            <div class="card-block card-body px-3">
-              <h3 class="card-title">Bunnahabhain Toiteach</h3>
-		<div class="row">
-		      <p class="card-text col-md-6">
-			      Preis: 44 €
-			      <br>
-			      Alter Preis: 51,50 €
-			      <br>
-			      Versand: 4,95 €, gratis ab 250 €
-		      </p>
-		      <p class="card-text col-md-6">
-			      Alkohol: 46 % 
-			      <br>
-			      Volumen: 0,7 Liter
-			      <br>
-			      62,86 € / Liter
-		      </p>
-                </div>
-            </div>
-            <div class="card-footer">
-              <a href="#" class="btn btn-primary">Zum Shop</a>
-	      <p class="float-right">Preis vom 1. Februar</p>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
+<?php
+        echo file_get_contents("https://angebote.fuselkoenig.de/wp/whisky?page=00");
+?>
 			</main><!-- #main -->
 
 			<!-- Do the right sidebar check -->
diff --git a/sass/theme/_offer.scss b/sass/theme/_offer.scss
index 710b18f..9808149 100644
--- a/sass/theme/_offer.scss
+++ b/sass/theme/_offer.scss
@@ -19,16 +19,53 @@
 	padding-bottom: 0;
 }
 
+.card-header-dp-none {
+	 @extend .card-header;
+	 border-bottom: inherit;
+}
+
+.card-img-overlay-badge {
+	bottom: inherit;
+	left: inherit;
+	top: 12%;
+}
+
 .off-badge {
 	color: white; 
 	background-color: #F82F06 !important;
-	font-size: 150%; 
+	font-size: 150% !important; 
 	padding-right: 10px; 
 	padding-left:10px; 
 	opacity: 0.9;
-	margin-bottom: 150% !important;
-	margin-right: 1rem;
 }
-.off-badge-small {
-	font-size: 120%; 
+
+@media (min-width: 768px) {
+	.card-img {
+		padding: 0;
+		margin-left: 1rem;
+	}
+	.off-badge {
+		margin-top: 20px !important;
+	}
+}
+@media (max-width: 767px) {
+	.card-header-dp-none {
+		display: none !important;
+	}
+	.off-badge {
+		font-size: 200% !important;
+		margin-right: 2rem;
+	}
+}
+
+.btn-tertiary {
+	@extend .btn-secondary;
+	background-color: #0088A3;
+	/*
+	background-color: #06C9F0;
+	*/
+}
+
+.btn-group {
+	box-shadow: inherit;
 }