From b246e5adb644d5789e8d74e8b500f79107926dd9 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 26 Nov 2023 18:15:34 +0300
Subject: [PATCH] building grid for mobile v.

---
 .../PagesStyles/adaptive-pages/homemobile.css | 35 +++++++++++++++++++
 .../pages/adaptive-pages/HomemobilePage.vue   | 12 ++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css

diff --git a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
new file mode 100644
index 0000000..8e3c322
--- /dev/null
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
@@ -0,0 +1,35 @@
+.content-grid__mobile-home {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr repeat(2, 0.5fr) 1fr;
+    gap: 0px 0px;
+    grid-template-areas:
+    "header-mobile header-mobile header-mobile header-mobile"
+    "main-mobile main-mobile main-mobile main-mobile"
+    "main-mobile main-mobile main-mobile main-mobile"
+    "footer-mobile footer-mobile footer-mobile footer-mobile";
+    height: 100%;
+    width: 100%;
+}
+
+.header-mobile {
+    grid-area: header-mobile;
+    width: 100%;
+    height: 100%;
+    background: #000;
+}
+
+.main-mobile {
+    grid-area: main-mobile;
+    width: 100%;
+    height: 100%;
+    background: #983838;
+}
+
+.footer-mobile {
+    grid-area: footer-mobile;
+    width: 100%;
+    height: 100%;
+    background: #73ce36;
+}
\ No newline at end of file
diff --git a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
index aaea0b8..3f91cfa 100644
--- a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
@@ -1,10 +1,20 @@
 <template>
   <div class="content-grid__mobile-home">
-    <h1>mobile</h1>
+    <header class="header-mobile">
+      <h1>header</h1>
+    </header>
+    <main class="main-mobile">
+      <h1>main</h1>
+    </main>
+    <footer class="footer-mobile">
+      <h1>footer</h1>
+    </footer>
   </div>
 </template>
 
 <script>
+import '@/assets/css/PagesStyles/adaptive-pages/homemobile.css'
+
 export default {
 
 }