diff --git a/dist/css/main.css b/dist/css/main.css index ff7a888..c9fdeee 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1,24 +1,71 @@ -*, ::before, ::after { - padding: 0; +/* +0 - 600px: Phone +600 - 900px: Tablet portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our normal styles apply +1800px + : Big desktop + +$breakpoint arguement choices: +- phone +- tab-port +- tab-land +- big-desktop + +ORDER: Base + typography > general layout + grid > page layout > components + +1em = 16px +*/ +*, +*::after, +*::before { margin: 0; - box-sizing: border-box; } + padding: 0; + box-sizing: inherit; } html { - font-size: 16px; } + font-size: 100%; } + +body { + box-sizing: border-box; } + @media only screen and (max-width: 56.25em) { + body { + padding: 0; } } .bg-green { - background-color: #3BB78F; - background: linear-gradient(90deg, #3BB78F 0%, #0bab64 35%, #3bb78f 100%); } + background-color: #3bb78f; + background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); } -.banner_heading_4 { +.font-3 { font-size: 3rem; } +.font-1_5 { + font-size: 2rem; } + .subtitle_1 { font-size: 1.5rem; } +.gap-1 { + gap: 0.7rem; } + +.banner_heading_4 { + font-size: 3rem; } + .padding_top_14 { padding-top: 14rem; } +.vh-85 { + height: 85vh; } + +.vh-15 { + height: 15vh; } + +.button_dark { + clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0); + padding-right: 1.7rem; + padding-bottom: 0.6rem; + padding-top: 0.6rem; + border-radius: 10px; } + .photo_dual { width: 40rem; } @@ -28,22 +75,5 @@ html { .boxImgContainer { width: 4rem; } -.vh-85 { - height: 85vh; } - -.vh-15 { - height: 15vh; } - -.font-3 { - font-size: 3rem; } - -.font-1_5 { - font-size: 2rem; } - -.gap-1 { - font-size: 0.7rem; } - .priceCut_multi { font-size: .7rem; } - - diff --git a/dist/html/pages/index.html b/dist/html/pages/index.html index 3012bf1..6ea1b08 100644 --- a/dist/html/pages/index.html +++ b/dist/html/pages/index.html @@ -30,9 +30,9 @@ - - - + + + \ No newline at end of file diff --git a/dist/html/pages/laptopmulti.html b/dist/html/pages/laptopmulti.html index d038e1b..294c46e 100644 --- a/dist/html/pages/laptopmulti.html +++ b/dist/html/pages/laptopmulti.html @@ -12,7 +12,13 @@ +
+ + + + +
@@ -59,8 +65,26 @@
+
+
+
Overview
+
The Laptop of tomorrow with + 4K OLED Dual Screen for Creative Multitasking
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor + invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit + amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+
+ + + + + + + + diff --git a/scss/_variables.scss b/scss/_variables.scss deleted file mode 100644 index 3d88a70..0000000 --- a/scss/_variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -$primary-color: steelblue; -$secondary-color: skyblue; -$light-color: #f4f4f4; -$dark-color: #333; -$font-stack: Arial, Helvetica, sans-serif; - diff --git a/scss/_functions.scss b/scss/abstracts/_functions.scss similarity index 100% rename from scss/_functions.scss rename to scss/abstracts/_functions.scss diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss new file mode 100644 index 0000000..5cd31c5 --- /dev/null +++ b/scss/abstracts/_mixins.scss @@ -0,0 +1,41 @@ + +@mixin absCenter { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + + +// MEDIA QUERY MANAGER +/* +0 - 600px: Phone +600 - 900px: Tablet portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our normal styles apply +1800px + : Big desktop + +$breakpoint arguement choices: +- phone +- tab-port +- tab-land +- big-desktop + +ORDER: Base + typography > general layout + grid > page layout > components + +1em = 16px +*/ +@mixin respond($breakpoint) { + @if $breakpoint == phone { + @media only screen and (max-width: 37.5em) { @content }; //600px + } + @if $breakpoint == tab-port { + @media only screen and (max-width: 56.25em) { @content }; //900px + } + @if $breakpoint == tab-land { + @media only screen and (max-width: 75em) { @content }; //1200px + } + @if $breakpoint == big-desktop { + @media only screen and (min-width: 112.5em) { @content }; //1800 + } +} diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss new file mode 100644 index 0000000..ef9f658 --- /dev/null +++ b/scss/abstracts/_variables.scss @@ -0,0 +1,2 @@ +// $primary-color: steelblue; + diff --git a/scss/base/_base.scss b/scss/base/_base.scss new file mode 100644 index 0000000..13572f9 --- /dev/null +++ b/scss/base/_base.scss @@ -0,0 +1,21 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 100%; +} + +body { + box-sizing: border-box; + + + @include respond(tab-port) { + padding: 0; + } +} + diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss new file mode 100644 index 0000000..e69de29 diff --git a/scss/base/_utilities.scss b/scss/base/_utilities.scss new file mode 100644 index 0000000..102afb6 --- /dev/null +++ b/scss/base/_utilities.scss @@ -0,0 +1,42 @@ +// colors +.bg-green { + background-color: #3bb78f; + background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%); +} + +// font size +.font-3 { + font-size: 3rem; +} +.font-1_5 { + font-size: 2rem; +} + +.subtitle_1 { + font-size: 1.5rem; +} + +.gap-1 { + gap: 0.7rem; +} + +.banner_heading_4 { + font-size: 3rem; +} + + +// padding + +.padding_top_14 { + padding-top: 14rem; +} + +// heights + +.vh-85 { + height: 85vh; +} + +.vh-15 { + height: 15vh; +} diff --git a/scss/components/__button.scss b/scss/components/__button.scss new file mode 100644 index 0000000..abd958c --- /dev/null +++ b/scss/components/__button.scss @@ -0,0 +1,8 @@ +// button +.button_dark{ + clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0); + padding-right: 1.7rem; + padding-bottom: 0.6rem; + padding-top: 0.6rem; + border-radius: 10px; +} \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index 81fde1b..a15bfdc 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,74 +1,14 @@ -@import 'variables'; -@import 'functions'; +@import "abstracts/functions"; +@import "abstracts/mixins"; +@import "abstracts/variables"; -*,::before,::after{ - padding: 0; - margin: 0; - box-sizing: border-box; - -} +@import "base/base"; +@import "base/typography"; +@import "base/utilities"; -html{ - font-size: 16px; -} -.bg-green{ - background-color:#3BB78F; - background: linear-gradient(90deg, #3BB78F 0%, rgba(11,171,100,1) 35%, rgba(59,183,143,1) 100%); -} +// components +@import "components/_button"; -.banner_heading_4{ - font-size: 3rem; -} - -.subtitle_1{ - font-size: 1.5rem; -} - -.padding_top_14{ - padding-top: 14rem; -} - -.photo_dual{ - width:40rem; -} - -.price_footer{ - background-color:#52cba5; -} - -.boxImgContainer{ - width: 4rem; - -} - -.vh-85{ - height: 85vh; -} - -.vh-15{ - height: 15vh; -} - -.font-3{ - font-size: 3rem; -} -.font-1_5{ - font-size: 2rem; -} - -.gap-1{ - font-size: 0.7rem; -} - -.priceCut_multi{ - font-size: .7rem; -} -// button -.button_dark{ - clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0); - padding-right: 1.7rem; - padding-bottom: 0.6rem; - padding-top: 0.6rem; - border-radius: 10px; -} \ No newline at end of file +// pages +@import "pages/productOverview.scss"; \ No newline at end of file diff --git a/scss/pages/productOverview.scss b/scss/pages/productOverview.scss new file mode 100644 index 0000000..d7ed39c --- /dev/null +++ b/scss/pages/productOverview.scss @@ -0,0 +1,19 @@ +.photo_dual{ + width:40rem; + } + + .price_footer{ + background-color:#52cba5; + } + + .boxImgContainer{ + width: 4rem; + + } + + + + .priceCut_multi{ + font-size: .7rem; + } + \ No newline at end of file