diff --git a/week-03/DMD-3470.code-workspace b/week-03/DMD-3470.code-workspace new file mode 100644 index 0000000..bab1b7f --- /dev/null +++ b/week-03/DMD-3470.code-workspace @@ -0,0 +1,8 @@ +{ + "folders": [ + { + "path": ".." + } + ], + "settings": {} +} \ No newline at end of file diff --git a/week-03/LICENSE.txt b/week-03/LICENSE.txt new file mode 100644 index 0000000..294e91d --- /dev/null +++ b/week-03/LICENSE.txt @@ -0,0 +1,19 @@ +Copyright (c) HTML5 Boilerplate + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/week-03/css/style.css b/week-03/css/style.css new file mode 100644 index 0000000..239dae5 --- /dev/null +++ b/week-03/css/style.css @@ -0,0 +1,247 @@ +/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */ + +/* main.css 3.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 + * + * 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; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden, +[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 + */ + +.visually-hidden { + 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 .visually-hidden class to allow the element + * to be focusable when navigated to via the keyboard: + * https://www.drupal.org/node/897638 + */ + +.visually-hidden.focusable:active, +.visually-hidden.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 + * + * 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: ""; + display: table; +} + +.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: #fff !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; + } + + tr, + img { + page-break-inside: avoid; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} + diff --git a/week-03/favicon.ico b/week-03/favicon.ico new file mode 100644 index 0000000..be74abd Binary files /dev/null and b/week-03/favicon.ico differ diff --git a/week-03/icon.png b/week-03/icon.png new file mode 100644 index 0000000..8a42581 Binary files /dev/null and b/week-03/icon.png differ diff --git a/week-03/icon.svg b/week-03/icon.svg new file mode 100644 index 0000000..f232922 --- /dev/null +++ b/week-03/icon.svg @@ -0,0 +1 @@ + diff --git a/week-03/img/.gitkeep b/week-03/img/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/week-03/index.html b/week-03/index.html new file mode 100644 index 0000000..68a5b7c --- /dev/null +++ b/week-03/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
AXIT
+ +
+
+ +
+ +
+
+
Main Content
+
Form
+
+
+ + +
+
+
Social Media Section
+
+
+
+ + + + + + diff --git a/week-03/js/app.js b/week-03/js/app.js new file mode 100644 index 0000000..e69de29 diff --git a/week-03/js/vendor/.gitkeep b/week-03/js/vendor/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/week-03/package.json b/week-03/package.json new file mode 100644 index 0000000..b7438a8 --- /dev/null +++ b/week-03/package.json @@ -0,0 +1,24 @@ +{ + "name": " ", + "version": "0.0.1", + "description": "", + "private": true, + "keywords": [ + "" + ], + "license": "", + "author": "", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "webpack serve --open --config webpack.config.dev.js", + "build": "webpack --config webpack.config.prod.js" + }, + "devDependencies": { + "copy-webpack-plugin": "^11.0.0", + "html-webpack-plugin": "^5.6.0", + "webpack": "^5.91.0", + "webpack-cli": "^5.1.4", + "webpack-dev-server": "^5.0.4", + "webpack-merge": "^5.10.0" + } +} diff --git a/week-03/robots.txt b/week-03/robots.txt new file mode 100644 index 0000000..d0e5f1b --- /dev/null +++ b/week-03/robots.txt @@ -0,0 +1,5 @@ +# www.robotstxt.org/ + +# Allow crawling of all content +User-agent: * +Disallow: diff --git a/week-03/site.webmanifest b/week-03/site.webmanifest new file mode 100644 index 0000000..222ae16 --- /dev/null +++ b/week-03/site.webmanifest @@ -0,0 +1,12 @@ +{ + "short_name": "", + "name": "", + "icons": [{ + "src": "icon.png", + "type": "image/png", + "sizes": "192x192" + }], + "start_url": "/?utm_source=homescreen", + "background_color": "#fafafa", + "theme_color": "#fafafa" +} diff --git a/week-03/webpack.common.js b/week-03/webpack.common.js new file mode 100644 index 0000000..b502ea9 --- /dev/null +++ b/week-03/webpack.common.js @@ -0,0 +1,12 @@ +const path = require('path'); + +module.exports = { + entry: { + app: './js/app.js', + }, + output: { + path: path.resolve(__dirname, 'dist'), + clean: true, + filename: './js/app.js', + }, +}; diff --git a/week-03/webpack.config.dev.js b/week-03/webpack.config.dev.js new file mode 100644 index 0000000..5953807 --- /dev/null +++ b/week-03/webpack.config.dev.js @@ -0,0 +1,13 @@ +const { merge } = require('webpack-merge'); +const common = require('./webpack.common.js'); + +module.exports = merge(common, { + mode: 'development', + devtool: 'inline-source-map', + devServer: { + liveReload: true, + hot: true, + open: true, + static: ['./'], + }, +}); diff --git a/week-03/webpack.config.prod.js b/week-03/webpack.config.prod.js new file mode 100644 index 0000000..76800e8 --- /dev/null +++ b/week-03/webpack.config.prod.js @@ -0,0 +1,26 @@ +const { merge } = require('webpack-merge'); +const common = require('./webpack.common.js'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const CopyPlugin = require('copy-webpack-plugin'); + +module.exports = merge(common, { + mode: 'production', + plugins: [ + new HtmlWebpackPlugin({ + template: './index.html', + }), + new CopyPlugin({ + patterns: [ + { from: 'img', to: 'img' }, + { from: 'css', to: 'css' }, + { from: 'js/vendor', to: 'js/vendor' }, + { from: 'icon.svg', to: 'icon.svg' }, + { from: 'favicon.ico', to: 'favicon.ico' }, + { from: 'robots.txt', to: 'robots.txt' }, + { from: 'icon.png', to: 'icon.png' }, + { from: '404.html', to: '404.html' }, + { from: 'site.webmanifest', to: 'site.webmanifest' }, + ], + }), + ], +});