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