diff --git a/01/style.css b/01/style.css index faa3160d..0c2c54c4 100644 --- a/01/style.css +++ b/01/style.css @@ -17,7 +17,9 @@ display: block; content: ''; height: 0; - border: 150px solid #dcdcdc; + shape-outside: polygon(0 0%, 0% 100%, 100% 0); + margin-right: 20px; + border: 150px solid #c4b8b8; border-right-color: transparent; - border-bottom-color: transparent; + border-bottom-color: transparent; } \ No newline at end of file diff --git a/02/index.html b/02/index.html index 1e60de72..b3508342 100644 --- a/02/index.html +++ b/02/index.html @@ -1,16 +1,33 @@ + - - + + devmentor.pl - HTML & CSS: RWD - #02 - + + +
A
C
B
+ \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..21716ce0 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -4,23 +4,39 @@ box-sizing: border-box; } +body { + display: grid; + grid-template-areas: + "a-top" + "a-mid" + "a-bottom"; + grid-template-rows: + + minmax(calc(50% -6px), auto); +} + + .a, .b, .c { border: 3px solid transparent; min-height: 50px; - + height: 50vh; display: flex; justify-content: center; align-items: center; + } .a { + grid-area: a-top; border-color: #ffffba } .b { + grid-area: a-mid; border-color: #ffdfba; } .c { + grid-area: a-bottom; border-color: #baffc9; } \ No newline at end of file diff --git a/02/styles/tablet.css b/02/styles/tablet.css new file mode 100644 index 00000000..481a33f8 --- /dev/null +++ b/02/styles/tablet.css @@ -0,0 +1,8 @@ +body { + display: grid; + grid-template-areas: + "a-top a-top" + "a-mid a-bottom"; + max-width: 1200px; + margin: 0 auto; +} \ No newline at end of file diff --git a/03/images/city-7359472_1920.jpg b/03/images/city-7359472_1920.jpg new file mode 100644 index 00000000..5196a60c Binary files /dev/null and b/03/images/city-7359472_1920.jpg differ diff --git a/03/images/city1200.jpg b/03/images/city1200.jpg new file mode 100644 index 00000000..6e6046f9 Binary files /dev/null and b/03/images/city1200.jpg differ diff --git a/03/images/city1900.jpg b/03/images/city1900.jpg new file mode 100644 index 00000000..4105b545 Binary files /dev/null and b/03/images/city1900.jpg differ diff --git a/03/images/city600.jpg b/03/images/city600.jpg new file mode 100644 index 00000000..c2d58361 Binary files /dev/null and b/03/images/city600.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..29ab55b8 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,49 @@ + - - + + + + devmentor.pl - HTML & CSS: RWD - #03 + - +
T
-
P
- V +
+ + + + + + +
+ + \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..e05d5778 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -4,6 +4,16 @@ box-sizing: border-box; } +body { + display: grid; + grid-template-areas: + "P" + "T" + "V" + ; +} + + .p, .t, .v { border: 3px solid transparent; min-height: 50px; @@ -14,13 +24,57 @@ } .p { + grid-area: P; border-color: #ffffba } .t { + grid-area: T; border-color: #ffdfba; } .v { + position: relative; + padding-bottom: calc((315 / 560 * 100%)); + grid-area: V; border-color: #baffc9; +} + +img { + max-width: 100%; +} + +iframe { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + + min-width: 200px; + aspect-ratio: 16/8; +} + +@media (min-width:600px) { + body { + display: grid; + grid-template-areas: + "P T" + "V T" + ; + grid-template-columns: minmax(200px, 50%) auto; + } +} + + +@media (min-width:1200px) { + body { + display: grid; + grid-template-areas: + "P V" + "T T" + ; + max-width: 1400px; + margin: 0 auto; + } } \ No newline at end of file diff --git a/04/index.html b/04/index.html index e3ca9540..9b92d43c 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,85 @@ + - - + + + + + + devmentor.pl - HTML & CSS: RWD - #04 - - - + +
+

Logo

+ +
+ \ No newline at end of file diff --git a/04/styles/global.css b/04/styles/global.css new file mode 100644 index 00000000..74e7b586 --- /dev/null +++ b/04/styles/global.css @@ -0,0 +1,18 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +.nav, .nav__dropdown, .dropdown__item-sub { + list-style: none; + text-transform: uppercase; +} + +.nav__link{ + color: #336699; + text-decoration: none; +} + + diff --git a/04/styles/mobile.css b/04/styles/mobile.css new file mode 100644 index 00000000..b3c18482 --- /dev/null +++ b/04/styles/mobile.css @@ -0,0 +1,58 @@ +.header__container { + position: relative; +} + +.nav__label { + position: absolute; + right: 10px; + top: 10px; +} + +.header__input { + display: none; +} + +.header__logo { + text-align: center; +} + +.nav__item { + border: 1px solid #bbb; + margin: 5px; + padding: 5px 10px; + text-align: center; +} + + +.nav { + display: none; + border: 1px solid red; +} + +.nav__dropdown-left { + text-align: left; +} + +header input:checked+ul { + /* margin-top: 100px; */ + display: block; + border: 1px solid blue; +} + +.arrow__right { + display: none; +} + +.arrow__down { + display: none; +} + + +.fa-bars { + font-size: 20px; +} + +.fa-bars:hover { + color: red; + cursor: pointer; +} \ No newline at end of file diff --git a/04/styles/tablet.css b/04/styles/tablet.css new file mode 100644 index 00000000..93096928 --- /dev/null +++ b/04/styles/tablet.css @@ -0,0 +1,128 @@ +:root { + --color-alfa: #F5F5F5; + --color-beta: #FFFFFF; + --dropdown-background: #333333; + --dropdown-color: white; + --hover-font-border: #009AE6; +} + +body { + background-color: var(--color-alfa); + font-family: Arial, Helvetica, sans-serif; +} + +.header__logo { + display: none; +} + +.nav__container { + margin-left: 10px; + margin-top: 40px; + +} + +.nav { + border: none; + background-color: var(--color-beta); + display: flex; + /* align-items: center; */ + +} + +.nav__dropdown { + display: none; +} + +.nav__label { + display: none; +} + +.nav__item { + border: none; + position: relative; + padding: 20px 30px; + background-color: var(--color-beta); + text-transform: uppercase; + cursor: pointer; +} + +.nav__link { + /* display: inline-block; */ + /* height: 100%; + width: 100%; */ + color: var(--main-font); + text-decoration: none; +} + +.nav__item:hover { + border-top: 2px solid var(--hover-font-border); + color: var(--hover-font-border); +} + +.arrow__down { + display: inline-block; + position: relative; + right: -5px; + top: 0; + transform: rotate(90deg); +} + +.nav__item:hover>.nav__dropdown { + display: block; +} + +.nav__dropdown { + display: none; + padding-top: 20px; + position: absolute; + left: 0; + +} + +.dropdown__item { + position: relative; + background-color: var(--dropdown-background); + padding: 15px 20px; + margin-top: 0; + width: 240px; + color: var(--dropdown-color); +} + +.arrow__right { + display: inline-block; + position: relative; + left: 35px; + padding-right: 10px; + +} + +.arrow::after{ + content: ">"; + display: inline-block; + position: relative; + left: 35px; + padding-right: 10px; + transform: rotate(90deg); +} + +.dropdown__item:hover>.dropdown--right { + display: block; +} + +.dropdown--right { + display: none; + position: absolute; + left: 240px; + top: -20px; +} + +.dropdown__item-sub { + background-color: var(--dropdown-background); + padding: 15px 20px; + width: 240px; + top: -100px; + color: var(--dropdown-color); +} +.nav__item { +margin: 0; +} \ No newline at end of file diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..d461df90 --- /dev/null +++ b/05/index.html @@ -0,0 +1,57 @@ + + + + + + + + + + + Document + + + +
+
+

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/05/styles/desktop.css b/05/styles/desktop.css new file mode 100644 index 00000000..9f7f4bfa --- /dev/null +++ b/05/styles/desktop.css @@ -0,0 +1,61 @@ +/* HEADER */ +.header__container { + display: flex; + justify-content: space-between; + padding-top: 5px; + padding-bottom: 10px; + align-items: center; +} + +.header__logo { + max-width: 15%; + margin-left: 10px; + background-color: orange; +} + +.header__nav { + min-width: 600px; + margin-right: 10px; + background-color: orange; +} + +.fa-bars { + font-size: 0; +} + +/* MAIN */ +.main__container { + display: flex; + justify-content: space-between; +} + +.main__article { + min-height: 400px; + width: 49%; + margin-top: 10px; +} + +/* FEATURES */ + +.features__container { + display: flex; + justify-content: space-evenly; +} + +.feature__item { + min-height: 400px; + width: 30%; + margin: 10px 0; +} + +.feature__item:last-child { + margin-bottom: 10px; +} + +/* FOOTER */ + +.footer__copyright { + /* height: 60px; */ + width: 10%; + +} \ No newline at end of file diff --git a/05/styles/global.css b/05/styles/global.css new file mode 100644 index 00000000..2a6a26af --- /dev/null +++ b/05/styles/global.css @@ -0,0 +1,27 @@ +* { + box-sizing: content-box; + margin: 0; + padding: 0; +} + +.row, .cell, .container { + outline: 3px solid; +} + +.row { + padding-top: 10px; + padding-bottom: 10px; + outline-color: green; + margin: 10px; +} + +.container { + margin: 0 auto; + max-width: 1400px; + outline-color: #00A8F3; +} + +.cell { + min-height: 50px; + outline-color: orange; +} \ No newline at end of file diff --git a/05/styles/mobile,.css b/05/styles/mobile,.css new file mode 100644 index 00000000..58517b1a --- /dev/null +++ b/05/styles/mobile,.css @@ -0,0 +1,82 @@ +.container { + width: 100%; +} + +/* HEADER */ +.header__container { + display: flex; + justify-content: space-between; + height: 60px; + +} + +.header__logo { + width: 35%; + background-color: orange; + margin: 0 auto; + +} + +.header__nav { + display: flex; + align-self: center; + border: none; + padding-top:10px ; + margin-right: 20px; + font-size: 35px; + outline: none; +} + +.header__nav:hover { + color: gray; + cursor: pointer; +} + +/* MAIN */ + +.main { + display: flex; + flex-direction: column; +} + +.main__container {} + +.main__article { + background-color: orange; + margin-bottom: 10px; +} + +/* FEATURES */ + +.features { + display: flex; + flex-direction: column; +} + +.features__container {} + +.feature__item { + margin-bottom: 10px; + background-color: orange; +} + +.feature__item:last-child { + margin-bottom: 0; +} + +/* FOOTER */ + +.footer {} + +.footer__container { + display: flex; + justify-content: center; + align-items: center; + +} + +.footer__copyright { + margin: 10px 0; + width: 25%; + background-color: orange; +} \ No newline at end of file