Skip to content

6212 МиндубаевРН Лаб. 4 #431

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
ruslan0063 wants to merge 3 commits into from
Closed

6212 МиндубаевРН Лаб. 4 #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ee71ec
Create readme.md
ruslan0063 Dec 18, 2025
477cc79
сделал калькулятор
ruslan0063 Dec 18, 2025
2791424
добавил в резюме раздел "Мои проекты"
ruslan0063 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 lab4/164648-kot-kotenok-privlekatelnost-golova-glaz-3840x2160.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 lab4/avatarka.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 lab4/cd16121609a79d95dffbfa28a326331e.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.
67 changes: 67 additions & 0 deletions lab4/lab1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
.text_task {
background-color: #FEB431;
text-align: center;
color: #85A1B7;
}

.cats_task {
position: relative;
}

.cats_task_second {
position: absolute;
top: 120px;
}

.trafficlight_task {
background-color: #49433d;
width: 100px;
}

.traficlight_size {
width: 100px;
height: 100px;
border-radius: 100px;
}

.trafficlight_red {
background-color: red;
}

.trafficlight_yellow {
background-color: yellow;
}

.trafficlight_green {
background-color: green;
}

.labyrinth {
display: grid;
grid-template-columns: repeat(3, 120px);
grid-template-rows: repeat(3, 120px);
width: 360px;
}

.labyrinth_cell {
border: 4px solid black;
box-sizing: border-box;
width: 120px;
height: 120px;
}

.labyrinth_cell_no-left {
border-left: none;
}

.labyrinth_cell_no-right {
border-right: none;
}

.labyrinth_cell_no-top {
border-top: none;
}

.labyrinth_cell_no-bottom {
border-bottom: none;
}
60 changes: 60 additions & 0 deletions lab4/lab1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lab1</title>
<link rel="stylesheet" href="lab1.css" />
</head>
<body>
<h1>Задание №1</h1>
<div class="text_task">
<text
>JavaScript (аббр. JS) — мультипарадигменный язык программирования.
Поддерживает объектно-ориентированный, императивный и функциональный
стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
JavaScript обычно используется как встраиваемый язык для программного
доступа к объектам приложений. Наиболее широкое применение находит в
браузерах как язык сценариев для придания интерактивности
веб-страницам.</text
>
</div>
<h1>Задание №2</h1>
<div class="cats_task">
<div class="cats_task_first">
<img
src="cd16121609a79d95dffbfa28a326331e.jpg"
width="300"
height="400"
/>
<div class="cats_task_second">
<img
src="164648-kot-kotenok-privlekatelnost-golova-glaz-3840x2160.jpg"
width="400"
height="300"
/>
</div>
</div>
</div>
<h1>Задание №3</h1>
<div class="trafficlight_task">
<div class="traficlight_size trafficlight_red"></div>
<div class="traficlight_size trafficlight_yellow"></div>
<div class="traficlight_size trafficlight_green"></div>
</div>
<h1>Задание №4</h1>
<div class="labyrinth_task">
<div class="labyrinth">
<div class="labyrinth_cell labyrinth_cell_no-left labyrinth_cell_no-bottom labyrinth_cell_no-right"></div>
<div class="labyrinth_cell labyrinth_cell_no-bottom labyrinth_cell_no-right labyrinth_cell_no-left"></div>
<div class="labyrinth_cell labyrinth_cell_no-bottom labyrinth_cell_no-left"></div>
<div class="labyrinth_cell labyrinth_cell_no-top labyrinth_cell_no-bottom labyrinth_cell_no-right"></div>
<div class="labyrinth_cell labyrinth_cell_no-right labyrinth_cell_no-bottom"></div>
<div class="labyrinth_cell labyrinth_cell_no-left labyrinth_cell_no-top labyrinth_cell_no-bottom"></div>
<div class="labyrinth_cell labyrinth_cell_no-top labyrinth_cell_no-right"></div>
<div class="labyrinth_cell labyrinth_cell_no-left labyrinth_cell_no-right"></div>
<div class="labyrinth_cell labyrinth_cell_no-left labyrinth_cell_no-bottom"></div>
</div>
</div>
</body>
</html>
97 changes: 97 additions & 0 deletions lab4/lab2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
.main-container {
text-align: center;
}

.unordered-list {
list-style-type: none;
padding: 0;
}

.unordered-list li {
padding: 8px 12px;
margin: 4px 0;
transition: color 1.2s ease, background-color 1.2s ease;
}

.unordered-list li:hover {
color: #f99665;
background-color: #f0f0f0;
}

.parent_2 {
color: #f4bc92;
}

.parent_1 .parent__child {
color: red;
width: 50px;
}

.parent_2 .parent__child {
color: #b4005a;
border-style: dotted;
border-color: #f4bc92;
width: 50px;
}

.parent_2 ~ .parent_3,
.parent_2 ~ .parent_3 .parent__child {
color: green;
}

.parent_2 ~ .parent_3 .parent__child_guest-from-2 {
color: purple;
}

.text {
width: 700px;
text-align: left;
}

.programming-language {
text-decoration: none;
color: black;
padding-right: 5px;
font-weight: bold;
}

.languages-list li {
text-align: left;
}

.languages-list li::before{
content: "🌐";
}

.text::after{
content: "";
display: block;
width: 260px;
height: 120px;
margin: 30px auto;
background-image: url('https://ssau.ru/i/logo/logo-white-ru.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #2780e3;
padding: 20px;
border-radius: 5px;
}

.task {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}

.parent {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
}

.parent__child {
margin: 5px 0;
padding: 5px;
}
120 changes: 120 additions & 0 deletions lab4/lab2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lab2</title>
<link rel="stylesheet" href="lab2.css" />
</head>
<body>
<header class="main-container">
<h1>Лабораторная работа №2</h1>
<h2>Миндубаев Руслан 6212</h2>
</header>

<main>
<article class="task task_1">
<h1>Задание 1</h1>
<h4>Популярные музыкальные жанры:</h4>
<ul class="unordered-list">
<li>Поп-музыка</li>
<li>Хип-хоп</li>
<li>Рок</li>
<li>Электронная музыка</li>
<li>R&B</li>
</ul>
</article>

<article class="task task_2">
<h1>Задание 2</h1>
<div class="parent parent_1">
<h3>Parent 1</h3>
<div class="parent__child">child 1</div>
<div class="parent__child">child 2</div>
<div class="parent__child">child 3</div>
<div class="parent__child">child 4</div>
</div>
<div class="parent parent_3">
<h3>Parent 3</h3>
<div class="parent__child">child 1</div>
<div class="parent__child">child 2</div>
</div>
<div class="parent parent_2">
<h3>Parent 2</h3>
<div class="parent__child">child 1</div>
<div class="parent__child">child 2</div>
</div>
<div class="parent parent_3">
<h3>Parent 3</h3>
<div class="parent__child">child 1</div>
<div class="parent__child">child 2</div>
<div class="parent__child parent__child_guest-from-2">child 2</div>
</div>
</article>

<article class="task task_3">
<h1>Задание 3</h1>
<div class="text">
Языки программирования — это инструменты, с помощью которых
разработчики создают программное обеспечение, веб-приложения, игры,
алгоритмы и многое другое. Каждый язык имеет свои особенности,
синтаксис и сферу применения. Ниже представлены некоторые из
наиболее известных языков:

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

Это лишь малая часть из множества существующих языков, и выбор зависит
от задач, которые нужно решить.
</div>
</article>
</main>
</body>
</html>
Loading