From a2bcb80aac98b63a4fbb3893085dca3a397b67c5 Mon Sep 17 00:00:00 2001 From: Dan Marquis Date: Mon, 6 Apr 2020 18:15:49 -0400 Subject: [PATCH] Responsive CSS Concepts --- index.html | 20 ++++++++++++++++++++ responsive.css | 39 +++++++++++++++++++++++++++++++++++++++ stuff.js | 0 3 files changed, 59 insertions(+) create mode 100644 index.html create mode 100644 responsive.css create mode 100644 stuff.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..553b48c --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + Responsive Design + + +

A Site That Looks Great On Any Screen

+

We'll see what we can do

+ +

This is card one

+ + +

This is card two

+ + + + + \ No newline at end of file diff --git a/responsive.css b/responsive.css new file mode 100644 index 0000000..41b0587 --- /dev/null +++ b/responsive.css @@ -0,0 +1,39 @@ +* { + box-sizing: border-box; + } + +.col-1 {width: 8.33%;} +.col-2 {width: 16.66%;} +.col-3 {width: 25%;} +.col-4 {width: 33.33%;} +.col-5 {width: 41.66%;} +.col-6 {width: 50%;} +.col-7 {width: 58.33%;} +.col-8 {width: 66.66%;} +.col-9 {width: 75%;} +.col-10 {width: 83.33%;} +.col-11 {width: 91.66%;} +.col-12 {width: 100%;} + +.card { + display: inline-block; + padding: 10px; + border: 2px solid black; + background-color: lightgray; + height: 100vh; +} + +.left-menu { + float: left; +} + +.content { + float: right; +} + +@media (max-width: 500px) { + .card { + display: block; + width: 100%; + } +} \ No newline at end of file diff --git a/stuff.js b/stuff.js new file mode 100644 index 0000000..e69de29