Added Shop page
This commit is contained in:
@@ -3,11 +3,45 @@
|
|||||||
grid-template-columns: repeat(1, 1fr);
|
grid-template-columns: repeat(1, 1fr);
|
||||||
place-items: center;
|
place-items: center;
|
||||||
align-content: 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 {
|
h1 {
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
font-size: 3rem;
|
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">
|
<Layout title="Shop | UP IECEP">
|
||||||
<section class="shop-section">
|
<section class="shop-section">
|
||||||
<h1>Shop</h1>
|
<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>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
Reference in New Issue
Block a user