Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Reignian
Reignian authored May 5, 2024
1 parent 8b94c19 commit 0959cb6
Show file tree
Hide file tree
Showing 20 changed files with 10,253 additions and 0 deletions.
253 changes: 253 additions & 0 deletions aboutus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
body{
margin: 0;
border: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
header div{
width: 100%;
height: 4vw;
}
#home{
display: flex;
align-items: center;
}
#home a{
font-size: 2vw;
font-weight: 700;
margin-left: 2%;
text-decoration: none;
color: black;
}
#top{
width: 100%;
height: 35vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#top h1{
margin-bottom: 5%;
font-size: 3vw;
}
#top div{
display: flex;
width: 45%;
height: 65%;
animation: slide 1s forwards;
}

@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

#top2{
width: 100%;
height: 10vw;
display: flex;
align-items: center;
justify-content: center;
}
#top2 h2{
font-size: 2.5vw;
}

#mainmain{
margin-top: 5%;
margin-left: 10%;
margin-right: 10%;
}

#mid1{
width: 100%;
height: 35vw;
display: grid;
grid-template-columns: 37% 58%;
column-gap: 5%;
}
#forimage1{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#image1{
width: 80%;
height: 90%;
}
#mid1 h3{
font-size: 1.9vw;;
}
#mid1 p{
font-size: 1.5vw;
line-height: 1.75;
text-indent: 2vw;
}

#mid2{
width: 100%;
height: 34vw;
display: grid;
grid-template-columns: 48% 47%;
column-gap: 5%;
}
#forimage2{
display: flex;
justify-content: center;
align-items: center;
}
#forimage2 #image2{
height: 75%;
width: 100%;
}
#mid2 p{
font-size: 1.5vw;
line-height: 1.75;
text-indent: 2vw;
text-align: right;
}
#forimage3{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40vw;
}
#image3{
width: 95%;
height: 100%;
}
#paragraph3{
display: flex;
flex-direction: column;
align-items: center;
}
#paragraph3 h1{
font-size: 2vw;
}

main img{
width: 100%;
height: 100%;
}

footer{
height: auto;
background-color: black;
display: flex;
justify-content: center;
}
#foot{
height: auto;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;

}
#foot .col{
height: 7vw;
width: 18%;
display: flex;
justify-content: center;
align-items: center;
}
#foot1{
display: flex;
height: 90%;
width: 51%;
}
#foot2{
display: flex;
flex-direction: column;
justify-content: center;
height: 90%;
width: 80%;
color: aliceblue;
font-size: .8vw;
}
#foot3{
display: flex;
flex-direction: column;
justify-content: center;
height: 90%;
width: 30%;
}
#foot3 ul{
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;

}
#foot3 a{
display: flex;
flex-direction: column;
justify-content: center;
font-size: 1vw;
text-decoration: none;
color: aliceblue;
}

#foot4{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90%;
width: 90%;
}
#foot4 #find{
color: aliceblue;
font-size: 1.5vw;
font-weight: 700;
}
#foot4 #socs{
display: flex;
justify-content: space-around;
width: 80%;
height: 40%;
}
#socs a{
margin-top: .5vw;
width: 18%;
height: 90%;
border-radius: 50% ;
overflow: hidden;
}
#socs a img{
width: 100%;
height: 100%;
}
#foot5{
display: flex;
flex-direction: column;
justify-content: center;
height: 90%;
width: 80%;
}
#foot5 ul{
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
#foot5 a{
display: flex;
flex-direction: column;
justify-content: center;
font-size: .8vw;
text-decoration: none;
color: aliceblue;
}
footer li{
list-style: none;
margin-bottom: .5vw;
}
118 changes: 118 additions & 0 deletions aboutus.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="aboutus.css">
</head>
<body>
<header>
<div id="home">
<a href="index.html">HOME</a>
</div>
</header>

<main>
<div id="top">
<h1>ABOUT US</h1>
<div>
<img src=".\img\logo3.png" alt="">
</div>
</div>
<div id="top2">
<h2>Welcome to SHUTTLEPRIME</h2>
</div>
<div id="mainmain">
<div id="mid1">
<div id="forimage1">
<div id="image1">
<img src="./img/about1.jpg" alt="" style="box-shadow: .5vw .5vw 1vw lightgray;">
</div>
</div>
<div id="paragraph1">
<h3>Your ultimate destination for all things badminton </h3>
<p>At SHUTTLEPRIME, we're passionate about bringing the joy of badminton to enthusiasts of all levels. As a local brand deeply rooted in the love for the sport, we pride ourselves on offering a curated selection of high-quality badminton gear, apparel, and accessories to elevate your game on and off the court.</p>
<p>What sets us apart is our commitment to excellence. Not only do we showcase our own premium line of badminton products crafted with precision and care, but we also partner with leading brands in the industry to provide you with a comprehensive range of options tailored to your needs and preferences. </p>
</div>
</div>
<br><br><br>
<div id="mid2">
<div id="paragraph2">
<p>Whether you're a seasoned pro or just starting your badminton journey, we're here to support you every step of the way. Our dedicated team is comprised of avid badminton players who share your passion and are always ready to offer expert advice and personalized recommendations to help you perform your best.
</p>
<p>Beyond just being a retailer, we strive to foster a vibrant badminton community. Through events, workshops, and online resources, we aim to connect players, share knowledge, and inspire each other to reach new heights in the sport we love.</p>
</div>
<div id="forimage2">
<div id="image2">
<img src=".\img\about2.jpg" alt="" style="box-shadow: .5vw .5vw 1vw lightgray;">
</div>
</div>
</div>
<br><br><br>
<div id="forimage3">
<div id="image3">
<img src=".\img\about3.jpg" alt="" style="box-shadow: .5vw .5vw 1vw lightgray;">
</div>
</div>
<br><br><br>
<div id="paragraph3">
<h1>Thank you for choosing SHUTTLEPRIME as your trusted partner in badminton</h1>
<h1>Let's gear up, hit the courts, and unleash our full potential together!</h1>
</div>
<br><br><br>
</div>
</div>
</main>

<footer>
<div id="foot">
<div class="col">
<div id="foot1">
<img src="./img/footlog.png" alt="" style="width: 100%; height: 100%;">
</div>
</div>
<div class="col">
<div id="foot2">
<p>Sports and Recreation</p>
<br>
<p>Contact Us: +63-936-407-6841</p>
</div>
</div>
<div class="col">
<div id="foot3">
<ul>
<li><a href="news.html">News</a></li>
<li><a href="product.html">Products</a></li>
<li><a href="aboutus.html">About us</a></li>
</ul>
</div>
</div>
<div class="col">
<div id="foot4">
<div id="find">FIND US ON</div>
<div id="socs">
<a href="https://web.facebook.com/ShuttlePrime"><img src=".\img\fbicon.png" alt=""></a>
<a href="https://www.tiktok.com/@shuttleprimeph"><img src=".\img\tiktokicon.jpg" alt=""></a>
<a href="https://www.instagram.com/explore/tags/shuttleprime/?hl=en" alt=""><img src=".\img\igicon.jpg"></a>
</div>


</div>
</div>
<div class="col">
<div id="foot5">
<ul>
<li><a href="">Terms and Conditions</a></li>
<li><a href="">Accessibility</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="https://web.facebook.com/media/set/?vanity=100052497353745&set=a.114292693663975">Proof of Successful Transactions</a></li>
</ul>
</div>
</div>

</div>
</footer>

</body>
</html>
Loading

0 comments on commit 0959cb6

Please sign in to comment.