Skip to content

6213 ШапиловНМ Лаб. 3 #379

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

Open
shplvomg wants to merge 1 commit into
base: main
Choose a base branch
from
Open

6213 ШапиловНМ Лаб. 3 #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 lab3/imgs/avatar.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.
Binary file added lab3/imgs/github-mark.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.
123 changes: 123 additions & 0 deletions lab3/lab3.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
body {
margin: 0 auto;
color: #ffffff;
}

.section {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
min-height: 100%;
padding: 30px 0 30px 0;
background: linear-gradient(to bottom, #2e3c57, #0d1529);
}

.section__avatar {
height: 250px;
width: 250px;
border-radius: 50%;
content: url(./imgs/avatar.png);
object-fit: cover;
background: #ffffff;
box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}

.section__name {
font-size: 50px;
font-weight: 900;
margin-bottom: 5px;
}

.section__date {
color: #d8d8d8;
font-size: 40px;
font-weight: 500;
margin-bottom: 30px;
}

.section__about-title {
color: #ffffff;
font-size: 50px;
font-weight: 900;
}

.section__about-text {
color: #d8d8d8;
font-size: 40px;
font-weight: 500;
margin-bottom: 30px;
}

.section__socials-title {
color: #ffffff;
font-size: 50px;
font-weight: 900;
margin-bottom: 30px;
}

.section__socials-objs {
display: flex;
background: #ffffff;
height: 150px;
width: 150px;
margin-bottom: 50px;
border-radius: 50%;
justify-content: center;
align-items: center;
box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2);
}

.section__socials-objs img {
height: 80px;
}

.section__hobies {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}

.section__hobbies__title {
color: #eef5ff;
font-size: 40px;
font-weight: 900;
margin-bottom: 30px;
padding-top: 20px;
}

.section__hobbies__objs {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
row-gap: 20px;
column-gap: 100px;
width: 100%;
justify-items: center;
}

.section__hobbies__objs__el {
display: flex;
align-items: center;
flex-direction: column;
gap: 5px;
height: 140px;
width: 270px;
border-radius: 30px;
box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2);
background: #fff;
padding-top: 10px;
}

.section__hobbies__objs__el img {
height: 100px;
width: 100px;
}

.section__hobbies__objs__el span {
color: #000000;
font-size: 20px;
font-weight: 900;
}
62 changes: 62 additions & 0 deletions lab3/lab3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab3</title>
<link rel="stylesheet" href="lab3.css">
</head>
<body>
<div class="section">
<div class="section__avatar"></div>
<span class="section__name">Шапилов Николай Михайлович</span>
<span class="section__date">01.02.2007</span>
<span class="section__about-title">Обо мне:</span>
<span class="section__about-text">Учеба, баскетбол, живу в Самарской области</span>
<span class="section__socials-title">GitHub:</span>
<a href="https://github.com/shplvomg" target="_blank" class="section__socials-objs">
<div><img src="./imgs/github-mark.png" alt=""></div>
</a>
<div class="section__hobies">
<span class="section__hobbies__title">Увлечения:</span>
<div class="section__hobbies__objs">
<div class="section__hobbies__objs__el">
<img src="./imgs/basketball.png" alt="">
Copy link
Collaborator

@AvtoBBus AvtoBBus Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Картинок нет

Comment on lines +20 to +24
Copy link
Collaborator

@AvtoBBus AvtoBBus Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Здесь и далее такое же есть

section__hobies
|
|__ hobbies__title
|
|__ hobbies__objs
     |
     |__ objs__el
     |
     |__ objs__el
     |
     |__ objs__el

<span>Баскетбол</span>
</div>
<div class="section__hobbies__objs__el">
<img src="./imgs/camera.png" alt="">
<span>Фотография</span>
</div>
<div class="section__hobbies__objs__el">
<img src="./imgs/gamepad.png" alt="">
<span>Игры</span>
</div>
<div class="section__hobbies__objs__el">
<img src="./imgs/programming.png" alt="">
<span>Программировние</span>
</div>
</div>
<span class="section__hobbies__title">Soft/hard скилы:</span>
<div class="section__hobbies__objs">
<div class="section__hobbies__objs__el">
<img src="./imgs/team.png" alt="">
<span>Работа в команде</span>
</div>
<div class="section__hobbies__objs__el">
<img src="./imgs/tasks.png" alt="">
<span>Ответственность</span>
</div>
<div class="section__hobbies__objs__el">
<img src="./imgs/video.png" alt="">
<span>Монтаж видео</span>
</div>
<div class="section__hobbies__objs__el">
<img src="./imgs/web.png" alt="">
<span>Web-верстка</span>
</div>
</div>
</div>
</div>
</body>
</html>