diff --git a/DemoSass/Scss/abstracts/_functions.scss b/DemoSass/Scss/abstracts/_functions.scss new file mode 100644 index 0000000..e69de29 diff --git a/DemoSass/Scss/abstracts/_mixins.scss b/DemoSass/Scss/abstracts/_mixins.scss new file mode 100644 index 0000000..37498dc --- /dev/null +++ b/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; +} diff --git a/DemoSass/Scss/abstracts/_variable.scss b/DemoSass/Scss/abstracts/_variable.scss new file mode 100644 index 0000000..785f774 --- /dev/null +++ b/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; diff --git a/DemoSass/Scss/base/_base.scss b/DemoSass/Scss/base/_base.scss new file mode 100644 index 0000000..cfc7619 --- /dev/null +++ b/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; +} diff --git a/DemoSass/Scss/base/_typography.scss b/DemoSass/Scss/base/_typography.scss new file mode 100644 index 0000000..fa65040 --- /dev/null +++ b/DemoSass/Scss/base/_typography.scss @@ -0,0 +1,4 @@ + +.features { + +} \ No newline at end of file diff --git a/DemoSass/Scss/components/_card.scss b/DemoSass/Scss/components/_card.scss new file mode 100644 index 0000000..a8d39e0 --- /dev/null +++ b/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; +} diff --git a/DemoSass/Scss/layout/_footer.scss b/DemoSass/Scss/layout/_footer.scss new file mode 100644 index 0000000..6a87372 --- /dev/null +++ b/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; + } +} diff --git a/DemoSass/Scss/layout/_header.scss b/DemoSass/Scss/layout/_header.scss new file mode 100644 index 0000000..5f5de0f --- /dev/null +++ b/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; + } +} diff --git a/DemoSass/Scss/main.scss b/DemoSass/Scss/main.scss new file mode 100644 index 0000000..aca43c9 --- /dev/null +++ b/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 *; + diff --git a/DemoSass/Scss/pages/features.scss b/DemoSass/Scss/pages/features.scss new file mode 100644 index 0000000..0b39d8a --- /dev/null +++ b/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; +} diff --git a/DemoSass/Style/style.css b/DemoSass/Style/style.css new file mode 100644 index 0000000..b2cad77 --- /dev/null +++ b/DemoSass/Style/style.css @@ -0,0 +1,109 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: white; + width: 100vw; + height: 100vh; + font-family: "Courier New", Courier, monospace; +} + +.feature { + padding: 2rem; + border-radius: 2rem; +} +.feature__heading { + font-size: 2rem; +} +.feature__para { + font-size: 1.5rem; +} +.feature:hover { + transform: scale(1.1); + transition: all 0.2s ease; +} + +.strategy { + background-color: rgb(113, 174, 231); +} + +.analysis { + background-color: rgb(230, 158, 23); +} + +.implementation { + background-color: rgb(127, 183, 42); +} + +.features { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + width: 66.6666666667vw; + background-color: rgb(53, 53, 53); + padding: 4rem 8rem; + border-radius: 1rem; +} +@media screen and (max-width: 900px) { + .features { + flex-wrap: wrap; + } +} + +.header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 66.6666666667vw; + padding: 2rem 4rem; + position: relative; +} +.header__btn { + position: absolute; + top: 0; + right: 4rem; + width: 8rem; + color: white; + background-color: rgb(53, 53, 53); + border: 0.1rem solid rgb(87, 87, 87); + border-radius: 2rem; + padding: 0.5rem 1rem; + transition: all 0.2s ease; + cursor: pointer; +} +.header__btn:active { + transform: translateY(0.3rem); + transition: all 0.2s ease; + transition: all 0.2s ease; +} +.header__heading { + font-size: 4rem; +} +.header__para { + font-size: 2rem; +} + +.footer { + margin-top: 2rem; +} +.footer__para { + font-size: 1.4rem; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/DemoSass/Style/style.css.map b/DemoSass/Style/style.css.map new file mode 100644 index 0000000..cce2262 --- /dev/null +++ b/DemoSass/Style/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../Scss/base/_base.scss","../Scss/abstracts/_mixins.scss","../Scss/abstracts/_variable.scss","../Scss/components/_card.scss","../Scss/pages/features.scss","../Scss/layout/_header.scss","../Scss/layout/_footer.scss"],"names":[],"mappings":"AAGA;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;;AAGF;ECFE;EACA;EACA;EACA;EDCA,kBEVkB;EFWlB,OEGmB;EFFnB,QEGY;EFFZ;;;AGlBF;EACE;EACA,eDsBoB;;ACpBpB;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE,kBDZe;;;ACejB;EACE,kBDfe;;;ACkBjB;EACE,kBDlBqB;;;AERvB;EHFE;EACA;EACA;EACA;EACA,KGDsB;EACtB;EACA;EACA;EACA,eFmBmB;;ADpBnB;EGJF;IHKI;;;;AILJ;EJUE;EACA;EACA;EACA;EIXA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,OHPgB;EGQhB,kBHTe;EGUf;EACA,eHSkB;EGRlB;EJGF;EIDE;;AAEA;EACE;EJFJ;EAAA;;AIQA;EACE,WHhBe;;AGmBjB;EACE,WHnBe;;;AIZnB;EACE,YJ0BuB;;AIzBvB;EACE,WJUe","file":"style.css"} \ No newline at end of file diff --git a/DemoSass/index.html b/DemoSass/index.html new file mode 100644 index 0000000..7d56eef --- /dev/null +++ b/DemoSass/index.html @@ -0,0 +1,50 @@ + + + + + + + Consulting Landing Page + + +
+ +

Scss Services

+

Your Trusted Partner in CSS Solutions

+
+ +
+
+

Strategy

+

+ Develop effective business strategies to achieve your goals. +

+
+
+

Analysis

+

+ Thorough analysis of your business to identify areas for improvement. +

+
+
+

Implementation

+

+ Implement tailored solutions to enhance your business operations. +

+
+
+ + + + + + diff --git a/DemoSass/package.json b/DemoSass/package.json new file mode 100644 index 0000000..fd6a83c --- /dev/null +++ b/DemoSass/package.json @@ -0,0 +1,12 @@ +{ + "name": "scss_landing_page", + "version": "1.0.0", + "description": "
", + "main": "theme-switcher.js", + "scripts": { + "sassComp":"sass --watch Scss/main.scss:Style/style.css" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/Pdf files /BEM.pdf b/Pdf files /BEM.pdf new file mode 100644 index 0000000..dae38a7 Binary files /dev/null and b/Pdf files /BEM.pdf differ diff --git a/Pdf files /Collection.pdf b/Pdf files /Collection.pdf new file mode 100644 index 0000000..7a306ac Binary files /dev/null and b/Pdf files /Collection.pdf differ diff --git a/Pdf files /Extend.pdf b/Pdf files /Extend.pdf new file mode 100644 index 0000000..14b5209 Binary files /dev/null and b/Pdf files /Extend.pdf differ diff --git a/Pdf files /Functions.pdf b/Pdf files /Functions.pdf new file mode 100644 index 0000000..ebc313c Binary files /dev/null and b/Pdf files /Functions.pdf differ diff --git a/Pdf files /Installation.pdf b/Pdf files /Installation.pdf new file mode 100644 index 0000000..96109e7 Binary files /dev/null and b/Pdf files /Installation.pdf differ diff --git a/Pdf files /Mixins.pdf b/Pdf files /Mixins.pdf new file mode 100644 index 0000000..0cc33e8 Binary files /dev/null and b/Pdf files /Mixins.pdf differ diff --git a/Pdf files /Partials.pdf b/Pdf files /Partials.pdf new file mode 100644 index 0000000..1736e4c Binary files /dev/null and b/Pdf files /Partials.pdf differ diff --git a/Pdf files /Sass 7-1 Pattern.pdf b/Pdf files /Sass 7-1 Pattern.pdf new file mode 100644 index 0000000..8e093a7 Binary files /dev/null and b/Pdf files /Sass 7-1 Pattern.pdf differ diff --git a/Pdf files /Variable.pdf b/Pdf files /Variable.pdf new file mode 100644 index 0000000..e6f9b64 Binary files /dev/null and b/Pdf files /Variable.pdf differ diff --git a/Pdf files /What is Sass_Scss.pdf b/Pdf files /What is Sass_Scss.pdf new file mode 100644 index 0000000..f9284b5 Binary files /dev/null and b/Pdf files /What is Sass_Scss.pdf differ diff --git a/Pdf files /if...else.pdf b/Pdf files /if...else.pdf new file mode 100644 index 0000000..a11f0a3 Binary files /dev/null and b/Pdf files /if...else.pdf differ diff --git a/README.md b/README.md index 5d05ca7..5917e8e 100644 --- a/README.md +++ b/README.md @@ -1 +1,21 @@ -# Learning \ No newline at end of file +# 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. \ No newline at end of file diff --git a/SassScss.jex b/SassScss.jex new file mode 100644 index 0000000..675d736 Binary files /dev/null and b/SassScss.jex differ diff --git a/index.html b/index.html deleted file mode 100644 index 027f643..0000000 --- a/index.html +++ /dev/null @@ -1,135 +0,0 @@ - - - - - - - - - 2Toucons Lab - - - - - - - - - -
-
-
-
-

2Toucons Learning Hub

-

Listen, Learn, Contribute

- Learn Something -
-
-
-
- - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css deleted file mode 100644 index 515ef24..0000000 --- a/static/css/style.css +++ /dev/null @@ -1,3 +0,0 @@ -body{ - background-color: rgb(150, 199, 179); -} \ No newline at end of file diff --git a/static/images/2toucons.jpg b/static/images/2toucons.jpg deleted file mode 100644 index 027771c..0000000 Binary files a/static/images/2toucons.jpg and /dev/null differ diff --git a/templates/scss.html b/templates/scss.html deleted file mode 100644 index adff380..0000000 --- a/templates/scss.html +++ /dev/null @@ -1,135 +0,0 @@ - - - - - - - - - 2Toucons Lab - - - - - - - - - - -
-
-
-

SCSS

-

Starting Off

-

Learn about sass ‘watch’ and how the parent scss file ‘watches’ - the output file which is the css file. So any changes in scss will be made in the css file too. - Learnt about nesting with scss. Seeking selectors with a common root and then joining them together. - Learnt about the ‘direct selector’ or ampersand which targets direct parent. Competed a small project making a ‘contact details card’. Learnt about a site called ‘gavatar’ where you can host personalised avatars - which I could then link to the details card I made. -

-
-
-
- - - - - - - - - - - - - - - - - - - \ No newline at end of file