impor
This commit is contained in:
parent
21dd87f32a
commit
8a29c0ce08
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -3,27 +3,58 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CréaTyve</title>
|
||||
<link rel="stylesheet" href="style.css"> <!-- Importing the CSS file -->
|
||||
</head>
|
||||
<body>
|
||||
<header> <!--Section en tête de page-->
|
||||
<h1>Envie de créer votre site ?</h1>
|
||||
<h2>Une idée, Un site, Un clic</h2>
|
||||
<nav> <!--Section naviguation-->
|
||||
<ul><!--tableau de naviguation-->
|
||||
<li><a href="#about">Assistant IA</a>
|
||||
<a href="#about">Exemples</a>
|
||||
<a href="#services">Dons</a>
|
||||
<a href="#contact">Partenaire</a>
|
||||
<a href="#contact">Entreprise</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header class="video-header"> <!-- Added a class for styling -->
|
||||
<video autoplay loop muted playsinline class="backVideo">
|
||||
<source src="fond.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="header-content"> <!-- Wrapper for text content -->
|
||||
<h1>Envie de créer votre site ?</h1>
|
||||
<h2>Une idée, Un site, Un clic</h2>
|
||||
<nav class="navigation-panel">
|
||||
<ul>
|
||||
<li class="active"> <!-- Active state for Assistant IA -->
|
||||
<a href="#about">
|
||||
<img src="assistant-ia.png" alt="Assistant IA" class="icon" />
|
||||
<span class="text">Assistant IA</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#examples">
|
||||
<img src="examples.png" alt="Exemples" class="icon" />
|
||||
<span class="text">Exemples</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#services">
|
||||
<img src="dons.png" alt="Dons" class="icon" />
|
||||
<span class="text">Dons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#partners">
|
||||
<img src="partners.png" alt="Partenaires" class="icon" />
|
||||
<span class="text">Partenaires</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#company">
|
||||
<img src="company.png" alt="Entreprise" class="icon" />
|
||||
<span class="text">Entreprise</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main> <!--Section principale-->
|
||||
|
||||
|
||||
<p>Vous avez une entreprise à promouvoir ? Oubliez les années d’études ! En quelques clics et 10 secondes top chrono, devenez votre propre développeur web. Créez, lancez, rayonnez — c’est aussi simple que ça.</p>
|
||||
<button type="button"></button>
|
||||
<main>
|
||||
<p>Vous avez une entreprise à promouvoir ? Oubliez les années d’études ! En quelques clics et 10 secondes top chrono, devenez votre propre développeur web. Créez, lancez, rayonnez — c’est aussi simple que ça.</p>
|
||||
<button type="button">Générer avec l'IA</button>
|
||||
<button type="button">Connexion</button>
|
||||
<button type="button">Inscription</button>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2025 CreaTyve. All rights reserved.</p>
|
||||
</footer>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1,155 @@
|
|||
/* Reset margin and padding for the body */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden; /* Prevent horizontal scrolling */
|
||||
}
|
||||
|
||||
/* Ensure the video covers the entire viewport */
|
||||
.video-header {
|
||||
position: relative;
|
||||
height: 100vh; /* Full viewport height */
|
||||
width: 100vw; /* Full viewport width */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.backVideo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* Ensures the video covers the entire area */
|
||||
z-index: -1; /* Places the video behind the content */
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
z-index: 1; /* Places the text above the video */
|
||||
color: white; /* Makes the text visible over the video */
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header-content h1{
|
||||
font-family: "Corbel", sans-serif;
|
||||
font-size: calc(1.5vw + 1.2rem); /* adapte à la taille de fenètre*/
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
position: relative;
|
||||
top: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
.header-content h2 {
|
||||
|
||||
font-family: "Corbel", sans-serif;
|
||||
font-size: calc(0.8vw + 0.8rem); /* adapte à la taille de fenètre*/
|
||||
font-weight: lighter;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
color: black;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Navigation Panel Styling */
|
||||
.navigation-panel {
|
||||
position: absolute;
|
||||
top: 20px; /* Position at the top-left */
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f3e8ff; /* Pastel light purple */
|
||||
border-radius: 50px; /* Full circles on left and right */
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
|
||||
width: auto;
|
||||
max-width: 90%; /* Adapt to window size */
|
||||
font-size: calc(0.8vw + 0.5rem); /* Responsive size */
|
||||
}
|
||||
|
||||
.navigation-panel ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 15px; /* Space between items */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navigation-panel li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
border-radius: 50px; /* Rounded corners for each item */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.navigation-panel li:hover {
|
||||
background-color: #d8b4ff; /* Darker pastel purple on hover */
|
||||
transform: scale(1.05); /* Slightly enlarge on hover */
|
||||
}
|
||||
|
||||
.navigation-panel li.active {
|
||||
background-color: #d8b4ff; /* Darker pastel purple for active item */
|
||||
}
|
||||
|
||||
.navigation-panel a {
|
||||
text-decoration: none;
|
||||
color: #4a4a4a; /* Light text color */
|
||||
font-family: "Corbel", sans-serif;
|
||||
font-size: 0.9rem;
|
||||
font-weight: lighter; /* Light font weight */
|
||||
text-align: center;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navigation-panel a:hover {
|
||||
color: #000; /* Darker text on hover */
|
||||
}
|
||||
|
||||
.navigation-panel .icon {
|
||||
width: 30px; /* Adjust icon size */
|
||||
height: 30px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.navigation-panel .text {
|
||||
font-size: 0.8rem; /* Text size */
|
||||
}
|
||||
|
||||
/* Ensure responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.navigation-panel {
|
||||
padding: 5px 10px;
|
||||
font-size: calc(0.6vw + 0.5rem);
|
||||
}
|
||||
|
||||
.navigation-panel .icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.navigation-panel .text {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue