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
151 changes: 151 additions & 0 deletions 01/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,157 @@
<title>devmentor.pl - HTML & CSS BASICS - #01</title>
</head>
<body>

<header class="header">

<div class="header__container">
<img src="" alt="logotype">
<nav class="navbar">

<ul class="navbar__list">

<li class="navbar__element">
<a href="" class="navbar__link">START</a>
</li>

<li class="navbar__element">
<a href="" class="navbar__link">ABOUT</a>
<ul class="navbar__dropdown dropdown">

<li class="dropdown__element">
<a href="" class="dropdown__link">STORY</a>
</li>

<li class="dropdown__element">
<a href="" class="dropdown__link">HOW IT STARTED</a>
</li>

</ul>
</li>

<li class="navbar__element">
<a href="" class="navbar__link">CONTACT</a>
</li>

</ul>

</nav>
</div>

</header>


<main>

<article class="article">
<h1 class="article__title">Article title</h1>
<p class="article__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In ratione expedita voluptas nisi debitis, architecto exercitationem, quos magni consectetur temporibus
ab non ipsam laborum possimus, nostrum ad dolorum? Error aspernatur necessitatibus consequuntur facilis, atque sed quidem est facere nobis perferendis sequi repellat expedita
consectetur eos amet omnis labore soluta itaque aliquid? Eius assumenda, officia deserunt sed suscipit nesciunt ut aliquid et quibusdam a. Enim, distinctio fugit esse ex veritatis
pariatur dolor. Error quam rerum dolorum placeat sequi excepturi deserunt? Aliquid illum suscipit veritatis esse numquam dolorum ipsum sequi commodi laboriosam, delectus temporibus
rem vero quam quod repudiandae dolor aliquam explicabo.
</p>
<p class="article__date">18.09.24</p>
<p class="article__author">Anonymous</p>
<img src="" alt="article image" class="article__image">

<table class="article__table">
<thead>
<tr>
<th>X</th>
<th>Y</th>
<th>Z</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>

</article>

<form action="" class="form">
<div class="form__container">

<div class="form__name"></div>
<label>Name:
<input type="text" name="name" placeholder="Name">
</label>
</div>

<div class="form__surname"></div>
<label>Surname:
<input type="text" name="surname" placeholder="Surname">
</label>
</div>

<div class="form__email">
<label>E-mail:
<input type="email" placeholder="Type your e-mail">
</label>
</div>

<div class="form__comment">
<label>Comment:
<textarea
name="comment"
id=""
placeholder="Type your comment">
</textarea>
</label>
</div>

<div class="form__button">
<button type="submit">SEND</button>
</div>

</div>
</form>

<div class="comments__container">

<div class="comment">
<p class="comment__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, velit!</p>
<p class="comment__author">Janusz Kowalski</p>
<p class="comment__date">20.08.24</p>
<hr/>
</div>

<div class="comment"></div>
<p class="comment__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, doloribus.</p>
<p class="comment__author">John Doe</p>
<p class="comment__date">29.08.24</p>
<hr/>
</div>

<div class="comment"></div>
<p class="comment__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos, quidem.</p>
<p class="comment__author">Adam Wolny</p>
<p class="comment__date">11.09.24</p>
<hr/>
</div>

</div>

</main>


<footer class="footer">
<div>
&copy; All rights reserved.
</div>
</footer>

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.

👍


</body>
</html>
12 changes: 6 additions & 6 deletions 02/styles/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
Znacznik label, którego przodkiem jest klasa .ac-container
(0, 1, 1)
*/
?? {
.ac-container label {
height: 30px !important;
line-height: 21px !important;
font-size: 12px !important;
Expand Down Expand Up @@ -47,7 +47,7 @@ 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)
*/
?? {
.ac-container label:hover {
background: #fff;
}

Expand All @@ -61,8 +61,8 @@ 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)
*/
??,
?? {
.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);
Expand All @@ -89,7 +89,7 @@ którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy),
którego przodek to element o klasie .ac-container
(0, 3, 3)
*/
?? {
.ac-container input:checked + label:hover::after {
background-image: url(../images/arrow_up.png);
}

Expand Down Expand Up @@ -126,7 +126,7 @@ Rodzeństwo o typie article, dla elementu input, który jest zaznaczony (użyj p
oraz posiada przodka o klasie .ac-container
(0, 2, 2)
*/
?? {
.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;
Expand Down
Binary file added 03/fonts/sourcesanspro-regular-webfont.woff
Binary file not shown.
Binary file added 03/fonts/sourcesanspro-regular-webfont.woff2
Binary file not shown.
9 changes: 3 additions & 6 deletions 03/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,13 @@
<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 - #03</title>

<link rel="stylesheet" href="styles/style.css">
</head>
<body>

<section class="parent parent--inline-block">
<div class="child child--first">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.</div>
<div class="child child--middle">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!</div>
<div class="child child--last">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?</div>
<div class="child child--first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.</div><div class="child child--middle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!</div><div class="child child--last">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?</div>
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.

Można też dodać komentarze, aby było to bardziej czytelne tj.

    <div>dsadas</div><!--
    -->div>...

W takim wypadku zawartość komentarze nie jest interpretowana przez przeglądarkę.

</section>

<section class="parent parent--float">
Expand Down
68 changes: 68 additions & 0 deletions 03/styles/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


@font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
url('fonts/sourcesanspro-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}



.parent {
width: 600px;
padding: 20px;

}

.parent--inline-block div {
display: inline-block;

}

.parent--float div {
float: left;
}

.parent--float::after {
content: '';
display: block;
clear: both;
}

.parent--flexbox {
display: flex;
}

.child {

margin-right: 10px;
font-family: 'Source Sans Pro';
}

.child--first, .child--middle {
max-width: calc(30% - 10px);
}

.child--first {
font-style: normal;
}

.child--middle {
font-weight: bold;
}

.child--last {
/* max-width: calc(40% - 10px); */
max-width: 40%;
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.

👍

margin-right: 0;
font-style: italic;
}

55 changes: 55 additions & 0 deletions 04/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav class="navbar">
<ul class="navbar__list">

<li class="navbar__element">
<a href="" class="navbar__link">HOME</a>
</li>

<li class="navbar__element navbar__element--dropdown">
<a href="" class="navbar__link">ITEMS</a>
<ul class="navbar__dropdown dropdown">

<li class="dropdown__item">
<a href="" class="dropdown__link">Item 1</a>
</li>

<li class="dropdown__item dropdown__item--children">
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.

👍

<a href="" class="dropdown__link">Item 2</a>
<ul class="dropdown__dropdown2 dropdown2">

<li class="dropdown2__item">
<a href="" class="dropdown2__link">Item 2.1</a>
</li>

<li class="dropdown2__item">
<a href="" class="dropdown2__link">Item 2.2</a>
</li>

</ul>
</li>
</ul>

</li>

<li class="navbar__element">
<a href="" class="navbar__link">SETTINGS</a>
</li>

<li class="navbar__element">
<a href="" class="navbar__link">CONTACT</a>
</li>

</ul>
</nav>

</body>
</html>
Loading