diff --git a/01/article-img.jpg b/01/article-img.jpg new file mode 100644 index 00000000..1fc5d673 Binary files /dev/null and b/01/article-img.jpg differ diff --git a/01/index.html b/01/index.html index 194076af..a059aa03 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,99 @@ - - - - + + + + devmentor.pl - HTML & CSS BASICS - #01 - - - - - \ No newline at end of file + + +
+ +
+
+
+
+

Konkretny artykuł !

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ipsum + dolorem quis illo ratione et, rerum molestias cupiditate tenetur + veniam est ipsam? Fugiat, perferendis. Deserunt quaerat deleniti + tempore recusandae harum! Id nesciunt harum explicabo nisi cum amet + libero sed sit laudantium, consequuntur magnam, velit doloremque? + Iusto tempore, voluptates officiis minus id ut, cum neque assumenda + est itaque blanditiis deleniti officia. Perferendis provident + explicabo fugit deleniti laudantium atque accusamus distinctio + facilis cupiditate delectus obcaecati similique tenetur aperiam + ratione maiores cum incidunt debitis, consequatur, corrupti + excepturi porro eius placeat odio. Est, ducimus! +

+

20.11.2012

+

Jan Nieznany

+ Money image + + + + + + + + + + + + + + + +
ImięNazwiskoWiek
JasiuKapela55
+
+
+
+
+ + + +
+
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi natus + perferendis hic, perspiciatis quis aperiam iure, similique odio + cumque blanditiis nostrum omnis exercitationem fuga libero, deleniti + dolore! Consectetur, reiciendis odio. +

+

Arkadiusz Pan Pawłowski

+

14-10-2011

+
+
+
+ + + diff --git a/01/logo.jpg b/01/logo.jpg new file mode 100644 index 00000000..00c187c8 Binary files /dev/null and b/01/logo.jpg differ diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..0e033ed7 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::before:hover { + 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,23 @@ 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/fonts/SourceSansPro-Bold.otf b/03/fonts/SourceSansPro-Bold.otf new file mode 100644 index 00000000..98dbee74 Binary files /dev/null and b/03/fonts/SourceSansPro-Bold.otf differ diff --git a/03/fonts/SourceSansPro-It.otf b/03/fonts/SourceSansPro-It.otf new file mode 100644 index 00000000..2d627d9c Binary files /dev/null and b/03/fonts/SourceSansPro-It.otf differ diff --git a/03/fonts/SourceSansPro-Regular.otf b/03/fonts/SourceSansPro-Regular.otf new file mode 100644 index 00000000..bdcfb27a Binary files /dev/null and b/03/fonts/SourceSansPro-Regular.otf differ diff --git a/03/index.html b/03/index.html index 0c018343..9aaa1170 100644 --- a/03/index.html +++ b/03/index.html @@ -1,38 +1,51 @@ - - - - + + + + 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/style.css b/03/style.css new file mode 100644 index 00000000..3b3b6e41 --- /dev/null +++ b/03/style.css @@ -0,0 +1,60 @@ +@font-face { + font-family: "Source Sans PRO"; + src: url("./fonts/SourceSansPro-Bold.otf"); + font-style: normal; + font-weight: bold; +} +@font-face { + font-family: "Source Sans PRO"; + font-style: italic; + font-weight: normal; + src: url("./fonts/SourceSansPro-It.otf"); +} +@font-face { + font-family: "Source Sans PRO"; + font-style: normal; + font-weight: normal; + src: url("./fonts/SourceSansPro-Regular.otf"); +} + +* { + padding: 0; + box-sizing: border-box; + font-family: "Source Sans PRO"; +} + +.parent { + width: 600px; + padding: 20px; + border: 1px solid gray; +} + +.parent--inline-block .child { + display: inline-block; +} + +.parent--float .child { + float: left; +} +.parent--float::after { + clear: both; + content: ""; + display: block; +} + +.child--middle { + font-weight: bold; +} + +.child--first, +.child--middle { + margin-right: 10px; + width: calc(30% - 10px); +} +.child--last { + width: 40%; + font-style: italic; +} +.parent--flexbox { + display: flex; +} diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..b73a7bff --- /dev/null +++ b/04/index.html @@ -0,0 +1,32 @@ + + + + + + Document + + + + + + diff --git a/04/style.css b/04/style.css new file mode 100644 index 00000000..78bc9fa2 --- /dev/null +++ b/04/style.css @@ -0,0 +1,96 @@ +* { + font-family: Arial, Helvetica, sans-serif; + + margin: 0; + padding: 0; + box-sizing: border-box; + list-style-type: none; +} +body { + background-color: rgba(0, 0, 0, 0.1); +} + +nav { + margin: 1rem; + background-color: #fff; +} +.nav__items { + display: flex; +} +.active { + color: rgb(69, 173, 243); +} +.nav__items > li { + border-top: 5px solid transparent; + padding: 20px; + text-transform: uppercase; +} +.nav__items > li:hover { + border-top-color: rgb(69, 173, 243); + color: rgb(69, 173, 243); + cursor: pointer; +} +.nav__items > li > span { + display: inline-block; + transform: rotate(90deg) translateX(-50%); + padding-left: 10px; +} + +/* kontener items dla dropdownu pierwszego */ +.nav__item.dropdown { + /* display: block; */ + position: relative; +} + +.nav__item.dropdown:hover > .dropdown__content { + display: block; +} + +/* dropdown container */ + +.dropdown__content { + position: absolute; + top: 100%; + left: 0; + width: 230px; + display: none; +} + +/* dropdown items */ +.dropdown__content-item { + padding: 15px 10px 15px 20px; + background-color: rgba(0, 0, 0, 0.6); + color: #fff; + display: block; + text-transform: none; +} +.dropdown__content-item:hover { + background-color: rgba(0, 0, 0, 0.5); +} +.dropdown__content-item.dropdown { + display: flex; + justify-content: space-between; + position: relative; +} +.dropdown__content-item.dropdown:hover > .dropdown__content-second { + display: block; +} + +.dropdown__content-second { + position: absolute; + top: 0; + left: 100%; + width: 230px; + display: none; +} + +.dropdown__content-second-item { + padding: 15px 10px 15px 20px; + background-color: rgba(0, 0, 0, 0.6); + color: #fff; + display: block; + text-transform: none; +} +.dropdown__content-second-item:hover { + background-color: rgba(0, 0, 0, 0.5); +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..599eb634 --- /dev/null +++ b/05/index.html @@ -0,0 +1,36 @@ + + + + + + Exercise 5 + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/05/reset.css b/05/reset.css new file mode 100644 index 00000000..45a05ecf --- /dev/null +++ b/05/reset.css @@ -0,0 +1,129 @@ +/* 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; +} diff --git a/05/style.css b/05/style.css new file mode 100644 index 00000000..0cc28e84 --- /dev/null +++ b/05/style.css @@ -0,0 +1,84 @@ +/* Variables */ + +:root { + --element-height: 90%; +} + +.header, +.main, +.section, +.footer { + border: 1px solid green; + padding: 5px 0; +} +.header__container, +.main__container, +.section__container, +.footer__container { + width: 1000px; + + outline: 1px solid blue; + margin: 0 auto; +} + +/* Header */ +.header__container { + height: 13vh; +} + +.header__container, +.main__container { + display: flex; + justify-content: space-between; + align-items: center; +} +.header__img-container, +.header__nav-container { + height: var(--element-height); + background-color: orange; +} +.header__img-container { + flex-basis: 20%; +} +.header__nav-container { + flex-basis: 40%; +} + +/* Main */ +.main__container { + height: 35vh; +} +.main__col1, +.main__col2 { + height: var(--element-height); + background-color: orange; + width: 49.7%; +} +/* Section */ +.section__container { + display: flex; + justify-content: space-evenly; + align-items: center; + height: 30vh; +} +.section__col1, +.section__col2, +.section__col3 { + height: var(--element-height); + background-color: orange; + width: 32%; +} + +/* Footer */ +.footer__container { + height: 12vh; + display: flex; + justify-content: center; + align-items: center; +} + +.footer__col1 { + height: var(--element-height); + background-color: orange; + width: 10%; +}