Добавила шаблон под продукт и вход.
This commit is contained in:
Yulia Polushvayko
22
index.html
22
index.html
@ -42,7 +42,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<a href="#" class="nav-button">Login</a>
|
<a href="login.html" class="nav-button">Login</a>
|
||||||
|
|
||||||
<!-- Close button -->
|
<!-- Close button -->
|
||||||
<div class="nav-close" id="nav-close">
|
<div class="nav-close" id="nav-close">
|
||||||
@ -95,9 +95,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</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>
|
</main>
|
||||||
|
|
||||||
<script src="source/files/gsap-public/minified/gsap.min.js"></script>
|
<script src="source/files/gsap-public/minified/gsap.min.js"></script>
|
||||||
|
|||||||
77
login.html
Normal file
77
login.html
Normal 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>
|
||||||
@ -42,7 +42,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<a href="#" class="nav-button">Login</a>
|
<a href="login.html" class="nav-button">Login</a>
|
||||||
|
|
||||||
<!-- Close button -->
|
<!-- Close button -->
|
||||||
<div class="nav-close" id="nav-close">
|
<div class="nav-close" id="nav-close">
|
||||||
|
|||||||
@ -54,6 +54,24 @@ body {
|
|||||||
color: var(--text-color);
|
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 {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
@ -131,24 +149,6 @@ img {
|
|||||||
/* margin: 1rem; */
|
/* 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 {
|
.nav-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -283,6 +283,38 @@ img {
|
|||||||
width: 256px;
|
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 */
|
/* For small devices */
|
||||||
@media screen and (max-width: 300px) {
|
@media screen and (max-width: 300px) {
|
||||||
@ -293,12 +325,81 @@ img {
|
|||||||
.home-title {
|
.home-title {
|
||||||
font-size: 1.75rem;
|
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) {
|
@media screen and (min-width: 376px) and (min-height: 800px) {
|
||||||
.home-container {
|
.home-container {
|
||||||
padding-top: 10rem;
|
padding-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer-list {
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -337,7 +438,6 @@ img {
|
|||||||
.home-triangle,
|
.home-triangle,
|
||||||
.home-r,
|
.home-r,
|
||||||
.home-l {
|
.home-l {
|
||||||
/* width: 250px; */
|
|
||||||
margin-left: 4rem;
|
margin-left: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -384,12 +484,12 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.home-title {
|
.home-title {
|
||||||
letter-spacing: -3px;
|
/* letter-spacing: -3px; */
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-title img {
|
.home-title img {
|
||||||
width: 200px;
|
width: 100px;
|
||||||
right: -.5rem;
|
right: -.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user