diff --git a/ projects/card/README.md b/ projects/card/README.md new file mode 100644 index 0000000..072b20b --- /dev/null +++ b/ projects/card/README.md @@ -0,0 +1,3 @@ +Ссылка на задание: https://stepik.org/lesson/585818/step/2?unit=580581 + +После решения задания полученный код файлов .html и .css необходимо перенести в данный репозиторий diff --git a/ projects/card/index.html b/ projects/card/index.html new file mode 100644 index 0000000..2a54664 --- /dev/null +++ b/ projects/card/index.html @@ -0,0 +1,32 @@ + + + + + + + Document + + + + + + +
+
+
+ +
+
+
Pragser Wildsee, Italy
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+ +
+ +
+
+ + + + + + diff --git a/ projects/card/style.css b/ projects/card/style.css new file mode 100644 index 0000000..25570fa --- /dev/null +++ b/ projects/card/style.css @@ -0,0 +1,78 @@ +*{ + margin: 0; + padding: 0; +} +body{ + font-family: "Exo 2"; +} + +.container{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 95vh; + padding: 20px; + background-color: #15638F; + +} +.card { + display: flex; + flex-direction: column; + background: #FFFFFF; + width: 250px; + border-radius: 10px; + box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3); +} +.card__image { + width: 100%; +} + + +img { + width: 100%; + height: 100%; + border-radius: 10px 10px 0px 0px; +} + +.card__content { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 15px 15px; + +} + +.card__title { + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 16px; + color: #000000; + padding-bottom: 15px; +} + +.card__text { + font-style: normal; + font-weight: 300; + font-size: 14px; + line-height: 14px; + color: #000000; + padding-bottom: 15px; +} + + +.card__btn { + background: #2797B2; + border: none; + border-radius: 50px; + padding: 5px 10px; + font-style: normal; + font-weight: bold; + font-size: 12px; + line-height: 14px; + color: #FFFFFF; + text-transform: uppercase; +} + + diff --git a/ projects/footer/README.md b/ projects/footer/README.md new file mode 100644 index 0000000..fc5e0f8 --- /dev/null +++ b/ projects/footer/README.md @@ -0,0 +1,3 @@ +Ссылка на задание: https://stepik.org/lesson/503356/step/2?unit=495190 + +После решения задания полученный код файлов .html и .css необходимо перенести в данный репозиторий diff --git a/ projects/footer/index.html b/ projects/footer/index.html new file mode 100644 index 0000000..a234123 --- /dev/null +++ b/ projects/footer/index.html @@ -0,0 +1,43 @@ + + + + + + + Document + + + + + + +
+
+ +
+ + + + + + + + + diff --git a/ projects/footer/style.css b/ projects/footer/style.css new file mode 100644 index 0000000..520b46b --- /dev/null +++ b/ projects/footer/style.css @@ -0,0 +1,95 @@ +*{ + margin: 0; + padding: 0; +} + +html,body{ + font-family: 'Exo 2', sans-serif; + height: 100%; +} + +.wrapper { + display: flex; + flex-direction: column; + min-height: 100%; +} + +.main { + flex: 1 0 auto; +} + +.footer{ + flex: 0 0 auto; + background-color: #05A88D; + padding: 40px; +} + +.footer__left{display: flex; + flex-direction: column; + align-items: flex-start; + gap: 22px; +} + +.logo{font-style: normal; + font-weight: 700; + font-size: 28px; + text-transform: capitalize; + color:#F1E67D; + text-decoration: none; +} + +.text{ + font-style: normal; + font-weight: 300; + font-size: 12px; + line-height: 14px; + color: #FFFFFF; +} + +.footer__right{display: flex; + align-items: flex-end; + flex-direction: column; + gap: 22px; +} +.contact{ + font-weight: 700; + font-size: 14px; + text-transform: uppercase; + color: #FFFFFF; + padding-top: 1px; +} + +.phone{ + font-style: normal; + font-weight: 700; + font-size: 24px; + text-transform: uppercase; + color: #F1E67D; + display: block; + text-decoration: none; +} + +.address{ + font-style: normal; + font-weight: 300; + font-size: 12px; + color: #FFFFFF; + +} + +.footer__top{ display: flex; + justify-content: space-between; + border-bottom: 1px solid #FFFFFF; + align-items: center; + padding-bottom: 16px; +} + +.footer__bottom{ + font-style: normal; + font-weight: 300; + font-size: 15px; + color: #FFFFFF; + padding-top: 36px; + +} + diff --git a/ projects/header/README.md b/ projects/header/README.md new file mode 100644 index 0000000..cdfba2f --- /dev/null +++ b/ projects/header/README.md @@ -0,0 +1,3 @@ +Ссылка на задание: https://stepik.org/lesson/503355/step/2?unit=495189 + +После решения задания полученный код файлов .html и .css необходимо перенести в данный репозиторий diff --git a/ projects/header/index.html b/ projects/header/index.html new file mode 100644 index 0000000..15cec98 --- /dev/null +++ b/ projects/header/index.html @@ -0,0 +1,33 @@ + + + + + + + Document + + + + + + +
+ +
+ + + + + diff --git a/ projects/header/style.css b/ projects/header/style.css new file mode 100644 index 0000000..9425a98 --- /dev/null +++ b/ projects/header/style.css @@ -0,0 +1,81 @@ +*{ + margin: 0; + padding: 0; +} + +body{ + background-color: rgb(200, 200, 200); + font-family: 'Montserrat', sans-serif; +} +.header{ + width: 100%; + box-sizing: border-box; + margin: 0px; +} + +.menu { + background-color: #FFFFFF; + margin: 20px 10px; + height: 100px; + display: flex; + box-shadow:00px 4px 7px 0px #81818140; +} + +.menu__ul { + list-style: none; + display: flex; + align-items: center; +} + +.menu__link{ + text-decoration: none; + font-size: 16px; + font-weight: 300; + color:black; + margin: 20px; +} + +.menu__logo{ + text-decoration: none; + font-weight: 700; + font-size: 24px; + color: #05A88D; + margin: auto; +} + +.menu__signup{ + text-decoration: none; + font-weight: 300; + width: 105px; + height: 45px; + font-size: 16px; + color: #05A88D; + margin: auto; + margin-right: 70px; + border: 1px solid #05A88D; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + margin-left:40px; +} + +.menu__login{ + text-decoration: none; + text-decoration: none; + font-weight: 300; + font-size: 16px; + color: #05A88D; + margin: auto; + margin-right: 70.5px; +} + +.menu__link:hover { + color: #05A88D; +} + +.user{ + margin-right: 50px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/README.md b/README.md index a7a47b9..daa55a9 100644 --- a/README.md +++ b/README.md @@ -1 +1,32 @@ -# web-2 \ No newline at end of file +# Основы HTML & CSS + +Цель работы — знакомство с языками HTML и CSS, а также получение практических навыков применения каскадных таблиц стилей для формирования отображения страниц HTML. + +В рамках данной лабораторной работы предлагается освоить языки HTML и CSS - базовые техноогии для разработки frontend-части веб-приложений. + +## Основные теоретические сведения + +Весь объем необходимых теоретических сведений для данной лабораторной работы содержится в курсе https://stepik.org/course/82108/info в первых 4 разделах: +1. "Описание курса" +2. "Историческая справка" +3. "HTML (HyperText Markup Language)" +4. "CSS (Cascading Style Sheets)" + +## Порядок выполнения + +1. Ознакомьтесь с курсом https://stepik.org/course/82108/info +2. Сделайте форк данного репозитория в GitHub, склонируйте получившуюся копию локально, создайте от мастера ветку дев и переключитесь на нее +2. Выполните задания на разработку header, footer и card сайта. Ссылки на задания содержатся в README-файлах в директории projects +3. Сделайте отчёт и поместите его в директорию docs +4. Зафиксируйте изменения, сделайте коммит и отправьте полученное состояние ветки дев в удаленный репозиторий GitHub +5. Через интерфейс GitHub создайте Pull Request dev --> master +6. Защитите лабораторную работу... + +## Содержание отчета + +1. Титульный лист +2. Цель работы +3. Задание +4. Ход работы со скриншотами и листингами результатов +5. Заключение +6. Список использованных источников \ No newline at end of file diff --git a/docs/otchet.pdf b/docs/otchet.pdf new file mode 100644 index 0000000..bf8294b Binary files /dev/null and b/docs/otchet.pdf differ diff --git a/docs/title_page_template.docx b/docs/title_page_template.docx new file mode 100644 index 0000000..5508e0e Binary files /dev/null and b/docs/title_page_template.docx differ