yulia.polushvayko/website.renderline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавила видео в product.

Browse Source
This commit is contained in:
Yulia Polushvayko
2025-06-06 17:11:04 +03:00
parent 1948683d55
commit 3d94a34c50
5 changed files with 104 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
login.html
View File

@ -68,6 +68,25 @@
</main>
<footer>
<div class="footer" id="footer">
<div class="footer-container">
<p class="footer-copyright">Copyright © Render Line Technologies</p>
<ul class="footer-list">
<li>Legal</li>
<li>Privacy Policy</li>
<li>Cookies</li>
<li>Help</li>
</ul>
</div>
</div>
</footer>
<script src="source/files/gsap-public/minified/gsap.min.js"></script>

2
main.js
View File

@ -42,7 +42,9 @@ gsap.from('.home-l', 1.5, { opacity: 0, y: 300, delay: 0.8 });
if (window.innerWidth <= 766) {
gsap.from('.home-content', 1.5, { opacity: 0, y: -300, delay: 0.8 });
gsap.from('.home-title img', 1.5, { opacity: 0, x: 100, delay: 1.3 });
gsap.from('.product-video', 1.5, { opacity: 0, y: 300, delay: 0.8 });
} else {
gsap.from('.home-content', 1.5, { opacity: 0, x: -300, delay: 0.8 });
gsap.from('.home-title img', 1.5, { opacity: 0, x: 300, delay: 1.2 });
gsap.from('.product-video', 1.5, { opacity: 0, x: 300, delay: 0.8 });
}

49
product.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="source/styles/style.css">
<title>Render Line</title>
<title>Render Line Download</title>
</head>
@ -62,10 +62,57 @@
<main class="main">
<section class="home">
<div class="home-container container">
<div class="home-content">
<h3 class="home-subtitle">
Render Line
</h3>
<h1 class="home-title">
<span>
Download <br>
Create <br>
Get inspired
</span>
<!-- <img src="source/images/Wave.png" alt="" width="100"> -->
</h1>
<p class="home-description">
Develop, Overachieve and Outshine!
</p>
<a href="#" class="dowload-button">
Get Free
</a>
</div>
<div class="product-video">
<video autoplay loop muted height="100%" width="100%" src="source/Video/Video_Engine.mov" class="product-engine" ></video>
</div>
</div>
</section>
<footer>
<div class="footer" id="footer">
<div class="footer-container">
<p class="footer-copyright">Copyright © Render Line Technologies</p>
<ul class="footer-list">
<li>Legal</li>
<li>Privacy Policy</li>
<li>Cookies</li>
<li>Help</li>
</ul>
</div>
</div>
</footer>
</main>
<script src="source/files/gsap-public/minified/gsap.min.js"></script>

BIN
source/Video/Video_Engine.mov Normal file
View File

Binary file not shown.

35
source/styles/style.css
View File

@ -176,6 +176,10 @@ img {
font-weight: var(--font-semi-bold);
}
.nav-button:hover {
background: radial-gradient(#373737 0%, #00000000 100%);
}
.nav-close {
position: absolute;
top: 1rem;
@ -246,6 +250,25 @@ img {
inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
}
.home-button:hover {
background: radial-gradient(#373737 0%, #00000000 100%);
}
.dowload-button {
display: inline-block;
color: var(--title-color);
border: 1px solid var(--text-color);
padding: 1.125rem 3rem;
border-radius: 4rem;
font-weight: var(--font-semi-bold);
box-shadow: 0 8px 32px hsla(0, 0%, 32%, 0.3),
inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
}
.dowload-button:hover {
background: radial-gradient(#373737 0%, #00000000 100%);
}
.home-images {
position: relative;
display: flex;
@ -253,6 +276,17 @@ img {
height: 250px;
}
.product-video {
position: relative;
display: flex;
justify-content: center;
}
.product-engine {
/* width: 256px; */
top: -1rem;
}
.home-images img {
position: absolute;
}
@ -329,6 +363,7 @@ img {
.footer-list {
column-gap: .5rem;
}
}
/* Samsung Z Fold 5 */