444 lines
17 KiB
HTML
444 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<link rel="shortcut icon" href="source/images/Logo512х512.png">
|
||
|
||
<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>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<header class="header" id="header">
|
||
<nav class="nav-container">
|
||
<a href="/" class="nav-logo">
|
||
<img src="source/images/Logo512х512.png" alt="Logo" width="25">
|
||
</a>
|
||
|
||
<div class="nav-menu" id="nav-menu">
|
||
<ul class="nav-list">
|
||
<li class="nav-item">
|
||
<a href="#home" class="nav-link active-link">Home</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a href="#about" class="nav-link">About</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a href="#plans" class="nav-link">Plans</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a href="#contact" class="nav-link">Contacts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a href="resources.html" class="nav-link">Resources</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a href="documentation.html" 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">
|
||
<img src="source/images/Close_Button.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toggle button -->
|
||
|
||
<div class="nav-toggle" id="nav-toggle">
|
||
<img src="source/images/Icon_Burger_Button.png" alt="">
|
||
</div>
|
||
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="main">
|
||
|
||
<section class="home section" id="home">
|
||
<div class="home-container container">
|
||
<div class="home-content">
|
||
<h3 class="home-subtitle">
|
||
Render Line
|
||
</h3>
|
||
|
||
<h1 class="home-title">
|
||
<span>
|
||
Start Developing <br>
|
||
Drive to Opportunity
|
||
</span>
|
||
|
||
<img src="source/images/Wave.png" alt="" width="100">
|
||
</h1>
|
||
|
||
<p class="home-description">
|
||
Develop, Overachieve and Outshine!
|
||
</p>
|
||
|
||
<a href="#plans" class="home-button">
|
||
Get Started
|
||
</a>
|
||
</div>
|
||
|
||
<div class="home-images">
|
||
<img src="source/images/Logo_Frame.png" alt="Frame" class="home-frame">
|
||
<img src="source/images/Sphere.png" alt="Frame" class="home-sphere">
|
||
<img src="source/images/Triangle.png" alt="Frame" class="home-triangle">
|
||
<img src="source/images/R.png" alt="Frame" class="home-r">
|
||
<img src="source/images/L.png" alt="Frame" class="home-l">
|
||
</div>
|
||
</div>
|
||
|
||
</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 conatainer grid">
|
||
|
||
<a href="#" class="footer-logo">
|
||
Render Line
|
||
</a>
|
||
|
||
<ul class="footer-links">
|
||
|
||
<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="js/main.js"></script>
|
||
</body>
|
||
|
||
</html> |