Added Shop page
This commit is contained in:
@@ -3,11 +3,45 @@
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
padding-block: 6rem; /* Added padding so it doesn't hug the top navigation */
|
||||
gap: 2rem; /* Adds space between the title, paragraph, and embed */
|
||||
|
||||
h1 {
|
||||
font-size: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
/* Styling for the new Facebook Embed */
|
||||
.fb-embed-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
background-color: white; /* Ensures the widget has a clean background */
|
||||
border-radius: 8px; /* Softens the corners */
|
||||
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15); /* Adds a nice depth effect */
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make sure it scales down nicely on mobile */
|
||||
@media screen and (max-width: 768px) {
|
||||
.shop-section {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
+15
-2
@@ -5,6 +5,19 @@ import Layout from '../layouts/Layout.astro';
|
||||
<Layout title="Shop | UP IECEP">
|
||||
<section class="shop-section">
|
||||
<h1>Shop</h1>
|
||||
<strong>Coming soon</strong>
|
||||
<p>Check out our latest merchandise and updates directly from our page!</p>
|
||||
|
||||
<div class="fb-embed-container">
|
||||
<iframe
|
||||
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D61579906016704&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
|
||||
width="340"
|
||||
height="500"
|
||||
style="border:none;overflow:hidden"
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
|
||||
</iframe>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user