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-06 16:03:30 +03:00
parent 102ee21cdc
commit 1948683d55
4 changed files with 220 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -42,7 +42,7 @@
</li>
</ul>
<a href="#" class="nav-button">Login</a>
<a href="login.html" class="nav-button">Login</a>
<!-- Close button -->
<div class="nav-close" id="nav-close">
@ -95,9 +95,27 @@
</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>

77
login.html Normal file
View File

@ -0,0 +1,77 @@
<!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/style.css">
<title>Render Line</title>
</head>
<body>
<header class="header" id="header">
<nav class="nav-container">
<a href="index.html" class="nav-logo">
<!-- <i class="ri-cactus-fill"></i> -->
<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="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Store</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Documentation</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacts</a>
</li>
</ul>
<a href="#" class="nav-button">Login</a>
<!-- Close button -->
<div class="nav-close" id="nav-close">
<i class="ri-close-line"></i>
</div>
</div>
<!-- Toggle button -->
<div class="nav-toggle" id="nav-toggle">
<i class="ri-menu-line"></i>
</div>
</nav>
</header>
<main class="main">
<section class="home">
</section>
</main>
<script src="source/files/gsap-public/minified/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>

4
product.html
View File

@ -42,7 +42,7 @@
</li>
</ul>
<a href="#" class="nav-button">Login</a>
<a href="login.html" class="nav-button">Login</a>
<!-- Close button -->
<div class="nav-close" id="nav-close">
@ -62,7 +62,7 @@
<main class="main">
<section class="home">
</section>

142
source/styles/style.css
View File

@ -54,6 +54,24 @@ body {
color: var(--text-color);
}
/* Navigation for mabile devices */
@media screen and (max-width: 1023px) {
.nav-menu {
position: fixed;
top: 0;
right: -100%;
background-color: var(--body-color);
width: 80%;
height: 100%;
box-shadow: 0 0 16px hsla(268, 58%, 4%, .2);
padding: 6rem 3rem;
display: flex;
flex-direction: column;
row-gap: 2.5rem;
transition: right .4s;
}
}
ul {
list-style: none;
}
@ -131,24 +149,6 @@ img {
/* margin: 1rem; */
}
/* Navigation for mabile devices */
@media screen and (max-width: 1023px) {
.nav-menu {
position: fixed;
top: 0;
right: -100%;
background-color: var(--body-color);
width: 80%;
height: 100%;
box-shadow: 0 0 16px hsla(268, 58%, 4%, .2);
padding: 6rem 3rem;
display: flex;
flex-direction: column;
row-gap: 2.5rem;
transition: right .4s;
}
}
.nav-list {
display: flex;
flex-direction: column;
@ -283,6 +283,38 @@ img {
width: 256px;
} */
.footer {
display: block;
margin-inline: 3rem;
border-top: .2px solid var(--text-color);
}
.footer-copyright {
display: flex;
justify-content: left;
width: 100%;
padding-left: 1.5rem;
margin-top: 1rem;
font-weight: var(--font-semi-bold);
}
.footer-list {
display: flex;
align-items: center;
column-gap: 4.5rem;
padding: 1.5rem;
color: var(--title-color);
font-size: var(--small-font-size);
font-weight: var(--font-medium);
}
/* For small devices */
@media screen and (max-width: 300px) {
@ -293,12 +325,81 @@ img {
.home-title {
font-size: 1.75rem;
}
.footer-list {
column-gap: .5rem;
}
}
/* Samsung Z Fold 5 */
@media screen and (min-width: 344px) and (min-height: 882px) {
.home-container {
padding-top: 10rem;
}
.home-title {
font-size: 1.75rem;
}
.footer {
margin-top: 8rem;
margin-inline: 1rem;
}
.footer-list {
column-gap: 1rem;
}
}
/* Samsung S8+ */
@media screen and (min-width: 360px) and (min-height: 740px) {
.home-container {
padding-top: 10rem;
}
.home-title {
font-size: 1.75rem;
}
.footer {
margin-top: 8rem;
margin-inline: 1rem;
}
.footer-list {
column-gap: 1rem;
}
}
/* iPhone SE */
@media screen and (min-width: 375px) and (min-height: 667px) {
.home-container {
padding-top: 8rem;
}
.home-title {
font-size: 1.75rem;
}
.footer {
margin-top: 15rem;
margin-inline: 1rem;
}
.footer-list {
column-gap: 1rem;
}
}
@media screen and (min-width: 376px) and (min-height: 800px) {
.home-container {
padding-top: 10rem;
}
.footer-list {
column-gap: 1rem;
}
}
@ -337,7 +438,6 @@ img {
.home-triangle,
.home-r,
.home-l {
/* width: 250px; */
margin-left: 4rem;
}
}
@ -384,12 +484,12 @@ img {
}
.home-title {
letter-spacing: -3px;
/* letter-spacing: -3px; */
margin-bottom: 1rem;
}
.home-title img {
width: 200px;
width: 100px;
right: -.5rem;
}