Skip to content

practice-html-and-css-basics #210

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

practice-html-and-css-basics #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
32f8e2d
1 task
jankowskaweronika Dec 4, 2024
337f42a
2 task
jankowskaweronika Dec 4, 2024
4ef4430
3 task
jankowskaweronika Dec 4, 2024
1fe0b4e
4 task
jankowskaweronika Dec 13, 2024
352393c
5 task
jankowskaweronika Dec 13, 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
116 changes: 108 additions & 8 deletions 01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,112 @@
<!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 BASICS - #01</title>
</head>
<body>

</body>
</head>
<body>
<header>
<figure>
<img src="" alt="logo" />
</figure>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li><a href="#">Food</a></li>
<li><a href="#">Drinks</a></li>
<li><a href="#">Dessert</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Resturant</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe illum,
eaque voluptates fugiat nulla dolor aspernatur rem. Nulla, beatae
doloribus.
</p>
<table>
<thead>
<tr>
<th>Small</th>
<th>Medium</th>
<th>Large</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hot dog S</td>
<td>Hot dog M</td>
<td>Hot dog L</td>
</tr>
<tr>
<td>Pepsi S</td>
<td>Pepsi M</td>
<td>Pepsi L</td>
</tr>
</tbody>
</table>
<footer>
<p>Author of article is <a href="#">June Doe</a></p>
<p>Data of published<time datatime="2024-12-04">04 of December</time></p>
<figure>
<img src="" alt="Food" />
</figure>
<figcaption>June Doe</figcaption>
</footer>
</article>
<section>
<form action="" method="get">
<div>
<label for="nick"></label>
<input type="text" name="nick" id="nick" />
</div>
<div>
<label for="comments">Write below</label>
<textarea
name="comments"
id="comments"
cols="30"
rows="10"
></textarea>
</div>
<div><input type="submit" value="Add comment" /></div>
</form>
</section>
<section>
<ul>
<li>
<h2>Author <a href="#">Alex</a></h2>
<time datetime="2024-23-12">2024-23-12</time>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum
iste minus optio a expedita officia, assumenda ab unde laboriosam
reprehenderit.
</p>
</li>
<li>
<h2>Author <a href="#">Jenny</a></h2>
<time datetime="2024-12-04">2024-12-04</time>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum
iste minus optio a expedita officia, assumenda ab unde laboriosam
reprehenderit.
</p>
</li>
</ul>
</section>
</main>
<footer>
<p>&copy; june.doe@gmail.com</p>
</footer>
</body>
</html>
12 changes: 6 additions & 6 deletions 02/styles/index.css
View file
Open in desktop
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
92 changes: 80 additions & 12 deletions 03/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,104 @@
<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 - #03</title>
<title>Layout Zadanie</title>
<style>
@font-face {
font-family: 'Source Sans PRO';
src: url('path/to/SourceSansPro-Regular.otf') format('opentype'),
url('path/to/SourceSansPro-Bold.otf') format('opentype'),
url('path/to/SourceSansPro-Italic.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

.parent {
width: 600px;
padding: 20px;
margin-bottom: 20px;
background-color: #f0f0f0;
}

.parent--inline-block .child {
display: inline-block;
width: calc(30% - 5px);
font-family: 'Source Sans PRO';
}

.parent--float .child {
float: left;
width: calc(30% - 5px);
font-family: 'Source Sans PRO';
}

.parent--flexbox {
display: flex;
justify-content: space-between;
}

.parent--flexbox .child {
width: calc(30% - 5px);
font-family: 'Source Sans PRO';
}

.child--first {
font-weight: normal;
margin-right: 10px;
}

.child--middle {
font-weight: bold;
margin-right: 10px;
}

.child--last {
font-style: italic;
width: 40%;
}

/* Dodatkowe czyszczenie dla float */
.parent--float::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>

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

<section class="parent parent--float">
<div class="child child--first">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.</div>
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>
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>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
</div>
</section>

<section class="parent parent--flexbox">
<div class="child child--first">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.</div>
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>
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>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
</div>
</section>
</body>
</html>
37 changes: 37 additions & 0 deletions 04/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
</head>

<body>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"> <a class="nav__link" href="#">Home</a></li>
<li class="nav__item submenu"><a class="nav__link" href="#">Items</a>
<ul class="submenu__list">
<li class="submenu__item"><a class="submenu__link" href="#">Item 1</a></li>
<li class="submenu__item submenu__item--sub"><a class="submenu__link" href="#">Item 2</a>
<ul class="sub-submenu__list">
<li class="sub-submenu__item"><a class="sub-submenu__link" href="#">Item 2.1</a></li>
<li class="sub-submenu__item"><a class="sub-submenu__link" href="#">Item 2.2</a></li>

</ul>
</li>

</ul>
</li>
<li class="nav__item"><a class="nav__link" href="#">Settings</a>
<li class="nav__item"><a class="nav__link" href="#">Contact</a>
</ul>
</nav>
</body>


</html>
Loading