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

Добавила страницу.

Browse Source
This commit is contained in:
Yulia Polushvayko
2025-06-12 22:14:04 +03:00
parent d4a78b673e
commit 880755b55d
23 changed files with 1266 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
index.html
View File

@ -9,6 +9,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css">
<link rel="stylesheet" href="source/styles/swiper-bundle.min.css">
<link rel="stylesheet" href="source/styles/style.css">
<title>Render Line</title>
@ -26,34 +28,43 @@
<div class="nav-menu" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
<a href="#home" class="nav-link active-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Store</a>
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Documentation</a>
<a href="#plans" class="nav-link">Plans</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacts</a>
<a href="#contact" class="nav-link">Contacts</a>
</li>
<li class="nav-item">
<a href="#resources" class="nav-link">Resources</a>
</li>
<li class="nav-item">
<a href="#documentation" class="nav-link">Documentation</a>
</li>
</ul>
<a href="login.html" class="nav-button">Login</a>
<!-- Close button -->
<div class="nav-close" id="nav-close">
<i class="ri-close-line"></i>
<img src="source/images/Close_Button.png" alt="">
</div>
</div>
<!-- Toggle button -->
<div class="nav-toggle" id="nav-toggle">
<i class="ri-menu-line"></i>
<img src="source/images/Icon_Burger_Button.png" alt="">
</div>
</nav>
@ -61,7 +72,7 @@
<main class="main">
<section class="home">
<section class="home section" id="home">
<div class="home-container container">
<div class="home-content">
<h3 class="home-subtitle">
@ -81,7 +92,7 @@
Develop, Overachieve and Outshine!
</p>
<a href="product.html" class="home-button">
<a href="#plans" class="home-button">
Get Started
</a>
</div>
@ -97,31 +108,338 @@
</section>
<section class="about section" id="about">
<div class="about-container container grid">
<div class="about-data">
<h2 class="section-title about-title">
Create Unique Games <br>
with Our Engine!
</h2>
<p class="about-description">
Welcome to the world of unlimited possibilities! Our game engine is the key to creating unique
and exciting games that win the hearts of players. We developed it with both beginners and
experienced developers in mind, so that everyone can realize their wildest ideas.
</p>
<a href="#plans" class="button button-ghost">
Choose a Plan
</a>
</div>
<div class="about-swiper swiper">
<div class="swiper-wrapper">
<article class="about-article swiper-slide">
<img src="source/images/ColorPicker.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Console.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Hierarchy.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Object.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Project.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Animation.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Editor.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Game.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Intrerface_Editor.png" alt="image" class="about-img">
</article>
<article class="about-article swiper-slide">
<img src="source/images/Intrerface_Game.png" alt="image" class="about-img">
</article>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</section>
<section class="plans section" id="plans">
<h2 class="section-title">
Choose Your Plan <br>
for Download
</h2>
<div class="card-container card container grid">
<!-- Card 1 -->
<article class="card-content grid">
<div class="card-pricing">
<div class="card-pricing-number">
<span class="card-pricing-symbol">$</span>0
</div>
<span class="card-pricing-month">/month</span>
</div>
<header class="card-header">
<div class="card-header-circle grid">
<img src="source/images/Logo512х512.png" width="30px" class="card-heaader-img">
</div>
<span class="card-header-subtitle">Individual</span>
<h1 class="card-header-title">Basic</h1>
</header>
<ul class="card-list grid">
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Free access</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Basic futures</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Learning materials</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Updates</p>
</li>
</ul>
<a href="#getfree" class="card-button">
Get Free
</a>
</article>
<!-- Card 2 -->
<article class="card-content grid">
<div class="card-pricing">
<div class="card-pricing-number">
<span class="card-pricing-symbol">$</span>350
</div>
<span class="card-pricing-month">/month</span>
</div>
<header class="card-header">
<div class="card-header-circle grid">
<img src="source/images/Logo512х512.png" width="30px" class="card-heaader-img">
</div>
<span class="card-header-subtitle">Commercial</span>
<h1 class="card-header-title">Professional</h1>
</header>
<ul class="card-list grid">
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Advanced features</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Team collaboration</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Technical support</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">API integration</p>
</li>
</ul>
<a href="#contact" class="card-button">
Contact Us
</a>
</article>
<!-- Card 3 -->
<article class="card-content grid">
<div class="card-pricing">
<div class="card-pricing-number">
<span class="card-pricing-symbol">$</span>625
</div>
<span class="card-pricing-month">/month</span>
</div>
<header class="card-header">
<div class="card-header-circle grid">
<img src="source/images/Logo512х512.png" width="30px" class="card-heaader-img">
</div>
<span class="card-header-subtitle">Commercial</span>
<h1 class="card-header-title">Enterprise</h1>
</header>
<ul class="card-list grid">
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Full access</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Personalized support</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Early access to new features</p>
</li>
<li class="card-list-item">
<img class="card-list-icon" src="source/images/Check.png" width="16px" alt="check">
<p class="card-list-description">Events and training</p>
</li>
</ul>
<a href="#contact" class="card-button">
Contact Us
</a>
</article>
</div>
</div>
</div>
</section>
<section class="contact section" id="contact">
<div class="contact-container container grid">
<div class="contact-content">
<h2 class="section-title contact-title">
Contact Us <br>
for Plans or Support
</h2>
<form action="" class="contact-form grid">
<div class="contact-inputs grid">
<div class="contact-box">
<label for="name" class="contact-label">Name</label>
<input type="text" id="name" placeholder="Enter your name" class="contact-input">
</div>
<div class="contact-plan">
<label for="plan-select" class="contact-label">Choose a plan</label>
<select class="select-plan" id="plan-select" class="contact-input">
<option class="option-plan" value="plan-none">None</option>
<option class="option-plan" value="plan-basic">Basic</option>
<option class="option-plan" value="plan-professional">Professional</option>
<option class="option-plan" value="plan-enterprise">Enterprise</option>
</select>
</div>
<div class="contact-box">
<label for="email" class="contact-label">Email</label>
<input type="email" id="email" placeholder="Enter email" class="contact-input">
</div>
</div>
<div class="contact-button-container container grif">
<a href="#submit" class="button contact-button">
Submit
</a>
</div>
</form>
</div>
</div>
</section>
<footer>
<div class="footer" id="footer">
<div class="footer-container">
<div class="footer-container conatainer grid">
<p class="footer-copyright">Copyright © Render Line Technologies</p>
<a href="#" class="footer-logo">
Render Line
</a>
<ul class="footer-list">
<ul class="footer-links">
<li>Legal</li>
<li>Privacy Policy</li>
<li>Cookies</li>
<li>Help</li>
<li><a href="#privacy" class="footer-link">Privacy & Legal</a></li>
<li><a href="#contacts" class="footer-link">Contact</a></li>
<li><a href="#locations" class="footer-link">Locations</a></li>
<li><a href="#help" class="footer-link">Help</a></li>
</ul>
<div class="footer-social">
<a href="https://vk.com" target="_blank" class="footer-social-link">
<i class="ri-vk-fill"></i>
</a>
<a href="https://instagram.com/" target="_blank" class="footer-social-link">
<i class="ri-instagram-fill"></i>
</a>
<a href="https://web.telegram.org/a/" target="_blank" class="footer-social-link">
<i class="ri-telegram-fill"></i>
</a>
</div>
</div>
</div>
<span class="footer-copy">
Copyright © 2025 Render Line. All rights reserved
</span>
</footer>
<a href="#" class="scroll-up" id="scroll-up">
<img src="source/images/Scroll_Up.png" width="75px" alt="">
</a>
</main>
<script src="source/files/gsap-public/minified/gsap.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="main.js"></script>
<script src="js/main.js"></script>
</body>
</html>

122
js/main.js Normal file
View File

@ -0,0 +1,122 @@
// Show menu
const navMenu = document.getElementById("nav-menu");
const navToggle = document.getElementById("nav-toggle");
const navClose = document.getElementById("nav-close");
// Validate if const exists
if (navToggle) {
navToggle.addEventListener("click", () => {
navMenu.classList.add("show-menu");
});
}
//Menu hidden
// alidate if const exists
if (navClose) {
navClose.addEventListener("click", () => {
navMenu.classList.remove("show-menu");
});
}
// Remove menu mobile
const navLink = document.querySelectorAll(".nav-link");
const linkAction = () => {
const navMenu = document.getElementById("nav-menu");
navMenu.classList.remove("show-menu");
};
navLink.forEach((n) => n.addEventListener("click", linkAction));
// GSAP animation
gsap.from('.home-frame', 1.5, { opacity: 0, y: -300, delay: 0.2 });
gsap.from('.home-sphere', 1.5, { opacity: 0, x: -300, delay: 0.3 });
gsap.from('.home-triangle', 1.5, { opacity: 0, x: 300, delay: 0.6 });
gsap.from('.home-r', 1.5, { opacity: 0, y: -300, delay: 0.8 });
gsap.from('.home-l', 1.5, { opacity: 0, y: 300, delay: 0.8 });
// gsap.from('.about-title', 1.5, { opacity: 0, x: -100, delay: 1.3 });
gsap.from('.about-description', 1.5, { opacity: 0, x: -100, delay: 1.5 });
gsap.from('.button-ghost', 1.5, { opacity: 0, x: -100, delay: 1.6 });
gsap.from('.swiper', 1.5, { opacity: 0, x: 100, delay: 1.5 });
gsap.from('.section-title', 1.5, { opacity: 0, x: -100, delay: 1.5 });
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 });
} 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 });
}
const swiperAbout = new Swiper('.about-swiper', {
spaceBetween: 30,
centeredSlides: true,
loop: true,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
clickable: true
}
});
const bgHeader = () => {
const header = document.getElementById('header')
if (window.scrollY >= 50) {
header.classList.add('bg-header');
} else {
header.classList.remove('bg-header');
}
};
window.addEventListener('scroll', bgHeader);
const scrollUp = () => {
const scrollUp = document.getElementById('scroll-up')
if (window.scrollY >= 350) {
scrollUp.classList.add('show-scroll');
} else {
scrollUp.classList.remove('show-scroll');
}
}
window.addEventListener('scroll', scrollUp)
const sections = document.querySelectorAll('section[id]')
const scrollActive = () => {
const scrollDown = window.scrollY
sections.forEach(current => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 58;
const sectionId = current.getAttribute('id');
const sectionsClass = document.querySelector(`.nav-menu a[href*="${sectionId}"]`);
if (sectionsClass) {
if (scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight) {
sectionsClass.classList.add('active-link');
} else {
sectionsClass.classList.remove('active-link');
}
}
})
}
window.addEventListener('scroll', scrollActive)

14
js/swiper-bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
js/swiper-bundle.min.js.map.json Normal file
View File

File diff suppressed because one or more lines are too long

10
login.html
View File

@ -30,7 +30,15 @@
</li>
<li class="nav-item">
<a href="#" class="nav-link">Store</a>
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Plans</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Resources</a>
</li>
<li class="nav-item">

50
main.js
View File

@ -1,50 +0,0 @@
// Show menu
const navMenu = document.getElementById("nav-menu");
const navToggle = document.getElementById("nav-toggle");
const navClose = document.getElementById("nav-close");
// Validate if const exists
if (navToggle) {
navToggle.addEventListener("click", () => {
navMenu.classList.add("show-menu");
});
}
//Menu hidden
// alidate if const exists
if (navClose) {
navClose.addEventListener("click", () => {
navMenu.classList.remove("show-menu");
});
}
// Remove menu mobile
const navLink = document.querySelectorAll(".nav-link");
const linkAction = () => {
const navMenu = document.getElementById("nav-menu");
navMenu.classList.remove("show-menu");
};
navLink.forEach((n) => n.addEventListener("click", linkAction));
// GSAP animation
gsap.from('.home-frame', 1.5, { opacity: 0, y: -300, delay: 0.2 });
gsap.from('.home-sphere', 1.5, { opacity: 0, x: -300, delay: 0.3 });
gsap.from('.home-triangle', 1.5, { opacity: 0, x: 300, delay: 0.6 });
gsap.from('.home-r', 1.5, { opacity: 0, y: -300, delay: 0.8 });
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 });
}

47
product.html
View File

@ -9,6 +9,10 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<link rel="stylesheet" href="source/styles/swiper-bundle.min.css">
<link rel="stylesheet" href="source/styles/style.css">
<title>Render Line Download</title>
@ -30,7 +34,15 @@
</li>
<li class="nav-item">
<a href="#" class="nav-link">Store</a>
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Plans</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Resources</a>
</li>
<li class="nav-item">
@ -61,36 +73,8 @@
<main class="main">
<section class="home">
<div class="home-container container">
<div class="home-content">
<h3 class="home-subtitle">
Render Line
</h3>
<section class="home section" id="home">
<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 playsinline height="100%" width="100%" src="source/Video/Video_Engine.mp4" class="product-engine" ></video>
</div>
</div>
</section>
@ -117,8 +101,9 @@
<script src="source/files/gsap-public/minified/gsap.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="main.js"></script>
<script src="js/main.js"></script>
</body>
</html>

BIN
source/images/Animation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
source/images/Check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
source/images/Close_Button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
source/images/ColorPicker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
source/images/Console.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

BIN
source/images/Editor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 582 KiB

BIN
source/images/Game.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 538 KiB

BIN
source/images/Hierarchy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
source/images/Icon_Burger_Button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
source/images/Intrerface_Editor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 694 KiB

BIN
source/images/Intrerface_Game.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 714 KiB

BIN
source/images/Object.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
source/images/Project.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
source/images/Scroll_Up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

830
source/styles/style.css
View File

File diff suppressed because it is too large Load Diff

13
source/styles/swiper-bundle.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long