tronosfera/Homework
1
0
Fork 0
mirror of https://github.com/TronoSfera/Homework.git synced 2026-05-18 10:03:43 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

home work 3

Browse source
This commit is contained in:
Artem 2023-03-14 20:47:00 +03:00
parent e9924347a3
commit 0847ee1f2d
8 changed files with 126 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

BIN
1-html-css/homework1/img/header.mov Normal file
View file

Binary file not shown.

BIN
1-html-css/homework1/img/html5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
1-html-css/homework1/img/js.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
1-html-css/homework1/img/js.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
1-html-css/homework1/img/ts.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

24
1-html-css/homework1/index.html
View file

@ -11,6 +11,7 @@
</head>
<body>
<div>
<ul class="m_menu">
<li>
<a href="#" class="m_menu_link">Главная</a>
@ -22,12 +23,25 @@
<a href="#" class="m_menu_link">Контакты</a>
</li>
</ul>
</div>
<div class="Header"><a href="#">Отзывы</a></div>
<h1>Code Lessons</h1>
<section class="video-container">
<video autoplay loop muted>
<source src="img/header.mov" type="video/mp4">
</video>
<div class="callout">
<div class="desc">Here is what google skills look like</div>
</section>
<div class="div_header">
<h1 class="header_h1">Code Lessons</h1>
</div>
<ul>
<li>HTML + CSS</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>
<a href="#"><img class=icon src="./img/html5.png" alt="HTML+CSS"></a>HTML + CSS</li>
<li>
<a href="#"><img class=icon src="./img/js.jpg" alt="HTML+CSS"></a>JavaScript</li>
<li>
<a href="#"><img class=icon src="./img/ts.png" alt="HTML+CSS"></a>TypeScript</li>
</ul>
<div>
<div class="Project">
@ -66,6 +80,8 @@
<div>
<p class="footer">&copy; All rights reserved. 2023</p>
</div>
<div class="footer_gradient">
</div>
</body>
</html>

80
1-html-css/homework1/style.css
View file

@ -1,8 +1,29 @@
.div_header {
background-image: url(https://deadsign.ru/images/articles/code/code-11.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: 0% 40%;
height: 280px;
}
.header_h1 {
color: bisque;
text-align: center;
padding-left: 50%;
padding-top: 12%;
}
.footer {
text-align: center;
color: #777;
}
.footer-gradient {
background: rgb(117, 112, 228);
background: linear-gradient(90deg, rgba(117, 112, 228, 1) 0%, rgba(135, 135, 247, 1) 21%, rgba(0, 212, 255, 1) 97%);
height: 20px;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
@ -55,3 +76,62 @@ a:focus {
margin-right: 5px;
font-weight: 600;
}
.icon {
width: 20px;
border-radius: 50%;
}
.icon:hover {
opacity: 0.7;
}
.video-container {
height: 100px;
width: 100%;
max-width: 2000px;
position: relative;
overflow: hidden;
}
video {
object-fit: cover;
position: absolute;
height: 100px;
width: 100%;
top: 0;
left: 0;
}
.video-container:after {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(black, .2);
z-index: 1;
}
.desc {
font-family: Raleway;
font-weight: 400;
color: coral;
font-size: 18px;
}
.callout {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
text-align: center;
position: relative;
z-index: 10;
width: 70%;
margin: auto;
}