Skip to content

zadanie domowe bez zadania 5 #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dagmara-opalka wants to merge 4 commits into
base: master
Choose a base branch
from
Open

zadanie domowe bez zadania 5 #152

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2eb0494
changes
dagmara-opalka Jul 11, 2024
ec5fabe
homework
dagmara-opalka Jul 15, 2024
442809d
Changes after the consultation on 18.07.2024
dagmara-opalka Jul 18, 2024
1b09258
changes after code review
dagmara-opalka Jul 19, 2024
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
4 changes: 3 additions & 1 deletion 01/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,6 @@
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

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

👍

}
75 changes: 74 additions & 1 deletion 02/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
* {
/** {
margin: 0;
padding: 0;
box-sizing: border-box;
Expand All @@ -23,4 +23,77 @@

.c {
border-color: #baffc9;
} */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.a, .b, .c {
border: 3px solid transparent;
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
}

.a {
border-color: #ffffba;
}

.b {
border-color: #ffdfba;
}

.c {
border-color: #baffc9;
}

/* Układ dla mniejszych ekranów */
body {
display: grid;
grid-template-rows: 50vh 50vh 50vh;
grid-template-columns: 1fr;
height: 100vh;
}

.a {
grid-row: 1 / 2;
}

.b {
grid-row: 2 / 3;
}

.c {
grid-row: 3 / 4;
}

/* Układ dla szerokości powyżej 600px */
@media (min-width: 600px) {
body {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 50vh 50vh;
max-width: 1200px;
margin: 0 auto;
height: 100vh;
}

.a {
grid-column: 1 / 3;
grid-row: 1 / 2;
}

.c {
grid-column: 1 / 2;
grid-row: 2 / 3;
}

.b {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

👍

}
16 changes: 15 additions & 1 deletion 03/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,20 @@
<main class="t">T</main>
<header class="p">P</header>
<side class="v">V</side>

<body>
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

Tutaj mamy 2x body - myślę, że przez pomyłkę zostawiłaś niepotrzebnie to co jest powyżej wraz z body.

<div class="p">
<picture>
<source srcset="small.jpg" media="(max-width: 599px)">
<source srcset="medium.jpg" media="(min-width: 600px)">
<source srcset="large.jpg" media="(min-width: 1200px)">
<img src="default.jpg" alt="Sample Image">
Comment on lines +17 to +20
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

Brakuje mi tych obrazków na GitHubie ;P

</picture>
</div>
<div class="t">
<p>Wiele linii tekstu, które wypełniają przestrzeń na stronie. Ten tekst jest przykładem treści na stronie, która będzie zmieniać swoje miejsce w zależności od rozmiaru ekranu.</p>
</div>
<div class="v">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
72 changes: 71 additions & 1 deletion 03/styles/global.css
View file
Open in desktop
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

Ten plik nie jest podpięty pod plik HTML :P

Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
.p, .t, .v {
border: 3px solid transparent;
min-height: 50px;

display: flex;
justify-content: center;
align-items: center;
Expand All @@ -23,4 +22,75 @@

.v {
border-color: #baffc9;
}
body {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 1fr;
}

.p {
grid-row: 1 / 2;
}

.t {
grid-row: 2 / 3;
}

.v {
grid-row: 3 / 4;
}
Comment on lines +32 to +42
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

Przypuszczam, że starałaś się tutaj rozwiązać problem z 2x body - pamiętaj, że grid-row określa ile wierszy ma zajmować ten element. W naszym przypadku w zasadzie ma sie dostosować do wolnej przestrzeni więc auto lub po prostu nic nie pisać.


/* Tablet */
@media (min-width: 600px) and (max-width: 1199px) {
body {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
max-width: 100%;
}

.p {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.t {
grid-column: 2 / 3;
grid-row: 1 / 3;
}

.v {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
}

/* Desktop */
@media (min-width: 1200px) {
body {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
max-width: 1400px;
margin: 0 auto;
}

.p {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.v {
grid-column: 2 / 3;
grid-row: 1 / 2;
}

.t {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
}

iframe {
width: 100%;
height: 100%;
}
32 changes: 17 additions & 15 deletions 04/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,30 @@
<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 - #04</title>
<title>Responsive Menu</title>
<link rel="stylesheet" href="styles.css">
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

Tutaj adres do pliku jest nieprawidłowy - powinno być styles/styles.css

</head>
<body>

<nav>
<ul>
<div class="menu-toggle" id="menu-toggle">&#9776;</div>
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

Na jakiej zasadzie chcesz zrobić przełączanie? :focus, :checked ?

<ul class="menu" id="menu">
<li><a href="#">HOME</a></li>
<li>
<a href="#">start</a>
</li>
<li>
<a href="#">oferta</a>
<ul>
<li><a href="">strony internetowe</a></li>
<li><a href="">pozycjonowanie stron www</a></li>
<a href="#">ITEMS &#9662;</a>
<ul class="submenu">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2 &#9656;</a>
<ul class="submenu">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">kontakt</a>
</li>
<li><a href="#">SETTINGS</a></li>
<li><a href="#">CONTACT</a></li>
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

👍

</ul>
</nav>

</body>
</html>
93 changes: 93 additions & 0 deletions 04/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

nav {
background-color: #fff;
border-bottom: 1px solid #ccc;
position: relative;
}

.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}

.menu li {
position: relative;
}

.menu a {
display: block;
padding: 15px 20px;
text-decoration: none;
color: #000;
}
Comment on lines +21 to +30
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Jul 16, 2024

Choose a reason for hiding this comment

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

Zdecydowanie łatwiej jest stylować po klasach. Pamiętaj, ze ten zapis tj. .menu a oznacza, że wszystkie elementy a (linki wew. .menu) będą miały te cechy.


.menu .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
padding: 0;
}

.menu .submenu li {
width: 200px;
}

.menu .submenu a {
color: #fff;
padding: 10px;
}

.menu li:hover > .submenu {
display: block;
}

.menu .submenu .submenu {
left: 100%;
top: 0;
}

.menu-toggle {
display: none;
font-size: 24px;
padding: 15px;
cursor: pointer;
}

@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
width: 100%;
}

.menu-toggle {
display: block;
}

.menu li {
width: 100%;
}

.menu .submenu {
position: static;
}

.menu li:hover > .submenu {
display: block;
padding-left: 20px;
}

#menu-toggle:checked + .menu {
display: flex;
}
}