Skip to content

6213 УшаковРС Лаб. 4 #417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tlmesnewroman wants to merge 11 commits into from
Closed

6213 УшаковРС Лаб. 4 #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5dbf00e
Выполнил задания для второй лабы
tlmesnewroman Dec 15, 2025
2fce89c
Изменены классы элементов списка, изменен блок container
tlmesnewroman Dec 16, 2025
e21b9e2
Выполнил лабораторную работу 3
tlmesnewroman Dec 16, 2025
f5ba330
Выполнил лабораторную работу 3
tlmesnewroman Dec 16, 2025
e76b9da
Выполнена третья лаба
tlmesnewroman Dec 16, 2025
0159721
Выполнил задания для 4 лабы
tlmesnewroman Dec 16, 2025
f6b7b90
Приведен БЭМ, стили вынесены в отдельный файл
tlmesnewroman Dec 18, 2025
fdc213a
В ветку main добавил все лабы
tlmesnewroman Dec 18, 2025
a5864e2
Добавил все лабы в main ветку
tlmesnewroman Dec 18, 2025
c009338
Merge branch 'main' into lab4-var18
tlmesnewroman Dec 18, 2025
fd0dfee
Разметка переведена на БЭМ, стили вынесены в отдельный файл, все лабы…
tlmesnewroman Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added lab1/assets/.DS_Store
View file
Open in desktop
Binary file not shown.
85 changes: 85 additions & 0 deletions lab1/assets/images/styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
.text-box{
color: #85a1b7;
background-color: #feb431;
max-width: 700px;
}

.text-box__text{
text-align: center;
}

.image-block{
position: relative;
width: 600px;
height: 400px;
}

.image-block__image--back{
width: 100%;
height: 100%;
}

.image-block__image--front{
position: absolute;
width: 100px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.traffic-light{
height: 260;
width: 100px;
background-color: black;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}

.traffic-light__lamp{
width: 70px;
height: 70px;
border-radius: 50%;
margin: 5px;
}

.traffic-light__lamp--red{
background-color: red;
}

.traffic-light__lamp--yellow{
background-color: yellow;
}

.traffic-light__lamp--green{
background-color: green;
}

.maze {
display: inline-grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}

.maze__cell {
background-color: rgb(105, 117, 145);
}

.maze__cell--top {
border-top: 5px solid black;
}

.maze__cell--bottom {
border-bottom: 5px solid black;
}

.maze__cell--left {
border-left: 5px solid black;
}

.maze__cell--right {
border-right: 5px solid black;
}
Binary file added lab1/assets/images/картинка 1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added lab1/assets/images/картинка 2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions lab1/assets/styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
.text-box{
color: #85a1b7;
background-color: #feb431;
max-width: 700px;
}

.text-box__text{
text-align: center;
}

.image-block{
position: relative;
width: 600px;
height: 400px;
}

.image-block__image--back{
width: 100%;
height: 100%;
}

.image-block__image--front{
position: absolute;
width: 100px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.traffic-light{
height: 260;
width: 100px;
background-color: black;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}

.traffic-light__lamp{
width: 70px;
height: 70px;
border-radius: 50%;
margin: 5px;
}

.traffic-light__lamp--red{
background-color: red;
}

.traffic-light__lamp--yellow{
background-color: yellow;
}

.traffic-light__lamp--green{
background-color: green;
}

.maze {
display: inline-grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}

.maze__cell {
background-color: rgb(105, 117, 145);
}

.maze__cell--top {
border-top: 5px solid black;
}

.maze__cell--bottom {
border-bottom: 5px solid black;
}

.maze__cell--left {
border-left: 5px solid black;
}

.maze__cell--right {
border-right: 5px solid black;
}
53 changes: 53 additions & 0 deletions lab1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>page</title>
<link rel="stylesheet" href="assets/styles/style.css">
</head>
<body>
<h1>
Задание 1
</h1>
<div class="text-box">
<div class="text-box__text">
<p>
JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
</p>
</div>
</div>
<h1>
Задание 2
</h1>
<div class="image-block">
<img src="assets/images/картинка 2.jpg" alt="" class="image-block__image--back"/>
<img src="assets/images/картинка 1.jpg" alt="" class="image-block__image--front"/>
</div>
<h1>
Задание 3
</h1>
<div class="traffic-light">
<div class="traffic-light__lamp traffic-light__lamp--red"></div>
<div class="traffic-light__lamp traffic-light__lamp--yellow"></div>
<div class="traffic-light__lamp traffic-light__lamp--green"></div>
</div>
<h1>
Задание 4
</h1>
<div class="maze">
<div class="maze__cell maze__cell--left maze__cell--bottom"></div>
<div class="maze__cell maze__cell--top maze__cell--right"></div>
<div class="maze__cell maze__cell--top maze__cell--right"></div>
<div class="maze__cell maze__cell--left maze__cell--right"></div>
<div class="maze__cell maze__cell--bottom"></div>
<div class="maze__cell maze__cell--right"></div>
<div class="maze__cell maze__cell--left"></div>
<div class="maze__cell maze__cell--bottom"></div>
<div class="maze__cell maze__cell--bottom maze__cell--right"></div>
</div>

</body>

</html>
133 changes: 133 additions & 0 deletions lab2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Лабораторная работа №2</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="exercise">
<div class="music">
<h1 class="music__heading">Популярные музыкальные жанры</h1>
<ul class="music__items">
<li class="music__items__element">Поп-музыка</li>
<li class="music__items__element">Хип-хоп</li>
<li class="music__items__element">Рок</li>
<li class="music__items__element">Электронная музыка</li>
<li class="music__items__element">R&B</li>
</ul>
</div>
</section>

<section class="exercise">
<div class="container">
<div class="container__block block block_first">
<div class="block__title">Parent 1</div>
<div class="block__item">child 1</div>
<div class="block__item">child 2</div>
<div class="block__item">child 3</div>
<div class="block__item">child 4</div>
</div>

<div class="container__block block block_third">
<div class="block__title">Parent 3</div>
<div class="block__item">child 1</div>
<div class="block__item">child 2</div>
</div>

<div class="container__block block block_second">
<div class="block__title">Parent 2</div>
<div class="block__item">child 1</div>
<div class="block__item">child 2</div>
</div>

<div class="container__block block block_third">
<div class="block__title">Parent 3</div>
<div class="block__item">child 1</div>
<div class="block__item">child 2</div>
<div class="block__item block__item_visitor">child 2</div>
</div>
</div>
</section>

<section class="exercise">
<div class="languages">
<h1 class="languages__heading">Языки программирования</h1>
<div class="languages__text">
<p>
Языки программирования — это инструменты, с помощью которых
разработчики создают программное обеспечение, веб-приложения, игры,
алгоритмы и многое другое. Каждый язык имеет свои особенности,
синтаксис и сферу применения. Ниже представлены некоторые из
наиболее известных языков:
</p>

<ul class="languages__list">
<li>
<a href="#" class="languages__link">Python</a> —
высокоуровневый язык с простым синтаксисом, популярный в Data
Science, веб-разработке и автоматизации.
</li>
<li>
<a href="#" class="languages__link">JavaScript</a> —
основной язык для фронтенд-разработки, работает в браузерах и на
сервере (Node.js).
</li>
<li>
<a href="#" class="languages__link">Java</a> —
объектно-ориентированный язык, широко используется в корпоративных
приложениях и Android-разработке.
</li>
<li>
<a href="#" class="languages__link">C++</a> — мощный
язык для системного программирования, игр и высокопроизводительных
приложений.
</li>
<li>
<a href="#" class="languages__link">C#</a> — язык от
Microsoft, применяется в разработке под Windows, играх (Unity) и
веб-приложениях.
</li>
<li>
<a href="#" class="languages__link">Go (Golang)</a> —
созданный Google, язык для высоконагруженных сетевых сервисов и
облачных технологий.
</li>
<li>
<a href="#" class="languages__link">Ruby</a> —
известен благодаря фреймворку Ruby on Rails для веб-разработки.
</li>
<li>
<a href="#" class="languages__link">Swift</a> — язык
Apple для разработки под iOS и macOS.
</li>
<li>
<a href="#" class="languages__link">Kotlin</a> —
современный язык, официально поддерживаемый для
Android-разработки.
</li>
<li>
<a href="#" class="languages__link">Rust</a> — язык
системного программирования с акцентом на безопасность и
производительность.
</li>
</ul>

<p class="languages__footer">
Это лишь малая часть из множества существующих языков, и выбор
зависит от задач, которые нужно решить.
</p>

<div class="languages__logo">
<img
src="https://ssau.ru/i/logo/logo-white-ru.svg"
alt="Самарский Университет"
class="languages__logo-img"
/>
</div>
</div>
</div>
</section>
</body>
</html>
Loading