diff --git a/01/about.html b/01/about.html new file mode 100644 index 00000000..f688d48d --- /dev/null +++ b/01/about.html @@ -0,0 +1,12 @@ + + + + + + About us + + +

About us

+ Go back + + diff --git a/01/articles.html b/01/articles.html new file mode 100644 index 00000000..99ef5340 --- /dev/null +++ b/01/articles.html @@ -0,0 +1,12 @@ + + + + + + Articles + + +

Articles

+ Go back + + diff --git a/01/careers.html b/01/careers.html new file mode 100644 index 00000000..e1169ab4 --- /dev/null +++ b/01/careers.html @@ -0,0 +1,12 @@ + + + + + + Careers + + +

Careers

+ Go back + + diff --git a/01/contact.html b/01/contact.html new file mode 100644 index 00000000..d2cdfb30 --- /dev/null +++ b/01/contact.html @@ -0,0 +1,12 @@ + + + + + + Contact + + +

Contact

+ Go back + + diff --git a/01/index.html b/01/index.html index 194076af..631898b2 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,125 @@ - - - - + + + + devmentor.pl - HTML & CSS BASICS - #01 - - - - - \ No newline at end of file + + +
+
+ +
+ + +
+
+
+

The Power of Mindful Morning Routines

+

+ Starting your day with intention can set the tone for everything that + follows. A mindful morning routine doesn’t have to be long or + complicated. It can be as simple as a few minutes of deep breathing, + stretching, or journaling. The key is consistency and presence. By + dedicating a small portion of your morning to mindfulness, you can + boost your focus, reduce stress, and enhance your overall well-being. + Try it tomorrow: before diving into your daily tasks, take a moment to + center yourself. The results may surprise you. +

+
+ Picture of a beach +
+
Beach in Brazil
+ + + + + + + + + + + + + + +
+ Site's statistics +
Number of editionsNumber of authors
32
+
+
+ Publication date: +
+
Author: John Doe
+
+
+
+
+ +
+ + +
+
+

Latest comments:

+
+

+ Great advice! Starting my day with meditation has definitely + improved my focus and mood. +

+
+
Author: John Doe
+
03.03.2025
+
+
+
+

+ I love this idea! I’ll try adding journaling to my morning routine. +

+
+
Author: Sylvia Doe
+
03.05.2025
+
+
+
+

+ Simple but effective. A few deep breaths can really make a + difference. Thanks for sharing! +

+ +
+
+
+ + + diff --git a/01/projects.html b/01/projects.html new file mode 100644 index 00000000..1b32b6d7 --- /dev/null +++ b/01/projects.html @@ -0,0 +1,12 @@ + + + + + + Projects + + +

Projects

+ Go back + + diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..d705550e 100644 --- a/02/styles/index.css +++ b/02/styles/index.css @@ -1,45 +1,52 @@ /*Acco*/ .ac-container { - max-width: 400px; + max-width: 400px; } /* Znacznik label, którego przodkiem jest klasa .ac-container (0, 1, 1) */ -?? { - height: 30px !important; - line-height: 21px !important; - font-size: 12px !important; - font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important; - padding: 5px 20px; - position: relative; - z-index: 20; - display: block; - height: 30px; - cursor: pointer; - color: #777; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); - line-height: 33px; - font-size: 19px; - background: #fff; - background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea)); - background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: linear-gradient(top,#fff 1%,#eaeaea 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 ); - box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1); - font-size: 12px; - height: 30px; - line-height: 20px; +.ac-container label { + height: 30px !important; + line-height: 21px !important; + font-size: 12px !important; + font-family: "Open Sans", "Arial Narrow", Arial, sans-serif !important; + padding: 5px 20px; + position: relative; + z-index: 20; + display: block; + height: 30px; + cursor: pointer; + color: #777; + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); + line-height: 33px; + font-size: 19px; + background: #fff; + background: -moz-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(1%, #fff), + color-stop(100%, #eaeaea) + ); + background: -webkit-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -o-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -ms-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: linear-gradient(top, #fff 1%, #eaeaea 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 ); + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), + 1px 0 0 rgba(255, 255, 255, 0.9) inset, 0 2px 2px rgba(0, 0, 0, 0.1); + font-size: 12px; + height: 30px; + line-height: 20px; } .ac-container { - width: 100%; - margin: 10px auto 30px auto; - text-align: left; + width: 100%; + margin: 10px auto 30px auto; + text-align: left; } /* @@ -47,8 +54,8 @@ Zmiana koloru tła po najechaniu przez kursor myszy na znacznik label, który znajduje się wewnątrze elementu o klasie .ac-container (0, 2, 1) */ -?? { - background: #fff; +.ac-container label:hover { + background: #fff; } /* @@ -61,26 +68,26 @@ i ten brat musi posiadać przodka o klasie .ac-container to samo co w 1) ale z efektem najechania kursorem na label (0, 3, 2) */ -??, -?? { - background: #f1f2f3; - color: #666; - text-shadow: 0 1px 1px rgba(255,255,255,0.6); - box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1); - height: 30px; - line-height: 21px; - font-size: 13px; +.ac-container input:checked + label, +.ac-container input:checked + label:hover { + background: #f1f2f3; + color: #666; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1); + height: 30px; + line-height: 21px; + font-size: 13px; } .ac-container label:hover:after, .ac-container input:checked + label:hover:after { - content: ''; - position: absolute; - width: 24px; - height: 24px; - right: 13px; - top: 7px; - background: transparent url(../images/arrow_down.png) no-repeat center center; + content: ""; + position: absolute; + width: 24px; + height: 24px; + right: 13px; + top: 7px; + background: transparent url(../images/arrow_down.png) no-repeat center center; } /* @@ -89,36 +96,36 @@ którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), którego przodek to element o klasie .ac-container (0, 3, 3) */ -?? { - background-image: url(../images/arrow_up.png); +.ac-container input:checked + label:hover:after { + background-image: url(../images/arrow_up.png); } .ac-container input { - display: none; + display: none; } .ac-container article { - background: rgba(255,255,255,0.5); - margin-top: -1px; - overflow: hidden; - height: 0; - position: relative; - z-index: 10; - -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - transition: height 0.3s ease-in-out,box-shadow 0.6s linear; + background: rgba(255, 255, 255, 0.5); + margin-top: -1px; + overflow: hidden; + height: 0; + position: relative; + z-index: 10; + -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container article p { - font-style: normal; - color: #777; - line-height: 23px; - font-size: 10px; - padding: 20px; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); - font: normal normal 12px 'Open Sans'; + font-style: normal; + color: #777; + line-height: 23px; + font-size: 10px; + padding: 20px; + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); + font: normal normal 12px "Open Sans"; } /* @@ -126,23 +133,22 @@ Rodzeństwo o typie article, dla elementu input, który jest zaznaczony (użyj p oraz posiada przodka o klasie .ac-container (0, 2, 2) */ -?? { - -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - box-shadow: 0 0 0 1px rgba(155,155,155,0.3); +.ac-container input:checked ~ article { + -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3); } - .ac-container input:checked ~ article.ac-small { - height: 140px; + height: 140px; } .ac-container input:checked ~ article.ac-medium { - height: 180px; + height: 180px; } .ac-container input:checked ~ article.ac-large { - height: 230px; -} \ No newline at end of file + height: 230px; +} diff --git a/03/assets/fonts/SourceSansPro-Bold.otf b/03/assets/fonts/SourceSansPro-Bold.otf new file mode 100644 index 00000000..98dbee74 Binary files /dev/null and b/03/assets/fonts/SourceSansPro-Bold.otf differ diff --git a/03/assets/fonts/SourceSansPro-It.otf b/03/assets/fonts/SourceSansPro-It.otf new file mode 100644 index 00000000..2d627d9c Binary files /dev/null and b/03/assets/fonts/SourceSansPro-It.otf differ diff --git a/03/assets/fonts/SourceSansPro-Regular.otf b/03/assets/fonts/SourceSansPro-Regular.otf new file mode 100644 index 00000000..bdcfb27a Binary files /dev/null and b/03/assets/fonts/SourceSansPro-Regular.otf differ diff --git a/03/index.html b/03/index.html index 0c018343..8b0f07d8 100644 --- a/03/index.html +++ b/03/index.html @@ -1,38 +1,53 @@ - - - - + + + + devmentor.pl - HTML & CSS BASICS - #03 - - - + + +
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, + asperiores. +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis + praesentium in possimus! +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? +
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, + asperiores. +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis + praesentium in possimus! +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? +
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, + asperiores. +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis + praesentium in possimus! +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? +
- - \ No newline at end of file + + diff --git a/03/styles/index.css b/03/styles/index.css new file mode 100644 index 00000000..b622d989 --- /dev/null +++ b/03/styles/index.css @@ -0,0 +1,64 @@ +* { + box-sizing: border-box; +} +@font-face { + font-family: "Source Sans PRO"; + src: url(03/assets/fonts/SourceSansPro-Regular.otf) format("opentype"); + font-weight: normal; +} +@font-face { + font-family: "Source Sans PRO"; + src: url(03/assets/fonts/SourceSansPro-Bold.otf) format("opentype"); + font-weight: bold; +} +@font-face { + font-family: "Source Sans PRO"; + src: url(03/assets/fonts/SourceSansPro-It.otf) format("opentype"); + font-style: italic; +} +.parent { + max-width: 600px; + padding: 20px; + font-family: "Source Sans PRO"; +} +.child--first { + width: calc(30% - 20px); + margin: 0 10px; + font-weight: normal; +} +.child--middle { + width: calc(30% - 20px); + margin: 0 10px; + font-weight: bold; +} +.child--last { + width: calc(40% - 20px); + margin: 0 10px; + font-style: italic; +} + +/* Inline-block */ +.parent--inline-block { + display: inline-block; + font-size: 0; +} +.parent--inline-block .child { + display: inline-block; + vertical-align: top; + font-size: 16px; +} + +/* Float */ +.parent--float:after { + content: ""; + display: block; + clear: both; +} +.parent--float .child { + float: left; +} +/* Flexbox */ +.parent--flexbox { + display: flex; + gap: 10px; +} diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..aca0d19f --- /dev/null +++ b/04/index.html @@ -0,0 +1,43 @@ + + + + + + HTML i CSS: Podstawy + + + + + + + + + + + diff --git a/04/src/index.css b/04/src/index.css new file mode 100644 index 00000000..f44a5c73 --- /dev/null +++ b/04/src/index.css @@ -0,0 +1,91 @@ +:root { + --light-bg: #ffffff; + --mid-light-bg: #f7f7f7; + --dark-bg: #333333; + --detail-color: #009ae1; +} +body { + background-color: var(--mid-light-bg); + font-family: "Quicksand", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} +.nav__container { + padding: 20px 10px; +} +.nav { + display: flex; + background-color: var(--light-bg); +} +.nav__item { + padding: 22px; + position: relative; +} +.nav__item a { + color: var(--detail-color); + text-transform: uppercase; + text-decoration: none; +} +.nav__item--dropdown { + border-top: 2px solid transparent; + transition: border 0.15s ease-in-out; + position: relative; +} +.nav__item--dropdown:after { + display: block; + content: ">"; + position: absolute; + left: 80px; + top: 22px; + color: var(--detail-color); + transform: rotate(90deg); +} +.nav__item--dropdown:hover { + border-top: 2px solid var(--detail-color); +} +.nav__item--dropdown:hover:after { + transform: rotate(-90deg); +} +.nav__dropdown { + position: absolute; + padding-top: 22px; + left: 0; +} +.nav__dropdown .dropdown__item + .dropdown__item { + position: relative; +} +.nav__dropdown .dropdown__item + .dropdown__item .nav__dropdown--sub { + position: absolute; + top: 0; + left: 200px; +} +.dropdown__item a { + color: var(--light-bg); +} +.dropdown__item, +.dropdown__item--sub { + display: none; + padding: 22px; + padding-top: 20px; + min-width: 200px; + background-color: var(--dark-bg); +} +.nav__item:hover > .nav__dropdown > .dropdown__item, +.dropdown__item:hover .dropdown__item--sub { + display: block; +} +.dropdown__item:hover { + font-weight: 600; +} +.dropdown__item:not(.dropdown__item--sub):last-child:after { + display: block; + content: ">"; + position: absolute; + right: 20px; + top: 22px; + color: var(--light-bg); +} +.nav__item--dropdown ~ .nav__item a { + color: var(--dark-bg); +} diff --git a/04/src/reset.css b/04/src/reset.css new file mode 100644 index 00000000..57c883da --- /dev/null +++ b/04/src/reset.css @@ -0,0 +1,312 @@ +/* + HTML5 Reset :: style.css + ---------------------------------------------------------- + We have learned much from/been inspired by/taken code where offered from: + + Eric Meyer :: http://meyerweb.com + HTML5 Doctor :: http://html5doctor.com + and the HTML5 Boilerplate :: http://html5boilerplate.com + +-------------------------------------------------------------------------------*/ + +/* Let's default this puppy out +-------------------------------------------------------------------------------*/ + +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +/* Handle box-sizing while better addressing child elements: + http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ + +/* Responsive images and other embedded objects */ +/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ +img, +object, +embed { + max-width: 100%; +} + +/* + Note: keeping IMG here will cause problems if you're using foreground images as sprites. + In fact, it *will* cause problems with Google Maps' controls at small size. + If this is the case for you, try uncommenting the following: + +#map img { + max-width: none; +} +*/ + +/* force a vertical scrollbar to prevent a jumpy page */ +html { + overflow-y: scroll; +} + +/* we use a lot of ULs that aren't bulleted. + you'll have to restore the bullets within content, + which is fine because they're probably customized anyway */ +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +/* tables still need cellspacing="0" in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre; /* CSS2 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ + word-wrap: break-word; /* IE */ +} + +input[type="radio"] { + vertical-align: text-bottom; +} +input[type="checkbox"] { + vertical-align: bottom; +} +.ie7 input[type="checkbox"] { + vertical-align: baseline; +} +.ie6 input { + vertical-align: text-bottom; +} + +select, +input, +textarea { + font: 99% sans-serif; +} + +table { + font-size: inherit; + font: 100%; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +td, +td img { + vertical-align: top; +} + +/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +/* standardize any monospaced elements */ +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +/* hand cursor on clickable elements */ +.clickable, +label, +input[type="button"], +input[type="submit"], +input[type="file"], +button { + cursor: pointer; +} + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, +input, +select, +textarea { + margin: 0; +} + +/* make buttons play nice in IE */ +button, +input[type="button"] { + width: auto; + overflow: visible; +} + +/* scale images in IE7 more attractively */ +.ie7 img { + -ms-interpolation-mode: bicubic; +} + +/* prevent BG image flicker upon hover + (commented out as usage is rare, and the filter syntax messes with some pre-processors) +.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} +*/ + +/* let's clear some floats */ +.clearfix:after { + content: " "; + display: block; + clear: both; +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..c91f5e31 --- /dev/null +++ b/05/index.html @@ -0,0 +1,39 @@ + + + + + + HTML and CSS basics + + + + +
+
+ + + + + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/05/src/index.css b/05/src/index.css new file mode 100644 index 00000000..ca2898eb --- /dev/null +++ b/05/src/index.css @@ -0,0 +1,128 @@ +:root { + --content-color: #ffca18; + --container-color: #0dd144; + --inner-container-color: #04a7f3; +} + +.container { + max-width: 1000px; + margin: 0 auto; + outline: 3px solid var(--inner-container-color); +} +header, +section, +footer { + outline: 3px solid var(--container-color); + margin: 16px; +} +header { + padding: 4px; +} +section { + padding: 10px; +} +section:not(:last-of-type) { + padding: 6px; +} + +.header__container { + display: flex; + justify-content: space-between; + padding: 2px 0 4px; + position: relative; +} +.header__logo, +.header__nav { + background-color: var(--content-color); + height: 30px; +} +.header__logo { + width: calc(100% * 1 / 6); +} +.header__nav { + width: 42%; +} +.content__container { + display: flex; + gap: 5px; + padding: 8px 0; + height: 200px; +} +.content__container article { + background-color: var(--content-color); + width: 100%; + height: 100%; +} +.featured__container { + display: flex; + gap: 10px; + padding: 10px; +} +.featured__container article { + width: 100%; + background-color: var(--content-color); + height: 225px; +} +footer { + display: flex; + align-items: center; + min-height: 100px; + padding: 4px; +} +.footer__container { + display: flex; + width: 100%; + margin: 0 auto; + justify-content: center; +} +.footer__container div { + width: 150px; + height: 50px; + margin: 8px; + background-color: var(--content-color); +} +.header__nav--mobile { + display: none; + position: absolute; + top: 100%; +} +input { + display: none; +} +@media screen and (max-width: 800px) { + .content__container, + .featured__container { + flex-direction: column; + } + .hamburger-menu { + background: transparent; + border: 0; + border-top: 5px solid rgb(113, 111, 111); + cursor: pointer; + height: 35px; + position: relative; + width: 40px; + } + .hamburger-menu::before, + .hamburger-menu::after { + border-top: 5px solid rgb(113, 111, 111); + content: ""; + left: 0; + position: absolute; + top: 0; + transform: translateY(10px); + width: 100%; + } + .hamburger-menu::after { + transform: translateY(25px); + } + .header__nav { + display: none; + } + input:checked + .header__nav--mobile { + display: block; + height: 100px; + width: 100%; + background-color: #0dd144; + } +} diff --git a/05/src/reset.css b/05/src/reset.css new file mode 100644 index 00000000..57c883da --- /dev/null +++ b/05/src/reset.css @@ -0,0 +1,312 @@ +/* + HTML5 Reset :: style.css + ---------------------------------------------------------- + We have learned much from/been inspired by/taken code where offered from: + + Eric Meyer :: http://meyerweb.com + HTML5 Doctor :: http://html5doctor.com + and the HTML5 Boilerplate :: http://html5boilerplate.com + +-------------------------------------------------------------------------------*/ + +/* Let's default this puppy out +-------------------------------------------------------------------------------*/ + +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +/* Handle box-sizing while better addressing child elements: + http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ + +/* Responsive images and other embedded objects */ +/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ +img, +object, +embed { + max-width: 100%; +} + +/* + Note: keeping IMG here will cause problems if you're using foreground images as sprites. + In fact, it *will* cause problems with Google Maps' controls at small size. + If this is the case for you, try uncommenting the following: + +#map img { + max-width: none; +} +*/ + +/* force a vertical scrollbar to prevent a jumpy page */ +html { + overflow-y: scroll; +} + +/* we use a lot of ULs that aren't bulleted. + you'll have to restore the bullets within content, + which is fine because they're probably customized anyway */ +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +/* tables still need cellspacing="0" in the markup */ +table { + border-collapse: separate; + border-spacing: 0; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre; /* CSS2 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ + word-wrap: break-word; /* IE */ +} + +input[type="radio"] { + vertical-align: text-bottom; +} +input[type="checkbox"] { + vertical-align: bottom; +} +.ie7 input[type="checkbox"] { + vertical-align: baseline; +} +.ie6 input { + vertical-align: text-bottom; +} + +select, +input, +textarea { + font: 99% sans-serif; +} + +table { + font-size: inherit; + font: 100%; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +td, +td img { + vertical-align: top; +} + +/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +/* standardize any monospaced elements */ +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +/* hand cursor on clickable elements */ +.clickable, +label, +input[type="button"], +input[type="submit"], +input[type="file"], +button { + cursor: pointer; +} + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, +input, +select, +textarea { + margin: 0; +} + +/* make buttons play nice in IE */ +button, +input[type="button"] { + width: auto; + overflow: visible; +} + +/* scale images in IE7 more attractively */ +.ie7 img { + -ms-interpolation-mode: bicubic; +} + +/* prevent BG image flicker upon hover + (commented out as usage is rare, and the filter syntax messes with some pre-processors) +.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} +*/ + +/* let's clear some floats */ +.clearfix:after { + content: " "; + display: block; + clear: both; +}