├── 11
    ├── screenshot.png
    ├── section-banner.css
    ├── section-banner.html
    └── text.txt
├── .DS_Store
├── 11.Workshop-SoftuniPage
    ├── .DS_Store
    ├── images
    │   ├── award.svg
    │   ├── career-center.png
    │   ├── cpe.jpg
    │   ├── diplomas.png
    │   └── logo.png
    ├── screenshot.png
    ├── task.css
    ├── task.html
    └── text.txt
├── Regular-Exam
    ├── .DS_Store
    ├── .vscode
    │   └── settings.json
    ├── 01.Postcard
    │   ├── .DS_Store
    │   ├── 01.Postcard_Description.docx
    │   └── 01.Postcard_Resources
    │   │   ├── images
    │   │       └── nature.jpg
    │   │   ├── screenshot.png
    │   │   ├── task.css
    │   │   ├── task.html
    │   │   └── text.txt
    ├── 02.AnimalRescue
    │   ├── .DS_Store
    │   ├── 02.AnimalRescue_Description.docx
    │   └── 02.AnimalRescue_Resources
    │   │   ├── .DS_Store
    │   │   ├── images
    │   │       ├── animal-care.png
    │   │       ├── background.jpg
    │   │       ├── bailey.jpg
    │   │       ├── bitsy.jpg
    │   │       ├── cookie.webp
    │   │       ├── dog.png
    │   │       ├── logo.png
    │   │       ├── munckin.jpg
    │   │       └── pet-food.png
    │   │   ├── index.html
    │   │   ├── responsive.css
    │   │   ├── screenshot_desktop.png
    │   │   ├── screenshot_mobile.png
    │   │   └── style.css
    └── 03.Musicfy
    │   ├── .DS_Store
    │   ├── 03.Musicfy_Description.docx
    │   └── 03.Musicfy_Resources
    │       ├── images
    │           ├── check.svg
    │           ├── cross.svg
    │           ├── dogopal.webp
    │           ├── logo.jpeg
    │           └── music.png
    │       ├── screenshot.png
    │       ├── task.css
    │       ├── task.html
    │       └── text.txt
├── ex02
    ├── .DS_Store
    ├── 01
    │   ├── box-model-visualised.css
    │   ├── box-model-visualised.html
    │   ├── screenshot.png
    │   └── text.txt
    ├── 02
    │   ├── layout-centered-container.css
    │   ├── layout-centered-container.html
    │   ├── screenshot.png
    │   └── text.txt
    ├── 04
    │   ├── .DS_Store
    │   ├── component-card.css
    │   ├── component-card.html
    │   ├── images
    │   │   └── image1.jpg
    │   ├── screenshot.png
    │   └── text.txt
    ├── 06
    │   ├── component-accordion.css
    │   ├── component-accordion.html
    │   ├── screenshot.png
    │   └── text.txt
    └── 08
    │   ├── component-button.css
    │   ├── component-button.html
    │   ├── screenshot.png
    │   └── text.txt
├── ex03
    ├── .DS_Store
    ├── 01
    │   ├── .DS_Store
    │   ├── screenshot.png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    ├── 02
    │   ├── screenshot.png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    ├── 03
    │   ├── screenshot.png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    ├── 04
    │   ├── screenshot.png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    ├── 05
    │   ├── images
    │   │   ├── image1.jpg
    │   │   ├── image2.jpg
    │   │   ├── image3.jpg
    │   │   ├── image4.jpg
    │   │   ├── image5.jpg
    │   │   ├── image6.jpg
    │   │   ├── image7.jpg
    │   │   ├── image8.jpg
    │   │   └── image9.jpg
    │   ├── screenshot.png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    ├── 06
    │   ├── screenshot.png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    └── preSolved
    │   ├── 10
    │       ├── screenshot.png
    │       ├── sticky-footer.css
    │       ├── sticky-footer.html
    │       └── text.txt
    │   ├── 11
    │       ├── screenshot.png
    │       ├── section-banner.css
    │       ├── section-banner.html
    │       └── text.txt
    │   ├── .DS_Store
    │   ├── 01
    │       ├── screenshot.png
    │       ├── text.txt
    │       ├── three-columns.css
    │       └── three-columns.html
    │   ├── 02
    │       ├── flex-order.css
    │       ├── flex-order.html
    │       ├── screenshot.png
    │       └── text.txt
    │   ├── 03
    │       ├── calendar.css
    │       ├── calendar.html
    │       ├── screenshot.png
    │       └── text.txt
    │   ├── 04
    │       ├── main-navigation.css
    │       ├── main-navigation.html
    │       ├── screenshot.png
    │       └── text.txt
    │   ├── 05
    │       ├── .DS_Store
    │       ├── images
    │       │   ├── image1.jpg
    │       │   ├── image2.jpg
    │       │   ├── image3.jpg
    │       │   ├── image4.jpg
    │       │   ├── image5.jpg
    │       │   ├── image6.jpg
    │       │   ├── image7.jpg
    │       │   ├── image8.jpg
    │       │   └── image9.jpg
    │       ├── photo-gallery.css
    │       ├── photo-gallery.html
    │       ├── screenshot.png
    │       └── text.txt
    │   ├── 06
    │       ├── fancy-quotes.css
    │       ├── fancy-quotes.html
    │       ├── screenshot.png
    │       └── text.txt
    │   ├── 07
    │       ├── expandable-tree-view.css
    │       ├── expandable-tree-view.html
    │       ├── screenshot.png
    │       └── text.txt
    │   ├── 08
    │       ├── keyboard.css
    │       ├── keyboard.html
    │       ├── screenshot.png
    │       └── text.txt
    │   └── 09
    │       ├── flexbox-center.css
    │       ├── flexbox-center.html
    │       ├── screenshot.png
    │       └── text.txt
├── ex04
    ├── 10
    │   ├── images
    │   │   ├── avatar.jpg
    │   │   └── media.jpg
    │   ├── screenshot_[1200px].png
    │   ├── screenshot_[800px].png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    ├── .DS_Store
    ├── .vscode
    │   └── settings.json
    ├── 01
    │   ├── screenshot_[1200px].png
    │   ├── screenshot_[800px].png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
    └── 09
    │   ├── screenshot_[1200px].png
    │   ├── screenshot_[800px].png
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
├── ex05
    ├── .DS_Store
    ├── .vscode
    │   └── settings.json
    ├── 01
    │   ├── screenshot_[1200px].png
    │   ├── screenshot_[600px].png
    │   ├── screenshot_[800px].png
    │   ├── task.css
    │   └── task.html
    ├── 02
    │   ├── 2151051403.jpg
    │   ├── task.css
    │   └── task.html
    ├── 03
    │   ├── task.css
    │   └── task.html
    ├── 06
    │   ├── custom-checkbox-and-radio.css
    │   ├── custom-checkbox-and-radio.html
    │   ├── screenshot_[1200px].png
    │   ├── screenshot_[600px].png
    │   ├── screenshot_[800px].png
    │   └── text.txt
    └── searchForm
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
├── lecture01
    ├── .DS_Store
    ├── 01
    │   ├── gallery-styles.css
    │   └── image-gallery.html
    ├── 02
    │   ├── todo-list.css
    │   └── todo-list.html
    ├── 03
    │   ├── navigation.css
    │   └── navigation.html
    ├── 04
    │   ├── list-of-posts.css
    │   └── list-of-posts.html
    ├── 05
    │   ├── single-post.css
    │   └── single-post.html
    └── 06
    │   ├── blog-layout.css
    │   └── blog-layout.html
├── lecture02
    ├── .DS_Store
    ├── 01
    │   ├── display-examples.css
    │   └── display-examples.html
    ├── 07
    │   ├── box-sizing.css
    │   └── box-sizing.html
    └── 08
    │   ├── overflow-examples.css
    │   └── overflow-examples.html
├── lecture03
    ├── .DS_Store
    ├── 01
    │   ├── 01.css
    │   └── 01.html
    ├── 02
    │   ├── 02.css
    │   └── 02.html
    ├── 03
    │   ├── 03.css
    │   └── 03.html
    ├── 07
    │   ├── 07.css
    │   └── 07.html
    └── 08
    │   ├── 08.css
    │   └── 08.html
├── lecture05
    ├── .DS_Store
    ├── DemoFields
    │   ├── task.css
    │   └── task.html
    └── searchForm
    │   ├── task.css
    │   ├── task.html
    │   └── text.txt
└── sampleHTML
    ├── task.css
    └── task.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/.DS_Store


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/11.Workshop-SoftuniPage/.DS_Store


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/images/award.svg:
--------------------------------------------------------------------------------
1 | <svg width="148" height="221" viewBox="0 0 148 221" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <g opacity="0.08">
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M73.6667 18.4167C43.1529 18.4167 18.4167 43.1529 18.4167 73.6667C18.4167 104.18 43.1529 128.917 73.6667 128.917C104.18 128.917 128.917 104.18 128.917 73.6667C128.917 43.1529 104.18 18.4167 73.6667 18.4167ZM0 73.6667C0 32.9817 32.9817 0 73.6667 0C114.352 0 147.333 32.9817 147.333 73.6667C147.333 114.352 114.352 147.333 73.6667 147.333C32.9817 147.333 0 114.352 0 73.6667Z" fill="white"/>
4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M107.355 118.683C112.397 118.014 117.026 121.559 117.695 126.601L128.837 210.581C129.302 214.086 127.719 217.547 124.764 219.488C121.808 221.429 118.003 221.507 114.971 219.688L73.6669 194.905L32.3629 219.688C29.3308 221.507 25.5248 221.429 22.5695 219.488C19.6141 217.547 18.0315 214.084 18.497 210.579L29.6391 126.691C30.3087 121.65 34.9384 118.106 39.9797 118.776C45.0211 119.445 48.5651 124.075 47.8955 129.116L39.2686 194.067L68.9292 176.271C71.8454 174.521 75.4884 174.521 78.4045 176.271L108.068 194.069L99.4381 129.023C98.7692 123.981 102.314 119.352 107.355 118.683Z" fill="white"/>
5 | </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/images/career-center.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/11.Workshop-SoftuniPage/images/career-center.png


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/images/cpe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/11.Workshop-SoftuniPage/images/cpe.jpg


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/images/diplomas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/11.Workshop-SoftuniPage/images/diplomas.png


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/11.Workshop-SoftuniPage/images/logo.png


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/11.Workshop-SoftuniPage/screenshot.png


--------------------------------------------------------------------------------
/11.Workshop-SoftuniPage/text.txt:
--------------------------------------------------------------------------------
 1 | ЗА НАС
 2 | УЧЕБЕН ПЛАН
 3 | ПРЕПОДАВАТЕЛИ
 4 | СЕРТИФИКАТИ
 5 | ТАКСИ
 6 | ПАРТНЬОРИ
 7 | ФОРУМ
 8 | БЛОГ
 9 | Диплома и сертификати
10 | След края на всеки завършен курс, курсистите получават автентичен сертификат на SoftUni Creative при оценка равна на или по-голяма от 5.00. Пропорционално на оценката се получават и определен брой кредити. Успелите да съберaт необходимия брой - 84* кредити от участието си в различните курсове на SoftUni Creative и преминалите през всички курсове от дадено професионално направление, ще получат професионалнa диплома за избраната специалност**.
11 | *Необходимият брой кредити за професията Graphic Designer е 90.
12 | 
13 | **Дипломата, която издава SoftUni Creative, не е държавно призната, но бива призната от компаниите - работодатели
14 | 
15 | Certificates
16 | Award
17 | Държавно признати Сертификати и Удостоверения
18 | SoftUni е лицензиран учебен център по Закона за професионалното образование и обучение. След всеки успешно преминат курс, участниците получават държавно признато „Свидетелство за професионално обучение“, както и приложение, валидно на територията на целия Европейски съюз.
19 | 
20 | CPE Certificates
21 | Career center
22 | Кариерно съдействие
23 | SoftUni Creative си партнира пряко с редица успешни агенции и компании с цел осигуряване на кариерен старт за млади специалисти в сферата на визуалната индустрия. Всички успешно дипломирали се курсисти, ще получат кариерно съдействие от страна на СофтУни, изразяващо се в безплатни консултации с кариерен специалист и директни препоръки за работа във водещи български и международни компании. За повече информация, можете да пишете на:
24 | 
25 | CAREERS@SOFTUNI.BG
26 | SOFTUNI CREATIVE
27 | За нас
28 | Обучения
29 | Сертификати
30 | Преподаватели
31 | Такси
32 | Партньори
33 | Общи условия
34 | ВСИЧКИ ОБУЧЕНИЯ
35 | Курсове
36 | Семинари
37 | ВСИЧКИ ИНИЦИАТИВИ
38 | Software University
39 | SoftUni Digital
40 | SoftUni Kids
41 | SoftUni Svetlina
42 | НАШИТЕ ПАРТНЬОРИ
43 | Дизайнът на Нещата
44 | Pixel House
45 | Apihawk
46 | Infragistics
47 | Fontfabric
48 | Coca-Cola HBC Bulgaria
49 | Areté Creative Agency
50 | 3DCG Arts
51 | © 2017-2020 - SoftUni Creative.
52 | 
53 | All Rights Reserved.


--------------------------------------------------------------------------------
/11/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/11/screenshot.png


--------------------------------------------------------------------------------
/11/section-banner.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | /* Typography */
  8 | 
  9 | html {
 10 |     font: 12px/1.5 "Lato", Verdana, sans-serif;
 11 | }
 12 | 
 13 | body {
 14 |     font: inherit;
 15 |     background: #EEE;
 16 |     min-height: 100vh;
 17 |     display: flex;
 18 |     flex-direction: column;
 19 |     justify-content: flex-start;
 20 |     align-items: center;
 21 |     padding: 2em;
 22 | }
 23 | 
 24 | img {
 25 |     display: block;
 26 |     width: 100%;
 27 |     height: auto;
 28 | }
 29 | 
 30 | .container {
 31 |     max-width: 900px;
 32 | }
 33 | 
 34 | article {
 35 |     background-color: #fff;
 36 |     display: flex;
 37 |     flex-direction: row;
 38 |     padding: 2em;
 39 |     gap: 2em;
 40 |     border-radius: 0.3em;
 41 |     box-shadow: -0.2em 0.2em 0.5em 0 rgba(0,0,0,0.05);
 42 | }
 43 | 
 44 | article .media {
 45 |     flex: 0 0 30%;
 46 |     order: 1;
 47 |     overflow: hidden;
 48 |     position: relative;
 49 |     border-radius: 0.3em;
 50 | }
 51 | 
 52 | article header {
 53 |     padding-bottom: 0.5em;
 54 | }
 55 | 
 56 | article hgroup h1,
 57 | article hgroup h2 {
 58 |     line-height: 1;
 59 | }
 60 | 
 61 | article hgroup h1 {
 62 |     font-size: 2.5em;
 63 |     font-weight: normal;
 64 |     margin: 0.4rem 0;
 65 |     opacity: 0.8;
 66 | }
 67 | 
 68 | article hgroup h2 {
 69 |     opacity: 0.5;
 70 | }
 71 | 
 72 | article p {
 73 |     opacity: 0.6;
 74 |     padding-bottom: 1.5em;
 75 | }
 76 | 
 77 | .button {
 78 |     display: inline-block;
 79 |     color: #fff;
 80 |     background: rebeccapurple;
 81 |     text-decoration: none;
 82 |     padding: 0.5em 1.3em;
 83 |     border-radius: 0.3em;
 84 | }
 85 | 
 86 | .button + .button {
 87 |     margin-left: 1em;
 88 | }
 89 | 
 90 | .button.secondary {
 91 |     background: #eee;
 92 |     color: #666;
 93 | }
 94 | 
 95 | .media:empty {
 96 |     background: #eee;
 97 |     border: 1px solid #ccc;
 98 | }
 99 | 
100 | @media (max-width: 768px) {
101 |     article {
102 |         flex-wrap: wrap;
103 |     }
104 |     .f-b-100 {
105 |         flex: 0 0 100% !important;
106 |     }
107 |     article .media {
108 |         order: 1;
109 |         height: 200px;
110 |     }
111 |     article .content {
112 |         order: 2;
113 |     }
114 |     
115 | }


--------------------------------------------------------------------------------
/11/section-banner.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Section Banner</title>
 7 |     <link rel="stylesheet" href="section-banner.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="container">
12 | 
13 |         <article>
14 |           <div class="content f-b-100">
15 |             <header>
16 |               <hgroup>
17 |                 <h2>Racoon Journal Entry<h2>
18 |                 <h1>Chillhop Essentials - Winter 2023</h1>
19 |               </hgroup>
20 |             </header>
21 |             <section>
22 |               <p>We introduce to you the first Chillhop Essentials of 2023 with our Spring release: a 26 song compilation available on purple double vinyl. The seasonal release comes complete with an immersive playground for our Raccoon to roam. With all art handled by illustrator/animator Rafael Araújo, the Essentials 2020 universe shows that anything is possible. Follow along and help us explore.</p>
23 |             </section>
24 |             <section class="cta">
25 |               <a href="#" class="button primary">Lets chat</a>
26 |               <a href="#" class="button secondary">Learn more</a>
27 |             </section>
28 |           </div>
29 |           <div class="media f-b-100"></div>
30 |         </article>
31 |     
32 |     </div>
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/11/text.txt:
--------------------------------------------------------------------------------
1 | Racoon Journal Entry
2 | Chillhop Essentials - Winter 2023
3 | 
4 | We introduce to you the first Chillhop Essentials of 2023 with our Spring release: a 26 song compilation available on purple double vinyl. The seasonal release comes complete with an immersive playground for our Raccoon to roam. With all art handled by illustrator/animator Rafael Araújo, the Essentials 2020 universe shows that anything is possible. Follow along and help us explore.
5 | 
6 | Lets chat
7 | Learn more


--------------------------------------------------------------------------------
/Regular-Exam/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/.DS_Store


--------------------------------------------------------------------------------
/Regular-Exam/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Regular-Exam/01.Postcard/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/01.Postcard/.DS_Store


--------------------------------------------------------------------------------
/Regular-Exam/01.Postcard/01.Postcard_Description.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/01.Postcard/01.Postcard_Description.docx


--------------------------------------------------------------------------------
/Regular-Exam/01.Postcard/01.Postcard_Resources/images/nature.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/01.Postcard/01.Postcard_Resources/images/nature.jpg


--------------------------------------------------------------------------------
/Regular-Exam/01.Postcard/01.Postcard_Resources/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/01.Postcard/01.Postcard_Resources/screenshot.png


--------------------------------------------------------------------------------
/Regular-Exam/01.Postcard/01.Postcard_Resources/task.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
 2 | 
 3 | * {
 4 |     padding: 0;
 5 |     margin: 0;
 6 |     box-sizing: border-box;
 7 | }
 8 | 
 9 | a {
10 |     color: inherit;
11 |     text-decoration: none;
12 | }
13 | body {
14 |     background: #e0e0e0;
15 |     font-family: 'Gochi Hand';
16 |     display: flex;
17 |     height: 100vh;
18 |     align-items: center;
19 |     justify-content: center;
20 | }
21 | .postcard {
22 |     width: 800px;
23 |     background: #FFF;
24 |     border: 1px solid #ccc;
25 |     border-radius: 15px;
26 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
27 |     overflow: hidden;
28 |     display: flex;
29 |     flex-direction: column;
30 | }
31 | .postcardTop {
32 |     position: relative;
33 |     padding: 20px;
34 | 
35 | }
36 | .postcardTop h1 {
37 |     font-size: 1.7rem;
38 |     margin-bottom: 20px;
39 | }
40 | .postcardTop > img {
41 |     width: 100%;
42 |     border-radius: 15px 15px 0 0;
43 | }
44 | .message {
45 |     position: absolute;
46 |     bottom: 40px;
47 |     background: #f0f0f0;
48 |     border: 1px solid #ccc;
49 |     border-radius: 15px;
50 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
51 |     left: 40px;
52 |     padding: 15px;
53 |     text-align: center;
54 |     width: calc(100% - 80px);
55 | }
56 | .postcardBottom {
57 |     background: #f2f2f2;
58 |     display: flex;
59 |     flex-direction: column;
60 |     gap: 10px;
61 |     padding: 20px 40px;
62 |     border-top: 2px solid rgb(213, 213, 213);
63 | }
64 | .postcardBottom h2 {
65 |     margin-bottom: 10px;
66 | }
67 | p {
68 |     opacity: 0.5;
69 | }


--------------------------------------------------------------------------------
/Regular-Exam/01.Postcard/01.Postcard_Resources/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Postcard Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 | </head>
 9 | <body>
10 |     <div class="postcard">
11 |         <div class="postcardTop">
12 |             <img src="images/nature.jpg" alt="Postcard Image">
13 |             <div class="message">
14 |                 <h1>Greetings from Narnia!</h1>
15 |                 <p>I hope this finds you well! Narnia is even more magical than I imagined. The landscapes are breathtaking, and I've met the most fascinating creatures, including Aslan himself. Every day here is an adventure. I visited Cair Paravel and was awed by its beauty. I wish you could see it with me! Sending you lots of love and a touch of Narnian magic. Can't wait to share my stories when I return.</p>
16 |             </div>
17 |         </div>
18 |         <div class="postcardBottom">
19 |             <h2>To: Kean Aviram</h2>
20 |             <p>Kazimiera Charon</p>
21 |             <p>1269 Friendship Lane</p>
22 |             <p>San Jose, CA, 95136</p>
23 |         </div>
24 |     </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Regular-Exam/01.Postcard/01.Postcard_Resources/text.txt:
--------------------------------------------------------------------------------
 1 | Greetings from Narnia!
 2 | 
 3 | I hope this finds you well! Narnia is even more magical than I imagined. The landscapes are breathtaking, and I've met the most fascinating creatures, including Aslan himself. Every day here is an adventure. I visited Cair Paravel and was awed by its beauty. I wish you could see it with me! Sending you lots of love and a touch of Narnian magic. Can't wait to share my stories when I return.
 4 | 
 5 | To: Kean Aviram
 6 | Kazimiera Charon
 7 | 
 8 | 1269 Friendship Lane
 9 | 
10 | San Jose, CA, 95136


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/.DS_Store


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Description.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Description.docx


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/.DS_Store


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/animal-care.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/animal-care.png


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/background.jpg


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/bailey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/bailey.jpg


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/bitsy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/bitsy.jpg


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/cookie.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/cookie.webp


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/dog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/dog.png


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/logo.png


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/munckin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/munckin.jpg


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/pet-food.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/images/pet-food.png


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <link rel="stylesheet" href="style.css">
 6 |     <link rel="stylesheet" href="responsive.css">
 7 |     <meta charset="UTF-8">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
10 |     <title>Animal Rescue</title>
11 | </head>
12 | 
13 | <body>
14 |     <header>
15 |         <nav>
16 |             <img src="./images/logo.png" alt="">
17 |             <ul>
18 |                 <li><a href="#">Home</a></li>
19 |                 <li><a href="#">Pages</a></li>
20 |                 <li><a href="#">Animals</a></li>
21 |                 <li><a href="#">Gallery</a></li>
22 |                 <li><a href="#">Blog</a></li>
23 |                 <li><a href="#">Contact</a></li>
24 |             </ul>
25 |         </nav>
26 |         <section class="header-title">
27 |             <h1>We run a neutering programme and also rescue sick, injured or neglected dogs.</h1>
28 |         </section>
29 |     </header>
30 |     <main>
31 |         <section class="our-dogs">
32 |             <div class="our-dogs-wrapper">
33 |                 <h3>DOGS IN NEED</h3>
34 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
35 |                 <ul>
36 |                     <li>
37 |                         <img src="./images/bailey.jpg" alt="pic">
38 |                         <p>Bailey</p>
39 |                     </li>
40 |                     <li>
41 |                         <img src="./images/cookie.webp" alt="pic">
42 |                         <p>Cookie</p>
43 |                     </li>
44 |                     <li>
45 |                         <img src="./images/bitsy.jpg" alt="pic">
46 |                         <p>Bitsy</p>
47 |                     </li>
48 |                     <li>
49 |                         <img src="./images/munckin.jpg" alt="pic">
50 |                         <p>Munchkin</p>
51 |                     </li>
52 |                 </ul>
53 |             </div>
54 |         </section>
55 |         <section class="helpNeed">
56 |             <ul>
57 |                 <li>
58 |                     <img src="./images/animal-care.png">
59 |                     <h4>Animal Madical Care</h4>
60 | 
61 |                 </li>
62 |                 <li>
63 |                     <img src="./images/pet-food.png">
64 |                     <h4>Food Partnership</h4>
65 |                 </li>
66 |                 <li>
67 |                     <img src="./images/dog.png">
68 |                     <h4>Adopt dog</h4>
69 |                 </li>
70 |             </ul>
71 | 
72 |         </section>
73 |         <section class="contact">
74 |             <h3>CONTACTS</h3>
75 |             <p>Nunc auctor turpis quis mollis porttitor</p>
76 |             <p>Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a metus et mauris suscipit
77 |                 maximus. Vestibulum eget tellus et nulla vestibulum vulputate. Mauris eget magna eget orci consequat
78 |                 interdum. Aenean vel nisi sollicitudin. Penatibus et magnis dis parturient montes, nascetur ridiculus
79 |                 mus. Fusce a metus et mauris suscipit maximus.</p>
80 |         </section>
81 |     </main>
82 |     <footer>
83 |         <p>© Copyright 2024 All Rights Reserved</p>
84 |     </footer>
85 | </body>
86 | 
87 | </html>


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/responsive.css:
--------------------------------------------------------------------------------
 1 | @media screen and (max-width: 600px) {
 2 |     header nav {
 3 |         flex-direction: column;
 4 |         gap: 20px;
 5 |     }
 6 |     .header-title {
 7 |         padding-top: 1em;
 8 |         padding-bottom: 1em;
 9 |     }
10 |     .our-dogs ul {
11 |         gap: 5px 40px;
12 |     }
13 |     
14 |     .our-dogs ul > li {
15 |         flex: 0 0 calc(50% - 40px);
16 |     }
17 |     
18 |     .our-dogs ul li img {
19 |         width: 100%;
20 |         height: 200px;
21 |         object-fit: cover;
22 |     }
23 | 
24 |     .helpNeed ul {
25 |         flex-direction: column;
26 |     }
27 | }


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/screenshot_desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/screenshot_desktop.png


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/screenshot_mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/screenshot_mobile.png


--------------------------------------------------------------------------------
/Regular-Exam/02.AnimalRescue/02.AnimalRescue_Resources/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@400..700&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |   font-family: "Edu TAS Beginner", cursive;
 11 |   font-size: 16px;
 12 |   letter-spacing: 1.5;
 13 |   box-sizing: inherit;
 14 |   max-width: 100vw;
 15 |   color: #67686b;
 16 | }
 17 | 
 18 | li {
 19 |   list-style: none;
 20 | }
 21 | 
 22 | header {
 23 |   background: linear-gradient(
 24 |       rgba(165, 163, 163, 0.107),
 25 |       rgba(165, 163, 163, 0.3)
 26 |     ),
 27 |     url(./images/background.jpg)
 28 |       no-repeat center center;
 29 |   background-size: cover;
 30 |   background-blend-mode: darken;
 31 |   padding: 2rem 0;
 32 |   text-shadow: 1px 1px 1px rgb(80, 79, 79);
 33 | }
 34 | 
 35 | header nav {
 36 |   display: flex;
 37 |   width: 70%;
 38 |   margin: 0 auto;
 39 |   justify-content: space-between;
 40 |   align-items: center;
 41 | }
 42 | 
 43 | header nav ul li {
 44 |   display: inline-block;
 45 |   list-style-type: none;
 46 | }
 47 | 
 48 | header nav ul li a {
 49 |   color: white;
 50 |   text-decoration: none;
 51 |   font-weight: bold;
 52 | }
 53 | 
 54 | header nav ul li {
 55 |   padding-right: 1em;
 56 | }
 57 | 
 58 | header nav img {
 59 |   width: 50px;
 60 | }
 61 | 
 62 | .header-title {
 63 |   color: white;
 64 |   margin: 0 auto;
 65 |   text-align: center;
 66 |   padding: 6em 0;
 67 |   width: 80%;
 68 | }
 69 | 
 70 | .header-title h1 {
 71 |   font-size: 50px;
 72 |   padding-bottom: 0.5em;
 73 | }
 74 | 
 75 | h3 {
 76 |   font-size: 24px;
 77 | }
 78 | 
 79 | .our-dogs-wrapper,
 80 | .contact {
 81 |   width: 80%;
 82 |   margin: 0 auto;
 83 |   padding: 2.5rem 0;
 84 |   text-align: center;
 85 | }
 86 | 
 87 | .blog-section p:nth-child(2),
 88 | .our-dogs p:nth-child(2),
 89 | .contact p:nth-child(2) {
 90 |   font-style: italic;
 91 |   padding-bottom: 2.5rem;
 92 | }
 93 | 
 94 | .contact p:nth-child(3) {
 95 |   width: 70%;
 96 |   margin: 0 auto;
 97 | }
 98 | 
 99 | .helpNeed {
100 |   padding: 2.5rem 0;
101 |   background-color: #dad7cd;
102 | }
103 | 
104 | .helpNeed ul {
105 |   display: flex;
106 |   justify-content: space-around;
107 | }
108 | 
109 | .helpNeed li {
110 |   flex: 0 0 25%;
111 |   text-align: center;
112 | }
113 | 
114 | .helpNeed li h4 {
115 |   padding-bottom: 0.8rem;
116 |   margin-top: 30px;
117 |   font-size: 20px;
118 | }
119 | 
120 | .helpNeed li img {
121 |   width: 8rem;
122 |   height: 8rem;
123 | }
124 | 
125 | .our-dogs {
126 |   color: white;
127 |   background: #588157;
128 | }
129 | 
130 | .our-dogs ul {
131 |   display: flex;
132 |   justify-content: space-between;
133 |   flex-direction: row;
134 |   flex-wrap: wrap;
135 | }
136 | 
137 | .our-dogs ul li img {
138 |   width: 250px;
139 |   height: 250px;
140 |   padding-bottom: 0.3rem;
141 | }
142 | 
143 | .our-dogs ul li > p:nth-child(2) {
144 |   padding: 0;
145 | }
146 | 
147 | .contact {
148 |   width: 100%;
149 |   color: white;
150 |   background-color: #588157;
151 | }
152 | 
153 | footer {
154 |   background: #2d333c;
155 |   text-align: center;
156 |   color: white;
157 |   padding: 1em 0;
158 | }
159 | 


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/03.Musicfy/.DS_Store


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Description.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/03.Musicfy/03.Musicfy_Description.docx


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/check.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15">
2 |     <path fill="#12A945" d="M6.793 14.621l-6.5-6.5a1 1 0 0 1 0-1.414l1.414-1.414a1 1 0 0 1 1.414 0L7.5 9.672l9.379-9.38a1 1 0 0 1 1.414 0l1.414 1.415a1 1 0 0 1 0 1.414l-11.5 11.5a1 1 0 0 1-1.414 0z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/cross.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
2 |     <path fill="#FC4C50" d="M13.79 10l5.687-5.686a1.787 1.787 0 0 0 0-2.527L18.213.523a1.787 1.787 0 0 0-2.527 0L10 6.21 4.314.523a1.787 1.787 0 0 0-2.527 0L.523 1.787a1.787 1.787 0 0 0 0 2.527L6.21 10 .523 15.686a1.787 1.787 0 0 0 0 2.527l1.264 1.264c.698.697 1.83.697 2.527 0L10 13.79l5.686 5.686c.698.697 1.83.697 2.527 0l1.264-1.264a1.787 1.787 0 0 0 0-2.527L13.79 10z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/dogopal.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/dogopal.webp


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/logo.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/logo.jpeg


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/03.Musicfy/03.Musicfy_Resources/images/music.png


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/Regular-Exam/03.Musicfy/03.Musicfy_Resources/screenshot.png


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/task.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
  2 | * {
  3 |     padding: 0;
  4 |     margin: 0;
  5 |     box-sizing: border-box;
  6 | }
  7 | a {
  8 |     color: inherit;
  9 |     text-decoration: none;
 10 | }
 11 | body {
 12 |     font-family: "Lato", sans-serif;
 13 | }
 14 | 
 15 | h1, h2, h3, h4, h5, h6 {
 16 |     font-family: "Montserrat", sans-serif;
 17 | }
 18 | 
 19 | header {
 20 |     display: flex;
 21 |     justify-content: space-between;
 22 |     background: #000;
 23 |     color: #FFF;
 24 |     align-items: center;
 25 | }
 26 | 
 27 | .logo img {
 28 |     height: 55px;
 29 | }
 30 | 
 31 | nav ul {
 32 |     display: flex;
 33 |     gap: 50px;
 34 |     margin-right: 20px;
 35 | }
 36 | 
 37 | nav ul li {
 38 |     list-style: none;
 39 |     font-size: 1.2rem;
 40 |     font-weight: 700;
 41 | }
 42 | 
 43 | .heroSection {
 44 |     position: relative;
 45 | }
 46 | 
 47 | .heroSection > * {
 48 |     z-index: 2;
 49 |     position: relative;
 50 | }
 51 | 
 52 | .imageWrapper {
 53 |     background: #1db954;
 54 |     position: absolute;
 55 |     width: 100%;
 56 |     height: 300px;
 57 |     z-index: 1 !important;
 58 | }
 59 | 
 60 | .imageWrapper img {
 61 |     width: 45%;
 62 |     position: absolute;
 63 | }
 64 | 
 65 | .prices {
 66 |     width: 800px;
 67 |     margin: auto;
 68 |     padding: 40px 0;
 69 |     display: flex;
 70 |     flex-wrap: wrap;
 71 |     gap: 30px;
 72 |     justify-content: space-between;
 73 | }
 74 | 
 75 | .prices h1 {
 76 |     color: #FFF;
 77 |     text-align: center;
 78 |     font-size: 2rem;
 79 |     flex: 0 0 100%;
 80 | }
 81 | 
 82 | .singlePrice {
 83 |     flex: 0 0 calc(50% - 30px);
 84 |     background: #FFF;
 85 |     border-radius: 10px;
 86 |     padding: 15px 0px 0px 0px;
 87 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 88 |     border: 1px solid #d0d0d0;
 89 |     color: #54546d;
 90 |     display: flex;
 91 |     flex-direction: column;
 92 |     gap: 15px;
 93 |     overflow: hidden;
 94 | }
 95 | 
 96 | .singlePrice h2 {
 97 |     font-size: 1.2rem;
 98 |     margin-bottom: 15px;
 99 |     text-align: center;
100 | }
101 | 
102 | .singlePrice ul {
103 |     display: flex;
104 |     flex-direction: column;
105 |     gap: 8px;
106 |     padding: 0 35px;
107 |     min-height: 170px;
108 | }
109 | 
110 | .singlePrice li {
111 |     list-style: circle;
112 | }
113 | 
114 | .singlePrice a {
115 |     background: #1db954;
116 |     padding: 8px 30px;
117 |     color: #FFF;
118 |     display: block;
119 |     width: max-content;
120 |     margin: auto;
121 |     border-radius: 25px;
122 |     font-weight: 700;
123 |     margin-top: 10px;
124 | }
125 | .priceTab {
126 |     display: flex;
127 |     padding: 20px 8px;
128 |     background: #000;
129 |     color: #FFF;
130 |     justify-content: space-around;
131 |     font-size: 1rem;
132 |     gap: 10px;
133 |     position: relative;
134 | }
135 | .priceTab > p {
136 |     flex: 0 0 calc(50% - 10px);
137 |     text-align: center;
138 | }
139 | .seperator {
140 |     position: absolute;
141 |     width: 1px;
142 |     height: 40px;
143 |     background: silver;
144 |     top: 8px;
145 | }
146 | 
147 | .compareMe {
148 |     display: flex;
149 |     flex-direction: column;
150 |     gap: 30px;
151 | }
152 | .compareMe > h3, .compareMe > p {
153 |     text-align: center;
154 | }
155 | 
156 | .comparison {
157 |     width: 800px;
158 |     margin: auto;
159 | }
160 | 
161 | .compareRow {
162 |     display: flex;
163 |     width: 100%;
164 |     justify-content: space-between;
165 | }
166 | 
167 | .imgGroup {
168 |     display: flex;
169 |     gap: 60px;
170 | }
171 | 
172 | .imgGroup > img:nth-of-type(2) {
173 |     margin-right: 60px;
174 | }
175 | 
176 | .comparison {
177 |     background: #cccbcb;
178 |     border-radius: 5px;
179 | }
180 | 
181 | .compareRow {
182 |     padding: 5px 10px;
183 | }
184 | 
185 | .compareRow:nth-of-type(even) {
186 |     background: #81d8a0;
187 | }
188 | 
189 | .dogopal {
190 |     width: 1000px;
191 |     margin: auto;
192 |     display: flex;
193 |     flex-wrap: wrap;
194 |     gap: 70px;
195 |     align-items: center;
196 | }
197 | 
198 | .dogopalContent {
199 |     flex: 0 0 60%;
200 |     display: flex;
201 |     flex-direction: column;
202 |     gap: 20px;
203 | }
204 | 
205 | .dogopalImg img {
206 |     max-width: 100%;
207 |     width: 100%;
208 | }
209 | 
210 | .dogopalImg {
211 |     flex: 1 0;
212 | }
213 | 
214 | main {
215 |     display: flex;
216 |     flex-direction: column;
217 |     gap: 80px;
218 | }
219 | 
220 | footer {
221 |     margin-top: 80px;
222 |     background: #000;
223 |     color: #FFF;
224 |     text-align: center;
225 |     padding: 30px 0;
226 | }
227 | 
228 | .compareMe > h3 {
229 |     font-size: 2rem;
230 | }


--------------------------------------------------------------------------------
/Regular-Exam/03.Musicfy/03.Musicfy_Resources/text.txt:
--------------------------------------------------------------------------------
 1 | Home
 2 | Browser
 3 | Radio
 4 | Podcasts
 5 | 
 6 | Plans
 7 | 
 8 | Individual / Student Plan
 9 | 1 Premium account
10 | Cancel anytime
11 | 15 hours/month of listening time from our audiobooks subscriber catalog
12 | Access to Hulu
13 | Discount for eligible students
14 | Try free for 1 month
15 | $10.99 / month after
16 | $5.99 / month after
17 | 
18 | Family Plan
19 | Up to 6 Premium or Kids accounts
20 | Control content marked as explicit
21 | Access to Musicfy Kids
22 | Cancel anytime
23 | 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only)
24 | Try free for 1 month
25 | $16.99 / month after
26 | 
27 | Many ways to pay and manage your plans easily, quickly and securely with DogoPal
28 | 1. We do not share all of your financial information with sellers. Rest assured that your eligible purchases are protected by DogoPal Buyer Protection. Terms apply.
29 | 2. You can easily and securely spend, send money and manage your transactions - all in one place. Download the app to your smartphone or open an account online for free.
30 | 3. Pay flexibly with DogoPal. Send and receive money. Support good causes that are close to your heart. Who would have thought that an app could be so versatile?
31 | 
32 | Experience the difference
33 | Go Premium and enjoy full control of your listening. Cancel anytime.
34 | Ad-free music listening
35 | Download to listen offline
36 | Play songs in any order
37 | High audio quality
38 | Listen with friends in real time
39 | Organize listening queue
40 | 
41 | &copy; 2024 Musicfy. All Rights Reserved.


--------------------------------------------------------------------------------
/ex02/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/.DS_Store


--------------------------------------------------------------------------------
/ex02/01/box-model-visualised.css:
--------------------------------------------------------------------------------
 1 | .css-box-model {
 2 |     width: 50vw;
 3 |     margin: 50px auto;
 4 | }
 5 | 
 6 | .css-box-model div {
 7 |     border: 1px dashed #666;
 8 |     margin: 20px;
 9 |     position: relative;
10 | }
11 | 
12 | .absolute {
13 |     position: absolute;
14 |     left: 10px;
15 |     top: 0px;
16 |     margin: 0;
17 |     font-size:10px;
18 | }
19 | 
20 | .css-box-model .margin {
21 |     background: #f89670;
22 | }
23 | 
24 | .css-box-model .border {
25 |     background: #fde8c7;
26 | }
27 | 
28 | .css-box-model .padding {
29 |     background: #85eb85;
30 | }
31 | 
32 | .css-box-model .content {
33 |     background: #a3d3e2;
34 |     text-align: center;
35 |     text-transform: capitalize;
36 | }


--------------------------------------------------------------------------------
/ex02/01/box-model-visualised.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Box Model Visualised</title>
 7 |     <link rel="stylesheet" href="box-model-visualised.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <div class="css-box-model">
12 |         <div class="margin">
13 |             <p class="absolute">margin</p>
14 |             <div class="border">
15 |                 <p class="absolute">border</p>
16 |                 <div class="padding">
17 |                     <p class="absolute">padding</p>
18 |                     <div class="content">
19 |                         <p>content</p>
20 |                     </div>
21 |                 </div>
22 |             </div>
23 |         </div>
24 |     </div>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/ex02/01/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/01/screenshot.png


--------------------------------------------------------------------------------
/ex02/01/text.txt:
--------------------------------------------------------------------------------
1 | Content


--------------------------------------------------------------------------------
/ex02/02/layout-centered-container.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     border: 2px solid green;
 3 |     margin: 0px;
 4 |     padding: 20px 0;
 5 | }
 6 | .site-main {
 7 |     border: 2px solid blue;
 8 |     padding: 20px;
 9 |     max-width: 900px;
10 |     margin: auto;
11 | }
12 | .site-main > header,
13 | .site-main > main,
14 | .site-main > footer {
15 |     border: 2px solid #000;
16 |     text-align: center;
17 | }
18 | .site-main > header,
19 | .site-main > main {
20 |     margin-bottom: 20px;
21 | }
22 | .site-main h1 {
23 |     font-size: 1rem;
24 |     font-weight: 500;
25 | }


--------------------------------------------------------------------------------
/ex02/02/layout-centered-container.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Layout Centered</title>
 7 |     <link rel="stylesheet" href="layout-centered-container.css">
 8 | </head>
 9 | <body>
10 |     <section class="site-main relative text-center">
11 |         <header>
12 |             <h1>Header</h1>
13 |         </header>
14 |         <main>
15 |             <p>Main</p>
16 |         </main>
17 |         <footer>
18 |             <p>Footer</p>
19 |         </footer>
20 |     </section>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/ex02/02/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/02/screenshot.png


--------------------------------------------------------------------------------
/ex02/02/text.txt:
--------------------------------------------------------------------------------
1 | Header
2 | Main
3 | Footer


--------------------------------------------------------------------------------
/ex02/04/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/04/.DS_Store


--------------------------------------------------------------------------------
/ex02/04/component-card.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: #ebebeb;
 3 |     font-family: Arial, Helvetica, sans-serif;
 4 | }
 5 | body a {
 6 |     color: inherit;
 7 |     text-decoration: none;
 8 | }
 9 | .card {
10 |     width: 30%;
11 |     margin: 30px auto;
12 |     border-radius: 5px;
13 |     box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; 
14 |     overflow: hidden;
15 |     background: #FFF;
16 | }
17 | .img-container {
18 |     background-image: url('images/image1.jpg');
19 |     height: 250px;
20 |     display: block;
21 |     background-position: center;
22 | }
23 | .img-container img {
24 |     width: 100%;
25 | }
26 | .main-container {
27 |     padding: 10px 20px;
28 | }
29 | .main-container h2 {
30 |     margin: 0px;
31 |     font-size: 1rem;
32 | }
33 | footer p {
34 |     margin: 0;
35 | }
36 | .f-bold {
37 |     font-weight: 600;
38 | }
39 | .f-italic {
40 |     font-style: italic;
41 | }
42 | .limit-lines {
43 |     text-overflow: ellipsis;
44 |     overflow: hidden;
45 |     display: -webkit-box;
46 |     -webkit-line-clamp: 1;
47 |     line-clamp: 1;
48 |     -webkit-box-orient: vertical;
49 | }


--------------------------------------------------------------------------------
/ex02/04/component-card.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Card</title>
 7 |     <link rel="stylesheet" href="component-card.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <article class="card">
12 |         <a href="#">
13 |             <div class="img-container">
14 |                 
15 |             </div>
16 |             <div class="main-container">
17 |                 <h2>Where exactly is aurora borealis?</h2>
18 |                 <p class="excerpt">
19 |                     The northern lights most commonly occur within the geographic area beneath the auroral oval. It encompasses latitudes between 60 and 75 degrees and takes in Iceland, northern parts of Sweden, Finland, Norway, Russia, Canada and Alaska as well as southern Greenland.
20 |                 </p>
21 |                 <footer>
22 |                     <p class="f-bold">discover-the-world.com</p>
23 |                     <p class="f-italic limit-lines">https://www.discover-the-world.com/northern-lights/</p>
24 |                 </footer>
25 |             </div>
26 |         </a>
27 |     </article>
28 | 
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/ex02/04/images/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/04/images/image1.jpg


--------------------------------------------------------------------------------
/ex02/04/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/04/screenshot.png


--------------------------------------------------------------------------------
/ex02/04/text.txt:
--------------------------------------------------------------------------------
1 | Where exactly is aurora borealis?
2 | 
3 | The northern lights most commonly occur within the geographic area beneath the auroral oval. It encompasses latitudes between 60 and 75 degrees and takes in Iceland, northern parts of Sweden, Finland, Norway, Russia, Canada and Alaska as well as southern Greenland.
4 | 
5 | discover-the-world.com
6 | https://www.discover-the-world.com/northern-lights/


--------------------------------------------------------------------------------
/ex02/06/component-accordion.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Protest Guerrilla", sans-serif;
 3 | }
 4 | .accordion-container {
 5 |     width: 70%;
 6 |     margin: 30px auto;
 7 | }
 8 | .accordion-container details {
 9 |     border: 1px solid #c0c0c0;
10 |     padding: 20px;
11 |     border-bottom: 0;
12 | }
13 | .accordion-container details:last-child {
14 |     border-bottom: 1px solid #c0c0c0;
15 | }
16 | .accordion-container details summary {
17 |     font-weight: 700;
18 |     cursor: pointer;
19 | }


--------------------------------------------------------------------------------
/ex02/06/component-accordion.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Accordion</title>
 7 |     <link rel="stylesheet" href="component-accordion.css">
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 |     <link href="https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap" rel="stylesheet">
11 | </head>
12 | <body>
13 |     <div class="accordion-container">
14 |         <details>
15 |             <summary>Heading 1</summary>
16 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.</p>
17 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.</p>
18 |         </details>
19 | 
20 |         <details>
21 |             <summary>Heading 2</summary>
22 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.</p>
23 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.</p>
24 |         </details>
25 | 
26 |         <details>
27 |             <summary>Heading 3</summary>
28 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.</p>
29 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.</p>
30 |         </details>
31 |     </div>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/ex02/06/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/06/screenshot.png


--------------------------------------------------------------------------------
/ex02/06/text.txt:
--------------------------------------------------------------------------------
 1 | Heading 1
 2 | 
 3 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.
 4 | 
 5 | Heading 2
 6 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.
 7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.
 8 | 
 9 | Heading 3
10 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.
11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Est magnam, odio nam enim architecto, voluptate, quidem quas deserunt doloremque dolorem sed. Optio accusantium quaerat culpa rerum in expedita sunt voluptatem.


--------------------------------------------------------------------------------
/ex02/08/component-button.css:
--------------------------------------------------------------------------------
 1 | a {
 2 |     color: inherit;
 3 |     text-decoration: none;
 4 | }
 5 | h2 {
 6 |     font-size: 1.2em;
 7 |     margin: 0;
 8 | }
 9 | .button {
10 |     background: #cfcccc;
11 |     border-radius: 50%;
12 |     padding: 10px;
13 |     text-align: center;
14 |     margin: 10px 5px;
15 |     display: inline-block;
16 |     font-size: 0.7rem;
17 |     border: 1px solid #cfcccc;
18 | }
19 | .button:first-of-type {
20 |     margin-left: 0px;
21 | }
22 | .primary {
23 |     background: orange;
24 | }
25 | .secondary {
26 |     background: yellow;
27 | }
28 | .outline {
29 |     background: #FFF;
30 | }


--------------------------------------------------------------------------------
/ex02/08/component-button.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Buttons</title>
 7 |     <link rel="stylesheet" href="component-button.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 |     <section class="list-a">
13 |         <h2>Link as a button</h2>
14 |         <a href="#" class="button"><i class="fa-brands fa-facebook"></i></a>
15 |         <a href="#" class="button"><i class="fa-brands fa-twitter"></i></a>
16 |         <a href="#" class="button"><i class="fa-brands fa-github"></i></a>
17 |         <a href="#" class="button"><i class="fa-brands fa-github"></i></a>
18 |     </section>
19 | 
20 |     <section class="list-a">
21 |         <h2>Link as a button</h2>
22 |         <button class="button">Click Me!</button>
23 |         <button class="button primary">Click Me!</button>
24 |         <button class="button secondary">Click Me!</button>
25 |         <button class="button outline">Click Me!</button>
26 |         <button class="button icon"><i class="fa-solid fa-pen-to-square"></i> Edit</button>
27 |     </section>
28 | 
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/ex02/08/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex02/08/screenshot.png


--------------------------------------------------------------------------------
/ex02/08/text.txt:
--------------------------------------------------------------------------------
 1 | Link as a button
 2 | Click Me!
 3 | Click Me!
 4 | Click Me!
 5 | Click Me!
 6 | Edit
 7 | 
 8 | Button element with class button
 9 | Click Me!
10 | Click Me!
11 | Click Me!
12 | Click Me!
13 | Edit


--------------------------------------------------------------------------------
/ex03/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/.DS_Store


--------------------------------------------------------------------------------
/ex03/01/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/01/.DS_Store


--------------------------------------------------------------------------------
/ex03/01/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/01/screenshot.png


--------------------------------------------------------------------------------
/ex03/01/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: #EEE;
12 | }
13 | .container {
14 |     margin-top: 30px;
15 | }
16 | .columns {
17 |     width: 80%;
18 |     margin: 0 auto;
19 |     background: #FFF;
20 |     padding: 30px 60px;
21 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
22 |     border-radius: 3px;
23 |     display: flex;
24 |     flex-wrap: wrap;
25 |     gap: 40px;
26 | }
27 | .columns > header,
28 | .columns > footer {
29 |     flex: 0 0 100%;
30 |     text-align: center;
31 | }
32 | .columns article {
33 |     flex: 0 0 calc( ( 100% / 3 ) - ( 2 * 20px ) );
34 | }
35 | .columns > header h2 {
36 |     font-weight: 600;
37 |     margin-bottom: 10px;
38 | }
39 | .columns > header p {
40 |     font-style: italic;
41 |     opacity: 0.7;
42 | }
43 | header:after,
44 | footer:before {
45 |     display: block;
46 |     content: '';
47 |     width: 50px;
48 |     height: 2px;
49 |     background: #EEE;
50 |     margin: 30px auto 0 auto;
51 | }
52 | 
53 | footer:before {
54 |     margin: 0px auto 30px auto;
55 | }
56 | 
57 | /** Tablet **/
58 | @media (min-width: 611px) and (max-width: 1024px) {
59 |     .columns {
60 |         padding: 20px 25px;
61 |     }
62 |     .columns article {
63 |         flex: 0 0 calc( ( 100% / 2 ) - ( 2 * 20px ) );
64 |     }
65 | }
66 | 
67 | @media print, (max-width: 610px) {
68 |     .columns {
69 |         padding: 10px 15px;
70 |     }
71 |     .columns article {
72 |         flex: 0 0 100%;
73 |     }
74 | }
75 | 
76 | @media (min-width: 2000px) {
77 | 
78 |     .columns article {
79 |         flex: 0 0 calc( ( 100% / 16 ) - ( 2 * 20px ) );
80 |     }
81 | }


--------------------------------------------------------------------------------
/ex03/01/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="container">
12 | 
13 |         <section class="columns">
14 | 
15 |             <header>
16 |                 <h2>Three laws of robotics</h2>
17 |                 <p>Rules developed by science-fiction writer Isaac Asimov, who<br/>sought to create an ethical system for humans and robots.</p>
18 |             </header>
19 |             
20 | 
21 |             <article>
22 |                 <h3>1st Law</h3>
23 |                 <p>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</p>
24 |             </article>
25 | 
26 |             <article>
27 |                 <h3>2nd Law</h3>
28 |                 <p>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</p>
29 |             </article>
30 | 
31 |             <article>
32 |                 <h3>3rd Law</h3>
33 |                 <p>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</p>
34 |             </article>
35 | 
36 |             <footer>
37 |                 <p>Asimov later added another rule, known as the fourth or zeroth law, that superseded the others. It stated that “a robot may not harm humanity, or, by inaction, allow humanity to come to harm.”</p>
38 |             </footer>
39 | 
40 |         </section>
41 | 
42 |     </div>
43 |     
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/ex03/01/text.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | Three laws of robotics
 3 | Rules developed by science-fiction writer Isaac Asimov, who sought to create an ethical system for humans and robots.
 4 | 
 5 | 
 6 | 1st Law
 7 | 
 8 | A robot may not injure a human being or, through inaction, allow a human being to come to harm
 9 | 
10 | 
11 | 2nd Law
12 | 
13 | A robot must obey the orders given it by human beings except where such orders would conflict with the First Law
14 | 
15 | 
16 | 3rd Law
17 | 
18 | A robot must protect its own existence as long as such protection does not conflict with the First or Second Law
19 | 
20 | 
21 | Asimov later added another rule, known as the fourth or zeroth law, that superseded the others. It stated that “a robot may not harm humanity, or, by inaction, allow humanity to come to harm.”
22 | 


--------------------------------------------------------------------------------
/ex03/02/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/02/screenshot.png


--------------------------------------------------------------------------------
/ex03/02/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: #EEE;
12 |     font-size: 60px;
13 | }
14 | .site {
15 |     width: 80%;
16 |     margin: 40px auto;
17 |     background: #FFF;
18 |     padding: 30px 60px;
19 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
20 |     border-radius: 3px;
21 |     display: flex;
22 |     flex-wrap: wrap;
23 |     gap: 20px;
24 | }
25 | .site > * {
26 |     border: 1px solid grey;
27 |     border-radius: 3px;
28 |     padding: 20px;
29 | }
30 | .site > header,
31 | .site > footer {
32 |     flex: 1 1 100%;
33 |     flex-grow: 1;
34 | }
35 | .site > main {
36 |     flex-grow: 7;
37 | }
38 | .site > aside {
39 |     flex-grow: 3;
40 | }
41 | .site.two > header {
42 |     order: 1;
43 | }
44 | .site.two > footer {
45 |     order: 4;
46 | }
47 | .site.two > main {
48 |     order: 3;
49 | }
50 | .site.two > aside {
51 |     order: 2;
52 | }
53 | 
54 | 
55 | @media print {
56 |     body:after {
57 |         content: url('https://softuni.bg/Content/images/home-page/sstoikov-1.png');
58 |         color: red;
59 |         display: block;
60 |     }  
61 | }
62 | 
63 | @media (max-width: 1024px) {
64 |     body {
65 |         font-size: 14px;
66 |     }
67 |     .site {
68 |         padding: 10px;
69 |     }
70 |     h3 {
71 |         font-size: 60px;
72 |     }
73 | }


--------------------------------------------------------------------------------
/ex03/02/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="site">
12 |         
13 |         <header>
14 |             <h1>Header</h1>
15 |         </header>
16 | 
17 |         <main>
18 |             <p>Main content</p>
19 |         </main>
20 | 
21 |         <aside>
22 |             <p>Sidebar</p>
23 |         </aside>
24 | 
25 |         <footer>
26 |             <h3>Footer</h3>
27 |         </footer>
28 | 
29 |     </div>
30 | 
31 |     <div class="site two">
32 |         
33 |         <header>
34 |             <p>Header</p>
35 |         </header>
36 | 
37 |         <main>
38 |             <p>Main content</p>
39 |         </main>
40 | 
41 |         <aside>
42 |             <p>Sidebar</p>
43 |         </aside>
44 | 
45 |         <footer>
46 |             <p>Footer</p>
47 |         </footer>
48 | 
49 |     </div>
50 |     
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/ex03/02/text.txt:
--------------------------------------------------------------------------------
 1 | Header
 2 | 
 3 | 
 4 | 
 5 | Main content
 6 | 
 7 | 
 8 | 
 9 | Sidebar
10 | 
11 | 
12 | 
13 | Site footer
14 | 
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | Header
22 | 
23 | 
24 | 
25 | Main content
26 | 
27 | 
28 | 
29 | Sidebar
30 | 
31 | 
32 | 
33 | Site footer
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/ex03/03/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/03/screenshot.png


--------------------------------------------------------------------------------
/ex03/03/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: #EEE;
12 | }
13 | .container {
14 |     width: 80%;
15 |     margin: 40px auto;
16 |     background: #FFF;
17 |     padding: 5px;
18 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
19 |     border-radius: 3px;
20 | }
21 | 
22 | .calendar {
23 |     border-radius: 3px;
24 |     border: 1px solid grey;
25 |     margin: 5px;
26 |     display: flex;
27 | 
28 | }
29 | 
30 | .calendar section {
31 |     display: flex;
32 |     flex-wrap: wrap;
33 | }
34 | 
35 | .week {
36 |     flex-grow: 7;
37 |     border-right: 1px solid grey;
38 | }
39 | 
40 | .note {
41 |     flex-grow: 3;
42 | }
43 | 
44 | .week > div, .note > div {
45 |     border: 1px solid grey;
46 |     padding: 20px;
47 |     text-align: center;
48 |     flex: 1 1 auto;
49 | }
50 | 
51 | .week > div:nth-of-type(1),
52 | .week > div:nth-of-type(7) {
53 |     flex: 1 1 100%;
54 | }
55 | 
56 | @media (min-width: 1280px) {
57 |     .hide-desktop {
58 |         display: none !important;
59 |     }
60 | }
61 | @media (max-width: 1199px) {
62 |     .hide-mobile {
63 |         display: none !important;
64 |     }
65 | }


--------------------------------------------------------------------------------
/ex03/03/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 | 
12 |         <div class="calendar">
13 | 
14 |             <section class="week">
15 |                 <div>Workweek</div>
16 |                 <div>1 Monday</div>
17 |                 <div>2 Thuesday</div>
18 |                 <div>3 Wednesday</div>
19 |                 <div>4 Thursday</div>
20 |                 <div>5 Friday</div>
21 |                 <div>Weekend</div>
22 |                 <div>6 Saturday</div>
23 |                 <div>7 Sunday</div>
24 |                 <section class="note hide-desktop">
25 |                     <div>REMINDERS</div>
26 |                     <div>SPECIAL DATES</div>
27 |                 </section>
28 |             </section>
29 |             <section class="note hide-mobile">
30 |                 <div>REMINDERS</div>
31 |                 <div>SPECIAL DATES</div>
32 |             </section>
33 |             <section class="note hide-desktop">
34 |                 <div>notes</div>
35 |             </section>
36 | 
37 |         </div>
38 | 
39 |     </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/ex03/03/text.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | Workweek
 3 | 1 Monday
 4 | 2 Thuesday
 5 | 3 Wednesday
 6 | 4 Thursday
 7 | 5 Friday
 8 | Weekend
 9 | 6 Saturday
10 | 7 Sunday
11 | 
12 | 
13 | REMINDERS
14 | SPECIAL DATES
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/ex03/04/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/04/screenshot.png


--------------------------------------------------------------------------------
/ex03/04/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | .nav-menu {
11 |     list-style-type: none;
12 |     width: 80%;
13 |     margin: 30px auto;
14 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
15 |     display: flex;
16 |     padding: 5px;
17 |     border-radius: 3px;
18 |     border: 1px solid grey;
19 |     background-color: silver;
20 |     gap: 5px;
21 |     align-items: center;
22 | }
23 | .nav-item {
24 |     background-color: #FFF;
25 |     color: orange;
26 |     border: 1px solid grey;
27 |     border-radius: 3px;
28 |     padding: 5px;
29 |     margin: 0 20px;
30 | }
31 | .p-40 {
32 |     font-size: 40px;
33 | }
34 | 
35 | @media (min-width: 1025px) {
36 |     .show-mobile {
37 |         display: none !important;
38 |     }
39 | }
40 | @media (max-width: 1024px) {
41 |     i {
42 |         font-size: 40px !important;
43 |     }
44 |     .hide-mobile, .fa-xmark {
45 |         display: none !important;
46 |     }
47 |     .container:hover .nav-menu, 
48 |     .container:hover .fa-xmark {
49 |         display: block !important;
50 |     }
51 |     .container:hover .fa-bars {
52 |         display: none  !important;
53 |     }
54 |     .nav-menu {
55 |         flex-wrap: wrap;
56 |     }
57 |     .nav-item {
58 |         flex: 0 0 100%;
59 |         margin: 0;
60 |         background: transparent;
61 |         color: black;
62 |         border: 0;
63 |         border-bottom: 1px solid black;
64 |     }
65 |     .nav-menu .nav-item:last-of-type {
66 |         border-bottom: 0; 
67 |     }
68 |     .nav-item:before {
69 |         content: '>';
70 |     }
71 | }
72 | @media (max-width: 610px) {
73 |     .nav-item {
74 |         background-color: yellow;
75 |         color: red;
76 |     }
77 | }


--------------------------------------------------------------------------------
/ex03/04/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 |     <div class="container position-relative">
12 |         <i class="fa-solid fa-bars show-mobile"></i>
13 |         <i class="fa-solid fa-xmark show-mobile"></i>
14 |         <ul class="nav-menu hide-mobile">
15 |             <li class="nav-item">
16 |                 <a href="#">Home</a>
17 |             </li>
18 |             <li class="nav-item">
19 |                 <a href="#">Services</a>
20 |             </li>
21 |             
22 |             <li class="nav-item">
23 |                 <a href="#">About</a>
24 |             </li>
25 | 
26 |             <li class="nav-item p-40">
27 |                 <a href="#">0888 888 888</a>
28 |             </li>
29 |         </ul>
30 |     </div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/ex03/04/text.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | Home
 5 | 
 6 |     Services
 7 |     
 8 |         
 9 |             Professional gibberish generator
10 |             
11 |                 Start-up gibberish
12 |                 Corporate gibberish
13 |             
14 |         
15 |         Mentorship program for aspiring nonsense peddlers
16 |     
17 | 
18 | 
19 |     Products
20 |     
21 |         Exclusive Snakeoil
22 |         Super limited t-shirts
23 |     
24 | 
25 | About
26 | Contacts
27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/ex03/05/images/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image1.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image2.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image3.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image4.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image5.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image6.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image7.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image8.jpg


--------------------------------------------------------------------------------
/ex03/05/images/image9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/images/image9.jpg


--------------------------------------------------------------------------------
/ex03/05/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/05/screenshot.png


--------------------------------------------------------------------------------
/ex03/05/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | img {
11 |     max-width: 100%;
12 | }
13 | 
14 | body {
15 |     background: #EEE;
16 | }
17 | .container {
18 |     width: 80%;
19 |     display: flex;
20 |     flex-wrap: wrap;
21 |     margin: 30px auto;
22 |     gap: 20px;
23 | }
24 | .gallery-item {
25 |     flex: 0 0 calc( (100% / 3 ) - 20px  );
26 |     border: 5px solid black;
27 |     padding: 5px;
28 |     background: #FFF;
29 | }
30 | figure {
31 |     display: flex;
32 |     flex-wrap: wrap;
33 |     align-items: flex-end;
34 | }
35 | 
36 | @media (max-width: 610px) {
37 |     .container {
38 |         justify-content: space-between;
39 |     }
40 |     figure > * {
41 |         flex-basis: 100%;
42 |     }
43 |     .gallery-item {
44 |         flex: 0 0 calc( (100% / 2 ) - 20px );
45 |     }
46 |     .gallery-item img {
47 |         height: 150px;
48 |         object-fit: cover;
49 |     }
50 | }
51 | 
52 | @media (max-width: 380px) {
53 |     .gallery-item {
54 |         flex: 0 0 100%;
55 |     }
56 |     .gallery-item img {
57 |         height: 250px;
58 |     }
59 | }


--------------------------------------------------------------------------------
/ex03/05/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="gallery-item">
12 |             <figure>
13 |                 <img src="images/image1.jpg">
14 |                 <figcaption>Image 1 Title</figcaption>
15 |             </figure>
16 |         </div>
17 |         <div class="gallery-item">
18 |             <figure>
19 |                 <img src="images/image2.jpg">
20 |                 <figcaption>Image 2 Title</figcaption>
21 |             </figure>
22 |         </div> 
23 |         <div class="gallery-item">
24 |             <figure>
25 |                 <img src="images/image3.jpg">
26 |                 <figcaption>Image 3 Title</figcaption>
27 |             </figure>
28 |         </div>
29 |         <div class="gallery-item">
30 |             <figure>
31 |                 <img src="images/image4.jpg">
32 |                 <figcaption>Image 4 Title</figcaption>
33 |             </figure>
34 |         </div>
35 |         <div class="gallery-item">
36 |             <figure>
37 |                 <img src="images/image4.jpg">
38 |                 <figcaption>Image 4 Title</figcaption>
39 |             </figure>
40 |         </div>
41 |         <div class="gallery-item">
42 |             <figure>
43 |                 <img src="images/image4.jpg">
44 |                 <figcaption>Image 4 Title</figcaption>
45 |             </figure>
46 |         </div>
47 |         <div class="gallery-item">
48 |             <figure>
49 |                 <img src="images/image4.jpg">
50 |                 <figcaption>Image 4 Title</figcaption>
51 |             </figure>
52 |         </div>
53 |         <div class="gallery-item">
54 |             <figure>
55 |                 <img src="images/image4.jpg">
56 |                 <figcaption>Image 4 Title</figcaption>
57 |             </figure>
58 |         </div>
59 |     </div>
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/ex03/05/text.txt:
--------------------------------------------------------------------------------
 1 | Photo Gallery
 2 | 
 3 | Image 1 title                        
 4 | Image 2 title                        
 5 | Image 3 title                        
 6 | Image 4 title                        
 7 | Image 5 title                        
 8 | Image 6 title                        
 9 | Image 7 title                        
10 | Image 8 title                        
11 | Image 9 title                        


--------------------------------------------------------------------------------
/ex03/06/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/06/screenshot.png


--------------------------------------------------------------------------------
/ex03/06/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: #EEE;
12 | }
13 | .quoteContainer {
14 |     display: flex;
15 |     flex-wrap: wrap;
16 |     max-width: 80%;
17 |     margin: 40px auto;
18 |     gap: 40px;
19 | }
20 | .quoteContainer article {
21 |     display: flex;
22 |     flex-wrap: wrap;
23 |     background: white;
24 |     padding: 20px;
25 |     align-items: center;
26 |     gap: 10px;
27 | }
28 | .leftArticle {
29 |     flex: 0 0 calc( 70% - 20px);
30 |     display: flex;
31 |     flex-wrap: wrap;
32 |     gap: 20px;
33 | }
34 | .leftArticle i {
35 |     font-size: 40px;
36 | }
37 | .author {
38 |     font-size: 1.2rem;
39 |     font-weight: 800;
40 | }
41 | .rightArticle {
42 |     flex-grow: 1;
43 | }
44 | .outerCircle {
45 |     background: white;
46 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
47 |     padding: 5px;
48 |     width: 100px;
49 |     border-radius: 50%;
50 | }
51 | .innerCircle {
52 |     background: green;
53 |     height: 90px;
54 |     width: 90px;
55 |     border-radius: 50%;
56 | }
57 | .leftQuotes {
58 |     display: flex;
59 |     flex-direction: column;
60 |     gap: 40px;
61 |     flex: 0 0 70%;
62 | }
63 | .rightQuotes {
64 |     flex: 0 0 calc( 30% - 40px);
65 |     flex-direction: column;
66 |     display: flex;
67 | }
68 | .rightQuotes article {
69 |     flex-direction: column;
70 |     flex-wrap: nowrap;
71 |     flex-grow: 1;
72 | }
73 | 
74 | @media (max-width: 1024px) {
75 |     .quoteContainer > * {
76 |         flex: 0 0 100%;
77 |     }
78 |     .rightArticle {
79 |         order: 1;
80 |     }
81 |     .leftArticle {
82 |         order: 2;
83 |         flex: 0 0 100%;
84 |     }
85 |     .quoteContainer article {
86 |         flex-direction: row;
87 |         flex-wrap: wrap;
88 |     }
89 |     .leftArticle > i {
90 |         flex: 0 0 10%;
91 |     }
92 |     .leftArticle > p {
93 |         flex: 0 0 calc(90% - 40px) ;
94 |     }
95 |     .leftArticle > p.author {
96 |         flex: 0 0 100%;
97 |     }
98 | }


--------------------------------------------------------------------------------
/ex03/06/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 |     
12 |     <div class="quoteContainer">
13 |         <div class="leftQuotes">
14 |             <article>
15 |                 <div class="leftArticle">
16 |                     <i class="fa-solid fa-quote-left"></i>
17 |                     <p>Stay away from those people who try to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too.</p>
18 |                     <p class="author">Stanley Kimball</p>
19 |                 </div>
20 |                 <div class="rightArticle">
21 |                     <div class="outerCircle">
22 |                         <div class="innerCircle"></div>
23 |                     </div>
24 |                 </div>
25 |                 
26 |             </article>
27 |             <article>
28 |                 <div class="leftArticle">
29 |                     <i class="fa-solid fa-quote-left"></i>
30 |                     <p>Stay away from those people who try to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too.</p>
31 |                     <p class="author">Stanley Kimball</p>
32 |                 </div>
33 |                 <div class="rightArticle">
34 |                     <div class="outerCircle">
35 |                         <div class="innerCircle"></div>
36 |                     </div>
37 |                 </div>
38 |                 
39 |             </article>
40 |         </div>
41 |         <div class="rightQuotes">
42 |             <article>
43 |                 <div class="leftArticle">
44 |                     <i class="fa-solid fa-quote-left"></i>
45 |                     <p>Stay away from those people who try to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too.</p>
46 |                     <p class="author">Stanley Kimball</p>
47 |                 </div>
48 |                 <div class="rightArticle">
49 |                     <div class="outerCircle">
50 |                         <div class="innerCircle"></div>
51 |                     </div>
52 |                 </div>
53 |                 
54 |             </article>
55 |         </div>
56 |     </div>
57 | 
58 | </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/ex03/06/text.txt:
--------------------------------------------------------------------------------
1 | Stay away from those people who try to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too.
2 | Stanley Kimball
3 | 
4 | Success is peace of mind, which is a direct result of self-satisfaction in knowing you made the effort to become the best of which you are capable.
5 | Friday Davison
6 | 
7 | Success is peace of mind, which is a direct result of self-satisfaction in knowing you made the effort to become the best of which you are capable.
8 | Friday Davison
9 | 


--------------------------------------------------------------------------------
/ex03/preSolved/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/.DS_Store


--------------------------------------------------------------------------------
/ex03/preSolved/01/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/01/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/01/text.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | Three laws of robotics
 3 | Rules developed by science-fiction writer Isaac Asimov, who sought to create an ethical system for humans and robots.
 4 | 
 5 | 
 6 | 1st Law
 7 | 
 8 | A robot may not injure a human being or, through inaction, allow a human being to come to harm
 9 | 
10 | 
11 | 2nd Law
12 | 
13 | A robot must obey the orders given it by human beings except where such orders would conflict with the First Law
14 | 
15 | 
16 | 3rd Law
17 | 
18 | A robot must protect its own existence as long as such protection does not conflict with the First or Second Law
19 | 
20 | 
21 | Asimov later added another rule, known as the fourth or zeroth law, that superseded the others. It stated that “a robot may not harm humanity, or, by inaction, allow humanity to come to harm.”
22 | 


--------------------------------------------------------------------------------
/ex03/preSolved/01/three-columns.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |     background: #EEE;
 9 |     font: 14px/1.5 Lato, sans-serif;
10 |     margin: 0;
11 |     padding: 2em;
12 | }
13 | 
14 | .container {
15 |     max-width: 1100px;
16 |     margin: 0 auto;
17 | }
18 | 
19 | .columns {
20 |     background: #fff;
21 |     padding: 2em 4em;
22 |     border-radius: 0.3em;
23 |     box-shadow: 0 0 1em 0 rgb(0, 0, 0, 0.2);
24 |     display: flex;
25 |     flex-wrap: wrap;
26 |     gap: 2em 4em;
27 | }
28 | 
29 | .columns > header,
30 | .columns > footer {
31 |     flex: 0 0 100%;
32 | }
33 | 
34 | .columns > header::after,
35 | .columns > footer::before {
36 |     display: block;
37 |     content: '';
38 |     width: 5em;
39 |     height: 2px;
40 |     background-color: #eee;
41 |     margin: 1em auto;
42 | }
43 | 
44 | .columns > header {
45 |     text-align: center;
46 | }
47 | 
48 | .columns > header h2 {
49 |     margin-top: 0;
50 |     padding-bottom: 0.5rem;
51 | }
52 | 
53 | .columns > header p,
54 | .columns > footer p {
55 |     opacity: 0.6;
56 |     margin: 0 auto;
57 |     text-align: center;
58 | }
59 | 
60 | .columns > header p {
61 |     font-size: 1.2em;
62 |     font-style: italic;
63 |     max-width: 25em;
64 |     padding-bottom: 1em;
65 | }
66 | 
67 | .columns > footer p {
68 |     max-width: 50em;
69 | }
70 | 
71 | .columns article {
72 |     flex: 1 1 calc( ( 100% - ( 2 * 4em ) ) / 3 );
73 | }


--------------------------------------------------------------------------------
/ex03/preSolved/01/three-columns.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>3 Columns</title>
 7 |     <link rel="stylesheet" href="three-columns.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <div class="container">
12 | 
13 |         <section class="columns">
14 | 
15 |             <header>
16 |                 <h2>Three laws of robotics</h2>
17 |                 <p>Rules developed by science-fiction writer Isaac Asimov, who sought to create an ethical system for humans and robots.</p>
18 |             </header>
19 | 
20 |             <article>
21 |                 <header>
22 |                     <h3>1st Law</h3>
23 |                 </header>
24 |                 <p>A robot may not injure a human being or, through inaction, allow a human being to come to harm</p>
25 |             </article>
26 | 
27 |             <article>
28 |                 <header>
29 |                     <h3>2nd Law</h3>
30 |                 </header>
31 |                 <p>A robot must obey the orders given it by human beings except where such orders would conflict with the First Law</p>
32 |             </article>
33 | 
34 |             <article>
35 |                 <header>
36 |                     <h3>3rd Law</h3>
37 |                 </header>
38 |                 <p>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law</p>
39 |             </article>
40 | 
41 |             <footer>
42 |                 <p>Asimov later added another rule, known as the fourth or zeroth law, that superseded the others. It stated that <cite>“a robot may not harm humanity, or, by inaction, allow humanity to come to harm.”</cite></p>
43 |             </footer>
44 |             
45 |         </section>
46 | 
47 |     </div>
48 | 
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/02/flex-order.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |     background: #EEE;
 9 |     font: 14px/1.5 Lato, sans-serif;
10 |     margin: 0;
11 |     padding: 4em 2em;
12 | }
13 | 
14 | .site {
15 |     max-width: 1100px;
16 |     margin: 0 auto;
17 |     background: #fff;
18 |     padding: 2em;
19 |     border-radius: 0.3em;
20 |     box-shadow: 0 0 1em 0 rgb(0, 0, 0, 0.2);
21 |     display: flex;
22 |     flex-wrap: wrap;
23 |     gap: 1em;
24 | }
25 | 
26 | .site > * {
27 |     border: 1px solid #AAA;
28 |     padding: 2em;
29 |     flex: 1 1 auto;
30 |     border-radius: 0.3em;
31 | }
32 | 
33 | .site > header,
34 | .site > footer {
35 |     flex: 1 1 100%;
36 | }
37 | 
38 | .site > main {
39 |     flex-grow: 7;
40 | }
41 | 
42 | .site > aside {
43 |     flex-grow: 3;
44 | }
45 | 
46 | .site + .site {
47 |     margin-top: 4em;
48 | }
49 | 
50 | .site.aside-left > header { order: 1; }
51 | .site.aside-left > aside { order: 2; }
52 | .site.aside-left > main { order: 3; }
53 | .site.aside-left > footer { order: 4; }


--------------------------------------------------------------------------------
/ex03/preSolved/02/flex-order.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Order</title>
 7 |     <link rel="stylesheet" href="flex-order.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="site aside-right">
12 | 
13 |         <header class="site-header">
14 |             <p>Header</p>
15 |         </header>
16 | 
17 |         <main class="site-main">
18 |             <p>Main content</p>
19 |         </main>
20 | 
21 |         <aside>
22 |             <p>Sidebar</p>
23 |         </aside>
24 | 
25 |         <footer class="site-footer">
26 |             <p>Site footer</p>
27 |         </footer>
28 | 
29 |     </div>
30 |     
31 |     <div class="site aside-left">
32 | 
33 |         <header class="site-header">
34 |             <p>Header</p>
35 |         </header>
36 | 
37 |         <main class="site-main">
38 |             <p>Main content</p>
39 |         </main>
40 | 
41 |         <aside>
42 |             <p>Sidebar</p>
43 |         </aside>
44 | 
45 |         <footer class="site-footer">
46 |             <p>Site footer</p>
47 |         </footer>
48 | 
49 |     </div>
50 | 
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/02/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/02/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/02/text.txt:
--------------------------------------------------------------------------------
 1 | Header
 2 | 
 3 | 
 4 | 
 5 | Main content
 6 | 
 7 | 
 8 | 
 9 | Sidebar
10 | 
11 | 
12 | 
13 | Site footer
14 | 
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | Header
22 | 
23 | 
24 | 
25 | Main content
26 | 
27 | 
28 | 
29 | Sidebar
30 | 
31 | 
32 | 
33 | Site footer
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/ex03/preSolved/03/calendar.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |     background: #EEE;
 9 |     font-family: Lato, sans-serif;
10 |     padding: 4em 2em;
11 | }
12 | 
13 | .container {
14 |     max-width: 1200px;
15 |     margin: 0 auto;
16 | }
17 | 
18 | .calendar {
19 |     display: flex;
20 |     border-radius: 0.3em;
21 |     overflow: hidden;
22 |     border: 1px solid #ccc;
23 |     box-shadow: 0 0 1em 0 rgb(0,0,0,0.3);
24 |     outline: 2px solid #fff;
25 | }
26 | 
27 | .calendar span {
28 |     border: 1px solid #CCC;
29 |     background: #FFF;
30 |     padding: 2em;
31 |     flex: 1 1 auto;
32 |     text-align: center;
33 | }
34 | 
35 | .calendar section {
36 |     display: flex;
37 |     flex-wrap: wrap;
38 | }
39 | 
40 | .calendar .week span:nth-of-type(1),
41 | .calendar .week span:nth-last-of-type(3) {
42 |     flex: 0 0 100%;
43 | }
44 | 
45 | .calendar .week span:nth-of-type(1) {
46 |     border-top-left-radius: 0.3em;
47 | }
48 | 
49 | .calendar .week span:nth-last-of-type(2) {
50 |     border-bottom-left-radius: 0.3em;
51 | }
52 | 
53 | .calendar .notes span:nth-of-type(1) {
54 |     border-top-right-radius: 0.3em;
55 | }
56 | 
57 | .calendar .notes span:nth-last-of-type(1) {
58 |     border-bottom-right-radius: 0.3em;
59 | }
60 | 


--------------------------------------------------------------------------------
/ex03/preSolved/03/calendar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Calendar</title>
 7 |     <link rel="stylesheet" href="calendar.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="container">
12 | 
13 |         <div class="calendar">
14 |             <section class="week">
15 |                 <span>Workweek</span>
16 |                 <span>1 Monday</span>
17 |                 <span>2 Thuesday</span>
18 |                 <span>3 Wednesday</span>
19 |                 <span>4 Thursday</span>
20 |                 <span>5 Friday</span>
21 |                 <span>Weekend</span>
22 |                 <span>6 Saturday</span>
23 |                 <span>7 Sunday</span>
24 |             </section>
25 |             <section class="notes">
26 |                 <span>REMINDERS</span>
27 |                 <span>SPECIAL DATES</span>
28 |             </section>
29 |         </div>
30 | 
31 |     </div>
32 |     
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/03/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/03/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/03/text.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | Workweek
 3 | 1 Monday
 4 | 2 Thuesday
 5 | 3 Wednesday
 6 | 4 Thursday
 7 | 5 Friday
 8 | Weekend
 9 | 6 Saturday
10 | 7 Sunday
11 | 
12 | 
13 | REMINDERS
14 | SPECIAL DATES
15 | 
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/ex03/preSolved/04/main-navigation.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |     background: #FFF;
 9 |     font-family: Lato, sans-serif;
10 |     padding: 2em 2em;
11 | }
12 | 
13 | .container {
14 |     max-width: 1200px;
15 |     margin: 0 auto;
16 | }
17 | 
18 | .main-navigation ul ul,
19 | .main-navigation {
20 |     background: #EEE;
21 |     border-radius: 0.3em;
22 |     border: 1px solid #ccc;
23 |     box-shadow: 0 0 1em 0 rgb(0,0,0,0.2);
24 | }
25 | 
26 | .main-navigation > ul {
27 |     display: flex;
28 |     padding: 0 0.25em;
29 | }
30 | 
31 | .main-navigation ul ul {
32 |     display: none;
33 |     flex-direction: column;
34 |     padding: 0.25em 0;
35 |     position: absolute;
36 |     top: 100%;
37 |     left: 0;
38 |     width: 18em;
39 |     z-index: 200;
40 |     background: #eee;
41 | }
42 | 
43 | .main-navigation ul ul ul {
44 |     top: -0.25em;
45 |     left: 100%;
46 | }
47 | 
48 | .main-navigation li {
49 |     display: block;
50 |     list-style: none outside;
51 |     position: relative;
52 |     padding: 0.5em 0.25em;
53 | }
54 | 
55 | .main-navigation li li {
56 |     padding: 0.25em 0.5em;
57 | }
58 | 
59 | .main-navigation a {
60 |     display: block;
61 |     text-decoration: none;
62 |     color: darkorange;
63 |     padding: 0.6em 1em;
64 |     background: #fff;
65 |     border: 1px solid #ccc;
66 |     border-radius: 0.3em;
67 |     line-height: 1;
68 | }
69 | 
70 | .main-navigation li:hover > a,
71 | .main-navigation a:hover {
72 |     background: darkorange;
73 |     color: #fff;
74 | }
75 | 
76 | .main-navigation li:hover > a {
77 |     position: relative;
78 |     z-index: 300;
79 | }
80 | 
81 | .main-navigation li:hover > ul {
82 |     display: flex;
83 | 
84 | }


--------------------------------------------------------------------------------
/ex03/preSolved/04/main-navigation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Main Navigation</title>
 7 |     <link rel="stylesheet" href="main-navigation.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <nav class="main-navigation">
12 |         <ul>
13 |             <li><a href="#">Home</a></li>
14 |             <li>
15 |                 <a href="#">Services</a>
16 |                 <ul>
17 |                     <li>
18 |                         <a href="#">Professional gibberish generator</a>
19 |                         <ul>
20 |                             <li><a href="#">Start-up gibberish</a></li>
21 |                             <li><a href="#">Corporate gibberish</a></li>
22 |                         </ul>
23 |                     </li>
24 |                     <li><a href="#">Mentorship program for aspiring nonsense peddlers</a></li>
25 |                 </ul>
26 |             </li>
27 |             <li>
28 |                 <a href="#">Products</a>
29 |                 <ul>
30 |                     <li><a href="#">Exclusive Snakeoil</a></li>
31 |                     <li><a href="#">Super limited t-shirts</a></li>
32 |                 </ul>
33 |             </li>
34 |             <li><a href="#">About</a></li>
35 |             <li><a href="#">Contacts</a></li>
36 |         </ul>
37 |     </nav>
38 | 
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/04/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/04/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/04/text.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | Home
 5 | 
 6 |     Services
 7 |     
 8 |         
 9 |             Professional gibberish generator
10 |             
11 |                 Start-up gibberish
12 |                 Corporate gibberish
13 |             
14 |         
15 |         Mentorship program for aspiring nonsense peddlers
16 |     
17 | 
18 | 
19 |     Products
20 |     
21 |         Exclusive Snakeoil
22 |         Super limited t-shirts
23 |     
24 | 
25 | About
26 | Contacts
27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/ex03/preSolved/05/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/.DS_Store


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image1.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image2.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image3.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image4.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image5.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image6.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image7.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image8.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/images/image9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/images/image9.jpg


--------------------------------------------------------------------------------
/ex03/preSolved/05/photo-gallery.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | img {
 8 |     display: block;
 9 |     width: 100%;
10 |     height: auto;
11 | }
12 | 
13 | body {
14 |     background: #eee;
15 |     font-family: Lato, sans-serif;
16 |     padding: 2em;
17 | }
18 | 
19 | .container {
20 |     max-width: 1200px;
21 |     margin: 0 auto;
22 | }
23 | 
24 | .gallery {
25 |     display: flex;
26 |     flex-wrap: wrap;
27 |     gap: 2em;
28 | }
29 | 
30 | .gallery li {
31 |     flex: 1 1 calc(33% - (2 * 2em));
32 |     display: flex;
33 |     list-style: none outside;
34 |     border: 0.5em solid #333;
35 |     background: #fff;
36 |     padding: 1em;
37 |     position: relative;
38 |     box-shadow: 0 0 0.5em 0.1em rgb(0,0,0,0.2);
39 |     border-radius: 0.2em;
40 | }
41 | 
42 | .gallery a {
43 |     display: flex;
44 |     text-decoration: none;
45 |     color: inherit;
46 | }
47 | 
48 | .gallery figure {
49 |     display: flex;
50 |     gap: 2em;
51 |     flex-direction: column;
52 | }
53 | 
54 | .gallery figure .media {
55 |     display: flex;
56 |     flex-direction: column;
57 |     justify-content: center;
58 |     flex: 1 1 auto;
59 | }
60 | 
61 | .gallery figure .media img {
62 |     box-shadow: 0 0 1em 0 rgb(0,0,0,0.2);
63 |     border-radius: 0.2em;
64 | }
65 | 
66 | .gallery figcaption {
67 |     font-style: italic;
68 |     opacity: 0.4;
69 | }


--------------------------------------------------------------------------------
/ex03/preSolved/05/photo-gallery.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Photo Gallery</title>
  7 |     <link rel="stylesheet" href="photo-gallery.css">
  8 | </head>
  9 | <body>
 10 |     
 11 |     <div class="container">
 12 | 
 13 |         <ul class="gallery">
 14 |             <li>
 15 |                 <a href="#">
 16 |                     <figure>
 17 |                         <span class="media">
 18 |                             <img src="images/image1.jpg">
 19 |                         </span>
 20 |                         <figcaption>Image 1 title</figcaption>                        
 21 |                     </figure>
 22 |                 </a>
 23 |             </li>
 24 |             <li>
 25 |                 <a href="#">
 26 |                     <figure>
 27 |                         <span class="media">
 28 |                             <img src="images/image2.jpg">
 29 |                         </span>
 30 |                         <figcaption>Image 2 title</figcaption>                        
 31 |                     </figure>
 32 |                 </a>
 33 |             </li>
 34 |             <li>
 35 |                 <a href="#">
 36 |                     <figure>
 37 |                         <span class="media">
 38 |                             <img src="images/image3.jpg">
 39 |                         </span>
 40 |                         <figcaption>Image 3 title</figcaption>                        
 41 |                     </figure>
 42 |                 </a>
 43 |             </li>
 44 |             <li>
 45 |                 <a href="#">
 46 |                     <figure>
 47 |                         <span class="media">
 48 |                             <img src="images/image4.jpg">
 49 |                         </span>
 50 |                         <figcaption>Image 4 title</figcaption>                        
 51 |                     </figure>
 52 |                 </a>
 53 |             </li>
 54 |             <li>
 55 |                 <a href="#">
 56 |                     <figure>
 57 |                         <span class="media">
 58 |                             <img src="images/image5.jpg">
 59 |                         </span>
 60 |                         <figcaption>Image 5 title</figcaption>                        
 61 |                     </figure>
 62 |                 </a>
 63 |             </li>
 64 |             <li>
 65 |                 <a href="#">
 66 |                     <figure>
 67 |                         <span class="media">
 68 |                             <img src="images/image6.jpg">
 69 |                         </span>
 70 |                         <figcaption>Image 6 title</figcaption>                        
 71 |                     </figure>
 72 |                 </a>
 73 |             </li>
 74 |             <li>
 75 |                 <a href="#">
 76 |                     <figure>
 77 |                         <span class="media">
 78 |                             <img src="images/image7.jpg">
 79 |                         </span>
 80 |                         <figcaption>Image 7 title</figcaption>                        
 81 |                     </figure>
 82 |                 </a>
 83 |             </li>
 84 |             <li>
 85 |                 <a href="#">
 86 |                     <figure>
 87 |                         <span class="media">
 88 |                             <img src="images/image8.jpg">
 89 |                         </span>
 90 |                         <figcaption>Image 8 title</figcaption>                        
 91 |                     </figure>
 92 |                 </a>
 93 |             </li>
 94 |             <li>
 95 |                 <a href="#">
 96 |                     <figure>
 97 |                         <span class="media">
 98 |                             <img src="images/image9.jpg">
 99 |                         </span>
100 |                         <figcaption>Image 9 title</figcaption>                        
101 |                     </figure>
102 |                 </a>
103 |             </li>
104 |         </ul>
105 | 
106 |     </div>
107 | 
108 | </body>
109 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/05/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/05/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/05/text.txt:
--------------------------------------------------------------------------------
 1 | Photo Gallery
 2 | 
 3 | Image 1 title                        
 4 | Image 2 title                        
 5 | Image 3 title                        
 6 | Image 4 title                        
 7 | Image 5 title                        
 8 | Image 6 title                        
 9 | Image 7 title                        
10 | Image 8 title                        
11 | Image 9 title                        


--------------------------------------------------------------------------------
/ex03/preSolved/06/fancy-quotes.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |   }
  6 |   
  7 |   /* Typography */
  8 |   
  9 |   body {
 10 |     background: #EEE;
 11 |     font: 14px/1.5 "Lato", Verdana, sans-serif;
 12 |     min-height: 100vh;
 13 |     display: flex;
 14 |     flex-direction: column;
 15 |     justify-content: center;
 16 |     padding: 2em;
 17 |   }
 18 |   
 19 |   img {
 20 |     display: block;
 21 |     width: 100%;
 22 |     height: auto;
 23 |   }
 24 |   
 25 |   /* Layout */
 26 |   
 27 |   .container {
 28 |     display: flex;
 29 |     flex-direction: column;
 30 |     gap: 2em;
 31 |     width: 100%;
 32 |     max-width: 1100px;
 33 |     margin: 4em auto;
 34 |   }
 35 |   
 36 |   @media (min-width: 800px) {
 37 |     .container {
 38 |       flex-direction: row;
 39 |     }
 40 |   }
 41 |   
 42 |   main {
 43 |     flex: 0 0 65%;
 44 |     display: flex;
 45 |     flex-direction: column;
 46 |     gap: 2em;
 47 |     justify-content: space-between;
 48 |   }
 49 |   
 50 |   main article,
 51 |   aside article {
 52 |     flex-grow: 1;
 53 |   }
 54 |   
 55 |   aside {
 56 |     flex-grow: 1;
 57 |     display: flex;
 58 |     flex-direction: column;
 59 |   }
 60 |   
 61 |   /* Article */
 62 |   
 63 |   article {
 64 |     display: flex;
 65 |     flex-direction: column;
 66 |     container: quote / inline-size;
 67 |   }
 68 |   
 69 |   article .inner {
 70 |     flex-grow: 1;
 71 |     background-color: #fff;
 72 |     display: flex;
 73 |     align-items: center;
 74 |     padding: 2em;
 75 |     gap: 2em;
 76 |     border-radius: 0.3em;
 77 |     box-shadow: -0.2em 0.2em 0.5em 0 rgba(0,0,0,0.05);
 78 |   }
 79 |   
 80 |   @container quote (max-width: 400px) {
 81 |     article .inner {
 82 |       flex-direction: column;
 83 |       align-items: flex-start;
 84 |     }
 85 |   }
 86 |   
 87 |   article i[class*="fa-"] {
 88 |     font-size: 4em;
 89 |     padding-bottom: 0.2em;
 90 |   }
 91 |   
 92 |   article .media {
 93 |     overflow: hidden;
 94 |     flex: 0 0 25%;
 95 |     aspect-ratio: 1/1;
 96 |     position: relative;
 97 |     border-radius: 50%;
 98 |     background: #090;
 99 |     border: 5px solid #fff;
100 |     box-shadow: 0 0 1em 0 rgb(0,0,0,0.2);
101 |   }
102 |   
103 |   article .desc {
104 |     color: #9e9f9f;
105 |     padding-bottom: 2em;
106 |   }
107 |   
108 |   article .author {
109 |     font-weight: bold;
110 |     font-size: 1.2em;
111 |   }
112 |   
113 |   article .details {
114 |     width: 100%;
115 |     display: flex;
116 |     gap: 1em;
117 |     align-items: center;
118 |     border-top: 2px solid #DDD;
119 |     padding-top: 2em;
120 |   }


--------------------------------------------------------------------------------
/ex03/preSolved/06/fancy-quotes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 7 |     <link rel="stylesheet" href="fancy-quotes.css">
 8 |     <title>Fancy Quotes</title>
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <main>
13 |             
14 |             <article>
15 |                 <div class="inner">
16 |                     <section class="content">
17 |                         <i class="fa-solid fa-quote-left"></i>
18 |                         <p class="desc">Stay away from those people who try to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too.</p>
19 |                         <p class="author">Stanley Kimball</p>
20 |                     </section>
21 |                     <figure class="media">
22 |                         <img src="#">
23 |                     </figure>
24 |                 </div>
25 |             </article>
26 |             
27 |             <article>
28 |                 <div class="inner">
29 |                     <section class="content">
30 |                         <i class="fa-solid fa-quote-left"></i>
31 |                         <p class="desc">Success is peace of mind, which is a direct result of self-satisfaction in knowing you made the effort to become the best of which you are capable.</p>
32 |                         <p class="author">Friday Davison</p>
33 |                         <div class="divider"></div>
34 |                     </section>
35 |                     <figure class="media">
36 |                         <img src="#">
37 |                     </figure>
38 |                 </div>
39 |             </article>
40 |             
41 |         </main>
42 |         <aside>
43 |             
44 |             <article>
45 |                 <div class="inner">
46 |                     
47 |                     <section class="content">
48 |                         <i class="fa-solid fa-quote-left"></i>
49 |                         <p class="desc">Success is peace of mind, which is a direct result of self-satisfaction in knowing you made the effort to become the best of which you are capable.</p>
50 |                         <p class="author">Friday Davison</p>
51 |                         <div class="divider"></div>
52 |                     </section>
53 |                     <figure class="media">
54 |                         <img src="#">
55 |                     </figure>
56 |                 </div>
57 |                 
58 |             </article>
59 |         </aside>
60 |     </div>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/06/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/06/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/06/text.txt:
--------------------------------------------------------------------------------
1 | Stay away from those people who try to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too.
2 | Stanley Kimball
3 | 
4 | Success is peace of mind, which is a direct result of self-satisfaction in knowing you made the effort to become the best of which you are capable.
5 | Friday Davison
6 | 
7 | Success is peace of mind, which is a direct result of self-satisfaction in knowing you made the effort to become the best of which you are capable.
8 | Friday Davison
9 | 


--------------------------------------------------------------------------------
/ex03/preSolved/07/expandable-tree-view.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 | }
  5 | 
  6 | html {
  7 |     box-sizing: border-box;
  8 | }
  9 | 
 10 | *,
 11 | *:before,
 12 | *:after {
 13 |     box-sizing: inherit;
 14 | }
 15 | 
 16 | html {
 17 |     font: 14px/1.5 Lato, sans-serif;
 18 | }
 19 | 
 20 | p, ul, ol {
 21 |     margin-bottom: 1.5em;
 22 | }
 23 | 
 24 | body {
 25 |     padding: 2em;
 26 | }
 27 | 
 28 | h1 {
 29 |     margin-bottom: 1em;
 30 | }
 31 | 
 32 | .tree {
 33 |     --border-size: 4px;
 34 |     --border-color: #DDD;
 35 |     --spacing-line-vertical: 0.2em;
 36 |     --radius: 8px;
 37 | }
 38 | 
 39 | .tree li, .tree summary {
 40 |     line-height: 1.2;
 41 |     display: flex;
 42 |     flex: 1 1 auto;
 43 | }
 44 | 
 45 | .tree li {
 46 |     padding: var(--spacing-line-vertical) 0;
 47 | }
 48 | 
 49 | .tree ul {
 50 |     padding-top: var(--spacing-line-vertical);
 51 |     padding-left: 0;
 52 | }
 53 | 
 54 | .tree ul li {
 55 |     border-left: var(--border-size) solid var(--border-color);
 56 |     display: flex;
 57 |     align-items: center;
 58 |     margin-left: 0.25em;
 59 | }
 60 | 
 61 | .tree ul li:last-child {
 62 |     border-color: transparent;
 63 | }
 64 | 
 65 | .tree ul li:before {
 66 |     content: "";
 67 |     order: -2;
 68 |     display: block;
 69 |     align-self: flex-start;
 70 |     flex: 0 0 1.4em;
 71 |     width: 1.4em;
 72 |     height: 1.1em;
 73 |     border: solid var(--border-color);
 74 |     border-width: 0 0 var(--border-size) var(--border-size);
 75 |     position: relative;
 76 |     top: -0.5em;
 77 |     left: calc( var(--border-size) * -0.91 );
 78 | }
 79 | 
 80 | .tree ul li:last-child:before {
 81 |     border-bottom-left-radius: 0.5em;
 82 | }
 83 | 
 84 | .tree summary {
 85 |     display: flex;
 86 |     cursor: pointer;
 87 |     align-items: center;
 88 | }
 89 | 
 90 | .tree summary::marker {
 91 |     display: none;
 92 | }
 93 | 
 94 | .tree summary:focus {
 95 |     outline: none;
 96 | }
 97 | 
 98 | .tree summary:focus-visible {
 99 |     outline: 1px dotted #000;
100 | }
101 | 
102 | .tree summary::before {
103 |     content: "";
104 |     display: flex;
105 |     align-items: center;
106 |     justify-content: center;
107 |     order: -1;
108 |     flex: 0 0 1.4em;
109 |     width: 1.4em;
110 |     height: 1.4em;
111 |     font-size: 1rem;
112 |     line-height: 1;
113 |     border-radius: 50%;
114 |     background: #ddd;
115 |     margin-right: 0.4em;
116 |     background-size: 50% 50%;
117 |     background-repeat: no-repeat;
118 |     background-position: center;
119 |     margin-left: -0.3em;
120 | }
121 | 
122 | .tree summary::before {
123 |     content: "+";
124 |     background-color: #696;
125 |     z-index: 1;
126 |     color: #fff;
127 |     line-height: calc(2 * var(--radius) - 2px);
128 |     text-align: center;
129 | }
130 | 
131 | .tree details {
132 |     flex: 1 1 auto;
133 | }
134 | 
135 | .tree details[open] > summary::before {
136 |     content: "-";
137 | }


--------------------------------------------------------------------------------
/ex03/preSolved/07/expandable-tree-view.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Expandable Tree View</title>
 7 |     <link rel="stylesheet" href="expandable-tree-view.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <h1>Collapsable & expandable tree view in HTML & CSS only</h1>
12 | 
13 |     <ul class="tree">
14 |         <li>
15 |             <details open>
16 |                 <summary>Giant planets</summary>
17 |                 <ul>
18 |                     <li>
19 |                         <details open>
20 |                             <summary>Gas giants</summary>
21 |                             <ul>
22 |                                 <li>Jupiter</li>
23 |                                 <li>Saturn</li>
24 |                             </ul>
25 |                         </details>
26 |                     </li>
27 |                     <li>
28 |                         <details>
29 |                             <summary>Ice giants</summary>
30 |                             <ul>
31 |                                 <li>Uranus</li>
32 |                                 <li>Neptune</li>
33 |                             </ul>
34 |                         </details>
35 |                     </li>
36 |                 </ul>
37 |             </details>
38 |         </li>
39 |     </ul>
40 | 
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/07/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/07/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/07/text.txt:
--------------------------------------------------------------------------------
 1 | Collapsable & expandable tree view in HTML & CSS only
 2 | 
 3 | Giant planets
 4 | 
 5 |     Gas giants
 6 |     
 7 |         Jupiter
 8 |         Saturn
 9 | 
10 | 
11 |     Ice giants
12 |     
13 |         Uranus
14 |         Neptune
15 | 


--------------------------------------------------------------------------------
/ex03/preSolved/08/keyboard.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     display: flex;
  3 |     justify-content: center;
  4 |     align-items: center;
  5 |     height: 100vh;
  6 |     margin: 0;
  7 |     background-color: #f4f4f4;
  8 |     font-size: 12px;
  9 | }
 10 | 
 11 | .keyboard {
 12 |     background: #ddd;
 13 |     padding: 1em;
 14 |     border-radius: 1em;
 15 |     border: 1px solid #999;
 16 |     box-shadow: 0 0.3em 0 0 #aaa;
 17 | }
 18 | 
 19 | .key-row {
 20 |     display: flex;
 21 |     margin-bottom: 5px;
 22 | }
 23 | 
 24 | .key {
 25 |     height: 3em;
 26 |     aspect-ratio: 1.1/1;
 27 |     background-color: #fff;
 28 |     border: 1px solid #ccc;
 29 |     margin: 3px 5px;
 30 |     border-radius: 4px;
 31 |     cursor: pointer;
 32 |     outline: none; /* Removes the default focus outline */
 33 |     white-space: nowrap;
 34 |     box-shadow: 0 0.2em 0 0 #BBB;
 35 |     text-transform: lowercase;
 36 |     transition:
 37 |         background-color 0.1s ease-in-out,
 38 |         border-color 0.1s ease-in-out,
 39 |         color 0.1s ease-in-out;
 40 | }
 41 | 
 42 | .key:hover,
 43 | .key:focus-visible {
 44 |     background: #666 !important;
 45 |     color: #fff;
 46 |     border-color: #333;
 47 |     box-shadow: 0 0.2em 0 0 #333;
 48 | }
 49 | 
 50 | .key:active {
 51 |     box-shadow: 0 0 0 0 #333;
 52 |     position: relative;
 53 |     top: 0.16em;
 54 | }
 55 | 
 56 | .key.special {
 57 |     background: #eee;
 58 | }
 59 | 
 60 | .function-keys .key {
 61 |     height: 2.5em;
 62 |     aspect-ratio: 1.43/1;
 63 | }
 64 | 
 65 | .key-space {
 66 |     flex-grow: 1;
 67 | }
 68 | 
 69 | .key-esc {
 70 |     aspect-ratio: 2.1 / 1;
 71 | }
 72 | 
 73 | .key-tab {
 74 |     aspect-ratio: 1.7 / 1;
 75 | }
 76 | 
 77 | .key-caps {
 78 |     aspect-ratio: 2.1 / 1;
 79 | }
 80 | 
 81 | .key-backspace {
 82 |     aspect-ratio: 2.4 / 1;
 83 | }
 84 | 
 85 | .key-enter {
 86 |     flex-grow: 1;
 87 |     position: relative;
 88 |     border-bottom-right-radius: 0;
 89 | }
 90 | 
 91 | .key-enter::after {
 92 |     display: block;
 93 |     content: '';
 94 |     background-color: inherit;
 95 |     border: inherit;
 96 |     box-shadow: inherit;
 97 |     position: absolute;
 98 |     top: 100%;
 99 |     right: -1px;
100 |     height: 3.84em;
101 |     aspect-ratio: 1.05/1;
102 |     border-radius: inherit;
103 |     border-top-left-radius: 0;
104 |     border-top-right-radius: 0;
105 |     border-bottom-right-radius: 4px;
106 |     border-top: none;
107 | }
108 | 
109 | .key-shift-left {
110 |     aspect-ratio: 1.5 / 1;
111 | }
112 | 
113 | .key-shift-right {
114 |     flex-grow: 1;
115 | }
116 | 
117 | .key-ctrl-left,
118 | .key-alt-left,
119 | .key-win-left,
120 | .key-ctrl-right,
121 | .key-alt-right,
122 | .key-win-right {
123 |     aspect-ratio: 1.69 / 1;
124 | }
125 | 


--------------------------------------------------------------------------------
/ex03/preSolved/08/keyboard.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>QWERTY Keyboard Layout</title>
  7 |     <link rel="stylesheet" href="keyboard.css">
  8 | </head>
  9 | <body>
 10 |     <div class="keyboard">
 11 | 
 12 |         <div class="key-row function-keys">
 13 |             <button class="key key-esc special">esc</button>
 14 |             <button class="key special">f1</button>
 15 |             <button class="key special">f2</button>
 16 |             <button class="key special">f3</button>
 17 |             <button class="key special">f4</button>
 18 |             <button class="key special">f5</button>
 19 |             <button class="key special">f6</button>
 20 |             <button class="key special">f7</button>
 21 |             <button class="key special">f8</button>
 22 |             <button class="key special">f9</button>
 23 |             <button class="key special">f10</button>
 24 |             <button class="key special">f11</button>
 25 |             <button class="key special">f12</button>
 26 |             <button class="key special">f13</button>
 27 |         </div>
 28 |         <div class="key-row">
 29 |             <button class="key">§</button>
 30 |             <button class="key">1</button>
 31 |             <button class="key">2</button>
 32 |             <button class="key">3</button>
 33 |             <button class="key">4</button>
 34 |             <button class="key">5</button>
 35 |             <button class="key">6</button>
 36 |             <button class="key">7</button>
 37 |             <button class="key">8</button>
 38 |             <button class="key">9</button>
 39 |             <button class="key">0</button>
 40 |             <button class="key">-</button>
 41 |             <button class="key">+</button>
 42 |             <button class="key key-backspace special ">backspace</button>
 43 |         </div>
 44 |         <div class="key-row">
 45 |             <button class="key key-tab special">tab</button>
 46 |             <button class="key">Q</button>
 47 |             <button class="key">W</button>
 48 |             <button class="key">E</button>
 49 |             <button class="key">R</button>
 50 |             <button class="key">T</button>
 51 |             <button class="key">Y</button>
 52 |             <button class="key">U</button>
 53 |             <button class="key">I</button>
 54 |             <button class="key">O</button>
 55 |             <button class="key">P</button>
 56 |             <button class="key">[</button>
 57 |             <button class="key">]</button>
 58 |             <button class="key key-enter special">Enter</button>
 59 |         </div>
 60 |         <div class="key-row">
 61 |             <button class="key key-caps special">caps lock</button>
 62 |             <button class="key">A</button>
 63 |             <button class="key">S</button>
 64 |             <button class="key">D</button>
 65 |             <button class="key">F</button>
 66 |             <button class="key">G</button>
 67 |             <button class="key">H</button>
 68 |             <button class="key">J</button>
 69 |             <button class="key">K</button>
 70 |             <button class="key">L</button>
 71 |             <button class="key">;</button>
 72 |             <button class="key">'</button>
 73 |             <button class="key key-slash">\</button>
 74 |         </div>
 75 |         <div class="key-row">
 76 |             <button class="key key-shift-left special">shift</button>
 77 |             <button class="key">`</button>
 78 |             <button class="key">Z</button>
 79 |             <button class="key">X</button>
 80 |             <button class="key">C</button>
 81 |             <button class="key">V</button>
 82 |             <button class="key">B</button>
 83 |             <button class="key">N</button>
 84 |             <button class="key">M</button>
 85 |             <button class="key">,</button>
 86 |             <button class="key">.</button>
 87 |             <button class="key">/</button>
 88 |             <button class="key key-shift-right special">shift</button>
 89 |         </div>
 90 |         <div class="key-row">
 91 |             <button class="key key-ctrl-left special">ctrl</button>
 92 |             <button class="key key-win-left special">win</button>
 93 |             <button class="key key-alt-left special">alt</button>
 94 |             <button class="key key-space"></button>
 95 |             <button class="key key-alt-right special">alt</button>
 96 |             <button class="key key-win-right special">win</button>
 97 |             <button class="key key-ctrl-right special">ctrl</button>
 98 |         </div>
 99 |     </div>
100 | </body>
101 | </html>
102 | 


--------------------------------------------------------------------------------
/ex03/preSolved/08/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/08/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/08/text.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | esc
 4 | f1
 5 | f2
 6 | f3
 7 | f4
 8 | f5
 9 | f6
10 | f7
11 | f8
12 | f9
13 | f10
14 | f11
15 | f12
16 | f13
17 | 
18 | 
19 | §
20 | 1
21 | 2
22 | 3
23 | 4
24 | 5
25 | 6
26 | 7
27 | 8
28 | 9
29 | 0
30 | -
31 | +
32 | backspace
33 | 
34 | 
35 | tab
36 | Q
37 | W
38 | E
39 | R
40 | T
41 | Y
42 | U
43 | I
44 | O
45 | P
46 | [
47 | ]
48 | Enter
49 | 
50 | 
51 | caps lock
52 | A
53 | S
54 | D
55 | F
56 | G
57 | H
58 | J
59 | K
60 | L
61 | ;
62 | '
63 | \
64 | 
65 | 
66 | shift
67 | `
68 | Z
69 | X
70 | C
71 | V
72 | B
73 | N
74 | M
75 | ,
76 | .
77 | /
78 | shift
79 | 
80 | 
81 | ctrl
82 | win
83 | alt
84 | 
85 | alt
86 | win
87 | ctrl
88 | 
89 | 


--------------------------------------------------------------------------------
/ex03/preSolved/09/flexbox-center.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |     padding: 2em;
 9 |     background: #eee;
10 |     font: 14px/1.5em Lato, sans-serif;
11 |     display: flex;
12 |     min-height: 100vh;
13 |     align-items: center;
14 |     justify-content: center;
15 | }
16 | 
17 | p,ul {
18 |     padding-bottom: 1.5em;
19 | }
20 | 
21 | ul {
22 |     padding-left: 1.5em;
23 | }
24 | 
25 | article {
26 |     max-width: 600px;
27 |     background: #fff;
28 |     padding: 2em;
29 |     border-radius: 0.3em;
30 |     box-shadow: 0 0 1em 0 rgb(0,0,0,0.1);
31 | }
32 | 
33 | article header {
34 |     padding-bottom: 1em;
35 | }


--------------------------------------------------------------------------------
/ex03/preSolved/09/flexbox-center.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flexbox Center</title>
 7 |     <link rel="stylesheet" href="flexbox-center.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <article>
12 |         <header>
13 |             <h2>Why Flexbox?</h2>
14 |         </header>
15 |         <p>For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.</p>
16 |         <p>The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:</p>
17 |         <ul>
18 |             <li>Vertically centering a block of content inside its parent.</li>
19 |             <li>Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.</li>
20 |             <li>Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.</li>
21 |         </ul>
22 |         <p>As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!</p>
23 |     </article>
24 | 
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/09/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/09/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/09/text.txt:
--------------------------------------------------------------------------------
 1 | Why Flexbox?
 2 | 
 3 | For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.
 4 | The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
 5 | 
 6 | Vertically centering a block of content inside its parent.
 7 | Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
 8 | Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
 9 | 
10 | As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!
11 | 


--------------------------------------------------------------------------------
/ex03/preSolved/10/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/10/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/10/sticky-footer.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |     padding: 2em;
 9 |     font: 14px/1.5em Lato, sans-serif;
10 |     display: flex;
11 |     min-height: 100vh;
12 |     border: 2px solid green;
13 | }
14 | 
15 | .site {
16 |     width: 100%;
17 |     display: flex;
18 |     flex-direction: column;
19 | }
20 | 
21 | .site > * {
22 |     border: 2px solid blue;
23 |     padding: 2em;
24 | }
25 | 
26 | .site > * + * {
27 |     margin-top: 2em;
28 | }
29 | 
30 | .site-content {
31 |     flex: 1 1 auto;
32 | }
33 | 


--------------------------------------------------------------------------------
/ex03/preSolved/10/sticky-footer.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Layout - Sticky Footer</title>
 7 |     <link rel="stylesheet" href="sticky-footer.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <div class="site">
12 | 
13 |         <header class="site-header">
14 |             <p>Header</p>
15 |         </header>
16 | 
17 |         <main class="site-content">
18 |             <p>Main</p>
19 |         </main>
20 | 
21 |         <footer class="site-footer">
22 |             <p>Footer</p>
23 |         </footer>
24 | 
25 |     </div>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/10/text.txt:
--------------------------------------------------------------------------------
 1 | Header
 2 | 
 3 | 
 4 | 
 5 | Main
 6 | 
 7 | 
 8 | 
 9 | Footer
10 | 


--------------------------------------------------------------------------------
/ex03/preSolved/11/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex03/preSolved/11/screenshot.png


--------------------------------------------------------------------------------
/ex03/preSolved/11/section-banner.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | /* Typography */
 8 | 
 9 | html {
10 |     font: 12px/1.5 "Lato", Verdana, sans-serif;
11 | }
12 | 
13 | body {
14 |     font: inherit;
15 |     background: #EEE;
16 |     min-height: 100vh;
17 |     display: flex;
18 |     flex-direction: column;
19 |     justify-content: flex-start;
20 |     align-items: center;
21 |     padding: 2em;
22 | }
23 | 
24 | img {
25 |     display: block;
26 |     width: 100%;
27 |     height: auto;
28 | }
29 | 
30 | .container {
31 |     max-width: 900px;
32 | }
33 | 
34 | article {
35 |     background-color: #fff;
36 |     display: flex;
37 |     flex-direction: row;
38 |     padding: 2em;
39 |     gap: 2em;
40 |     border-radius: 0.3em;
41 |     box-shadow: -0.2em 0.2em 0.5em 0 rgba(0,0,0,0.05);
42 | }
43 | 
44 | article .media {
45 |     flex: 0 0 30%;
46 |     order: 1;
47 |     overflow: hidden;
48 |     position: relative;
49 |     border-radius: 0.3em;
50 | }
51 | 
52 | article header {
53 |     padding-bottom: 0.5em;
54 | }
55 | 
56 | article hgroup h1,
57 | article hgroup h2 {
58 |     line-height: 1;
59 | }
60 | 
61 | article hgroup h1 {
62 |     font-size: 2.5em;
63 |     font-weight: normal;
64 |     margin: 0.4rem 0;
65 |     opacity: 0.8;
66 | }
67 | 
68 | article hgroup h2 {
69 |     opacity: 0.5;
70 | }
71 | 
72 | article p {
73 |     opacity: 0.6;
74 |     padding-bottom: 1.5em;
75 | }
76 | 
77 | .button {
78 |     display: inline-block;
79 |     color: #fff;
80 |     background: rebeccapurple;
81 |     text-decoration: none;
82 |     padding: 0.5em 1.3em;
83 |     border-radius: 0.3em;
84 | }
85 | 
86 | .button + .button {
87 |     margin-left: 1em;
88 | }
89 | 
90 | .button.secondary {
91 |     background: #eee;
92 |     color: #666;
93 | }
94 | 
95 | .media:empty {
96 |     background: #eee;
97 |     border: 1px solid #ccc;
98 | }


--------------------------------------------------------------------------------
/ex03/preSolved/11/section-banner.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Section Banner</title>
 7 |     <link rel="stylesheet" href="section-banner.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="container">
12 | 
13 |         <article>
14 |           <div class="content">
15 |             <header>
16 |               <hgroup>
17 |                 <h2>Racoon Journal Entry<h2>
18 |                 <h1>Chillhop Essentials - Winter 2023</h1>
19 |               </hgroup>
20 |             </header>
21 |             <section>
22 |               <p>We introduce to you the first Chillhop Essentials of 2023 with our Spring release: a 26 song compilation available on purple double vinyl. The seasonal release comes complete with an immersive playground for our Raccoon to roam. With all art handled by illustrator/animator Rafael Araújo, the Essentials 2020 universe shows that anything is possible. Follow along and help us explore.</p>
23 |             </section>
24 |             <section class="cta">
25 |               <a href="#" class="button primary">Lets chat</a>
26 |               <a href="#" class="button secondary">Learn more</a>
27 |             </section>
28 |           </div>
29 |           <div class="media"></div>
30 |         </article>
31 |     
32 |     </div>
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/ex03/preSolved/11/text.txt:
--------------------------------------------------------------------------------
1 | Racoon Journal Entry
2 | Chillhop Essentials - Winter 2023
3 | 
4 | We introduce to you the first Chillhop Essentials of 2023 with our Spring release: a 26 song compilation available on purple double vinyl. The seasonal release comes complete with an immersive playground for our Raccoon to roam. With all art handled by illustrator/animator Rafael Araújo, the Essentials 2020 universe shows that anything is possible. Follow along and help us explore.
5 | 
6 | Lets chat
7 | Learn more


--------------------------------------------------------------------------------
/ex04/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/.DS_Store


--------------------------------------------------------------------------------
/ex04/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/ex04/01/screenshot_[1200px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/01/screenshot_[1200px].png


--------------------------------------------------------------------------------
/ex04/01/screenshot_[800px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/01/screenshot_[800px].png


--------------------------------------------------------------------------------
/ex04/01/task.css:
--------------------------------------------------------------------------------
1 | * {
2 |     padding: 0;
3 |     margin: 0;
4 |     box-sizing: border-box;
5 | }
6 | a {
7 |     color: inherit;
8 |     text-decoration: none;
9 | }


--------------------------------------------------------------------------------
/ex04/01/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/ex04/01/text.txt:
--------------------------------------------------------------------------------
1 | Header
2 | Main content
3 | Sidebar
4 | Site footer
5 | 


--------------------------------------------------------------------------------
/ex04/09/screenshot_[1200px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/09/screenshot_[1200px].png


--------------------------------------------------------------------------------
/ex04/09/screenshot_[800px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/09/screenshot_[800px].png


--------------------------------------------------------------------------------
/ex04/09/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: #EEE;
12 |     font-family: 'Lato', sans-serif;
13 | }
14 | .site {
15 |     max-width: 1200px;
16 |     margin: 30px auto;
17 |     border: 1px solid grey;
18 |     border-radius: 3px;
19 |     overflow: hidden;
20 |     padding: 20px;
21 | }
22 | 
23 | h2 {
24 |     background: #FFF;
25 |     padding: 10px 0;
26 |     text-align: center;
27 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
28 |     border-radius: 3px;
29 |     margin-bottom: 40px;
30 | }
31 | .event {
32 |     display: flex;
33 |     width: calc(50% + 30px);
34 |     gap: 30px;
35 | }
36 | .event:nth-child(even) {
37 |     margin-left: calc(50% - 14px);
38 |     gap: 30px;
39 |     width: auto;
40 | 
41 | }
42 | .event section {
43 |     background: #FFF;
44 |     padding: 20px;
45 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
46 |     border-radius: 3px;
47 | }
48 | .event:before {
49 |     display: block;
50 |     content: '';
51 |     width: 40px;
52 |     height: 40px;
53 |     background: green;
54 |     border-radius: 50%;
55 |     flex: 0 0 auto;
56 |     border: 2px solid #FFF;
57 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
58 | }
59 | .event:nth-child(even):before {
60 |     background: orange;
61 |     gap: 20px;
62 | }
63 | .event:nth-child(odd) {
64 |     flex-direction: row-reverse;
65 |     text-align: right;
66 | }
67 | .section-timeline .container:after {
68 |     display: block;
69 |     background: silver;
70 |     width: 2px;
71 |     content: "";
72 |     height: 120%;
73 |     position: absolute;
74 |     top: 0;
75 |     left: calc(50% + 6px);
76 |     z-index: 2;
77 | }
78 | .section-timeline .container {
79 |     position: relative;
80 | }
81 | .section-timeline .container>* {
82 |     z-index: 3;
83 |     position: relative;
84 | }
85 | @media (max-width: 800px) {
86 |     .site {
87 |         max-width: 750px;
88 |     }
89 | }


--------------------------------------------------------------------------------
/ex04/09/text.txt:
--------------------------------------------------------------------------------
 1 | A Little History of the World Wide Web
 2 | 
 3 | 
 4 | March 1989
 5 | 
 6 | Tim laid out his vision for what would become the
 7 | web in a document called “Information Management: A
 8 | Proposal”. Believe it or not, Tim’s initial proposal
 9 | was not immediately accepted. In fact, his boss at
10 | the time, Mike Sendall, noted the words “Vague but
11 | exciting” on the cover.
12 | 
13 | 
14 | October of 1990
15 | 
16 | Tim had written the three fundamental technologies
17 | that remain the foundation of today’s web (and which
18 | you may have seen appear on parts of your web
19 | browser): HTML: HyperText Markup Language. The
20 | markup (formatting) language for the web. URI:
21 | Uniform Resource Identifier. A kind of “address”
22 | that is unique and used to identify to each resource
23 | on the web. It is also commonly called a URL. HTTP:
24 | Hypertext Transfer Protocol. Allows for the
25 | retrieval of linked resources from across the web.
26 | 
27 | 
28 | March 1989
29 | 
30 | Tim laid out his vision for what would become the
31 | web in a document called “Information Management: A
32 | Proposal”. Believe it or not, Tim’s initial proposal
33 | was not immediately accepted. In fact, his boss at
34 | the time, Mike Sendall, noted the words “Vague but
35 | exciting” on the cover.
36 | 
37 | 
38 | End of 1990
39 | 
40 | The first web page was served on the open internet
41 | 
42 | 
43 | 1991
44 | 
45 | People outside of CERN were invited to join this new
46 | web community
47 | 
48 | 1994
49 | 
50 | Tim moved from CERN to the Massachusetts Institute
51 | of Technology to found the World Wide Web Consortium
52 | (W3C), an international community devoted to
53 | developing open web standards. He remains the
54 | Director of W3C to this day.
55 | 
56 | 
57 | 1991
58 | 
59 | People outside of CERN were invited to join this new
60 | web community


--------------------------------------------------------------------------------
/ex04/10/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/10/images/avatar.jpg


--------------------------------------------------------------------------------
/ex04/10/images/media.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/10/images/media.jpg


--------------------------------------------------------------------------------
/ex04/10/screenshot_[1200px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/10/screenshot_[1200px].png


--------------------------------------------------------------------------------
/ex04/10/screenshot_[800px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex04/10/screenshot_[800px].png


--------------------------------------------------------------------------------
/ex04/10/task.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | a {
  7 |     color: inherit;
  8 |     text-decoration: none;
  9 | }
 10 | body {
 11 |     background-image: linear-gradient(white, silver);
 12 | }
 13 | .site {
 14 |     max-width: 1200px;
 15 |     margin: 30px auto;
 16 | }
 17 | .card-container {
 18 |     display: flex;
 19 |     flex-wrap: wrap;
 20 |     justify-content: space-between;
 21 | }
 22 | 
 23 | .single-card {
 24 |     flex: 0 0 calc(33% - 20px);
 25 |     border: 1px solid gray;
 26 |     border-radius: 5px;
 27 |     padding: 10px;
 28 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 29 | }
 30 | 
 31 | .media-image {
 32 |     width: 100%;
 33 |     height: 190px;
 34 |     object-fit: cover;
 35 | }
 36 | 
 37 | .card-header {
 38 |     position: relative;
 39 | }
 40 | 
 41 | h4.tag {
 42 |     position: absolute;
 43 |     top: 0;
 44 |     right: 0;
 45 |     background: green;
 46 |     color: #FFF;
 47 |     padding: 5px;
 48 |     font-size: 0.6rem;
 49 |     border-radius: 5px;
 50 |     opacity: 0.7;
 51 | }
 52 | 
 53 | img.author-image {
 54 |     position: absolute;
 55 |     right: -10px;
 56 |     top: 90px;
 57 |     border-radius: 50%;
 58 |     border: 5px solid #FFF;
 59 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 60 |     z-index: 2;
 61 | }
 62 | 
 63 | h4.author {
 64 |     position: absolute;
 65 |     top: 120px;
 66 |     background: #FFF;
 67 |     padding: 5px;
 68 |     border-radius: 5px;
 69 |     right: 70px;
 70 |     padding-right: 20px;
 71 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 72 |     z-index: 2;
 73 | }
 74 | 
 75 | .meta-data {
 76 |     background: #FFF;
 77 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 78 |     border-radius: 5px;
 79 |     padding: 10px;
 80 |     margin-left: 10px;
 81 |     margin-right: 10px;
 82 |     margin-top: -50px;
 83 |     z-index: 1;
 84 |     position: relative;
 85 | }
 86 | 
 87 | .meta-data h2 {
 88 |     max-width: 80%;
 89 | }
 90 | 
 91 | .card-main {
 92 |     display: flex;
 93 |     flex-wrap: wrap;
 94 |     flex-direction: column;
 95 |     gap: 10px;
 96 |     margin: 0 10px;
 97 | }
 98 | 
 99 | .card-main > * {
100 |     display: flex;
101 |     flex-wrap: wrap;
102 |     flex: 0 0 100%;
103 |     justify-content: space-between;
104 |     align-items: center;
105 | }
106 | 
107 | .helpers a {
108 |     color: green;
109 | }
110 | 
111 | .single-group {
112 |     border: 1px solid silver;
113 |     border-radius: 3px;
114 |     padding: 8px;
115 |     font-size: 0.8rem;
116 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
117 | }
118 | 
119 | .pricing {
120 |     font-size: 1.5rem;
121 |     font-weight: 700;
122 | }
123 | 
124 | .starting, .ending {
125 |     opacity: 0.7;
126 | }
127 | 
128 | .card-footer {
129 |     margin: 0 10px;
130 | }
131 | 
132 | .card-footer .single-group {
133 |     background: #FFF;
134 |     display: flex;
135 |     align-items: center;
136 |     justify-content: space-between;
137 |     color: green;
138 | }
139 | 
140 | .single-card-container {
141 |     display: flex;
142 |     flex-direction: column;
143 |     gap: 20px;
144 | }
145 | 
146 | @media screen and (max-width: 600px) {
147 |     .single-card {
148 |         flex: 0 0 100%;
149 |     }
150 | }


--------------------------------------------------------------------------------
/ex04/10/text.txt:
--------------------------------------------------------------------------------
 1 | Card Component: Online Course Card
 2 | Константин Данков
 3 | 
 4 | HTML & CSS Foundation
 5 | Изключително полезен курс в който ще научите основни знания за уеб програмиране.
 6 | 
 7 | Групи
 8 | Виж всички
 9 | 
10 | Започва
11 | 12.02
12 | 19:00
13 | 
14 | Приключва
15 | 27.02
16 | 999 лв
17 | 
18 | Започва
19 | 12.02
20 | 19:00
21 | 
22 | Приключва
23 | 27.02
24 | 999 лв
25 | 
26 | 999 лв
27 | 
28 | 12 лекции
29 | 24 часа
30 | 
31 | Константин Данков
32 | 
33 | HTML & CSS Foundation
34 | Изключително полезен курс в който ще научите основни знания за уеб програмиране.
35 | 
36 | Групи
37 | Виж всички
38 | 
39 | Започва
40 | 12.02
41 | 19:00
42 | 
43 | Приключва
44 | 27.02
45 | 999 лв
46 | 
47 | Започва
48 | 12.02
49 | 19:00
50 | 
51 | Приключва
52 | 27.02
53 | 999 лв


--------------------------------------------------------------------------------
/ex05/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/.DS_Store


--------------------------------------------------------------------------------
/ex05/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/ex05/01/screenshot_[1200px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/01/screenshot_[1200px].png


--------------------------------------------------------------------------------
/ex05/01/screenshot_[600px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/01/screenshot_[600px].png


--------------------------------------------------------------------------------
/ex05/01/screenshot_[800px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/01/screenshot_[800px].png


--------------------------------------------------------------------------------
/ex05/01/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: silver;
12 | }
13 | .loginForm {
14 |     background: #FFF;
15 |     box-shadow: 0 0 1em 0 rgb(0,0,0,0.2);
16 |     max-width: 400px;
17 |     margin: 30px auto;
18 |     padding: 30px;
19 |     border-radius: 10px;
20 | }
21 | 
22 | fieldset {
23 |     border: none;
24 |     display: flex;
25 |     flex-direction: column;
26 |     gap: 15px;
27 | }
28 | 
29 | legend {
30 |     font-weight: 800;
31 |     border-bottom: 1px solid silver;
32 |     padding-bottom: 15px;
33 |     margin-bottom: 15px;
34 | }
35 | 
36 | .field {
37 |     display: flex;
38 |     flex-direction: column;
39 | }
40 | 
41 | .field label {
42 |     order: -1;
43 | }
44 | 
45 | .loginForm input:required ~ label::after {
46 |     content: '*';
47 |     color: #FF0000;
48 |     padding-left: 5px;
49 | }
50 | 
51 | .loginForm input {
52 |     border: 2px solid silver;
53 |     padding: 5px;
54 |     border-radius: 3px;
55 | }
56 | 
57 | .loginForm input[type="submit"] {
58 |     border: 0;
59 |     background: darkorange;
60 |     color: #FFF;
61 |     font-size: 1.3rem;
62 | }
63 | 
64 | 


--------------------------------------------------------------------------------
/ex05/01/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 |     <form action="#" class="loginForm">
13 |         <fieldset>
14 |             <legend>Login</legend>
15 | 
16 |             <p class="field">
17 |                 <input type="email" name="email" id="email" required>
18 |                 <label for="email">Email</label>
19 |             </p>
20 | 
21 |             <p class="field">
22 |                 <input type="password" name="password" id="password" required>
23 |                 <label for="password">Password</label>
24 |             </p>
25 | 
26 |             <input type="submit" value="Login">
27 |             
28 |         </fieldset>
29 |     </form>
30 | 
31 |     <form action="#" class="loginForm">
32 |         <fieldset>
33 |             <legend>Login</legend>
34 | 
35 |             <p class="field">
36 |                 
37 |                 <label for="email">Email</label>
38 | 
39 |                 <input type="email" name="email" id="email" required>
40 |                 
41 |             </p>
42 | 
43 |             <p class="field">
44 |                 
45 |                 <label for="password">Password</label>
46 | 
47 |                 <input type="password" name="password" id="password" required>
48 | 
49 |             </p>
50 | 
51 |             <input type="submit" value="Login">
52 |             
53 |         </fieldset>
54 |     </form>
55 | 
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/ex05/02/2151051403.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/02/2151051403.jpg


--------------------------------------------------------------------------------
/ex05/02/task.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | a {
  7 |     color: inherit;
  8 |     text-decoration: none;
  9 | }
 10 | body {
 11 |     position: relative;
 12 | }
 13 | .topBar {
 14 |     background: navy;
 15 |     color: #FFF;
 16 | }
 17 | .socialIcon {
 18 |     display: flex;
 19 |     gap: 10px;
 20 |     max-width: 100px;
 21 |     justify-content: space-between;
 22 |     margin: auto;
 23 |     padding: 10px 0 30px 0;
 24 | }
 25 | 
 26 | .socialIcon li {
 27 |     list-style: none;
 28 | }
 29 | 
 30 | .mainNav {
 31 |     max-width: 80%;
 32 |     margin: auto;
 33 |     border-radius: 30px;
 34 |     position: absolute;
 35 |     background: #FFF;
 36 |     top: 40px;
 37 |     left: 50%;
 38 |     transform: translateX(-50%);
 39 |     padding: 10px;
 40 | }
 41 | 
 42 | .fancyLetter {
 43 |     color: blue;
 44 |     font-size: 27px;
 45 | }
 46 | 
 47 | .mainNav, 
 48 | .mainNav nav > ul {
 49 |     display: flex;
 50 |     gap: 40px;
 51 |     align-items: center;
 52 | }
 53 | 
 54 | .mainNav nav ul li {
 55 |     list-style: none;
 56 | }
 57 | 
 58 | .heroSection {
 59 |     min-height: 450px;
 60 |     background-image: url('2151051403.jpg');
 61 |     background-position: center;
 62 |     background-size: cover;
 63 |     background-repeat: no-repeat;
 64 |     color: #FFF;
 65 |     display: flex;
 66 |     flex-direction: column;
 67 |     justify-content: center;
 68 |     text-align: center;
 69 |     gap: 10px;
 70 | }
 71 | 
 72 | .primaryBtn {
 73 |     background: navy;
 74 |     width: max-content;
 75 |     margin: 0 auto;
 76 |     padding: 5px 15px;
 77 |     border-radius: 10px;
 78 |     font-size: 0.8rem;
 79 | }
 80 | .primaryBtn:hover {
 81 |     background: pink;
 82 | }
 83 | 
 84 | .mobileTogglerCheckbox, .mobileToggler {
 85 |     display: none;
 86 | }
 87 | 
 88 | .subMenu {
 89 |     display: none;
 90 | }
 91 | 
 92 | .mainNav > ul > li {
 93 |     position: relative;
 94 | }
 95 | 
 96 | li:hover > .subMenu {
 97 |     display: block;
 98 |     position: absolute;
 99 |     background: #FFF;
100 |     padding: 10px;
101 |     border-radius: 5px;
102 |     display: flex;
103 |     gap: 10px;
104 |     flex-direction: column;
105 | }
106 | 
107 | .hasChildren > a:after {
108 |     content: '▼';
109 |     font-size: 8px;
110 |     padding-left: 8px;
111 | }
112 | 
113 | li.hasChildren:hover > a:after {
114 |     content: '▲';
115 | }
116 | 
117 | 
118 | @media screen and (max-width: 610px) {
119 |     .mobileToggler {
120 |         display: block;
121 |     }
122 |     .mainNav {
123 |         width: 80%;
124 |     }
125 |     .fa-xmark {
126 |         display: none !important;
127 |     }
128 | 
129 |     .mobileTogglerCheckbox:checked ~ label > .fa-xmark {
130 |         display: block!important;
131 |     }
132 | 
133 |     .mobileTogglerCheckbox:checked ~ label > .fa-bars {
134 |         display: none!important;
135 |     }
136 | 
137 |     .mainNav > nav {
138 |         display: none;
139 |         position: absolute;
140 |         background: #FFF;
141 |         top: 60px;
142 |         width: 100%;
143 |         left: 0;
144 |         border-radius: 30px;
145 |     }
146 |     .mobileToggler {
147 |         cursor: pointer;
148 |     }
149 |     .mobileTogglerCheckbox:checked ~ nav {
150 |         display: block;
151 |     }
152 |     .mainNav nav ul {
153 |         flex-direction: column;
154 |         gap: 10px;
155 |     }
156 | 
157 |     .mainNav h1 {
158 |         text-align: center;
159 |     }
160 |     
161 |     .mainNav {
162 |         display: block;
163 |     }
164 |     
165 |     .mobileToggler {
166 |         top: 20px;
167 |         position: absolute;
168 |     }
169 | 
170 |     .subMenu {
171 |         display: flex;
172 |         margin: 10px 0;
173 |         background: #c0c0c024;
174 |         padding: 10px;
175 |     }
176 |     
177 |     .hasChildren {
178 |         text-align: center;
179 |     }
180 | }


--------------------------------------------------------------------------------
/ex05/02/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 |     <header>
13 | 
14 |         <div class="topBar">
15 | 
16 |             <ul class="socialIcon">
17 |                 <li><a href="#" target="_blank"><i class="fa-brands fa-facebook"></i></a></li>
18 |                 <li><a href="#" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
19 |                 <li><a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
20 |                 <li><a href="#" target="_blank"><i class="fa-brands fa-tiktok"></i></a></li>
21 |             </ul>
22 | 
23 |         </div>
24 | 
25 |         <div class="mainNav">
26 | 
27 |             <input type="checkbox" id="mobileMenuToggler" class="mobileTogglerCheckbox">
28 | 
29 |             <label for="mobileMenuToggler" class="mobileToggler">
30 | 
31 |                 <i class="fa-solid fa-bars"></i>
32 | 
33 |                 <i class="fa-solid fa-xmark"></i>
34 | 
35 |             </label>
36 |             <h1><a href="#"><span class="fancyLetter">S</span>PACE</a></h1>
37 | 
38 |             <nav>
39 |                 <ul>
40 |                     <li><a href="#">About</a></li>
41 |                     <li class="hasChildren">
42 |                         <a href="#">Services</a>
43 |                         <ul class="subMenu">
44 |                             <li><a href="#">Travel to the Moon</a></li>
45 |                             <li><a href="#">Travel to Mars</a></li>
46 |                             <li><a href="#">Travel to the Sun</a></li>
47 |                         </ul>
48 |                     </li>
49 |                     <li><a href="#">Contact</a></li>
50 |                 </ul>
51 |             </nav>
52 |         </div>
53 | 
54 |     </header>
55 | 
56 |     <main>
57 | 
58 |         <div class="heroSection">
59 |             <h1>Best Site About Space</h1>
60 |             <h2>Founded in 2024 by Softuni Students.</h2>
61 |             <a href="#" class="primaryBtn">Learn More</a>
62 |         </div>
63 | 
64 |     </main>
65 | 
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/ex05/03/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: red;
12 | }
13 | 
14 | 1200px
15 | 
16 | @media screen and (hover: hover) {
17 |     body {
18 |         background: white;
19 |     }
20 | }


--------------------------------------------------------------------------------
/ex05/03/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/ex05/06/custom-checkbox-and-radio.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | html {
  8 |     font: 14px/1.5 Lato, sans-serif;
  9 | }
 10 | 
 11 | body, input, select, button {
 12 |     font: inherit;
 13 | }
 14 | 
 15 | body {
 16 |     min-height: 100vh;
 17 |     display: flex;
 18 |     align-items: center;
 19 |     justify-content: center;
 20 |     padding: 2em;
 21 |     background: #eee;
 22 | }
 23 | 
 24 | h2 {
 25 |     margin-bottom: 1em;
 26 | }
 27 | 
 28 | h2:not(:first-child) {
 29 |     margin-top: 2em;
 30 | }
 31 | 
 32 | form {
 33 |     width: 60ch;
 34 |     background: #fff;
 35 |     border-radius: 0.3em;
 36 |     padding: 2em 2.5em;
 37 |     box-shadow: 0 0 0.5em 0 rgb(0,0,0,0.1);
 38 | }
 39 | 
 40 | .field {
 41 |     display: flex;
 42 |     align-items: center;
 43 |     gap: 1em;
 44 |     padding-bottom: 1.5em;
 45 | }
 46 | 
 47 | input {
 48 |     display: block;
 49 | }
 50 | 
 51 | /* Radio Styles */
 52 | input[type=radio] {
 53 |     cursor: pointer;
 54 |     width: 2em;
 55 |     height: 2em;
 56 |     position: relative;
 57 |     border-radius: 30px;
 58 | }
 59 | 
 60 | input[type=radio]:before {
 61 |     content: "";
 62 |     position: absolute;
 63 |     height: 100%;
 64 |     width: 100%;
 65 |     border-radius: 30px;
 66 |     background-color: #EEE;
 67 |     box-shadow: 0 0 0 1px #CCC;
 68 |     transition: all 0.25s ease-in-out;
 69 | }
 70 | 
 71 | input[type=radio]:after {
 72 |     content: "";
 73 |     position: absolute;
 74 |     width: 100%;
 75 |     height: 100%;
 76 |     border-radius: 30px;
 77 |     background-color: #c67615;
 78 |     transform: scale(0, 0);
 79 |     transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
 80 | }
 81 | 
 82 | input[type=radio]:checked:before {
 83 |     background-color: orange;
 84 |     box-shadow: 0 0 0 1px orange;
 85 | }
 86 | 
 87 | input[type=radio]:checked:after {
 88 |     transform: scale(0.75, 0.75);
 89 | }
 90 | 
 91 | /* Checkbox Styles */
 92 | input[type=checkbox] {
 93 |     cursor: pointer;
 94 |     width: 2em;
 95 |     height: 2em;
 96 |     margin: 0 1em;
 97 |     position: relative;
 98 | }
 99 | 
100 | input[type=checkbox]:before {
101 |     content: "";
102 |     position: absolute;
103 |     width: 200%;
104 |     height: 100%;
105 |     border-radius: 1.5em;
106 |     background-color: #EEE;
107 |     box-shadow: 0 0 0 1px #CCC;
108 |     transform: translate(-25%, 0);
109 |     transition: all 0.25s ease-in-out;
110 | }
111 | 
112 | input[type=checkbox]:after {
113 |     content: "";
114 |     position: absolute;
115 |     width: 80%;
116 |     height: 80%;
117 |     margin-top: 10%;
118 |     margin-left: 10%;
119 |     background-color: #c67615;
120 |     border-radius: 30px;
121 |     transform: translate(60%, 0);
122 |     transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
123 | }
124 | 
125 | input[type=checkbox]:checked:before {
126 |     background-color: orange;
127 |     box-shadow: 0 0 0 1px darkorange;
128 | }
129 | 
130 | input[type=checkbox]:checked:after {
131 |     transform: translate(-60%, 0);
132 | }
133 | 


--------------------------------------------------------------------------------
/ex05/06/custom-checkbox-and-radio.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Custom Checkbox and Radio buttons</title>
 7 |     <link rel="stylesheet" href="custom-checkbox-and-radio.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <form action="#">
12 |         
13 |         <h2>Radio</h2>
14 |         <p class="field">
15 |             <input type="radio" name="radio" id="option-1" checked>
16 |             <label for="option-1">Option 1</label>
17 |         </p>
18 |         <p class="field">
19 |             <input type="radio" name="radio" id="option-2">
20 |             <label for="option-1">Option 2</label>
21 |         </p>
22 |         
23 |         <h2>Checkbox</h2>
24 |         <p class="field">
25 |             <input type="checkbox" name="checkbox-1" id="checkbox-1" checked>
26 |             <label for="option-1">Checkbox 1</label>
27 |         </p>
28 | 
29 |         <p class="field">
30 |             <input type="checkbox" name="checkbox-2" id="checkbox-2">
31 |             <label for="option-1">Checkbox 2</label>
32 |         </p>
33 |         
34 |         
35 |     </form>
36 |     
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/ex05/06/screenshot_[1200px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/06/screenshot_[1200px].png


--------------------------------------------------------------------------------
/ex05/06/screenshot_[600px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/06/screenshot_[600px].png


--------------------------------------------------------------------------------
/ex05/06/screenshot_[800px].png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/ex05/06/screenshot_[800px].png


--------------------------------------------------------------------------------
/ex05/06/text.txt:
--------------------------------------------------------------------------------
1 | Radio
2 | Checkbox


--------------------------------------------------------------------------------
/ex05/searchForm/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     font-family: Verdana, Geneva, Tahoma, sans-serif;
12 |     font-size: 16px;
13 |     background: silver;
14 | }
15 | .position-relative {
16 |     position: relative;
17 | }
18 | .form-container {
19 |     position: relative;
20 |     background: #000;
21 |     color: #FFF;
22 |     padding: 30px;
23 |     margin: 30px auto;
24 |     max-width: 300px;
25 |     border-radius: 50px;
26 | }
27 | .form-container.youtube,
28 | .youtube button[type=submit] {
29 |     background: rgb(202, 28, 28);
30 | }
31 | .form-container.google,
32 | .google button[type=submit] {
33 |     background: rgb(48, 25, 223);
34 | }
35 | .fa-github,
36 | .fa-youtube,
37 | .fa-google {
38 |     position: absolute;
39 |     top: 10px;
40 |     right: 30px;
41 |     font-size: 50px;
42 | }
43 | .form-container > form {
44 |     max-width: 70%;
45 |     display: flex;
46 |     flex-direction: column;
47 |     gap: 10px;
48 | }
49 | label[for=search] {
50 |     font-size: 20px;
51 |     font-weight: 900;
52 | }
53 | input[type=search] {
54 |     background: silver;
55 |     border: 0;
56 |     padding: 10px 13px;
57 |     border-radius: 20px;
58 |     color: #FFF;
59 |     font-size: 10px;
60 | }
61 | input[type=search]:focus {
62 |     outline: 0;
63 |     background: grey;
64 | }
65 | input[type=search]::placeholder {
66 |     color: #FFF;
67 | }
68 | button[type=submit] {
69 |     position: absolute;
70 |     bottom: 1px;
71 |     right: 2px;
72 |     border: 0;
73 |     background: #000;
74 |     color: #FFF;
75 |     font-size: 20px;
76 |     padding: 3px 5px;
77 |     border-radius: 50%;
78 |     cursor: pointer;
79 | }
80 | button[type=submit]:hover {
81 |     background: grey;
82 |     color: #000;
83 | }
84 | fieldset {
85 |     border: 0;
86 |     display: flex;
87 |     flex-direction: column;
88 |     flex-wrap: wrap;
89 |     font-size: 10px;
90 | }
91 | legend {
92 |     font-size: 10px;
93 | }


--------------------------------------------------------------------------------
/ex05/searchForm/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="form-container">
13 | 
14 |         <i class="fa-brands fa-github"></i>
15 | 
16 |         <form action="https://github.com/search" method="get" class="position-relative" target="_blank">
17 | 
18 |             <fieldset>
19 | 
20 |                 <legend class="small">Choose Search Type</legend>
21 | 
22 |                 <div>
23 |                     <input type="radio" id="repositories" name="type" value="repositories">
24 |                     <label for="repositories">Repos</label>
25 |                 </div>
26 | 
27 |                 <div>
28 |                     <input type="radio" id="issues" name="type" value="issues">
29 |                     <label for="issues">Issues</label>
30 |                 </div>
31 |                 
32 |                 <div>
33 |                     <input type="radio" id="pullrequests" name="type" value="pullrequests">
34 |                     <label for="pullrequests">Pull Requests</label>
35 |                 <div>
36 | 
37 |             </fieldset>
38 | 
39 |             
40 |             <label for="search">What code are you searching today?</label>
41 |             <input type="search" id="search" name="q" required placeholder="Enter your search term">
42 | 
43 |             
44 | 
45 |             <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
46 | 
47 |         </form>
48 |     </div>
49 | 
50 |     <div class="form-container youtube">
51 | 
52 |         <i class="fa-brands fa-youtube"></i>
53 | 
54 |         <form action="https://www.youtube.com/results" method="get" class="position-relative" target="_blank">
55 | 
56 |              
57 |             <label for="search">What is your song today?</label>
58 |             <input type="search" id="search" name="search_query" required placeholder="Enter your search term">
59 | 
60 |             
61 | 
62 |             <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
63 | 
64 |         </form>
65 |     </div>
66 | 
67 |     <div class="form-container google">
68 | 
69 |         <i class="fa-brands fa-google"></i>
70 | 
71 |         <form action="https://www.google.com/search" method="get" class="position-relative" target="_blank">
72 | 
73 |              
74 |             <label for="search">What is your search?</label>
75 |             <input type="search" id="search" name="q" required placeholder="Enter your search term">
76 | 
77 |             
78 | 
79 |             <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
80 | 
81 |         </form>
82 |     </div>
83 | 
84 | 
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/ex05/searchForm/text.txt:
--------------------------------------------------------------------------------
 1 | The Form Element
 2 | The form element represents a document section containing interactive controls for submitting information.
 3 | 
 4 | Attribute - method="get" (default)
 5 | Form data appended to the action URL with a ? separator.
 6 |             
 7 | 
 8 | Attribute - method="post" (default)
 9 | Form data sent as the request body.
10 | 
11 | Search
12 |     
13 | Submit
14 |     


--------------------------------------------------------------------------------
/lecture01/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/lecture01/.DS_Store


--------------------------------------------------------------------------------
/lecture01/01/gallery-styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/lecture01/01/gallery-styles.css


--------------------------------------------------------------------------------
/lecture01/01/image-gallery.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |         <title>Document</title>
 7 |         <link rel="stylesheet" href="gallery-styles.css"> 
 8 |     </head>
 9 |     <body>
10 |         <div>
11 |             <a href="https://softuni.bg">
12 |                 <img src="https://imagesunsplash.com/photo-1721332149274-586f2604884d?q=80&w=200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="My image">
13 |             </a>
14 | 
15 |             <a href="https://images.unsplash.com/photo-1721332149274-586f2604884d?q=80&w=1936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" target="_blank"></a>
16 |                 <img src="https://images.unsplash.com/photo-1721332149274-586f2604884d?q=80&w=200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
17 |             </a>
18 | 
19 |             <a href="" target="_blank"></a>
20 |                 <img src="">
21 |             </a>
22 | 
23 |             <a href="" target="_blank"></a>
24 |                 <img src="">
25 |             </a>
26 | 
27 |         </div>
28 |     </body>
29 | </html>


--------------------------------------------------------------------------------
/lecture01/02/todo-list.css:
--------------------------------------------------------------------------------
1 | .stroked {
2 |     text-decoration: line-through;
3 |     color: red;
4 | }


--------------------------------------------------------------------------------
/lecture01/02/todo-list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="todo-list.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div>
11 |         <h1 class="stroked">
12 |             Stuff to do
13 |         </h1>
14 | 
15 |         <ol class="stroked">
16 |             <li>Trash</li>
17 |             <li>Dishes</li>
18 |             <li>Vacuum</li>
19 |         </ol>
20 | 
21 |         <h2>Done</h2>
22 |         <ul>
23 |             <li>Eat chocolate</li>
24 |             <li>Eat pizza</li>
25 |         </ul>
26 | 
27 |     </div>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/lecture01/03/navigation.css:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |     background: black;
 3 | }
 4 | .navbar a {
 5 |     color: white;
 6 | }
 7 | a[href="#services"] {
 8 |     color: yellow;
 9 | }
10 | .green {
11 |     background: red;
12 | }


--------------------------------------------------------------------------------
/lecture01/03/navigation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="navigation.css">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <nav class="navbar">
11 |         <ul class="nav-links">
12 |             <li><a href="#home">Home</a></li>
13 |             <li class="green"><a href="https://softuni.bg">About</a></li>
14 |             <li><a href="#services">Services</a></li>
15 |             <li><a href="#contact">Contact</a></li>
16 |         </ul>
17 |     </nav>
18 | 
19 |     <br/>
20 |     <br/>
21 |     <br/>
22 |     <br/>
23 |     <br/>
24 |     <br/>
25 |     <br/>
26 |     <br/>
27 |     <br/>
28 |     <br/>
29 |     <br/>
30 |     <br/>
31 |     <br/>
32 |     <br/>
33 |     <br/>
34 |     <br/>
35 |     <br/>
36 |     <br/>
37 |     <br/>
38 |     <br/>
39 |     <br/>
40 |     <br/>
41 |     <br/>
42 |     <br/>
43 |     <br/>
44 | 
45 |     <div id="contact">
46 |         test
47 |     </div>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/lecture01/04/list-of-posts.css:
--------------------------------------------------------------------------------
 1 | .blog-posts article header p {
 2 |     color: #c0c0c0;
 3 | }
 4 | .blog-posts time {
 5 |     font-style: italic;
 6 | }
 7 | span.author {
 8 |     font-weight: bold;
 9 |     color: red;
10 | }


--------------------------------------------------------------------------------
/lecture01/04/list-of-posts.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="list-of-posts.css">
 7 |     <title>List of blog posts</title>
 8 | </head>
 9 | <body>
10 |     <section class="blog-posts">
11 |         <article>
12 |             <header>
13 |                 <h2>The Evolution of Web Design</h2>
14 |                 <p>
15 |                     <time datetime="2024-03-10">March 10, 2024</time> by <span class="author">Alex Johnson</span></p>
16 |             </header>
17 |             <p class="excerpt">Web design has come a long way since the early days of the internet.</p>
18 |         </article>
19 | 
20 |         <article>
21 |             <header>
22 |                 <h2>The Evolution of Web Design</h2>
23 |                 <p>
24 |                     <time datetime="2024-03-10">March 10, 2024</time> by <span class="author">Alex Johnson</span></p>
25 |             </header>
26 |             <p class="excerpt">Web design has come a long way since the early days of the internet.</p>
27 |         </article>
28 |     </section>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/lecture01/05/single-post.css:
--------------------------------------------------------------------------------
1 | .post-comments {
2 |     background: #333333;
3 |     color: white;
4 | }
5 | .post-comments article:nth-of-type(2) {
6 |     color: red;
7 | }


--------------------------------------------------------------------------------
/lecture01/05/single-post.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="single-post.css">
 7 |     <title>Single blog post page with comments</title>
 8 | </head>
 9 | <body>
10 |     <header class="post-header">
11 |         <h1>Blog Post Title</h1>
12 |         <p>Posted by <b>Author Name</b> on <time datetime="2024-01-24">January 24, 2024</time></p>
13 |     </header>
14 |     <main class="post-content">
15 |         <h2>Какво е Lorem Ipsum?</h2>
16 |         <p>Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.</p>
17 |         <img src="https://images.unsplash.com/photo-1721332149274-586f2604884d?q=80&w=200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
18 | 
19 |         <h2>Защо го използваме?</h2>
20 |         <p>Известен факт е, че читателя обръща внимание на съдържанието, което чете, а не на оформлението му. Свойството на Lorem Ipsum е, че до голяма степен има нормално разпределение на буквите и се чете по-лесно, за разлика от нормален текст на английски език като "Това е съдържание, това е съдържание". Много системи за публикуване и редактори на Уеб страници използват Lorem Ipsum като примерен текстов модел "по подразбиране", поради което при търсене на фразата "lorem ipsum" в Интернет ще бъдат открити много сайтове в процес на разработка. Някой от тези сайтове биват променяни с времето, а други по случайност или нарочно(за забавление и пр.) биват оставяни в този си незавършен вид.</p> 
21 | 
22 |         <blockquote>Противно на всеобщото вярване, Lorem Ipsum не е просто случаен текст. </blockquote>
23 |     </main>
24 | 
25 |     <section class="post-comments">
26 |         <h2>Comments</h2>
27 |         <article class="single-comment">
28 |             <header>
29 |                 <b>John Doe</b> - <time datetime="2024-01-25">January 25, 2024</time>
30 |             </header>
31 |             <p>This is my comment.</p>
32 |         </article>
33 | 
34 |         <article class="single-comment">
35 |             <header>
36 |                 <b>John Doe</b> - <time datetime="2024-01-25">January 25, 2024</time>
37 |             </header>
38 |             <p style="color: blue;">This is my comment.</p>
39 |         </article>
40 |     </section>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/lecture01/06/blog-layout.css:
--------------------------------------------------------------------------------
 1 | nav {
 2 |     background: red;
 3 | }
 4 | aside nav,
 5 | aside nav a {
 6 |     background: blue;
 7 |     color: #FFFFFF;
 8 | }
 9 | 
10 | footer li > a,
11 | header nav a {
12 |     text-decoration: line-through;
13 | }


--------------------------------------------------------------------------------
/lecture01/06/blog-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="blog-layout.css">
 7 |     <title>Blog Layout</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <h1>My Simple Blog</h1>
12 |         <nav class="navbar">
13 |             <ul class="nav-links">
14 |                 <li><a href="#home">Home</a></li>
15 |                 <li><a href="#about">About</a></li>
16 |                 <li><a href="#contact">Contact</a></li>
17 |             </ul>
18 |         </nav>
19 |     </header>
20 |     <main>
21 |         <article>
22 |             <h2>The Evolution of Web Design</h2>
23 |             <p><time datetime="2024-03-10">March 10, 2024</time> by <span class="author">Alex Johnson</span></p>
24 |             <p class="excerpt">Web design has come a long way since the early days of the internet.</p>
25 |             <a href="#">Read More</a>
26 |         </article>
27 |     </main>
28 |     <aside>
29 |         <section class="widget">
30 |             <h3>About Me</h3>
31 |             <p>Short bio or description about the author.</p>
32 |         </section>
33 | 
34 |         <section class="widget">
35 |             <h3>Categories</h3>
36 |             <nav class="navbar-sidebar">
37 |                 <ul class="nav-links-sidebar">
38 |                     <li><a href="#">Web Design</a></li>
39 |                     <li><a href="#">HTML</a></li>
40 |                     <li><a href="#">CSS</a></li>
41 |                 </ul>
42 |             </nav>
43 |         </section>
44 | 
45 |         
46 |         <section class="widget">
47 |             <h3>Recent Post</h3>
48 |             <nav class="navbar-sidebar">
49 |                 <ul class="nav-links-sidebar">
50 |                     <li><a href="#">Post 1</a></li>
51 |                     <li><a href="#">Post 2</a></li>
52 |                     <li><a href="#">Post 3</a></li>
53 |                 </ul>
54 |             </nav>
55 |         </section>
56 | 
57 |         <section class="widget">
58 |             <h3>Social Media links</h3>
59 |             <nav class="navbar-sidebar">
60 |                 <ul class="nav-links-sidebar">
61 |                     <li><a href="#">FB</a></li>
62 |                     <li><a href="#">Twitter</a></li>
63 |                     <li><a href="#">LinkedIn</a></li>
64 |                 </ul>
65 |             </nav>
66 |         </section>
67 |     </aside>
68 |     <footer>
69 |         <p>&copy; 2024 My Simple Blog. All rights reserved.</p>
70 |         <nav class="navbar-footer">
71 |             <ul class="nav-links-footer">
72 |                 <li><a href="#">Privacy Policy</a></li>
73 |                 <li><a href="#">Terms and Conditions</a></li>
74 |                 <li><a href="#">Cookie Policy</a></li>
75 |             </ul>
76 |         </nav>
77 |     </footer>
78 | </body>
79 | </html>


--------------------------------------------------------------------------------
/lecture02/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/lecture02/.DS_Store


--------------------------------------------------------------------------------
/lecture02/01/display-examples.css:
--------------------------------------------------------------------------------
 1 | section {
 2 |     border: 2px solid black;
 3 |     margin-bottom: 2em;
 4 |     padding: 1em 2em;
 5 | }
 6 | section p {
 7 |     border: 1px solid #CCC;
 8 |     padding: 1em;
 9 | }
10 | 
11 | .block p {
12 |     display: block;
13 | }
14 | 
15 | .inline p {
16 |     display: inline;
17 | }
18 | 
19 | .inline-block p {
20 |     display: inline-block;
21 | }
22 | 


--------------------------------------------------------------------------------
/lecture02/01/display-examples.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn Display in CSS</title>
 7 |     <link rel="stylesheet" href="display-examples.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <section class="block">
12 |         <h2>Display Block</h2>
13 |         <p>Paragraph with display block.</p>
14 |         <p>Paragraph with display block.</p>
15 |         <p>Paragraph with display block.</p>
16 |     </section>
17 | 
18 |     <section class="inline">
19 |         <h2>Display Inline</h2>
20 |         <p>Paragraph with display inline.</p>
21 |         <p>Paragraph with display inline.</p>
22 |         <p>Paragraph with display inline.</p>
23 |     </section>
24 | 
25 |     <section class="inline-block">
26 |         <h2>Display Inline Block</h2>
27 |         <p>Paragraph with display inline-block.</p>
28 |         <p>Paragraph with display inline-block.</p>
29 |         <p>Paragraph with display inline-block.</p>
30 |     </section>
31 | 
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/lecture02/07/box-sizing.css:
--------------------------------------------------------------------------------
 1 | .default-div {
 2 |     width: 300px;
 3 |     padding: 20px;
 4 |     border: 5px solid #333;
 5 |     margin-bottom: 20px;
 6 |     background: #eee;
 7 | }
 8 | 
 9 | .content-box {
10 |     box-sizing: content-box;
11 | }
12 | 
13 | .border-box {
14 |     box-sizing: border-box;
15 | }


--------------------------------------------------------------------------------
/lecture02/07/box-sizing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Box Model</title>
 7 |     <link rel="stylesheet" href="box-sizing.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <div class="default-div content-box">
12 |         <p>Content-Box (default)</p>
13 |         <p>Width: 300px; Padding: 20px; Border: 5px;</p>
14 |     </div>
15 | 
16 |     <div class="default-div border-box">
17 |         <p>Border-Box</p>
18 |         <p>Width: 300px; Padding: 20px; Border: 5px;</p>
19 |     </div>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/lecture02/08/overflow-examples.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |     width: 300px;
 3 |     padding: 20px;
 4 |     border: 2px solid #333;
 5 |     margin-bottom: 20px;
 6 |     height: 100px;
 7 | }
 8 | 
 9 | .overflow-visible {
10 |     overflow: visible;
11 | }
12 | 
13 | .overflow-hidden {
14 |     overflow: hidden;
15 | }
16 | 
17 | .overflow-scroll {
18 |     overflow: scroll;
19 | }
20 | 
21 | .overflow-auto {
22 |     overflow: auto;
23 | }


--------------------------------------------------------------------------------
/lecture02/08/overflow-examples.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Overflow</title>
 7 |     <link rel="stylesheet" href="overflow-examples.css">
 8 | </head>
 9 | <body>
10 |     
11 |     <h2>Overflow Visible</h2>
12 |     <div class="overflow-visible">
13 |         <p>This is some longer content that will overflow out of its container to demonstrate the 'visible' setting of the overflow property, where overflow is not clipped and renders outside the element's box.</p>
14 |         <p>This is some longer content that will overflow out of its container to demonstrate the 'visible' setting of the overflow property, where overflow is not clipped and renders outside the element's box.</p>
15 |     </div>
16 | 
17 |     <h2>Overflow Hidden</h2>
18 |     <div class="overflow-hidden">
19 |         <p>This is some longer content that will overflow out of its container to demonstrate the 'visible' setting of the overflow property, where overflow is not clipped and renders outside the element's box.</p>
20 |         <p>This is some longer content that will overflow out of its container to demonstrate the 'visible' setting of the overflow property, where overflow is not clipped and renders outside the element's box.</p>
21 |     </div>
22 | 
23 |     <h2>Overflow Scroll</h2>
24 |     <div class="overflow-scroll">
25 |         <p>This is some longer content that will overflow out of its container to demonstrate the 'visible' setting of the overflow property, where overflow is not clipped and renders outside the element's box.</p>
26 |         <p>This is some longer content that will overflow out of its container to demonstrate the 'visible' setting of the overflow property, where overflow is not clipped and renders outside the element's box.</p>
27 |     </div>
28 | 
29 |     <h2>Overflow Auto</h2>
30 |     <div class="overflow-auto">
31 |         <p>This is some longer content that will overflow out of its container to demonstrate</p>
32 |     </div>
33 | 
34 | 
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/lecture03/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/lecture03/.DS_Store


--------------------------------------------------------------------------------
/lecture03/01/01.css:
--------------------------------------------------------------------------------
 1 | .flex-container {
 2 |     display: flex;
 3 |     width: 400px;
 4 |     padding: 1em;
 5 |     border: 2px solid blue;
 6 | }
 7 | 
 8 | .flex-container .flex-item {
 9 |     border: 2px solid black;
10 |     padding: 20px;
11 |     background: #eee;
12 | }
13 | 
14 | .direction-row {
15 |     flex-direction: row;
16 | }
17 | 
18 | .direction-row-reverse {
19 |     flex-direction: row-reverse;
20 | }
21 | 
22 | .direction-column {
23 |     flex-direction: column;
24 | }
25 | 
26 | .direction-column-reverse {
27 |     flex-direction: column-reverse;
28 | }
29 | 
30 | .flex-nowrap {
31 |     flex-wrap: nowrap;
32 | }
33 | 
34 | .flex-wrap {
35 |     flex-wrap: wrap;
36 | }
37 | 
38 | .flex-wrap-reverse {
39 |     flex-wrap: wrap-reverse;
40 | }


--------------------------------------------------------------------------------
/lecture03/01/01.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Box</title>
 7 |     <link rel="stylesheet" href="01.css" />
 8 | </head>
 9 | <body>
10 | 
11 |     <h1>display: flex // row</h1>
12 |     <div class="flex-container direction-row flex-nowrap">
13 |         <div class="flex-item">1</div>
14 |         <div class="flex-item">2</div>
15 |         <div class="flex-item">3</div>
16 |         <div class="flex-item">3</div>
17 |         <div class="flex-item">3</div>
18 |         <div class="flex-item">3</div>
19 |         <div class="flex-item">3</div>
20 |         <div class="flex-item">3</div>
21 |         <div class="flex-item">3</div>
22 |         <div class="flex-item">3</div>
23 |         <div class="flex-item">3</div>
24 |         <div class="flex-item">3</div>
25 |     </div>
26 | 
27 |     <h1>flex-container direction-row-reverse flex-wrap-reverse</h1>
28 |     <div class="flex-container direction-row-reverse flex-wrap-reverse">
29 |         <div class="flex-item">1</div>
30 |         <div class="flex-item">2</div>
31 |         <div class="flex-item">3</div>
32 |         <div class="flex-item">4</div>
33 |         <div class="flex-item">5</div>
34 |         <div class="flex-item">6</div>
35 |         <div class="flex-item">7</div>
36 |         <div class="flex-item">8</div>
37 |         <div class="flex-item">9</div>
38 |         <div class="flex-item">10</div>
39 |         <div class="flex-item">11</div>
40 |         <div class="flex-item">12</div>
41 |     </div>
42 | 
43 |     <h1>display: wrap-reverse row-reverse</h1>
44 |     <div class="flex-container direction-row flex-wrap-reverse">
45 |         <div class="flex-item">1</div>
46 |         <div class="flex-item">2</div>
47 |         <div class="flex-item">3</div>
48 |         <div class="flex-item">4</div>
49 |         <div class="flex-item">5</div>
50 |         <div class="flex-item">6</div>
51 |         <div class="flex-item">7</div>
52 |         <div class="flex-item">8</div>
53 |         <div class="flex-item">9</div>
54 |         <div class="flex-item">10</div>
55 |         <div class="flex-item">11</div>
56 |         <div class="flex-item">12</div>
57 |     </div>
58 | 
59 |     <h1>display: column</h1>
60 |     <div class="flex-container direction-column">
61 |         <div class="flex-item">1</div>
62 |         <div class="flex-item">2</div>
63 |         <div class="flex-item">3</div>
64 |     </div>
65 | 
66 |     <h1>display: column-reverse</h1>
67 |     <div class="flex-container direction-column-reverse">
68 |         <div class="flex-item">1</div>
69 |         <div class="flex-item">2</div>
70 |         <div class="flex-item">3</div>
71 |     </div>
72 | 
73 | </body>
74 | </html>


--------------------------------------------------------------------------------
/lecture03/02/02.css:
--------------------------------------------------------------------------------
 1 | .flex-container {
 2 |     
 3 |     padding: 1em;
 4 |     border: 2px solid blue;
 5 |     display: flex;
 6 | }
 7 | 
 8 | .flex-container .flex-item {
 9 |     background: #eee;
10 |     padding: 20px;
11 |     border: 2px solid #000;
12 | }
13 | 
14 | .justify-content-flex-start {
15 |     justify-content: flex-start;
16 | }
17 | 
18 | .justify-center {
19 |     justify-content: center;
20 | }
21 | 
22 | .justify-content-flex-end {
23 |     justify-content: flex-end;
24 | }
25 | 
26 | .justify-content-space-between {
27 |     justify-content: space-between;
28 | }
29 | 
30 | .justify-content-space-around {
31 |     justify-content: space-around;
32 | }
33 | .justify-content-space-evenly {
34 |     justify-content: space-evenly;
35 | }


--------------------------------------------------------------------------------
/lecture03/02/02.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Box</title>
 7 |     <link rel="stylesheet" href="02.css" />
 8 | </head>
 9 | <body>
10 |     
11 |     <h2>justify-content-flex-start</h2>
12 |     <div class="flex-container justify-content-flex-start">
13 |         <div class="flex-item">1</div>
14 |         <div class="flex-item">2</div>
15 |         <div class="flex-item">3</div>
16 |     </div>
17 | 
18 |     <h2>justify-content-center</h2>
19 |     <div class="flex-container justify-center">
20 |         <div class="flex-item">1</div>
21 |         <div class="flex-item">2</div>
22 |         <div class="flex-item">3</div>
23 |     </div>
24 | 
25 |     <h2>justify-content-flex-end</h2>
26 |     <div class="flex-container justify-content-flex-end">
27 |         <div class="flex-item">1</div>
28 |         <div class="flex-item">2</div>
29 |         <div class="flex-item">3</div>
30 |     </div>
31 | 
32 |     <h2>justify-content-space-between</h2>
33 |     <div class="flex-container justify-content-space-between">
34 |         <div class="flex-item">1</div>
35 |         <div class="flex-item">2</div>
36 |         <div class="flex-item">3</div>
37 |     </div>
38 | 
39 |     <h2>justify-content-space-around</h2>
40 |     <div class="flex-container justify-content-space-around">
41 |         <div class="flex-item">1</div>
42 |         <div class="flex-item">2</div>
43 |         <div class="flex-item">2</div>
44 |         <div class="flex-item">2</div>
45 |         <div class="flex-item">3</div>
46 |     </div>
47 | 
48 |     <h2>justify-content-space-evenly</h2>
49 |     <div class="flex-container justify-content-space-evenly">
50 |         <div class="flex-item">1</div>
51 |         <div class="flex-item">1</div>
52 |         <div class="flex-item">1</div>
53 |         <div class="flex-item">2</div>
54 |         <div class="flex-item">3</div>
55 |         <div class="flex-item">1</div>
56 |         <div class="flex-item">1</div>
57 |         <div class="flex-item">1</div>
58 |         <div class="flex-item">2</div>
59 |         <div class="flex-item">3</div>
60 |         <div class="flex-item">1</div>
61 |         <div class="flex-item">1</div>
62 |         <div class="flex-item">1</div>
63 |         <div class="flex-item">2</div>
64 |         <div class="flex-item">3</div>
65 |         <div class="flex-item">1</div>
66 |         <div class="flex-item">1</div>
67 |         <div class="flex-item">1</div>
68 |      
69 |     </div>
70 | 
71 | 
72 | </body>
73 | </html>


--------------------------------------------------------------------------------
/lecture03/03/03.css:
--------------------------------------------------------------------------------
 1 | .flex-container {
 2 |     width: 400px;
 3 |     height: 200px;
 4 |     padding: 1em;
 5 |     border: 2px solid blue;
 6 |     display: flex;
 7 |     flex-wrap: wrap;
 8 | }
 9 | 
10 | .flex-container .flex-item {
11 |     background: #eee;
12 |     padding: 20px;
13 |     border: 2px solid #000;
14 | }
15 | 
16 | .align-items-stretch {
17 |     align-items: stretch;
18 | }
19 | 
20 | .align-items-flex-start {
21 |     align-items: flex-start;
22 | }
23 | 
24 | .align-items-center {
25 |     align-items: center;
26 | }
27 | 
28 | .align-items-flex-end {
29 |     align-items: flex-end;
30 | }
31 | 
32 | .align-items-baseline {
33 |     align-items: baseline;
34 | }
35 | 
36 | .p-38 {
37 |     font-size: 38px;
38 | }
39 | 
40 | .p-24 {
41 |     font-size: 8px;
42 | }
43 | 
44 | .align-content-flex-start {
45 |     align-content: flex-start;
46 | }
47 | 
48 | .align-content-center {
49 |     align-content: flex-start;
50 |     align-items: center;
51 | }
52 | 
53 | .align-content-flex-end {
54 |     align-content: flex-end;
55 | }
56 | 
57 | .align-content-space-between {
58 |     align-content: space-between;
59 | }
60 | 
61 | .align-content-space-around {
62 |     align-content: space-around;
63 | }


--------------------------------------------------------------------------------
/lecture03/03/03.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Flex Box</title>
  7 |     <link rel="stylesheet" href="03.css" />
  8 | </head>
  9 | <body>
 10 |     
 11 |     <h2>align-items-stretch</h2>
 12 |     <div class="flex-container align-items-stretch">
 13 |         <div class="flex-item">1</div>
 14 |         <div class="flex-item">2</div>
 15 |         <div class="flex-item">3</div>
 16 |     </div>
 17 | 
 18 |     <h2>align-items-flex-start</h2>
 19 |     <div class="flex-container align-items-flex-start">
 20 |         <div class="flex-item">1</div>
 21 |         <div class="flex-item">2</div>
 22 |         <div class="flex-item">3</div>
 23 |     </div>
 24 | 
 25 |     <h2>align-items-center</h2>
 26 |     <div class="flex-container align-items-center">
 27 |         <div class="flex-item">1</div>
 28 |         <div class="flex-item">2</div>
 29 |         <div class="flex-item">3</div>
 30 |     </div>
 31 | 
 32 |     <h2>align-items-flex-end</h2>
 33 |     <div class="flex-container align-items-flex-end">
 34 |         <div class="flex-item">1</div>
 35 |         <div class="flex-item">2</div>
 36 |         <div class="flex-item">3</div>
 37 |     </div>
 38 | 
 39 |     <h2>align-items-baseline</h2>
 40 |     <div class="flex-container align-items-baseline">
 41 |         <div class="flex-item">1</div>
 42 |         <div class="flex-item"><p class="p-38">2</p></div>
 43 |         <div class="flex-item"><p class="p-24">2</p></div>
 44 |     </div>
 45 | 
 46 |     <h2>align-content-flex-start</h2>
 47 |     <div class="flex-container align-content-flex-start">
 48 |         <div class="flex-item">1</div>
 49 |         <div class="flex-item">2</div>
 50 |         <div class="flex-item">3</div>
 51 |         <div class="flex-item">4</div>
 52 |         <div class="flex-item">5</div>
 53 |         <div class="flex-item">6</div>
 54 |         <div class="flex-item">7</div>
 55 |         <div class="flex-item">8</div>
 56 |         <div class="flex-item">9</div>
 57 |         <div class="flex-item">10</div>
 58 |         <div class="flex-item">11</div>
 59 |         <div class="flex-item">12</div>
 60 |     </div>
 61 | 
 62 |     <h2>align-content-center</h2>
 63 |     <div class="flex-container align-content-center">
 64 |         <div class="flex-item">1</div>
 65 |         <div class="flex-item">2</div>
 66 |         <div class="flex-item">3</div>
 67 |         <div class="flex-item">4</div>
 68 |         <div class="flex-item">5</div>
 69 |         <div class="flex-item">6</div>
 70 |         <div class="flex-item">7</div>
 71 |         <div class="flex-item">8</div>
 72 |         <div class="flex-item">9</div>
 73 |         <div class="flex-item">10</div>
 74 |         <div class="flex-item">11</div>
 75 |         <div class="flex-item">12</div>
 76 |     </div>
 77 | 
 78 |     <h2>align-content-flex-end</h2>
 79 |     <div class="flex-container align-content-flex-end">
 80 |         <div class="flex-item">1</div>
 81 |         <div class="flex-item">2</div>
 82 |         <div class="flex-item">3</div>
 83 |         <div class="flex-item">4</div>
 84 |         <div class="flex-item">5</div>
 85 |         <div class="flex-item">6</div>
 86 |         <div class="flex-item">7</div>
 87 |         <div class="flex-item">8</div>
 88 |         <div class="flex-item">9</div>
 89 |         <div class="flex-item">10</div>
 90 |         <div class="flex-item">11</div>
 91 |         <div class="flex-item">12</div>
 92 |     </div>
 93 | 
 94 |     <h2>align-content-space-between</h2>
 95 |     <div class="flex-container align-content-space-between">
 96 |         <div class="flex-item">1</div>
 97 |         <div class="flex-item">2</div>
 98 |         <div class="flex-item">3</div>
 99 |         <div class="flex-item">4</div>
100 |         <div class="flex-item">5</div>
101 |         <div class="flex-item">6</div>
102 |         <div class="flex-item">7</div>
103 |         <div class="flex-item">8</div>
104 |         <div class="flex-item">9</div>
105 |         <div class="flex-item">10</div>
106 |         <div class="flex-item">11</div>
107 |         <div class="flex-item">12</div>
108 |     </div>
109 | 
110 |     <h2>align-content-space-around</h2>
111 |     <div class="flex-container align-content-space-around">
112 |         <div class="flex-item">1</div>
113 |         <div class="flex-item">2</div>
114 |         <div class="flex-item">3</div>
115 |         <div class="flex-item">4</div>
116 |         <div class="flex-item">5</div>
117 |         <div class="flex-item">6</div>
118 |         <div class="flex-item">7</div>
119 |         <div class="flex-item">8</div>
120 |         <div class="flex-item">9</div>
121 |         <div class="flex-item">10</div>
122 |         <div class="flex-item">11</div>
123 |         <div class="flex-item">12</div>
124 |     </div>
125 | 
126 | 
127 | 
128 | </body>
129 | </html>


--------------------------------------------------------------------------------
/lecture03/07/07.css:
--------------------------------------------------------------------------------
 1 | .flex-container {
 2 |     width: 400px;
 3 |     padding: 1em;
 4 |     border: 2px solid blue;
 5 |     display: flex;
 6 |     flex-wrap: wrap;
 7 | }
 8 | 
 9 | .flex-container .flex-item {
10 |     background: #eee;
11 |     padding: 20px;
12 |     border: 2px solid #000;
13 | }
14 | 
15 | .gap-20 {
16 |     gap: 20px;
17 | }
18 | 
19 | .gap-40 {
20 |     gap: 40px;
21 | }
22 | 
23 | .order-custom .flex-item:nth-child(5) {
24 |     order: 1;
25 | }
26 | 
27 | .order-custom .flex-item:nth-child(1) {
28 |     order: 2;
29 | }
30 | 
31 | .order-custom .flex-item:nth-child(10) {
32 |     order: 3;
33 | }


--------------------------------------------------------------------------------
/lecture03/07/07.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Box</title>
 7 |     <link rel="stylesheet" href="07.css" />
 8 | </head>
 9 | <body>
10 |     
11 |     <h2>3</h2>
12 |     <div class="flex-container align-items-stretch gap-20">
13 |         <div class="flex-item">1</div>
14 |         <div class="flex-item">2</div>
15 |         <div class="flex-item">3</div>
16 |     </div>
17 | 
18 |     <h2>12</h2>
19 |     <div class="flex-container gap-40 order-custom">
20 |         <div class="flex-item">1</div>
21 |         <div class="flex-item">2</div>
22 |         <div class="flex-item">3</div>
23 |         <div class="flex-item">4</div>
24 |         <div class="flex-item">5</div>
25 |         <div class="flex-item">6</div>
26 |         <div class="flex-item">7</div>
27 |         <div class="flex-item">8</div>
28 |         <div class="flex-item">9</div>
29 |         <div class="flex-item">10</div>
30 |         <div class="flex-item">11</div>
31 |         <div class="flex-item">12</div>
32 |     </div>
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/lecture03/08/08.css:
--------------------------------------------------------------------------------
 1 | .flex-container {
 2 |     width: 300px;
 3 |     padding: 1em;
 4 |     border: 2px solid blue;
 5 |     display: flex;
 6 |     align-items: flex-start;   
 7 | }
 8 | 
 9 | .flex-container .flex-item {
10 |     background: #eee;
11 |     padding: 20px;
12 |     border: 2px solid #000;
13 | }
14 | 
15 | .sg .flex-item {
16 |     flex-basis: 300px;
17 | }
18 | 
19 | .flex-container.fg .flex-item {
20 |     background: #eee;
21 |     padding: 20px;
22 |     border: 2px solid #000;
23 | }
24 | 
25 | .flex-shrink-0 .flex-item {
26 |     flex-shrink: 0;
27 | }
28 | 
29 | .flex-shrink-child-2 .flex-item {
30 |     flex-shrink: 0;
31 | }
32 | 
33 | .flex-shrink-child-2 .flex-item:nth-child(2) {
34 |     flex-shrink: 1;
35 | }
36 | 
37 | .flex-grow-1 .flex-item:nth-child(1) {
38 |     flex-grow: 1;
39 | }
40 | 
41 | .flex-grow-1 .flex-item:nth-child(2) {
42 |     flex-grow: 2;
43 | }
44 | 
45 | .flex-grow-1 .flex-item:nth-child(3) {
46 |     flex-grow: 3;
47 | }
48 | 
49 | .flex-basis-40px .flex-item {
50 |     /*flex-basis: 40px;*/
51 | }
52 | 
53 | .flex-basis-40px .flex-item {
54 |     flex: 0 0 40px;
55 | }
56 | 
57 | .self-example {
58 |     height: 400px;
59 |     align-items: flex-start;
60 | }
61 | 
62 | .self-example .flex-item:nth-child(3) {
63 |     align-self: center;
64 | }
65 | 
66 | .self-example .flex-item:nth-child(5) {
67 |     align-self: flex-end;
68 | }


--------------------------------------------------------------------------------
/lecture03/08/08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Box</title>
 7 |     <link rel="stylesheet" href="08.css" />
 8 | </head>
 9 | <body>
10 |     
11 |     <h2>flex-shrink: 1;</h2>
12 |     <div class="sg flex-container">
13 |         <div class="flex-item">1</div>
14 |         <div class="flex-item">2</div>
15 |         <div class="flex-item">3</div>
16 |     </div>
17 | 
18 |     <h2>flex-shrink: 0</h2>
19 |     <div class="flex-container flex-shrink-0">
20 |         <div class="flex-item">1</div>
21 |         <div class="flex-item">2</div>
22 |         <div class="flex-item">3</div>
23 |     </div>
24 | 
25 |     <h2>flex-shrink , shrink 2nd child</h2>
26 |     <div class="sg flex-container flex-shrink-child-2">
27 |         <div class="flex-item">1</div>
28 |         <div class="flex-item">2</div>
29 |         <div class="flex-item">3</div>
30 |     </div>
31 | 
32 |     <h2>flex-grow: 1</h2>
33 |     <div class="flex-container fg flex-grow-1">
34 |         <div class="flex-item">1</div>
35 |         <div class="flex-item">2</div>
36 |         <div class="flex-item">3</div>
37 |     </div>
38 | 
39 |     <h2>flex-grow-2</h2>
40 |     <div class="flex-container fg flex-grow-2">
41 |         <div class="flex-item">1</div>
42 |         <div class="flex-item">2</div>
43 |         <div class="flex-item">3</div>
44 |     </div>
45 | 
46 |     <h2>flex-basis-40px</h2>
47 |     <div class="flex-container fg flex-basis-40px">
48 |         <div class="flex-item">1</div>
49 |         <div class="flex-item">2</div>
50 |     </div>
51 | 
52 |     <h2>flex-basis-40px</h2>
53 |     <div class="self-example flex-container fg flex-basis-40px">
54 |         <div class="flex-item">1</div>
55 |         <div class="flex-item">1</div>
56 |         <div class="flex-item">1</div>
57 |         <div class="flex-item">1</div>
58 |         <div class="flex-item">1</div>
59 |         <div class="flex-item">2</div>
60 |     </div>
61 | 
62 |     <h2>flex-basis-40px</h2>
63 |     <div class="flex-container fg flex-basis-40px">
64 |         <div class="flex-item">1</div>
65 |     </div>
66 | 
67 |     
68 | 
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/lecture05/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/popov593/SoftUni-HTML-CSS-09-2024/67d96c238f71f17e220e66a0f6dbb6fed0cc25e2/lecture05/.DS_Store


--------------------------------------------------------------------------------
/lecture05/DemoFields/task.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | a {
  7 |     color: inherit;
  8 |     text-decoration: none;
  9 | }
 10 | body {
 11 |     font-family: Verdana, Geneva, Tahoma, sans-serif;
 12 |     font-size: 16px;
 13 |     background: silver;
 14 | }
 15 | 
 16 | form {
 17 |     max-width: 450px;
 18 |     margin: 30px auto;
 19 |     background: #FFF;
 20 |     border-radius: 10px;
 21 |     padding: 10px;
 22 |     display: flex;
 23 |     flex-direction: column;
 24 |     gap: 10px;
 25 | }
 26 | 
 27 | form fieldset {
 28 |     display: flex;
 29 |     flex-direction: row;
 30 |     gap: 20px;
 31 |     padding: 10px;
 32 |     flex-wrap: wrap;
 33 | }
 34 | 
 35 | form fieldset > div {
 36 |     width: 100%;
 37 | }
 38 | form fieldset > div p {
 39 |     margin-bottom: 5px;
 40 |     font-style: italic;
 41 |     font-weight: 300;
 42 | }
 43 | 
 44 | fieldset.column {
 45 |     flex-direction: column;
 46 |     gap: 10px;
 47 | }
 48 | 
 49 | input:required:invalid {
 50 |     border: 1px solid red;
 51 |     border-radius: 3px;
 52 | }
 53 | 
 54 | input:required:valid {
 55 |     border: 1px solid green;
 56 |     border-radius: 3px;
 57 | }
 58 | 
 59 | input[type=text]:focus,
 60 | input[type=password]:focus,
 61 | input[type=tel]:focus,
 62 | input[type=email]:focus,
 63 | input[type=number]:focus,
 64 | input[type=date]:focus {
 65 |     outline: none;
 66 |     border: 1px solid blue;
 67 |     border-radius: 3px;
 68 |     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 69 | }
 70 | 
 71 | input[type=text],
 72 | input[type=password],
 73 | input[type=tel],
 74 | input[type=email],
 75 | input[type=number],
 76 | input[type=date] {
 77 |     padding: 5px;
 78 | }
 79 | 
 80 | 
 81 | .required:after {
 82 |     content: '*';
 83 |     color: #FF0000;
 84 | }
 85 | 
 86 | input[type=submit] {
 87 |     background: red;
 88 |     border: 0;
 89 |     padding: 10px;
 90 |     color: #FFF;
 91 |     text-transform: uppercase;
 92 |     cursor: pointer;
 93 | }
 94 | 
 95 | input[type=submit]:hover {
 96 |     background: black;
 97 | }
 98 | 
 99 | legend {
100 |     background: black;
101 |     color: #FFF;
102 |     padding: 10px;
103 | }
104 | 
105 | label {
106 |     font-size: 10px;
107 | }
108 | 
109 | select {
110 |     width: 100%;
111 | }
112 | 
113 | 
114 | @media (max-width: 610px) {
115 |     
116 | }


--------------------------------------------------------------------------------
/lecture05/DemoFields/task.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Flex Task</title>
  7 |     <link rel="stylesheet" href="task.css">
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  9 | </head>
 10 | <body>
 11 | 
 12 |     <form>
 13 | 
 14 |         <fieldset class="column">
 15 |             <legend>Personal Details</legend>
 16 |         
 17 |             <label for="first_name" class="required">First Name</label>
 18 |             <input type="text" id="first_name" name="first_name" required placeholder="Enter your first name">
 19 | 
 20 |             <label for="last_name" class="required">Last Name</label>
 21 |             <input type="text" id="last_name" name="last_name" required>
 22 | 
 23 |             <label for="password" class="required">Password (min. 6 chars)</label>
 24 |             <input type="password" id="password" name="password" required minlength="6">
 25 | 
 26 |             <label for="email">Email</label>
 27 |             <input type="email" id="email" name="email">
 28 | 
 29 |             <label for="phone">Phone</label>
 30 |             <input type="tel" id="phone" name="phone" placeholder="882-02-02-02" pattern="[0-9]{3}-[0-9]{2}-[0-9]{2}-[0-9]{2}">
 31 | 
 32 |             <label for="height">Enter your height in CM</label>
 33 |             <input type="number" id="height" name="height" min="110" max="250" value="150" step="5">
 34 | 
 35 |             <label for="height">Enter your weight in KG</label>
 36 |             <input type="range" id="weight" name="weight" min="40" max="250" value="100" step="5">
 37 | 
 38 |             <label for="month">Birth Month</label>
 39 |             <input type="date" id="month" name="month">
 40 | 
 41 |         </fieldset>
 42 |         
 43 |         <fieldset>
 44 |             <legend>Preferences</legend>
 45 | 
 46 |             <div>
 47 |                 <p>What course you would like to join?</p>
 48 |                 <input type="radio" id="react" name="course_choice" value="React.js">
 49 |                 <label for="react">React.js</label>
 50 |                 <input type="radio" id="next" name="course_choice" value="Next.js">
 51 |                 <label for="react">Next.js</label>
 52 |             </div>
 53 | 
 54 |             <div>
 55 |                 <p>What is your choice for back-end coding?</p>
 56 |                 <input type="checkbox" id="php" name="backend_choice" value="PHP">
 57 |                 <label for="php">PHP</label>
 58 |                 <input type="checkbox" id="next" name="backend_choice" value="Python">
 59 |                 <label for="react">Python</label>
 60 |             </div>
 61 | 
 62 |             <div>
 63 |                 <p>What is your favourite IDE?</p>
 64 |                 <select name="ide" id="ide-choice">
 65 |                     <option value="">Please choose an option</option>
 66 |                     <option value="VSCode">VS Code</option>
 67 |                     <option value="Atom">Atom</option>
 68 |                     <option value="Netbeans">NetBeans</option>
 69 |                 </select>
 70 |             </div>
 71 | 
 72 |             <div>
 73 |                 <p>What is your favourite IDE?</p>
 74 |                 <select name="ide-multiple" id="ide-choice" multiple>
 75 |                     <option value="">Please choose an option</option>
 76 |                     <option value="VSCode">VS Code</option>
 77 |                     <option value="Atom">Atom</option>
 78 |                     <option value="Netbeans">NetBeans</option>
 79 |                 </select>
 80 |             </div>
 81 |         </fieldset>
 82 | 
 83 |         <fieldset>
 84 |             <legend>Additional Information</legend>
 85 | 
 86 |             <div>
 87 |                 <label for="file">Upload your CV</label>
 88 |                 <input type="file" id="file" name="file" accept=".jpg,.pdf,.png">
 89 |             </div>
 90 | 
 91 |             <div>
 92 |                 <label for="file">Upload your Motivation letter</label>
 93 |                 <input type="file" id="file" name="file" accept="image/*" multiple size="1000000">
 94 |             </div>
 95 | 
 96 |             <div>
 97 |                 <label for="letter">Write your Motivational letter</label>
 98 |                 <textarea id="letter" name="letter" rows="4" cols="40" placeholder="Please, write something."></textarea>
 99 |             </div>
100 |         </fieldset>
101 | 
102 |         <fieldset>
103 |             <legend>Some more examples</legend>
104 | 
105 |             <div>
106 |                 <label for="search">Search:</label>
107 |                 <input type="search" id="search" name="search">
108 |             </div>
109 | 
110 |             <div>
111 |                 <label for="website">Website:</label>
112 |                 <input required type="url" id="website" name="website">
113 |             </div>
114 |         </fieldset>
115 | 
116 |         <button type="submit" value="Register">Register</button>
117 | 
118 |     </form>
119 | 
120 | </body>
121 | </html>
122 | 


--------------------------------------------------------------------------------
/lecture05/searchForm/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     font-family: Verdana, Geneva, Tahoma, sans-serif;
12 |     font-size: 16px;
13 |     background: silver;
14 | }
15 | .position-relative {
16 |     position: relative;
17 | }
18 | .form-container {
19 |     position: relative;
20 |     background: #000;
21 |     color: #FFF;
22 |     padding: 30px;
23 |     margin: 30px auto;
24 |     max-width: 300px;
25 |     border-radius: 50px;
26 | }
27 | .form-container.youtube,
28 | .youtube button[type=submit] {
29 |     background: rgb(202, 28, 28);
30 | }
31 | .form-container.google,
32 | .google button[type=submit] {
33 |     background: rgb(48, 25, 223);
34 | }
35 | .fa-github,
36 | .fa-youtube,
37 | .fa-google {
38 |     position: absolute;
39 |     top: 10px;
40 |     right: 30px;
41 |     font-size: 50px;
42 | }
43 | .form-container > form {
44 |     max-width: 70%;
45 |     display: flex;
46 |     flex-direction: column;
47 |     gap: 10px;
48 | }
49 | label[for=search] {
50 |     font-size: 20px;
51 |     font-weight: 900;
52 | }
53 | input[type=search] {
54 |     background: silver;
55 |     border: 0;
56 |     padding: 10px 13px;
57 |     border-radius: 20px;
58 |     color: #FFF;
59 |     font-size: 10px;
60 | }
61 | input[type=search]:focus {
62 |     outline: 0;
63 |     background: grey;
64 | }
65 | input[type=search]::placeholder {
66 |     color: #FFF;
67 | }
68 | button[type=submit] {
69 |     position: absolute;
70 |     bottom: 1px;
71 |     right: 2px;
72 |     border: 0;
73 |     background: #000;
74 |     color: #FFF;
75 |     font-size: 20px;
76 |     padding: 3px 5px;
77 |     border-radius: 50%;
78 |     cursor: pointer;
79 | }
80 | button[type=submit]:hover {
81 |     background: grey;
82 |     color: #000;
83 | }
84 | fieldset {
85 |     border: 0;
86 |     display: flex;
87 |     flex-direction: column;
88 |     flex-wrap: wrap;
89 |     font-size: 10px;
90 | }
91 | legend {
92 |     font-size: 10px;
93 | }


--------------------------------------------------------------------------------
/lecture05/searchForm/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="form-container">
13 | 
14 |         <i class="fa-brands fa-github"></i>
15 | 
16 |         <form action="https://github.com/search" method="get" class="position-relative" target="_blank">
17 | 
18 |             <fieldset>
19 | 
20 |                 <legend class="small">Choose Search Type</legend>
21 | 
22 |                 <div>
23 |                     <input type="radio" id="repositories" name="type" value="repositories">
24 |                     <label for="repositories">Repos</label>
25 |                 </div>
26 | 
27 |                 <div>
28 |                     <input type="radio" id="issues" name="type" value="issues">
29 |                     <label for="issues">Issues</label>
30 |                 </div>
31 |                 
32 |                 <div>
33 |                     <input type="radio" id="pullrequests" name="type" value="pullrequests">
34 |                     <label for="pullrequests">Pull Requests</label>
35 |                 <div>
36 | 
37 |             </fieldset>
38 | 
39 |             
40 |             <label for="search">What code are you searching today?</label>
41 |             <input type="search" id="search" name="q" required placeholder="Enter your search term">
42 | 
43 |             
44 | 
45 |             <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
46 | 
47 |         </form>
48 |     </div>
49 | 
50 |     <div class="form-container youtube">
51 | 
52 |         <i class="fa-brands fa-youtube"></i>
53 | 
54 |         <form action="https://www.youtube.com/results" method="get" class="position-relative" target="_blank">
55 | 
56 |              
57 |             <label for="search">What is your song today?</label>
58 |             <input type="search" id="search" name="search_query" required placeholder="Enter your search term">
59 | 
60 |             
61 | 
62 |             <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
63 | 
64 |         </form>
65 |     </div>
66 | 
67 |     <div class="form-container google">
68 | 
69 |         <i class="fa-brands fa-google"></i>
70 | 
71 |         <form action="https://www.google.com/search" method="get" class="position-relative" target="_blank">
72 | 
73 |              
74 |             <label for="search">What is your search?</label>
75 |             <input type="search" id="search" name="q" required placeholder="Enter your search term">
76 | 
77 |             
78 | 
79 |             <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
80 | 
81 |         </form>
82 |     </div>
83 | 
84 | 
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/lecture05/searchForm/text.txt:
--------------------------------------------------------------------------------
 1 | The Form Element
 2 | The form element represents a document section containing interactive controls for submitting information.
 3 | 
 4 | Attribute - method="get" (default)
 5 | Form data appended to the action URL with a ? separator.
 6 |             
 7 | 
 8 | Attribute - method="post" (default)
 9 | Form data sent as the request body.
10 | 
11 | Search
12 |     
13 | Submit
14 |     


--------------------------------------------------------------------------------
/sampleHTML/task.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | a {
 7 |     color: inherit;
 8 |     text-decoration: none;
 9 | }
10 | body {
11 |     background: red;
12 | }
13 | 
14 | 1200px
15 | 
16 | @media screen and (hover: hover) {
17 |     body {
18 |         background: white;
19 |     }
20 | }


--------------------------------------------------------------------------------
/sampleHTML/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flex Task</title>
 7 |     <link rel="stylesheet" href="task.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 9 | </head>
10 | <body>
11 | 
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------