From f3bd42617757513b95064ba759de5e131fb45611 Mon Sep 17 00:00:00 2001 From: noahbibb21 Date: Thu, 9 Apr 2020 16:01:49 -0400 Subject: [PATCH 1/3] added bastard sword --- index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b From 0926c73c29c72bbcc517b859441853c4173fbd02 Mon Sep 17 00:00:00 2001 From: noahbibb21 Date: Thu, 9 Apr 2020 16:24:02 -0400 Subject: [PATCH 2/3] grinding --- index.html | 11 +++++++++++ style/index.css | 0 2 files changed, 11 insertions(+) create mode 100644 style/index.css diff --git a/index.html b/index.html index e69de29b..d01f779f 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css new file mode 100644 index 00000000..e69de29b From 0ea8d5c8494b5477e39defdcff39b9c35b4ca296 Mon Sep 17 00:00:00 2001 From: noahbibb21 Date: Thu, 9 Apr 2020 19:46:45 -0400 Subject: [PATCH 3/3] completed assignment --- README.md | 2 +- index.html | 55 ++++++++++++- style/index.css | 210 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 265 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a2446766..b5d3410c 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ git checkout -b . Use the checklist below to guide your work today. Your final product should be presentable at mobile, tablet and a desktop-width. -- [ ] Insert a viewport meta tag into the head of the project with these html attributes: content="width=device-width, initial-scale=1" +- [ x] Insert a viewport meta tag into the head of the project with these html attributes: content="width=device-width, initial-scale=1" - [ ] Introduce max-width media queries into your project at 800px and 500px - [ ] Change CSS styles from hard-coded `px` to any one of the responsive units learned today - [ ] Add accessability features to your webpage diff --git a/index.html b/index.html index d01f779f..862883c3 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,62 @@ + Document + - +
+
+

Noah Bibb

+
+
+ +
+
+
+
+
+

Noah Bibb

+ + +
+
+
+
+ Gamebling +

Gamebling Project

+
+
+ house +

Real Estate Project

+
+
+ cleaning +

Xtreme Cleaners Project

+
+
+ car +

cool thing

+
+
+ fire pit +

fun thing

+
+
+ spicy +

spicy thing

+
+
+
+ + \ No newline at end of file diff --git a/style/index.css b/style/index.css index e69de29b..2a7fcade 100644 --- a/style/index.css +++ b/style/index.css @@ -0,0 +1,210 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + +*{ + box-sizing: border-box; + border: 1px solid black; + +} +a{ + text-decoration: none; + color: black; +} +div .toptag{ + display: flex; + width: 25rem; +} +div .atag{ + display: flex; +} +img{ + width: 100%; + +} +header{ + height: 10vh; + display:flex; + justify-content: space-between; +} +header div{ + width: 50%; +} +header div nav a { + width: 10rem; + height: 2rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: .5rem; +} + +header div nav a:hover { + background-color:white; + color: black; +} + +.button-selected{ + color: white; + background-color: black; +} + +nav{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +main{ + display: flex; + flex-direction: column; +} + +.cta{ + display: flex; + justify-content: center; +} + +.cta article{ + background-image: url(https://www.lechzuers.com/app/uploads/2019/01/cs_20140325_lech_zuers_snowboard_0027-1920x1080.jpg); + width: 70%; + height: 30rem; + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: column; + border-radius: 5rem; +} + +.Projects{ + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.Projects article{ + width: 30%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 2rem; + border-radius: .5rem; +} + +footer{ + display: flex; + justify-content: center; + align-items: center; + height: 10px; +} + +h1{ + font-size: 5rem; +} + +button{ + border:none; + background: none; + color: black; + padding: 1; + display: flex; + justify-content: center; + align-items: center; + +} + +button:hover{ + background-color: black; + color: white; +} +@media(max-width: 800px){ + h1{ + font-size: 5rem; + } + h2{ + font-size: 3rem; + } + button{ + font-size: 2rem; + } +} + + + + + + +@media(max-width:500px){ + h1{ + font-size: 2rem; + } + header div nav a{ + flex-direction: column; + } + .cta article{ + height: 15rem; + } + main{ + justify-content: space-evenly; + } + button{ + height: 1rem; + } + + + .Projects{ + height: 30rem; + } + div .atag{ + width: 25rem; + flex-direction: column; + justify-content: space-evenly; + } +} \ No newline at end of file