Добавила страницу.
This commit is contained in:
Yulia Polushvayko
350
index.html
350
index.html
@ -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>
|
||||
Reference in New Issue
Block a user