Sass scss 001

DemoSass/Scss/abstracts/_mixins.scss

@@ -0,0 +1,23 @@
+@mixin flex-row($gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: $gap;
+
+  @media screen and (max-width: 900px) {
+    flex-wrap: wrap;
+  }
+}
+
+@mixin flex-column($gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+// animation
+
+@mixin transitions($quantity: all, $sec: 0.2s) {
+  transition: $quantity $sec ease;
+}

DemoSass/Scss/abstracts/_variable.scss

@@ -0,0 +1,37 @@
+// colors
+$color-font-base: white;
+$color-font-heading: black;
+
+$color-font-grey: rgb(87, 87, 87);
+
+$color-theme-dark: rgb(53, 53, 53);
+$color-theme-light: white;
+
+$color-strategy: rgb(113, 174, 231);
+$color-analysis: rgb(230, 158, 23);
+$color-implementation: rgb(127, 183, 42);
+
+// fonts
+$fonts-heading-01: 4rem;
+$fonts-heading-02: 2rem;
+$fonts-heading-03: 1.4rem;
+
+// width
+
+$width-full-view: 100vw;
+$width-full-percent: 100vw;
+$height-full: 100vh;
+
+$border-radius-big: 6rem;
+$border-radius-medium: 4rem;
+$border-radius-small: 2rem;
+$border-radius-tiny: 1rem;
+
+$margin-vertical-big: 4rem;
+$margin-vertical-medium: 2rem;
+$margin-vertical-small: 1.2rem;
+
+$padding-horizontal-big: 6rem;
+$padding-horizontal-medium: 4rem;
+$padding-horizontal-small: 2rem;
+$padding-horizontal-tiny: 1rem;

DemoSass/Scss/base/_base.scss

@@ -0,0 +1,22 @@
+@use "../abstracts/mixins" as mxn;
+@use "../abstracts/variable" as var;
+
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  @include mxn.flex-column();
+  background-color: var.$color-theme-light;
+  width: var.$width-full-percent;
+  height: var.$height-full;
+  font-family: "Courier New", Courier, monospace;
+}

DemoSass/Scss/base/_typography.scss

@@ -0,0 +1,4 @@
+
+.features {
+
+}

DemoSass/Scss/components/_card.scss

@@ -0,0 +1,31 @@
+@use "../abstracts/variable" as var;
+
+.feature {
+  padding: 2rem;
+  border-radius: var.$border-radius-small;
+
+  &__heading {
+    font-size: 2rem;
+  }
+
+  &__para {
+    font-size: 1.5rem;
+  }
+
+  &:hover {
+    transform: scale(1.1);
+    transition: all 0.2s ease;
+  }
+}
+
+.strategy {
+  background-color: var.$color-strategy;
+}
+
+.analysis {
+  background-color: var.$color-analysis;
+}
+
+.implementation {
+  background-color: var.$color-implementation;
+}

DemoSass/Scss/layout/_footer.scss

@@ -0,0 +1,9 @@
+@use "../abstracts/mixins" as mxn;
+@use "../abstracts/variable" as var;
+
+.footer {
+  margin-top: var.$margin-vertical-medium;
+  &__para {
+    font-size: var.$fonts-heading-03;
+  }
+}

DemoSass/Scss/layout/_header.scss

@@ -0,0 +1,37 @@
+@use "../abstracts/variable" as var;
+@use "../abstracts/mixins" as mxn;
+
+.header {
+  @include mxn.flex-column();
+  width: calc(var.$width-full-percent / 1.5);
+  padding: 2rem 4rem;
+  position: relative;
+
+  &__btn {
+    position: absolute;
+    top: 0;
+    right: 4rem;
+    width: 8rem;
+    color: var.$color-theme-light;
+    background-color: var.$color-theme-dark;
+    border: 0.1rem solid var.$color-font-grey;
+    border-radius: var.$border-radius-small;
+    padding: calc(var.$padding-horizontal-tiny/2) var.$padding-horizontal-tiny;
+    @include mxn.transitions(all, 0.2s);
+    cursor: pointer;
+
+    &:active {
+      transform: translateY(0.3rem);
+      @include mxn.transitions(all, 0.2s);
+      @include mxn.transitions(all, 0.2s);
+    }
+  }
+
+  &__heading {
+    font-size: var.$fonts-heading-01;
+  }
+
+  &__para {
+    font-size: var.$fonts-heading-02;
+  }
+}

DemoSass/Scss/main.scss

@@ -0,0 +1,7 @@
+
+@use './base/base' as *;
+@use './components/card' as *;
+@use './pages/features.scss' as *;
+@use './layout/header' as *;
+@use './layout/footer' as *;
+

DemoSass/Scss/pages/features.scss

@@ -0,0 +1,10 @@
+@use "../abstracts/variable" as var;
+@use "../abstracts/mixins" as mxn;
+
+.features {
+  @include mxn.flex-row(2rem);
+  width: calc(var.$width-full-percent / 1.5);
+  background-color: var.$color-theme-dark;
+  padding: 4rem 8rem;
+  border-radius: var.$border-radius-tiny;
+}

DemoSass/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="Style/style.css" />
+    <title>Consulting Landing Page</title>
+  </head>
+  <body>
+    <header class="header">
+      <button class="header__btn">Theme</button>
+      <h1 class="header__heading">Scss Services</h1>
+      <p class="header__para">Your Trusted Partner in CSS Solutions</p>
+    </header>
+
+    <main class="features">
+      <div class="feature strategy">
+        <h2 class="feature__heading">Strategy</h2>
+        <p class="feature__para">
+          Develop effective business strategies to achieve your goals.
+        </p>
+      </div>
+      <div class="feature analysis">
+        <h2 class="feature__heading">Analysis</h2>
+        <p class="feature__para">
+          Thorough analysis of your business to identify areas for improvement.
+        </p>
+      </div>
+      <div class="feature implementation">
+        <h2 class="feature__heading">Implementation</h2>
+        <p class="feature__para">
+          Implement tailored solutions to enhance your business operations.
+        </p>
+      </div>
+    </main>
+
+    <!-- <section class="contact" >
+            <h2 class="feature__heading">Contact Us</h2>
+            <p class="feature__para">Ready to take your business to the next level? Contact us
+                today!</p>
+            <a class="feature__link" href="mailto:[email protected]">[email protected]</a>
+        </section> -->
+
+    <footer class="footer">
+      <p class="footer__para">
+        &copy; 2024 Sass Services. All rights reserved.
+      </p>
+    </footer>
+  </body>
+</html>

DemoSass/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "scss_landing_page",
+  "version": "1.0.0",
+  "description": "<div style=\"display:flex\"> <img  style=\"flex:1; padding-right:10px\" width=\"400\" height=\"300\" src=\".\\media\\dark_theme.png\">",
+  "main": "theme-switcher.js",
+  "scripts": {
+    "sassComp":"sass --watch Scss/main.scss:Style/style.css"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

README.md

@@ -1 +1,21 @@
-# Learning
+# This repo is all about Sass/Scss 
+
+### What is Sass/Scss?
+
+### How to install and etc?
+
+### To read .jex file:
+
+```
+// linux
+
+wget -O - https://raw.githubusercontent.com/laurent22/joplin/dev/Joplin_install_and_update.sh | bash
+```
+
+```
+// window and other visit this link: 
+
+    https://joplinapp.org/help/install/
+```
+
+### Everything will be inside SassScss.jex file. Or you can just have pdf files.