Skip to content

6211 БатраковВА Лаб. 4 #368

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
Trig9ger wants to merge 2 commits into from
Closed

6211 БатраковВА Лаб. 4 #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1429ef
все 4 лабораторных работы
Trig9ger Dec 13, 2025
1edc44c
изменил файл скрипта
Trig9ger Dec 19, 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
94 changes: 94 additions & 0 deletions web/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Моя лаборатоная работа №3</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="papersheet">
<div class="papersheet__header">
<div class="papersheet__header__text">
<header>
Документ
<div class="blank">Самарского университета</div>
</header>
</div>
<div class="papersheet__header__stamp">
<img src="topsecret.png" alt="stamp" />
</div>
</div>

<div class="papersheet__first_part">
<div class="papersheet__firts_part__info">
<h2>ФИО: Батраков Владислав Александрович.</h2>
<h2>
Дата рождения:
<div class="blank">16.07</div>
.2006.
</h2>
<h2>
Увлечения: Танцы, занятия спортом, програмирование, решение
головоломок.
</h2>
<h2>Рост и вес: 176 см и 89 кг</h2>
<h2>
Контактная информация:
<div class="blank">https://github.com/Trig9ger</div>
</h2>
</div>
<div class="papersheet__first_part__photo">
<img src="me.png" alt="" />
</div>
</div>

<div class="papersheet__second_part">
<h1>Hard-slills:</h1>
<h1>Soft-skills:</h1>
<ul class="papersheet__list">
<li class="papersheet__list-item">C++</li>
<li class="papersheet__list-item">HTML/CSS</li>
<li class="papersheet__list-item">Python</li>
<li class="papersheet__list-item">
Базовые знания в применении машинного обучения
</li>
</ul>

<ul class="papersheet__list">
<li class="papersheet__list-item">
Владение английским языком на уровне С1
</li>
<li class="papersheet__list-item">
Высокий уровень коммуникативных навыков
</li>
<li class="papersheet__list-item">
Способность быстро усваивать и применять новые знания и навыки
</li>
<li class="papersheet__list-item">
Готовность делиться знаниями, способствуя развитию общего
профессионального уровня команды
</li>
</ul>
</div>

<div class="papersheet__about">
<h1>Известная информация</h1>
<ul class="papersheet__list">
<li class="papersheet__list-item">
Занял первое место на олимпиаде по английскому языку
</li>
<li class="papersheet__list-item">Получил золотую медаль ГТО</li>
<li class="papersheet__list-item">
<a href="webproj1/main.html">1 лаборатоная работа</a>
</li>
<li class="papersheet__list-item">
<a href="webproj2/main.html">2 лабораторная работа</a>
</li>
<li class="papersheet__list-item">
<a href="webproj4/main.html">4 лабораторная работа</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Binary file added web/me.png
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.
195 changes: 195 additions & 0 deletions web/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
:root {
--main-color: #1d3557;
--secondary-color: #dbd9af;
--paper-width: 700px;
--paper-height: 987px;
}

html {
background-color: var(--main-color);
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
}

.blank {
background-color: black;
position: relative;
display: inline-block;
transition: background-color 0.5s ease;
}
.blank:hover {
background-color: var(--secondary-color);
}

header {
font-size: 20px;
}

.papersheet {
background-color: var(--secondary-color);
width: var(--paper-width);
height: var(--paper-height);
padding: 40px 50px;
display: grid;
grid-template-rows: 10% 30% 30% 22%;
gap: 2%;
}

.papersheet__header {
grid-row: 1;
display: grid;
grid-template-rows: auto;
grid-template-columns: 35% 65%;
}

.papersheet__header__text {
grid-row: 1;
grid-column: 1;
}
.papersheet__header__stamp {
grid-row: 1;
grid-column: 2;
display: flex;
justify-content: right;
padding-bottom: 30px;
}
.papersheet__header__stamp > img {
width: auto;
height: auto;
transform: rotate(-10deg);
}

.papersheet__first_part {
border: 2px solid black;
grid-row: 2;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.papersheet__firts_part__info {
grid-column: 1;
border-right: 1px solid black;
}
.papersheet__first_part__photo {
grid-column: 2;
padding: 5%;
display: flex;
justify-content: center;
}
.papersheet__first_part__photo > img {
width: 60%;
height: auto;
transform: rotate(8deg);
}
h1 {
margin: 0;
padding: 5px;
font-weight: lighter;
font-size: 20px;
border: 1px solid black;
}
h2 {
padding: 5px;
font-weight: lighter;
font-size: 15px;
border-bottom: 1px dashed black;
}

.papersheet__list {
margin: 0;
padding-left: 15px;
font-size: 15px;
font-weight: lighter;
border-right: 1px solid black;
}

.papersheet__list-item {
margin-bottom: 5px;
padding: 5px;
border-bottom: 1px dashed black;
}

.papersheet__second_part {
border: 2px solid black;
grid-row: 3;
display: grid;
grid-template-rows: 15% auto;
grid-template-columns: 1fr 1fr;
}


.papersheet__about {
grid-row: 4;
border: 2px solid black;
}

@media screen and (max-width: 768px) {
.papersheet {
padding: 30px 40px;
margin: 20px;
grid-template-rows: auto;
gap: 20px;
}

/* Упрощаем первую часть на узких экранах */
.papersheet__first_part {
grid-template-columns: 1fr; /* ← Одноколоночный макет */
}

.papersheet__firts_part__info {
grid-column: 1;
border-right: none; /* Убираем вертикальную границу */
border-bottom: 1px solid black; /* Добавляем горизонтальную */
}

.papersheet__first_part__photo {
grid-column: 1;
grid-row: 2; /* Фото теперь под текстом */
padding: 20px 5%;
}

.papersheet__first_part__photo > img {
width: 40%; /* Уменьшаем фото для мобильных */
}

.papersheet__header {
grid-template-columns: 1fr; /* Одноколоночный заголовок */
}

.papersheet__header__stamp {
grid-column: 1;
grid-row: 2;
justify-content: center; /* Центрируем штамп */
padding-bottom: 15px;
}
}

@media screen and (max-width: 480px) {
.papersheet {
padding: 20px 25px;
margin: 10px;
gap: 15px;
}

/* Уменьшаем размеры текста для маленьких экранов */
h1 {
font-size: 18px;
padding: 8px 5px;
}

h2 {
font-size: 14px;
}

ul, li {
font-size: 14px;
}

.papersheet__header {
font-size: 16px;
}

.papersheet__first_part__photo > img {
width: 60%; /* Возвращаем нормальный размер фото */
}
}
Binary file added web/topsecret.png
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.
50 changes: 50 additions & 0 deletions web/webproj1/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title> Моя лаборатоная работа №1 </title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header> <h1> Батраков Владислав, группа 6211 </h1> </header>

<h2> Задание №1 </h2>
<div class="text">
JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный,
императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.
Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
</div>

<div class="mega">

<h2 class="txtblock txtblock__left"> Задание №2 </h2>
<h2 class="txtblock txtblock__middle"> Задание №3 </h2>
<h2 class="txtblock txtblock__right"> Задание №4 </h2>


<img class="cat1" src="https://img2.akspic.ru/crops/8/4/6/4/6/164648/164648-kot-kotenok-privlekatelnost-golova-glaz-3840x2160.jpg">
<img class="cat2" src="https://i.pinimg.com/236x/cd/16/12/cd16121609a79d95dffbfa28a326331e.jpg">


<div class="box">
<div class="box__block box__block__red"></div>
<div class="box__block box__block__yellow"></div>
<div class="box__block box__block__green"></div>
</div>

<div class="maze">
<div class="maze__block maze__block__left maze__block__top start"></div>
<div class="maze__block maze__block__vmiddle maze__block__top"></div>
<div class="maze__block maze__block__right maze__block__top"></div>
<div class="maze__block maze__block__left maze__block__hmiddle border__top"></div>
<div class="maze__block maze__block__vmiddle maze__block__hmiddle border__bottom"></div>
<div class="maze__block maze__block__right maze__block__hmiddle border__top"></div>
<div class="maze__block maze__block__left maze__block__bottom"></div>
<div class="maze__block maze__block__vmiddle maze__block__bottom border__right"></div>
<div class="maze__block maze__block__right maze__block__bottom finish"></div>
</div>

</div>
</body>
</html>
Loading