diff --git a/01/style.css b/01/style.css index faa3160d..9a58b5bc 100644 --- a/01/style.css +++ b/01/style.css @@ -1,23 +1,24 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } .content { - background-color: #fff; - min-height: 320px; - min-width: 320px; - max-width: 600px; - text-align: justify; + background-color: #fff; + min-height: 320px; + min-width: 320px; + max-width: 600px; + text-align: justify; } .content::before { - float: left; - display: block; - content: ''; - height: 0; - border: 150px solid #dcdcdc; - border-right-color: transparent; - border-bottom-color: transparent; -} \ No newline at end of file + float: left; + display: block; + content: ""; + height: 0; + border: 150px solid #dcdcdc; + border-right-color: transparent; + border-bottom-color: transparent; + shape-outside: polygon(0 0, -5px 300px, 600px -300px); +} diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..cbc5f521 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,52 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: grid; + height: 100vh; } -.a, .b, .c { - border: 3px solid transparent; - min-height: 50px; - - display: flex; - justify-content: center; - align-items: center; +.a, +.b, +.c { + display: flex; + justify-content: center; + align-items: center; + max-width: 1200px; + border: 5px solid transparent; + width: 100%; + min-height: 50px; + margin: 0 auto; } .a { - border-color: #ffffba + height: 50%; + border-color: #ffffba; } .b { - border-color: #ffdfba; + height: 50%; + border-color: #ffdfba; } .c { - border-color: #baffc9; -} \ No newline at end of file + grid-row: 3 / 3; + height: 50%; + border-color: #baffc9; +} +@media (max-width: 601px) { + .a { + grid-row: 1 / 2; + grid-column: 1 /3; + } + .b { + grid-row: 2 /2; + grid-column: 2 / 3; + } + .c { + grid-row: 2 / 2; + grid-column: 1 / 2; + } +} diff --git a/03/img/crystal-7428278_1920.jpg b/03/img/crystal-7428278_1920.jpg new file mode 100644 index 00000000..78f9350f Binary files /dev/null and b/03/img/crystal-7428278_1920.jpg differ diff --git a/03/img/crystal-7428278_640.jpg b/03/img/crystal-7428278_640.jpg new file mode 100644 index 00000000..6d9b595e Binary files /dev/null and b/03/img/crystal-7428278_640.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..d11ef898 100644 --- a/03/index.html +++ b/03/index.html @@ -5,12 +5,19 @@ devmentor.pl - HTML & CSS: RWD - #03 + -
T
-
P
- V +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim deserunt praesentium id hic cupiditate nihil tempora asperiores voluptates, itaque, delectus rem vitae, corporis placeat ea magni maxime consequuntur voluptas. Provident error perspiciatis dolore quibusdam recusandae dignissimos itaque maxime inventore? Blanditiis accusamus culpa hic adipisci, iste cumque! Assumenda, odit distinctio aspernatur hic possimus culpa eius nemo ipsum eveniet cumque iusto odio, molestiae commodi nesciunt nobis doloribus magni. Tempora odio ducimus perferendis, dolorum est beatae quisquam incidunt omnis aliquid nobis veniam, obcaecati soluta, debitis fugiat quis quod? Corporis, nostrum eligendi. Neque pariatur minus est necessitatibus suscipit sapiente. Quasi officiis ducimus hic est. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, harum. Sed animi, deleniti officiis nobis vitae rem inventore. Enim et eveniet adipisci ad temporibus similique dignissimos, voluptatum ut vitae? Nihil labore numquam recusandae vel vero nam nesciunt dicta veniam error pariatur consectetur soluta necessitatibus ad sequi quam vitae, cupiditate id aliquam modi ducimus! Itaque debitis dolorum odio sapiente eaque molestiae neque sunt, ea a! Asperiores error eligendi eveniet eius numquam harum illum hic, cumque molestias quis, doloribus amet sit officia officiis quam, quibusdam reiciendis distinctio. Fugit, tempora. Tenetur, ipsum amet itaque esse porro et libero tempora doloribus maxime voluptatem vel?

+
+
+ +
+ +
+ \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..6939e69c 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,180 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } -.p, .t, .v { - border: 3px solid transparent; - min-height: 50px; - - display: flex; - justify-content: center; - align-items: center; +.p, +.t, +.v { + border: 5px solid transparent; + min-height: 50px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .p { - border-color: #ffffba + border-color: #ffffba; } .t { - border-color: #ffdfba; + border-color: #ffdfba; } .v { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; +} + +@media (max-width: 599px) { + body { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + } + .t, + .text { + margin: 5px; + text-align: justify; + }.p, + .img { + grid-row: 1 / 2; + background-image: url(../img/crystal-7428278_640.jpg); + width: 100%; + height: 100vh; + background-size: cover; + background-position: center; + } + .video { + position: relative; + width: 100%; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + } + iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + } +} + +@media (min-width: 600px) and (max-width: 1199px) { + body { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + } + .t { + grid-column: 2 / 3; + grid-row: 1 / 3; + } + .text { + margin: 10px 20px; + text-align: justify; + } + .p { + grid-column: 1/2; + } + .p, + .img { + background-image: url(../img/crystal-7428278_1920.jpg); + width: 100%; + height: 100vh; + background-size: cover; + background-position: center; + min-width: 200px; + } + .v { + min-width: 200px; + } + .video { + position: relative; + width: 100%; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + min-width: 200px; + } + iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + } +} +@media (min-width: 1200px) and (max-width: 1400px) { + body { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + } + .t { + grid-column: 1 /3; + grid-row: 2 / 2; + } + .text { + margin: 10px 20px; + text-align: justify; + } + .p, + .img { + background-image: url(../img/crystal-7428278_1920.jpg); + width: 100%; + height: 100vh; + background-size: cover; + background-position: center; + } + .video { + position: relative; + width: 100%; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + } + iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + } +} +@media (min-width: 1401px) { + body { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + margin: 0 100px; + } + .t { + grid-column: 1 /3; + grid-row: 2 / 2; + } + .text { + margin: 10px 20px; + text-align: justify; + } + .p, + .img { + background-image: url(../img/crystal-7428278_1920.jpg); + width: 100%; + height: 100vh; + background-size: cover; + background-position: center; + } + .video { + position: relative; + width: 100%; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + } + iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + } +} diff --git a/04/index.html b/04/index.html index e3ca9540..dc553503 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,34 @@ - - - - - devmentor.pl - HTML & CSS: RWD - #04 - - - - + + + + + devmentor.pl - HTML & CSS: RWD - #04 - - \ No newline at end of file + + + + + + diff --git a/04/style.css b/04/style.css new file mode 100644 index 00000000..4fb8c0b0 --- /dev/null +++ b/04/style.css @@ -0,0 +1,151 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +.nav { + padding: 10px 0; + height: 80px; +} +.nav__list { + position: relative; + display: flex; +} +.nav__list--item { + padding: 10px 20px; + margin: 0 20px; + font-size: 1.2rem; + border-top: 3px solid transparent; + cursor: pointer; + text-transform: uppercase; + list-style: none; + transition: 0.3s; +} +.nav__list--item a { + color: black; + text-decoration: none; +} +.nav__list--item:hover { + border-top: 3px solid rgb(0, 0, 0); +} +.menu__display:hover > .nav__under { + display: block; +} +.nav__under { + display: none; + position: relative; + position: absolute; + top: 100%; + left: 170px; + width: 300px; +} +.nav__under--list { + width: 300px; + padding: 10px; + font-size: 1rem; + text-align: left; + text-transform: capitalize; + list-style: none; +} +.nav__under--list a { + color: rgb(0, 0, 0); + text-decoration: none; + transition: color 0.3s; +} + +.nav__under--list a:hover { + color: rgb(14, 144, 180); +} +.arrow-right { + position: absolute; + top: 14px; + left: 255px; + font-size: 1rem; + transform: rotate(90deg); +} +.nav__hamburger { + display: none; +} +@media (max-width: 599px) { + .nav { + width: 150px; + height: 100vh; + + } + .nav__list { + position: relative; + display: block; + transform: translateX(-100%); + transition: transform .3s; + } + .nav__list--item { + border: none; + transition: 0.3s; + } + .nav__list--item a { + color: rgb(0, 0, 0); + + transition: color 0.3s; + } + .nav__list--item:hover { + border: none; + } + .nav__list--item a:hover { + color: rgb(255, 255, 255); + } + + .nav__under { + width: 250px; + top: 6%; + left: 140px; + padding: 0 10px; + background-color: rgb(5, 107, 107); + } + .arrow-right { + top: 53px; + left: 100px; + transform: rotate(0); + padding: 0 20px; + } + .nav__hamburger { + display: block; + position: relative; + width: 20px; + height: 25px; + border: none; + border-top: 5px solid #000000; + background-color: transparent; + cursor: pointer; + + margin-bottom: 50px; + margin: 10px 10px; + transition: transform 0.3s; + } + .nav__hamburger::before, + .nav__hamburger::after { + content: ""; + position: absolute; + top: 0px; + left: 0%; + width: 100%; + border-top: 5px solid #000000; + transform: translateY(5px); + } + .nav__hamburger::after { + transform: translateY(15px); + transition: transform 0.3s; + } + .nav__hamburger:focus { + transform: rotate(45deg) translateY(5px); + border: none; + } + .nav__hamburger:focus::after { + transform: rotate(-90deg) translateX(-5px); + } + .nav__hamburger:focus ~ .nav__list { + transform: translateX(0); + width: 160px; + height: 100vh; + background-color: rgb(5, 107, 107); + } +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..b0a14f62 --- /dev/null +++ b/05/index.html @@ -0,0 +1,52 @@ + + + + + + mobile desktop website + + + +
+ +
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + + + diff --git a/05/style.css b/05/style.css new file mode 100644 index 00000000..94f6f964 --- /dev/null +++ b/05/style.css @@ -0,0 +1,249 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} +body { + background-color: #333; +} +.header { + width: 100%; + height: 100px; + border: 2px solid green; +} +.header__nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 80px; + border: 2px solid royalblue; + margin-top: 8px; +} +.header__nav--logo { + min-width: 200px; + height: 50px; + background-color: gold; +} +.header__nav--menu { + display: none; +} +.header__nav--menu-list { + width: 500px; + height: 50px; + background-color: gold; +} +.header__nav--menu-items { + display: none; +} + +.section { + width: 100%; + height: 400px; + border: 2px solid green; + margin-top: 20px; +} + +.section__about-us { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 360px; + border: 2px solid royalblue; + margin-top: 18px; +} + +.section__about-us--one { + width: 50%; + height: 320px; + background-color: gold; + margin-right: 5px; +} +.section__about-us--two { + width: 50%; + height: 320px; + background-color: gold; + margin-left: 5px; +} +.products { + width: 100%; + height: 400px; + border: 2px solid green; + margin-top: 20px; +} +.products__menu { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 360px; + border: 2px solid royalblue; + margin-top: 18px; +} +.products__menu--one { + width: 30%; + height: 320px; + background-color: gold; +} +.products__menu--two { + width: 30%; + height: 320px; + background-color: gold; +} +.products__menu--three { + width: 30%; + height: 320px; + background-color: gold; +} +.contact { + width: 100%; + height: 120px; + border: 2px solid green; + margin-top: 20px; +} +.contact__info { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 80px; + border: 2px solid royalblue; + margin-top: 18px; +} +.contact__info--address { + width: 20%; + height: 50px; + background-color: gold; +} + +@media (max-width: 800px) { + .header { + height: 80px; + } + .header__nav { + display: flex; + align-items: center; + justify-content: end; + height: 60px; + } + .header__nav--logo { + position: relative; + min-width: 200px; + height: 50px; + margin: 25%; + background-color: gold; + } + .header__nav--menu { + display: block; + background-image: url(../assets/img/logo-icon.png); + background-size: cover; + background-position: center; + background-color: transparent; + padding-right: 10px; + width: 50px; + height: 50px; + border: none; + cursor: pointer; + } + .header__nav--menu-list { + position: absolute; + top: 10%; + right: 0%; + width: 200px; + height: 100vh; + background-color: #333; + transform: translateX(100%); + transition: transform .3s; + } + .header__nav--menu-items { + display: block; + list-style: none; + text-align: center; + margin: 10px; + + } + .header__nav--menu-item { + color: aliceblue; + font-size: 1.2rem; + letter-spacing: 2px; + cursor: pointer; + text-transform: capitalize; + transition: color .3s; + } + .header__nav--menu-item:hover { + color: rgb(11, 229, 91); + } + + .section { + height: 100vh; + margin-top: 10px; + } + .section__about-us { + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + height: 100vh; + border: 2px solid royalblue; + margin-top: 0px; + } + .section__about-us--one { + width: 100%; + height: 48%; + background-color: gold; + margin: 0 ; + } + .section__about-us--two { + width: 100%; + height: 48%; + background-color: gold; + margin: 0; + } + .products { + height: 100vh; + margin-top: 10px; + } + .products__menu { + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + height: 100vh; + margin-top: 0px; + } + .products__menu--one { + width: 100%; + height: 250px; + } + .products__menu--two { + width: 100%; + height: 250px; + } + .products__menu--three { + width: 100%; + height: 250px; + } + .contact { + width: 100%; + height: 50px; + margin-top: 10px; + } + .contact__info { + height: 50px; + margin-top: 0px; + } + .contact__info--address { + width: 20%; + height: 40px; + } + .header__nav--menu:focus ~ .header__nav--menu-list { + transform: translateX(0); + } +}