Skip to content

Commit

Permalink
fix names & syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@AsteroidusTv
AsteroidusTv committed Oct 12, 2024
1 parent b7ade15 commit 0d02378
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 78 deletions.
37 changes: 18 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,35 +34,34 @@ <h1 id="headerTitle" class="header-title">RecyTech</h1>
</header>
<main>
<section id="product" class="main-section product">
<div class="blockProduct">
<div class="product-container">
<div class="slogan">Transformer les vieux<br> PC en nouvelles opportunités.</div>

<div class="blockBuy">
<div class="blockBuyImage">
<div class="blocTxt">
<img class="buyImage" src="./images/template2.jpg" alt="template2">
<div class="buyTxt">Vital est super intelligent.</div>
<div class="container-buy">
<div class="buy-images-container">
<div class="buy-image-wrapper">
<img class="buy-image" src="./images/template2.jpg" alt="template2">
<div class="buy-text">Lorem.</div>
</div>
<div class="blocTxt">
<img class="buyImage" src="./images/template.jpg" alt="template2">
<div class="buyTxt">Vital est un génie.</div>
<div class="buy-image-wrapper">
<img class="buy-image" src="./images/template.jpg" alt="template">
<div class="buy-text">Vital est un génie.</div>
</div>
<div class="blocTxt">
<img class="buyImage" src="./images/template2.jpg" alt="template2">
<div class="buyTxt">Vital est le meilleur.</div>
<div class="buy-image-wrapper">
<img class="buy-image" src="./images/template2.jpg" alt="template2">
<div class="buy-text">Vital est le meilleur.</div>
</div>
<div class="blocTxt">
<img class="buyImage" src="./images/template.jpg" alt="template2">
<div class="buyTxt">Vital a 9834374387483483437 de QI.</div>
<div class="buy-image-wrapper">
<img class="buy-image" src="./images/template.jpg" alt="template">
<div class="buy-text">Vital a 9834374387483483437 de QI.</div>
</div>
</div>
<div class="buyBtn">Acheter</div>
<div class="buy-button">Acheter</div>
</div>
</div>
</section>
<section id="about" class="main-section about">
<div class="about-icon-wrapper">
<img src="./images/leaf.png" alt="Icône RecyTech" class="about-icon">
<img class="about-icon" src="./images/leaf.png" alt="Icône RecyTech">
</div>
<div class="about-text-content">
<h2 class="about-title">À propos</h2>
Expand All @@ -77,7 +76,7 @@ <h2 class="about-title">À propos</h2>
</div>

<div class="about-image-content">
<img src="./images/template.jpg" alt="Reconditionnement d'ordinateurs" class="about-image">
<img class="about-image" src="./images/template.jpg" alt="Reconditionnement d'ordinateurs">
</div>
</section>
<section id="team" class="main-section team"></section>
Expand Down
115 changes: 56 additions & 59 deletions styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ main {
height: calc(100vh - var(--header-height));
}

.blockProduct {
.product-container {
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -32,7 +32,7 @@ main {
font-size: 55px;
}

.blockBuy {
.container-buy {
background-color: var(--secondary-color);
width: 425px;
height: 535px;
Expand All @@ -44,46 +44,36 @@ main {
gap: 20px;
}

.blockBuyImage {
.buy-images-container {
display: flex;
width: 82.5%;
overflow: hidden;
border-radius: var(--border-radius);

position: relative;
}

.blocTxt {
.buy-image-wrapper {
width: 100%;
flex-shrink: 0;
animation: changeImage 27s infinite;
}

.buyImage {

.buy-image {
width: 351px;

}

@keyframes changeImage {
0%, 12.5% { transform: translateX(0%); }
25%, 37.5% { transform: translateX(-100%); }
50%, 62.5% { transform: translateX(-200%); }
75%, 87.5% { transform: translateX(-300%); }
100% { transform: translateX(0%); }
}

.buyTxt {
.buy-text {
color: var(--text-color);
text-shadow: 1px 1px 0px #0000004f;
font-family: Raleway-SemiBold;
font-size: 1.3em;
width: 82.5%;
position: absolute;
bottom: 0px;
margin: 15px;

bottom: 15px;
left: 15px;
}

.buyBtn {
.buy-button {
background-color: var(--text-color);
font-family: Raleway-SemiBold;
font-size: 30px;
Expand All @@ -97,44 +87,8 @@ main {
transition: 1.2s;
}

.buyBtn:hover {
scale: 0.9;
}

@media screen and (max-width: 990px) {

.product {
display: block;
}

.blockProduct {
flex-direction: column;
gap: 2vh;
position: relative;
top: 20px;
}

.slogan {
font-size: 30px;
width: 90%;
}

.blockBuy {
width: 415px;
height: 525px;
}
}

@media screen and (max-width: 425px) {
.main-section {
padding-left: 0;
padding-right: 0;
}

.blockBuy {
width: 100%;
background-color: transparent;
}
.buy-button:hover {
transform: scale(0.9);
}

.contact {
Expand Down Expand Up @@ -199,3 +153,46 @@ main {
height: auto;
border-radius: var(--border-radius);
}

@keyframes changeImage {
0%, 12.5% { transform: translateX(0%); }
25%, 37.5% { transform: translateX(-100%); }
50%, 62.5% { transform: translateX(-200%); }
75%, 87.5% { transform: translateX(-300%); }
100% { transform: translateX(0%); }
}

@media screen and (max-width: 990px) {
.product {
display: block;
}

.product-container {
flex-direction: column;
gap: 2vh;
position: relative;
top: 20px;
}

.slogan {
font-size: 30px;
width: 90%;
}

.container-buy {
width: 415px;
height: 525px;
}
}

@media screen and (max-width: 425px) {
.main-section {
padding-left: 0;
padding-right: 0;
}

.container-buy {
width: 100%;
background-color: transparent;
}
}

0 comments on commit 0d02378

Please sign in to comment.