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
116 changes: 115 additions & 1 deletion 01/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,122 @@
<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>
<style>
/* Dodałem ostylowanie, żeby nie oślepnąć od ekranu */
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 {
background-color: #767676;
font-family: sans-serif;
}

table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>


<header>
<img class="logo" src="" alt="LOGO">
<nav class="navbar">
<ul class="main-menu">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html">ABOUT ME</a></li>
<li><a href="#">WORK</a>
<ul>
<li><a href="#">PHOTO</a>
<ul>
<li><a href="">ICELAND</a></li>
<li><a href="">ARGENTINA</a></li>
<li><a href="">POLAND</a></li>
</ul>
</li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">ANIMATIONS</a></li>
<li><a href="#">WEB</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>

<main>

<article class="article">
<h2>Lorem ipsum dolor</h2>
<img src="" alt="PICTURE">
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ć <figure> z odpowiednim opisem dla zdjęcia :)

<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus aspernatur enim nisi quia illo, porro autem, repudiandae impedit error, odit excepturi dolor deleniti aperiam provident non accusamus! Facilis ut ex debitis natus. Similique molestiae modi id eos laboriosam sint repellendus possimus numquam perferendis magnam. Suscipit aliquam tenetur incidunt asperiores itaque deleniti dolor. Corrupti incidunt dolores libero, exercitationem dicta suscipit cum architecto quia. Ex repudiandae laboriosam natus aliquam perspiciatis dignissimos aspernatur!
</p>
<address>Author: Marek Bełz
<time datetime="2024-07-28">28.07.24</time>
</address>

<table>
<caption>Important Table</caption>
<thead>
<tr>
<th scope="col">Title-1</th>
<th scope="col">Title-2</th>
<th scope="col">Title-3</th>
<th scope="col">Title-4</th>
<th scope="col">Title-5</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Title-1-2</th>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
<tr>
<th scope="row">Title-1-3</th>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
<td>DATA
</td>
</tr>
</tbody>
</table>
</article>

<section class="comment-section">
<form action="">
<h5>Comment:</h5>
<div>
<textarea placeholder="Comment!" name="comments" id="comments" rows="10" cols="50"></textarea>
</div>
<input type="submit">
</form>
<div class="comment-history">
<div class="comment" id="last-comment">
Comment on lines +98 to +99
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.

Każdy komentarz może być article jako jedna spójna wypowiedź lub można zrobić ul > li jako że to LISTA komentarzy :)

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, illo alias. Perferendis, doloremque animi qui voluptates quidem itaque veritatis. Magnam vero cum minus excepturi! Fugiat nihil voluptatem facilis, accusantium ipsam porro possimus cum non quidem beatae dolorum culpa nam sunt.
</p>
<address>Author: Marek Bełz
<time datetime="2024-07-28">28.07.24</time>
</address>
</div>
<div class="comment">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, illo alias. Perferendis, doloremque animi qui voluptates quidem itaque veritatis. Magnam vero cum minus excepturi! Fugiat nihil voluptatem facilis, accusantium ipsam porro possimus cum non quidem beatae dolorum culpa nam sunt.
</p>
<address>Author: Marek Bełz
<time datetime="2024-07-28">28.07.24</time>
</address>
</div>
</div>
</section>

<footer>
<p>© 2024 Marek Bełz</p>
</footer>


</main>

</body>
</html>
13 changes: 7 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,8 @@ 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 +127,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 {
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.

👍

-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
2 changes: 2 additions & 0 deletions 03/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,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 - #03</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

Expand Down
89 changes: 89 additions & 0 deletions 03/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit;}

img {max-width: 100%;}

ul {list-style: none;} /* we'll restore bullets as needed for content */

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

table {border-collapse: separate; border-spacing: 0; text-align: left;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
td img {vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}

input, select {vertical-align: middle;}

pre {white-space: pre-line;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}

small {font-size: .8rem;}

strong {font-weight: bold;}

sub, sup {font-size: .8rem; line-height: 0; position: relative;}
sup {top: -0.5rem;}
sub {bottom: -0.25rem;}

pre, code, kbd, samp {font-family: monospace, sans-serif;}

label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}

button, input, select, textarea {margin: 0;}

ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}

blockquote {padding: 2rem; border-left: 1px solid #333;}

.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */

h1, h2, h3, h4, h5, h6 {text-wrap: balance}

p {text-wrap: pretty;}

@media (prefers-reduced-motion: no-preference) {
:has(:target) {
scroll-behavior: smooth;
}
}

/* ———— END THE GENERIC RESETS ———— */

:root {
--font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
--text-color: #333;
--featured-color: #03f;
--featured-color-hover: #69f;
--highlight-color: #fcd700;
}

body {font-size: 16px; font-family: var(--font-system); color: var(--text-color);}

a {color: var(--featured-color);}
a:hover {color: var(--featured-color-hover);}

@media screen and (max-width: 480px) {

}

@media print {

}
67 changes: 67 additions & 0 deletions 03/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@


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

.child {
margin-right: 10px;
}

.child--first {
width: calc(30% - 20px);
font-family: 'Source Sans Pro', sans-serif;
font-weight: normal;
}

.child--middle {
width: calc(30% - 20px);
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
}

.child--last {
width: 40%;
font-family: 'Source Sans Pro', sans-serif;
font-style: Italic;
}


.parent--inline-block .child {
display: inline-block;
vertical-align: top;
}

.parent--inline-block .child:last-child {
margin-right: 0;
}


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

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

.parent--float .child:last-child {
margin-right: 0;
}

.parent--flexbox {
display: flex;
}

.parent--flexbox .child:last-child {
margin-right: 0;
}


@font-face {
font-family: ;
src: url();
}
Comment on lines +64 to +67
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.

Tutaj zabrakło podłączenia odpowiednich plików.
TUtaj cały artykuł jak to zrobić: https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

31 changes: 31 additions & 0 deletions 04/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!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="reset.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="nav">
<li class="nav__item">HOME</li>
<li class="nav__item">ITEMS
<i>></i>
<ul class="nav__dropdown">
<li class="dropdown__item">Item 1</li>
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.

Jeśli korzystamy z BEM to zawsze w hierarchii musi być Block (nawet jeśli go nie stylujemy) - tutaj zabrakło dropdown. Należy go dodać do ul powyżej tj. <ul class="nav__dropdown dropdown"> - czyli mamy dwie klasy i wszystko jest ok! :)

<li class="dropdown__item">Item 2
<i class="arrow-right">></i>
<ul class="nav__dropdown nav__dropdown-2">
<li class="dropdown__item">Item 2.1</li>
<li class="dropdown__item">Item 2.2</li>
</ul>
</li>
</ul>
</li>
<li class="nav__item">SETTINGS</li>
<li class="nav__item">CONTACT</li>
</ul>
</body>

</html>
Loading