diff --git a/WebDevelopment/06-ResponsiveDesign/Source/Html/_footer.dhtml b/WebDevelopment/06-ResponsiveDesign/Source/Html/_footer.dhtml new file mode 100644 index 0000000..b317cc2 --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/Source/Html/_footer.dhtml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/WebDevelopment/06-ResponsiveDesign/Source/Html/_header.dhtml b/WebDevelopment/06-ResponsiveDesign/Source/Html/_header.dhtml new file mode 100644 index 0000000..e536579 --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/Source/Html/_header.dhtml @@ -0,0 +1,8 @@ + + + + + Title + + + \ No newline at end of file diff --git a/WebDevelopment/06-ResponsiveDesign/Source/Html/index.dhtml b/WebDevelopment/06-ResponsiveDesign/Source/Html/index.dhtml new file mode 100644 index 0000000..aa190bb --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/Source/Html/index.dhtml @@ -0,0 +1,31 @@ + + +
+
+
+
+

AngelSix

+

I develop software and hardware

+ +
+
Tell me more
+
Contact me
+
+ +
+
+
+
+ +
+
+
+
Content A
+
Content B
+
Content C
+
Content D
+
+
+
+ + diff --git a/WebDevelopment/06-ResponsiveDesign/Source/Sass/dna.config b/WebDevelopment/06-ResponsiveDesign/Source/Sass/dna.config new file mode 100644 index 0000000..d6a5e87 --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/Source/Sass/dna.config @@ -0,0 +1,3 @@ +{ + "outputPath": "../../WebRoot/Assets/Css" +} \ No newline at end of file diff --git a/WebDevelopment/06-ResponsiveDesign/Source/Sass/style.scss b/WebDevelopment/06-ResponsiveDesign/Source/Sass/style.scss new file mode 100644 index 0000000..65aa2fc --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/Source/Sass/style.scss @@ -0,0 +1,95 @@ +html +{ + background: black; + color: white; + font-family: sans-serif; +} + +body { margin: 0; } +h1,h2,h3,h4,h5,h6,p { margin: 0; line-height: 1.3; } + +.container +{ + padding: 24px; +} + +.header { background: blue; } + +.wrapper +{ + max-width: 1000px; + margin-left: auto; + margin-right: auto; +} + +.center { text-align: center; } + +.grid +{ + font-size: 0; + + .col + { + box-sizing: border-box; + + font-size: 16px; + + display: inline-block; + width: 100%; + + &.half { width: 50%; } + + &.content-a, &.content-b, &.content-c, &.content-d + { + width: 25%; + padding: 20px; + } + + // Below Desktop Responsive Styles + @media only screen and (max-width: 900px) + { + &.content-a, &.content-b, &.content-c, &.content-d + { + width: 50%; + } + + .button + { + text-align: center; + display: block; + } + } + + // Below Tablet Responsive Styles + @media only screen and (max-width: 600px) + { + &.content-a, &.content-b, &.content-c, &.content-d + { + width: 100%; + } + + .half + { + width: 100%; + } + + } + + &.content-a { background: red; } + &.content-b { background: green; } + &.content-c { background: blue; } + &.content-d { background: yellow; } + } +} + +.button +{ + border: 1px solid white; + border-radius: 5px; + padding: 20px; + margin: 5px; + display: inline-block; +} + +.left { text-align: left; } +.right { text-align: right; } \ No newline at end of file diff --git a/WebDevelopment/06-ResponsiveDesign/Source/dna.config b/WebDevelopment/06-ResponsiveDesign/Source/dna.config new file mode 100644 index 0000000..c8df629 --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/Source/dna.config @@ -0,0 +1,4 @@ +{ + "outputPath": "../WebRoot", + "liveServers": [ "../WebRoot" ] +} \ No newline at end of file diff --git a/WebDevelopment/06-ResponsiveDesign/WebRoot/Assets/Css/style.css b/WebDevelopment/06-ResponsiveDesign/WebRoot/Assets/Css/style.css new file mode 100644 index 0000000..f17b664 --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/WebRoot/Assets/Css/style.css @@ -0,0 +1,72 @@ +html { + background: black; + color: white; + font-family: sans-serif; } + +body { + margin: 0; } + +h1, h2, h3, h4, h5, h6, p { + margin: 0; + line-height: 1.3; } + +.container { + padding: 24px; } + +.header { + background: blue; } + +.wrapper { + max-width: 1000px; + margin-left: auto; + margin-right: auto; } + +.center { + text-align: center; } + +.grid { + font-size: 0; } + .grid .col { + box-sizing: border-box; + font-size: 16px; + display: inline-block; + width: 100%; } + .grid .col.half { + width: 50%; } + .grid .col.content-a, .grid .col.content-b, .grid .col.content-c, .grid .col.content-d { + width: 25%; + padding: 20px; } + @media only screen and (max-width: 900px) { + .grid .col.content-a, .grid .col.content-b, .grid .col.content-c, .grid .col.content-d { + width: 50%; } + .grid .col .button { + text-align: center; + display: block; } } + @media only screen and (max-width: 600px) { + .grid .col.content-a, .grid .col.content-b, .grid .col.content-c, .grid .col.content-d { + width: 100%; } + .grid .col .half { + width: 100%; } } + .grid .col.content-a { + background: red; } + .grid .col.content-b { + background: green; } + .grid .col.content-c { + background: blue; } + .grid .col.content-d { + background: yellow; } + +.button { + border: 1px solid white; + border-radius: 5px; + padding: 20px; + margin: 5px; + display: inline-block; } + +.left { + text-align: left; } + +.right { + text-align: right; } + +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/WebDevelopment/06-ResponsiveDesign/WebRoot/index.html b/WebDevelopment/06-ResponsiveDesign/WebRoot/index.html new file mode 100644 index 0000000..5b50bd2 --- /dev/null +++ b/WebDevelopment/06-ResponsiveDesign/WebRoot/index.html @@ -0,0 +1,39 @@ + + + + + Title + + + + +
+
+
+
+

AngelSix

+

I develop software and hardware

+ +
+
Tell me more
+
Contact me
+
+ +
+
+
+
+ +
+
+
+
Content A
+
Content B
+
Content C
+
Content D
+
+
+
+ + +