Mise à jour de la page d'accueil

This commit is contained in:
Tom MOGULJAK 2023-01-17 23:17:32 +01:00
parent 57282ec47b
commit 65ea69200b
5 changed files with 84 additions and 133 deletions

View File

@ -1,87 +1,43 @@
.bande {
main{
padding: 50px;
}
main h1 {
padding: 20px;
font-size: 30px;
font-family: sans-serif;
}
main p {
font-size: 20px;
max-width: 1200px;
font-family:"system-ui";
font-family: sans-serif;
}
main a {
font-size: 20px;
color : #00E6FF;
font-family: sans-serif;
}
.bande {
text-align: center; text-align: center;
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
} }
.bande img {
.bande img {
padding : 25px; padding : 25px;
}
.bande ul {
display: inline-block;
}
.bande li {
display: inline;
}
@media screen and (min-width: 700px) {
main{
padding-bottom: 2%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
} }
.bande ul { p {
display: inline-block; padding-left: 5%;
padding-right: 5%;
padding-bottom: 2%;
} }
.bande li { .home {
display: inline; text-align: center;
} }
}
.image1{ @media screen and (max-width: 700px) {
width: 330px; .image{
height: 260px; display: flex;
float: left; justify-content: center;
margin-right: 50px; }
} }
.image2{
width: 400px;
height: 310px;
float: right;
margin-left: 50px;
}
.image3{
width: 300px;
height: 180px;
float: left;
margin-right: 50px;
}
.logoA{
width: 150px;
height: 150px;
}
.logoS{
width: 320px;
height: 120px;
}
.logoH{
width: 150px;
height: 150px;
}
.margin{
margin-left: 20px;
margin-right: 20px;
}

View File

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

BIN
assets/img/schema_b2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

BIN
assets/img/tech2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -23,12 +23,14 @@
</ul> </ul>
</header> </header>
<main> <main>
<h1>Bienvenue chez EliteSolar !</h1> <h1>Bienvenue chez Elite Solar !</h1><br>
<p>&nbsp;</p> <div class="home">
<br> <div class="image">
<img srcset="assets/img/schema_b2.png 273w, assets/img/schema_b.png 547w"
<p><img src="assets/img/shema_b.png" alt="shema bleu decomposer" class="image1"></p> sizes="(max-width: 700px) 273px, 547px"
src="assets/img/shema_b.png" alt="schema">
</div>
<p>Nous sommes une entreprise innovante qui a créé une technologie nomé Solart Glass <p>Nous sommes une entreprise innovante qui a créé une technologie nomé Solart Glass
qui s'intègre dans l'écran des smartphones et qui permet grâce à l'énergie qui s'intègre dans l'écran des smartphones et qui permet grâce à l'énergie
@ -43,47 +45,40 @@
<p>Cette technologie a été conçue pour être facile à utiliser et à configurer. <p>Cette technologie a été conçue pour être facile à utiliser et à configurer.
Grâce à l'utilisation d'un matériau ultra-fin qui est intégré à l'écran, l'énergie lumineuse est captée et transformée en énergie électrique qui est ensuite stockée dans la batterie.</p> Grâce à l'utilisation d'un matériau ultra-fin qui est intégré à l'écran, l'énergie lumineuse est captée et transformée en énergie électrique qui est ensuite stockée dans la batterie.</p>
<p><img src="assets/img/schema.png" alt="shema soleil oeil" class="image2"></p> <div class="image">
<img src="assets/img/schema.png" alt="schema">
<p>&nbsp;</p> </div>
<br><br><br>
<p>Lorsque l'écran est exposé à la lumière du soleil ou à la lumière artificielle, <p>Lorsque l'écran est exposé à la lumière du soleil ou à la lumière artificielle,
l'énergie est convertie en électricité. l'énergie est convertie en électricité.</p>
</p>
<p>&nbsp;</p> <div class="image">
<br> <img srcset="assets/img/tech2.jpg 320w, assets/img/tech.jpg 800w"
sizes="(max-width: 700px) 320px, 800px"
<p><img src="assets/img/tech.jpg" alt="image environnement" class="image3"></p> src="assets/img/tech.jpg" alt="image environnement">
</div>
<p>&nbsp;</p>
<p>Notre technologie est écologique, économique et durable. Nous sommes fiers de vous <p>Notre technologie est écologique, économique et durable. Nous sommes fiers de vous
offrir une technologie qui aidera à réduire la consommation d'énergie et à offrir une technologie qui aidera à réduire la consommation d'énergie et à
améliorer la durée de vie de votre téléphone portable.</p> améliorer la durée de vie de votre téléphone portable.</p>
<p>Avec cette technologie innovante et écologique, EliteSolar offre aux utilisateurs une expérience qui est à la fois pratique et durable. </p>
<p>&nbsp;</p> <p>Avec cette technologie innovante et écologique, EliteSolar offre aux utilisateurs une expérience qui est à la fois pratique et durable.</p>
<br>
<p>Nous commercialisons notre technologie Solar Glass à des entreprises partenaires, qui sont nos clients, afin qu'ils puissent l'intégrer dans leurs produits. Ces derniers vont pouvoir installer Solar Glass dans l'écran de leurs appareils éléctroniques.</p> <p>Nous commercialisons notre technologie Solar Glass à des entreprises partenaires, qui sont nos clients, afin qu'ils puissent l'intégrer dans leurs produits. Ces derniers vont pouvoir installer Solar Glass dans l'écran de leurs appareils éléctroniques.</p>
</div>
<div class="bande"> <div class="bande">
<br>
<h2>Nos partenaires</h2> <h2>Nos partenaires</h2>
<ul> <ul>
<li><img src="assets/img/Apple_logo_white.png" alt="Logo Apple" class="logoA margin"></li> <li><img src="assets/img/Apple_logo_white.png" alt="Apple" width="150" height="150"></li>
<li><img src="assets/img/Samsung_Logo.png" alt="Logo Samsung" class="logoS margin"></li> <li><img src="assets/img/Samsung_Logo.png" alt="Samsung" width="320" height="120"></li>
<li><img src="assets/img/Huawei_logo.png" alt="Logo Huawei" class="logoH margin"></li> <li><img src="assets/img/Huawei_logo.png" alt="Huawei" width="150" height="150"></li>
</ul> </ul>
</div> </div>
<br><br><br> <div class="home">
<p>Nous sommes impatients de vous aider à profiter de notre technologie innovante et de <p>Nous sommes impatients de vous aider à profiter de notre technologie innovante et de vous offrir un service de qualité. N'hésitez pas à nous <a href="contact/index.php">contacter</a> pour en savoir plus sur notre produit et comment il peut vous aider.</p>
vous offrir un service de qualité. N'hésitez pas à nous <a href="contact/index.php">contacter</a> pour en </div>
savoir plus sur notre produit et comment il peut vous aider.</p>
</main> </main>
<footer> <footer>
<div id="social"> <div id="social">