Skip to content

Add tasks 1-5 #224

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
MagdalenaKoltuniak wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add tasks 1-5 #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d036a10
task 5 - add basic page layout according to the scheme
MagdalenaKoltuniak Dec 10, 2025
35f6250
task 4 - add nested navigation
MagdalenaKoltuniak Dec 10, 2025
109eacb
deleted redundant comments in task 4
MagdalenaKoltuniak Dec 10, 2025
4b8cf23
task 1 - add html structure
MagdalenaKoltuniak Dec 12, 2025
2bc2c17
task 2 - add missing selectors
MagdalenaKoltuniak Dec 12, 2025
5992a8b
task 3 - add styles to a html page
MagdalenaKoltuniak Dec 14, 2025
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
137 changes: 136 additions & 1 deletion 01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,147 @@
<!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">
<title>devmentor.pl - HTML & CSS BASICS - #01</title>
</head>

<body>

<header>
<a href="/"><img src="" alt=""></a>
<nav>
<ul>
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Lorem ipsum</a>
<ul>
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Lorem ipsum</a></li>
</ul>
</li>
</ul>
</nav>
</header>

<main>
<section>
<article>
<h2>Lorem ipsum dolor sit.</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus sed odit odio nemo, placeat
assumenda a excepturi error voluptatum voluptas sapiente. Unde ducimus magnam amet alias eius,
sint
dolor iste cum iure quo ex, culpa ipsa totam nihil ullam natus voluptates ad modi quam expedita
officiis eum nobis perferendis debitis!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus sed odit odio nemo, placeat
assumenda a excepturi error voluptatum voluptas sapiente. Unde ducimus magnam amet alias eius,
sint
dolor iste cum iure quo ex, culpa ipsa totam nihil ullam natus voluptates ad modi quam expedita
officiis eum nobis perferendis debitis!</p>
</div>
<p>Data publikacji: <time datetime="2025-10-10">10 października 2025</time></p>
<address class="author">Jerzy Kowalski</address>
<figure>
<img src="" alt="">
<figcaption>opis ilustracji</figcaption>
</figure>

<table>
<caption>Lorem, ipsum dolor.</caption>
<thead>
<tr>
<th scope="col">Lorem</th>
<th scope="col">Lorem</th>
<th scope="col">Lorem</th>
<th scope="col">Lorem</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">lorem</th>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<th scope="row">lorem</th>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<th scope="row">lorem</th>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="3">lorem</th>
<td>lorem</td>
</tr>
</tfoot>
</table>
</article>
</section>

<section>
<h2>Lorem, ipsum.</h2>
<form action="">
<div>
<label for="name">Imię:</label>
<input type="text" id="name" name="name" placeholder="imię">
</div>

<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="e-mail">
</div>

<div>
<label for="comment">Komentarz:</label>
<textarea name="comment" id="comment" rows="5" cols="50"
placeholder="Miejsce na Twój komentarz..."></textarea>
</div>

<div>
<input type="submit" value="Wyślij!">
</div>
</form>
</section>

<section>
<h2>Lorem, ipsum.</h2>
<article class="comment">
<p class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae,
obcaecati iure. Sunt repudiandae porro, delectus id, animi error nostrum labore ducimus quam est
assumenda consequatur ab at doloribus repellendus beatae?</p>
<p class="comment-author">Jan Nowak</p>
<time class="comment-date" datetime="2025-12-11">11 grudnia 2025</time>
</article>
<article class="comment">
<p class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae,
obcaecati iure. Sunt repudiandae porro, delectus id, animi error nostrum labore ducimus quam est
assumenda consequatur ab at doloribus repellendus beatae?</p>
<p class="comment-author">Agnieszka Kowalska</p>
<time class="comment-date" datetime="2025-12-10">10 grudnia 2025</time>
</article>
<article class="comment">
<p class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae,
obcaecati iure. Sunt repudiandae porro, delectus id, animi error nostrum labore ducimus quam est
assumenda consequatur ab at doloribus repellendus beatae?</p>
<p class="comment-author">Piotr Kowalczyk</p>
<time class="comment-date" datetime="2025-12-09">09 grudnia 2025</time>
</article>
</section>
</main>

<footer>
<p>&copy; 2025 devmentor.pl</p>
</footer>
</body>

</html>
162 changes: 81 additions & 81 deletions 02/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
/*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;
}

/*
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;
}

/*
Expand All @@ -61,26 +61,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;
}

/*
Expand All @@ -89,60 +89,60 @@ 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:hover::after {
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';
}

/*
Rodzeństwo o typie article, dla elementu input, który jest zaznaczony (użyj pseudoklasy)
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;
}
height: 230px;
}
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Dec 15, 2025

Choose a reason for hiding this comment

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

👍

Loading