mirror of
https://github.com/TronoSfera/Homework.git
synced 2026-05-18 10:03:43 +03:00
Merge 562e893c56 into 1e434ad392
This commit is contained in:
TronoSfera
GitHub
commit
bded4d684f
8 changed files with 231 additions and 0 deletions
7
1-html-css/homework1/global.css
Normal file
7
1-html-css/homework1/global.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
BIN
1-html-css/homework1/img/header.mov
Normal file
BIN
1-html-css/homework1/img/header.mov
Normal file
Binary file not shown.
BIN
1-html-css/homework1/img/html5.png
Normal file
BIN
1-html-css/homework1/img/html5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
1-html-css/homework1/img/js.jpg
Normal file
BIN
1-html-css/homework1/img/js.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
1-html-css/homework1/img/js.png
Normal file
BIN
1-html-css/homework1/img/js.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
1-html-css/homework1/img/ts.png
Normal file
BIN
1-html-css/homework1/img/ts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
87
1-html-css/homework1/index.html
Normal file
87
1-html-css/homework1/index.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="global.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Code lessons</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<ul class="m_menu">
|
||||
<li>
|
||||
<a href="#" class="m_menu_link">Главная</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="m_menu_link">Отзывы</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="m_menu_link">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="Header"><a href="#">Отзывы</a></div>
|
||||
<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>
|
||||
<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">
|
||||
<span class="s_project">Лендинг</span>
|
||||
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, natus aut soluta dicta rem iste officia laborum fugit tenetur, esse, nulla sed repellat eaque explicabo possimus. Nam incidunt quod nisi.</p>
|
||||
</div>
|
||||
<div class="Project">
|
||||
<span class="s_project">Визитка</span>
|
||||
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci consectetur cumque optio! Sequi laborum dolores, officia quaerat odit at pariatur! Iste eum sed in accusamus, nesciunt saepe ex. Dicta, velit!</p>
|
||||
</div>
|
||||
<div class="Project">
|
||||
<span class="s_project">Учетная книга заказов</span>
|
||||
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates amet esse neque eveniet eligendi at alias temporibus! Sapiente officiis reprehenderit, deleniti magni mollitia, quaerat perferendis tempora in quis nesciunt alias?</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>First HTML + CSS</h2>
|
||||
<p>
|
||||
<span class="bold">HyperText Markup Language</span> or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as
|
||||
<span class="bold">Cascading Style Sheets (CSS)</span> and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the
|
||||
structure of a web page semantically and originally included cues for the appearance of the document. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded
|
||||
into the rendered page.
|
||||
</p>
|
||||
<hr />
|
||||
<h2>Second JavaScript</h2>
|
||||
<p>
|
||||
<span class="bold">JavaScript</span>, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage
|
||||
behavior, often incorporating third-party libraries. <span class="italic">All major web browsers</span> have a dedicated JavaScript engine to execute the code on users' devices. JavaScript is a high-level, often just-in-time compiled language
|
||||
that conforms to the ECMAScript
|
||||
</p>
|
||||
<hr />
|
||||
<h2>Third TypeScript</h2>
|
||||
<p>
|
||||
<span class="bold">TypeScript</span> adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript code converts to JavaScript, <span class="italic">which runs anywhere</span> JavaScript runs: In a browser, on Node.js or Deno and in your apps. TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
|
||||
</p>
|
||||
<hr />
|
||||
<div>
|
||||
<p class="footer">© All rights reserved. 2023</p>
|
||||
</div>
|
||||
<div class="footer_gradient">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
137
1-html-css/homework1/style.css
Normal file
137
1-html-css/homework1/style.css
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: blueviolet;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:focus {
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
.m_menu li {
|
||||
display: inline;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
white-space: nowrap;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.m_menu a:hover {
|
||||
text-decoration: none;
|
||||
color: rgb(110, 145, 57);
|
||||
}
|
||||
|
||||
.Project {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
border: blue solid 1px;
|
||||
}
|
||||
|
||||
.s_project {
|
||||
margin-left: 5px;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue