Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions 01/style.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
* {
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;
}
float: left;
display: block;
content: "";
height: 0;
border: 150px solid #dcdcdc;
border-right-color: transparent;
border-bottom-color: transparent;

shape-outside: polygon(0 0, 0% 100%, 100% 0);
margin-right: 20px;
}
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

18 changes: 9 additions & 9 deletions 02/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>devmentor.pl - HTML & CSS: RWD - #02</title>

<link rel="stylesheet" href="./styles/global.css">
</head>
<body>
<link rel="stylesheet" href="./styles/global.css" />
</head>
<body>
<header class="a">A</header>
<section class="c">C</section>
<main class="b">B</main>
</body>
</html>
</body>
</html>
48 changes: 35 additions & 13 deletions 02/styles/global.css
Original file line number Diff line number Diff line change
@@ -1,26 +1,48 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"a"
"b"
"c";
}
@media (min-width: 600px) {
body {
grid-template-areas:
"a a"
"c b";
}
}

.a, .b, .c {
border: 3px solid transparent;
min-height: 50px;
.a,
.b,
.c {
border: 3px solid transparent;
min-height: 50px;

display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
height: 50svh;
max-width: 1200px;
}

.a {
border-color: #ffffba
border-color: #ffffba;
grid-area: a;
/* justify-self: center; */
}

.b {
border-color: #ffdfba;
border-color: #ffdfba;
grid-area: b;
}

.c {
border-color: #baffc9;
}
border-color: #baffc9;
grid-area: c;
}
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Binary file added 03/img/img-1200.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 03/img/img-1900.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 03/img/img-600.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 51 additions & 13 deletions 03/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,54 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./styles/global.css" />
<title>devmentor.pl - HTML & CSS: RWD - #03</title>
</head>
<body>

<main class="t">T</main>
<header class="p">P</header>
<side class="v">V</side>

</body>
</html>
</head>
<body>
<main class="t">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur sapiente
fugit ipsum nulla autem exercitationem quas sed doloremque quibusdam iste
porro eos, repellat sequi quae expedita voluptatum ut facilis deserunt nam
quo rem? Quibusdam maiores consequatur tempora asperiores voluptas, ex
eligendi ullam totam nostrum ipsum voluptate deleniti ipsam doloribus sed.
Placeat recusandae iure, ullam iste beatae eveniet suscipit impedit, hic
perferendis sunt nulla quibusdam dolor maiores exercitationem quisquam
voluptates? Amet modi doloribus reiciendis. Libero assumenda, ea nemo,
tempore eum debitis sit omnis explicabo provident, perspiciatis dolores
similique! Voluptate porro ex quasi ab, iure et accusantium minima
adipisci commodi, omnis explicabo! Dignissimos ab, recusandae maiores
dolorem minus consectetur repellendus, tenetur deleniti corrupti nostrum
accusantium beatae repellat quas maxime voluptates! Qui, ipsum maxime.
Suscipit laboriosam repellat esse officiis aut at totam maiores doloremque
recusandae quae commodi nam deserunt, aliquid veritatis dolore blanditiis
error et sit unde, ea neque quod eveniet corrupti quaerat? Hic quaerat
deleniti inventore sint eum ipsa illo nesciunt soluta ut possimus, neque
accusamus doloremque cupiditate adipisci, ullam nobis animi voluptatibus
saepe libero beatae voluptate quam. Ducimus cumque fugiat qui similique
animi rerum sequi itaque! Assumenda quis veniam quibusdam aut. Laudantium,
quas qui. Totam, illo ipsam aperiam consequatur in obcaecati!
</main>
<header class="p">
<picture>
<source srcset="./img/img-600.jpg" media="(max-width: 600px)" />
<source srcset="./img/img-1200.jpg" media="(max-width: 1200px)" />
<source srcset="./img/img-1900.jpg" media="(min-width: 1201px)" />
<img src="./img/img-1900.jpg" alt="lake in the mountains" />
</picture>
</header>
<div class="v">
<iframe
src="https://www.youtube.com/embed/Gf5rSeTKpj4?si=-phDBkDhypmss-GY&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
</iframe>
</div>
</body>
</html>
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

62 changes: 49 additions & 13 deletions 03/styles/global.css
Original file line number Diff line number Diff line change
@@ -1,26 +1,62 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"p"
"t"
"v";
}

.p, .t, .v {
border: 3px solid transparent;
min-height: 50px;
@media (min-width: 600px) {
body {
grid-template-areas:
"p t"
"v t";
}
}
@media (min-width: 1200px) {
body {
display: grid;
grid-template-areas:
"p v"
"t t";
}
}
.p,
.t,
.v {
border: 3px solid transparent;
min-height: 50px;

display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}

.p {
border-color: #ffffba
border-color: #ffffba;
grid-area: p;
}
img {
max-width: 100%;
height: auto;
}

iframe {
width: 100%;
min-width: 200px;
aspect-ratio: 16/8;
}
.t {
border-color: #ffdfba;
border-color: #ffdfba;
grid-area: t;
}

.v {
border-color: #baffc9;
}
border-color: #baffc9;
grid-area: v;
}
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Binary file added 04/assets/logo.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 54 additions & 24 deletions 04/index.html
Original file line number Diff line number Diff line change
@@ -1,30 +1,60 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./styles/global.css" />
<link
rel="stylesheet"
href="./styles/mobile.css"
media="(max-width: 700px)"
/>
<link
rel="stylesheet"
href="./styles/desktop.css"
media="(min-width: 701px)"
/>
<title>devmentor.pl - HTML & CSS: RWD - #04</title>
</head>
<body>

<nav>
<ul>
<li>
<a href="#">start</a>
</head>
<body>
<nav class="navbar">
<div class="navbar__logo">
<img
class="navbar__logo-img"
src="./assets/logo.png"
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uwaga na wielkość liter. Plik graficzny ma zapisane rozszerzone WIELKIMI literami. Na systema UNIX (linux, macos) ma to znaczenie.

alt="NG Dev logo"
/>
</div>
<!-- Hamburger toggle -->
<input type="checkbox" id="navbar__hamburger-toggle" />
<label for="navbar__hamburger-toggle" class="navbar__hamburger">
&#9776;
</label>
<!-- -->
<ul class="navbar__list">
<li class="navbar__list-item">
<a class="navbar__link" href="#">start</a>
</li>
<li class="navbar__list-item navbar__list-item--sublist">
<a class="navbar__link" href="#">oferta</a>
<ul class="navbar__list--sublist">
<li class="navbar__list-item">
<a class="navbar__link navbar__link--sublink" href=""
>strony internetowe</a
>
</li>
<li>
<a href="#">oferta</a>
<ul>
<li><a href="">strony internetowe</a></li>
<li><a href="">pozycjonowanie stron www</a></li>
</ul>
<li class="navbar__list-item">
<a class="navbar__link navbar__link--sublink" href=""
>pozycjonowanie stron www</a
>
</li>
<li>
<a href="#">kontakt</a>
</li>
</ul>
</ul>
</li>
<li class="navbar__list-item">
<a class="navbar__link" href="#">kontakt</a>
</li>
</ul>
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

</nav>

</body>
</html>
</body>
</html>
Loading