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
82 changes: 82 additions & 0 deletions src/ex7_html-css-basics/taks-01.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="ru">
<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" />
<meta name="keywords" content="Задание, 1, ex7_html-css-basics" />
<link rel="stylesheet" href="task-01.css" />
<title>Task 1</title>
</head>
<body class="body-background">
<h1>Заголовок 1 уровня</h1>
<hr />
<h2>Заголовок 2 уровня</h2>
<hr />
<h3>Заголовок 3 уровня</h3>
<hr />
<h4>Заголовок 4 уровня</h4>
<hr />
<h5>Заголовок 5 уровня</h5>
<hr />
<h6>Заголовок 6 уровня</h6>
<hr />
<h3>Список заданий на сегодня!</h3>
<ul>
<li>Не забыть сделать практику по HTML</li>
<li>
Почитать про теги на
<a href="https://html5book.ru/html-tags/">html5book</a>
</li>
<li>Поверстать ex7_html-css-basics в VSCode</li>
<li>Запушить на <a href="https://github.com/DenisSteshin/">GitHub</a></li>
<li>Не забывать про дедлайны</li>
<li>
Почитать про селекторы и свойства на
<a href="https://html5book.ru/css-css3/">html5book</a>
</li>
<li style="color: aquamarine">
Научиться подключать стили 3-мя способами
</li>
<li>Научиться вовремя сдавать практику по JS</li>
<li>Сварить кофе</li>
<li>Выпить кофе</li>
<li>После выполнения создать пул-реквест</li>
</ul>
<div class="test-div">
<p><b>Вот и текст по центру</b></p>
</div>
<div>
<table>
<tr>
<th>Виногдра</th>
<th>Персики</th>
<th>Яблоко</th>
</tr>
<tr>
<th>Огурец</th>
<th>Свекла</th>
<th>Тыква</th>
</tr>
<tr>
<th>Итого: 2</th>
<th>Итого: 2</th>
<th>Итого: 2</th>
</tr>
</table>
</div>
<img
width="300"
src="https://avatars.mds.yandex.net/get-zen_doc/1712263/pub_5f9ef7a71f9f737992451313_5f9ef83749505f68110983f0/scale_1200"
alt="Какая-то картинка"
/>
<a href="https://learn.javascript.ru/">Это просто полезный сайт</a>
<p>Тренируемся верстать на HTML</p>
<br />
<p>Тренируемся стилизовать при помощи CSS</p>
<br />
<p>Тренируемся интерактивить с JS</p>
<br />
<p>Last paragraph</p>
</body>
</html>
131 changes: 131 additions & 0 deletions src/ex7_html-css-basics/taks-02.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="ru">
<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" />
<meta name="keywords" content="Задание, 2, ex7_html-css-basics" />
<link rel="stylesheet" href="task-02.css" />
<title>Task 2</title>
</head>
<body>
<h1>HTML Basics</h1>
<h2>Lists</h2>
<h3>Ordered list</h3>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
<h3>Unordered list</h3>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="description-list">
<h3>Description list</h3>
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
<h3>Nested list</h3>
<ul>
<li>List item one</li>
<li>
List item two with subitems
<ul>
<li>
Subitem 1
<ul>
<li>SubSubitem 1</li>
<li>SubSubitem 2</li>
</ul>
</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
</div>
<h3>List with links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About</a></li>
</ul>
<hr />
<h2>Paragraphs</h2>
<p>
Aliquam sit amet dignissim nunc, non suscipit dolor. Pellentesque a dui a
justo eleifend gravida. In vel massa tempor, ultricies arcu non, eleifend
tellus. Nam scelerisque fermentum convallis. Morbi luctus erat id
pellentesque bibendum. Aliquam dictum nulla vel justo tincidunt, vitae
commodo ligula convallis. Duis imperdiet mollis massa, cursus dapibus
massa. Praesent laoreet condimentum risus malesuada aliquet. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aliquam erat volutpat. Curabitur auctor mattis sodales. Duis mattis auctor
arcu. Morbi suscipit urna sit amet vestibulum venenatis. Integer finibus,
erat eu imperdiet pellentesque, tortor mauris mollis ex, nec fringilla
lacus eros id libero.
</p>
<p>
Duis sed vulputate nunc, eget euismod mi. Mauris sed felis sed ligula
varius interdum sed eget turpis. Suspendisse metus tortor, cursus ut
ornare at, eleifend tincidunt est. Phasellus sed ex a nulla laoreet
eleifend a a felis. Etiam vitae diam nec est euismod fermentum. Curabitur
efficitur vestibulum erat, ut commodo elit dignissim ac. Nullam facilisis
tortor tortor, et dapibus turpis viverra a. Suspendisse ut dictum tellus.
Morbi a erat vestibulum, vehicula ex sed, euismod libero. Mauris pharetra
finibus massa, vitae scelerisque velit bibendum sit amet.
</p>
<hr />
<h2>Tables</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</tbody>
</table>
<hr />
<h2>Image</h2>
<img
width="200"
src="https://img1.fonwall.ru/o/ha/cat-room-fish-couple.jpeg?route=thumb&h=350"
alt="Это котик!"
/>
<hr />
<h2>Pre tag</h2>
<pre>
if (time = 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
</pre
>
</body>
</html>
16 changes: 16 additions & 0 deletions src/ex7_html-css-basics/taks-03.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="ru">
<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" />
<meta name="keywords" content="Задание, 3, ex7_html-css-basics" />
<link rel="stylesheet" href="task-03.css" />
<title>Task 3</title>
</head>
<body>
<div class="task-03_1"></div>
<div class="task-03_2"></div>
<div class="task-03_3"></div>
</body>
</html>
83 changes: 83 additions & 0 deletions src/ex7_html-css-basics/taks-04.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
.description-list {
border-radius: 20px;
border-color: aqua;
border-style: solid;
border-width: 4px;
box-shadow: 15px 15px rgb(44, 44, 41);
font-size: 1.2em;
padding: 5px 30px;
background-color: rgba(255, 255, 0, 0.4);
display: flex;
align-items: center;
justify-content: space-between;
}
.paragraph {
font: 1em sans-serif;
}
.images-cats {
display: flex;
justify-content: space-around;
}
.logo {
display: flex;
justify-content: flex-end;
}
.logo img {
margin: 20px 40px 20px 150px;
}
.footer {
display: flex;
justify-content: center;
}
.footer p {
margin: 20px;
text-shadow: 2px 2px 4px #000;
}
p::first-letter {
font-size: 2em;
color: green;
font-weight: bold;
}
h3 + ul.sizeable {
display: flex;
justify-content: space-around;
margin-right: 50%;
}
h2 {
margin-left: 20px;
}
h3 {
margin-left: 30px;
color: rgb(238, 0, 0);
text-shadow: 2px 2px 4px #000;
}
h3 + ul li {
margin: 10px;
}
h3 + ul li a {
text-decoration-line: none;
margin: 10px;
text-shadow: 2px 2px 4px #000;
}
.links ul {
display: flex;
justify-content: space-around;
height: 50px;
}
a:hover {
font-size: 2em;
transition: 500ms;
}
.images-cats img:hover {
width: 400px;
transition: 500ms;
}
pre {
border-radius: 10px;
padding: 10px 20px;
background-color: black;
opacity: 0.8;
color: green;
font-size: 16px;
font-family: 'Lucida Sans', sans-serif, monospace;
}
14 changes: 14 additions & 0 deletions src/ex7_html-css-basics/task-01.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.body-background {
color: rgb(0, 0, 0);
background-color: rgba(163, 146, 199, 0.8);
}
.body-background hr {
border: 3px outset rgb(230, 217, 43);
}
.test-div {
background-color: #1afa40;
width: 500px;
height: 200px;
text-align: center;
color: #0b0ec2;
}
3 changes: 3 additions & 0 deletions src/ex7_html-css-basics/task-02.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.description-list {
background-color: #127c12;
}
21 changes: 21 additions & 0 deletions src/ex7_html-css-basics/task-03.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.task-03_1 {
width: 300px;
height: 200px;
background-color: aqua;
margin: 10px;
border: 4px solid #000000;
}
.task-03_2 {
width: 300px;
height: 200px;
background-color: aquamarine;
margin: 10px;
box-shadow: inset 4px 4px 5px #000, inset -4px -4px 5px #000;
}
.task-03_3 {
width: 300px;
height: 200px;
background-color: seagreen;
margin: 10px;
border: double 4px #000;
}
Loading