TASK: m_pacenote-driver -> basic file setup

ParadoxMike · Jan 8, 2020 · 60b7cb4 · 60b7cb4
1 parent c88a309
commit 60b7cb4
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 0 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/src/scss/modules/m_pacenote-driver.scss b/src/scss/modules/m_pacenote-driver.scss
@@ -0,0 +1,23 @@
+.m_pacenote-driver {
+    background-color: $c-black;
+    height: auto;
+    width: 100%;
+    position: relative;
+
+    @include media-breakpoint-up(md) {
+        height: 100%;
+    }
+
+    &__info-container {
+        margin: 0 auto;
+        width: 100%;
+
+        @include media-breakpoint-up(md) {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 60%;
+        }
+    }
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -29,6 +29,7 @@ STYLESHEET: STYLE
 @import "modules/m_image-text-left";
 @import "modules/m_image-text-right";
 @import "modules/m_demo";
+@import "modules/m_pacenote-driver";
 
 // Navigation
 @import "navigation/n_site";

diff --git a/templates/base.twig b/templates/base.twig
@@ -20,6 +20,9 @@
             <section class="section">
                 {% include 'modules/m_demo.twig' %}
             </section>
+            <section class="section">
+                {% include 'modules/m_pacenote-driver.twig' %}
+            </section>
         {% endblock %}
 
         {% block footer %}

diff --git a/templates/modules/m_pacenote-driver.twig b/templates/modules/m_pacenote-driver.twig
@@ -0,0 +1,15 @@
+{# USES
+    {% include 'modules/m_pacenote-driver.twig' %}
+#}
+
+<div class="m_pacenote-driver">
+    <div class="m_pacenote-driver__info-container">
+        <div class="row mx-0">
+            <div class="col-md-6 bg-c-white d-none d-md-block">
+                <h1 class="h1">iphone here</h1>
+            </div>
+            <div class="col-12 col-md-6  py-300 py-sm-400 px-150 px-sm-250 p-md-0">
+            </div>
+        </div>
+    </div>
+</div>