diff --git a/css/axit.css b/css/axit.css new file mode 100644 index 0000000..4cffb74 --- /dev/null +++ b/css/axit.css @@ -0,0 +1,245 @@ +/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */ + +/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html { + color: #222; + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * Vendor-prefixed and regular ::selection selectors cannot be combined: + * https://stackoverflow.com/a/16982510/7133471 + * + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Browser Upgrade Prompt + ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + + * { + box-sizing: border-box; + } + + header { + background-color: black; + width: 100vw; + display: flex; + justify-content: center; + } + + .desktop { + display: none; + } + + .centered { + width: 80vw; + display: flex; + justify-content: space-between; + background-color: blue; + + } + + .centered img { + height: 1.3em; + align-self: center; + } + + .mobile { + align-self: center; + display: flex; + background-color: cyan; + } + + .mobile i { + align-self: center; + } + + header ul { + display: flex; + align-items: center; + justify-content: flex-end; + list-style-type: none; + padding: 0; + } + + .desktop li { + margin: 0 20px; + } + + @media (min-width: 700px) { + .mobile { + display: none; + } + .desktop { + display: block; + } + + + } + + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden { + display: none !important; +} + +/* +* Hide only visually, but have it available for screen readers: +* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility +* +* 1. For long content, line feeds are not interpreted as spaces and small width +* causes content to wrap 1 word per line: +* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe +*/ + +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ +} + +/* +* Extends the .sr-only class to allow the element +* to be focusable when navigated to via the keyboard: +* https://www.drupal.org/node/897638 +*/ + +.sr-only.focusable:active, +.sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; +} + +/* +* Hide visually and from screen readers, but maintain layout +*/ + +.invisible { + visibility: hidden; +} + +/* +* Clearfix: contain floats +* +* For modern browsers +* 1. The space content is one way to avoid an Opera bug when the +* `contenteditable` attribute is included anywhere else in the document. +* Otherwise it causes space to appear at the top and bottom of elements +* that receive the `clearfix` class. +* 2. The use of `table` rather than `block` is only necessary if using +* `:before` to contain the top-margins of child elements. +*/ + +.clearfix:before, +.clearfix:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ +} + +.clearfix:after { + clear: both; +} diff --git a/css/flexbox.css b/css/flexbox.css new file mode 100644 index 0000000..081ab55 --- /dev/null +++ b/css/flexbox.css @@ -0,0 +1,306 @@ +/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */ + +/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html { + color: #222; + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * Vendor-prefixed and regular ::selection selectors cannot be combined: + * https://stackoverflow.com/a/16982510/7133471 + * + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Browser Upgrade Prompt + ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + +div { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + svg { + fill: #b3cccc; + height: 5em; + margin: 10px 0; + } + + h1 { + color: #798686; + font-family: 'Raleway', sans-serif; + font-weight: 700; + font-size: 40px; + margin: 5px 0; + } + + h2 { + color: #798686; + font-family: 'Raleway', sans-serif; + font-weight: 400; + margin: 5px 0; + font-size: 22px; + } + + p { + font-family: sans-serif; + background-color: #00ccff; + border: 1px solid #336699; + color: white; + border-radius: 5px; + padding: 8px 22px; + margin: 20px; + } + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden { + display: none !important; +} + +/* +* Hide only visually, but have it available for screen readers: +* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility +* +* 1. For long content, line feeds are not interpreted as spaces and small width +* causes content to wrap 1 word per line: +* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe +*/ + +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ +} + +/* +* Extends the .sr-only class to allow the element +* to be focusable when navigated to via the keyboard: +* https://www.drupal.org/node/897638 +*/ + +.sr-only.focusable:active, +.sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; +} + +/* +* Hide visually and from screen readers, but maintain layout +*/ + +.invisible { + visibility: hidden; +} + +/* +* Clearfix: contain floats +* +* For modern browsers +* 1. The space content is one way to avoid an Opera bug when the +* `contenteditable` attribute is included anywhere else in the document. +* Otherwise it causes space to appear at the top and bottom of elements +* that receive the `clearfix` class. +* 2. The use of `table` rather than `block` is only necessary if using +* `:before` to contain the top-margins of child elements. +*/ + +.clearfix:before, +.clearfix:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 1.25dppx), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: + https://www.phpied.com/delay-loading-your-print-css/ + ========================================================================== */ + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + /* Black prints faster */ + box-shadow: none !important; + text-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + pre { + white-space: pre-wrap !important; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + /* + * Printing Tables: + * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } +} + diff --git a/img/axit_bg.jpg b/img/axit_bg.jpg new file mode 100644 index 0000000..68165a2 Binary files /dev/null and b/img/axit_bg.jpg differ diff --git a/img/axit_logo.png b/img/axit_logo.png new file mode 100644 index 0000000..b1459d4 Binary files /dev/null and b/img/axit_logo.png differ diff --git a/img/smile-regular.svg b/img/smile-regular.svg new file mode 100644 index 0000000..4ca93c8 --- /dev/null +++ b/img/smile-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/wk3_axit.html b/wk3_axit.html new file mode 100644 index 0000000..4dedb58 --- /dev/null +++ b/wk3_axit.html @@ -0,0 +1,60 @@ + + + + + + Axit - Landing Page + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + + + + + + + + + + + + diff --git a/wk4_flexbox.html b/wk4_flexbox.html new file mode 100644 index 0000000..5b31c0d --- /dev/null +++ b/wk4_flexbox.html @@ -0,0 +1,52 @@ + + + + + + Centered Layout + + + + + + + + + + + + + + + + + + +
+ +

Welcome to the app!

+

Thanks for signing up. Let's take a look around.

+

Begin tour

+
+ + + + + + + + + + + + + +