jtpmcdevitt/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added partner section

Browse source
This commit is contained in:
JSriwongsa 2023-07-24 13:50:42 -05:00
parent dcdbc0c1e3
commit af1f094594
2 changed files with 82 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
donation_website/index.html
View file

@ -427,10 +427,57 @@
</div> </div>
</div> </div>
<div class="partner">
<div class="container">
<div class="partner-slider">
<div class="slide-track">
<div class="partner-logo">
<img src="images/partner-1.png">
</div>
<div class="partner-logo">
<img src="images/partner-2.png">
</div>
<div class="partner-logo">
<img src="images/partner-3.png">
</div>
<div class="partner-logo">
<img src="images/partner-4.png">
</div>
<div class="partner-logo">
<img src="images/partner-5.png">
</div>
<div class="partner-logo">
<img src="images/partner-6.png">
</div>
<div class="partner-logo">
<img src="images/partner-1.png">
</div>
<div class="partner-logo">
<img src="images/partner-2.png">
</div>
<div class="partner-logo">
<img src="images/partner-3.png">
</div>
<div class="partner-logo">
<img src="images/partner-4.png">
</div>
<div class="partner-logo">
<img src="images/partner-5.png">
</div>
<div class="partner-logo">
<img src="images/partner-6.png">
</div>
</div>
</div>
</div>
</div>
</main> </main>
<footer></footer> <footer></footer>
<div class="overlay" data-overlay></div> <div class="overlay" data-overlay></div>

36
donation_website/style.css
View file

@ -816,7 +816,41 @@ form.search i{
line-height: 55px; line-height: 55px;
visibility: hidden; visibility: hidden;
} }
/**/ /*----- partner -----*/
.partner{
max-width: 100%;
background-color: #DCDCDC;
align-items: center;
justify-content: center;
}
.partner-slider{
height: 150px;
width: auto;
margin: auto;
overflow: hidden;
position: relative;
}
.slide-track{
animation: scroll 60s linear infinite;
display: flex;
width: calc(250px * 20);
gap: 50px;
}
.partner-logo img{
margin-top: 30px;
width: 250px;
height: 100px;
}
@keyframes scroll{
0%{
transform: translateX(0);
}
100%{
transform: translateX(calc(-250px * 5));
}
}