Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
@arduinka55055
arduinka55055 authored Mar 26, 2024
1 parent 5aca661 commit 5bef515
Showing 2 changed files with 263 additions and 0 deletions.
129 changes: 129 additions & 0 deletions alb6.2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html>
<head>
<style>

body{
background-color: #444;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
/*make grid occupy all available space*/
width: 100%;
padding: 20px;
padding-top: 0;
height: 80%;
}

.card {
background-color: #555;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: 1px solid #333;
padding: 20px;
border-radius: 10px;
}

.user-picture {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

/*footer has 2 columns*/
footer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 20px;
height: 20%;
}

h3{
background-color: purple;
width: fit-content;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="card">
<img class="user-picture" src="https://media.istockphoto.com/id/515264384/photo/portrait-of-senior-female-teacher-working-at-her-desk.jpg?s=612x612&w=0&k=20&c=AnoP19qlLY7UzVpgyqxxbp-TxIbDTgZAqelP_AX65R0=" alt="Alice's Picture">
<h2>Марія</h2>
<ul>
<li>Вік: 56</li>
<li>Стать: Жіноча</li>
<li>Місце проживання: Україна</li>
<li>Мови: Українська</li>
<li>Посада: Вихователь дитячого садка</li>
<li>Роль у нашому застосунку: <br><b>Не клієнт</b></li>
</ul>
</div>
<div class="card">
<h3>Коротка біографія</h3>
<p>Марія - 56 річна вихователька дитячого садка. Вона не дуже шарить у цифрових технологіях, використовуючи базові програми такі як Viber i WhatsApp.
Вона використовує телефон для спілкування з родиною та друзями, а також для перегляду фотографій та відео. Марія не використовує соціальні мережі, такі як Facebook або Instagram.
</p>
</div>
<div class="card">
<h3>Приорітети та цілі використання додатку</h3>
<p>Марія хоче використовувати додаток для:</p>
<ul>
<li>Ведення списку дітей та їхніх батьків</li>
<li>Зберігання контактів батьків</li>
<li>Записки, наприклад для обліку групи подовженого дня</li>
</ul>
</div>
<div class="card">
<h3>Потреби користувача</h3>
<p>Марії необхідно:</p>
<ul>
<li>Популярність програми серед батьків дітей</li>
<li>Відсутність наворотів</li>
<li>Можливість використання на телефоні</li>
</ul>
</div>
<div class="card">
<h3>Побажання користувача</h3>
<p>Марія хоче, щоб додаток:</p>
<ul>
<li>Мав простий та зрозумілий інтерфейс</li>
<li>Було легко поставити на мобілку</li>
</ul>
</div>
<div class="card">
<h3>Страхи</h3>
<p>Марія боїться, що використання додатку може призвести до:</p>
<ul>
<li>Надсилання неправильної інформації батькам</li>
<li>Щось випадково наклацати</li>
<li>Неможливості доступу у не підходящий момент</li>
</ul>
</div>
</div>
<footer>
<div class="card">
<h3>Часто використовує:</h3>
<ul>
<li>Паперові записи</li>
<li>Viber</li>
<li>WhatsApp</li>
</ul>
</div>
<div class="card">
<h3>Рідко використовує:</h3>
<ul>
<li>Календар</li>
<li>Електронну пошту</li>
</ul>
</footer>
</body>
</html>
134 changes: 134 additions & 0 deletions lab6.1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<style>

body{
background-color: #444;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
/*make grid occupy all available space*/
width: 100%;
padding: 20px;
padding-top: 0;
height: 80%;
}

.card {
background-color: #555;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: 1px solid #333;
padding: 20px;
border-radius: 10px;
}

.user-picture {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

/*footer has 2 columns*/
footer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 20px;
height: 20%;
}

h3{
background-color: purple;
width: fit-content;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="card">
<img class="user-picture" src="https://www.springboard.com/blog/wp-content/uploads/2023/06/how-to-become-a-senior-software-engineer-in-7-steps.jpeg" alt="Alice's Picture">
<h2>Ігор</h2>
<ul>
<li>Вік: 36</li>
<li>Стать: Чоловіча</li>
<li>Місце проживання: Україна</li>
<li>Мови: Українська, Англійська</li>
<li>Посада: Senior Software developer</li>
<li>Роль у нашому застосунку: <br><b>Основний користувач</b></li>
</ul>
</div>
<div class="card">
<h3>Коротка біографія</h3>
<p>Ігор - 36 річний Senior розробник ПЗ. Він використовує усі можливі інструменти на роботі для підвищення ефективності та слідкує за трендами.
Ігор відкритий для нових ідей та готовий впроваджувати їх у роботу. Він віддає перевагу простим та зрозумілим інструментам, які допомагають йому вирішувати завдання швидко та ефективно.

</p>
</div>
<div class="card">
<h3>Приорітети та цілі використання додатку</h3>
<p>Ігор хоче використовувати додаток для:</p>
<ul>
<li>Керування проектами онлайн</li>
<li>Комунікації з командою</li>
<li>Тримати дедлайни під контролем</li>
<li>Зберігання важливої інформації</li>
</ul>
</div>
<div class="card">
<h3>Потреби користувача</h3>
<p>Ігору необхідно:</p>
<ul>
<li>Керувати завданнями у стилі Kanban</li>
<li>Мати можливість відслідковувати прогрес</li>
<li>Мати можливість вести списки діл (to do lists)</li>
<li>Мати можливість зберігати важливі файли</li>
</ul>
</div>
<div class="card">
<h3>Побажання користувача</h3>
<p>Ігор хоче, щоб додаток:</p>
<ul>
<li>Мав простий та зрозумілий інтерфейс</li>
<li>Був безпечним для корпоративних даних</li>
<li>Мав підтримку на великому спектрі пристроїв, особливо Apple MacBook Pro</li>
</ul>
</div>
<div class="card">
<h3>Страхи</h3>
<p>Ігор боїться, що використання додатку може призвести до:</p>
<ul>
<li>Витоку конфіденційної інформації</li>
<li>Пропуску важливого дедлайну</li>
<li>Неможливості використання з macOS чи ОС Linux</li>
</ul>
</div>
</div>
<footer>
<div class="card">
<h3>Часто використовує:</h3>
<ul>
<li>Microsoft Teams</li>
<li>Google workspace</li>
<li>Slack</li>
<li>Zoom</li>
</ul>
</div>
<div class="card">
<h3>Рідко використовує:</h3>
<ul>
<li>Notepad.exe</li>
<li>Apple Pages</li>
</ul>
</footer>
</body>
</html>

0 comments on commit 5bef515

Please sign in to comment.