DavidJentes
/
websitedesign2023
mirror of https://github.com/DavidJentes/websitedesign2023
1
0
Fork 0
Code

Add shop page

main
dugo3number2 2023-04-04 11:13:21 -05:00
parent f96f61e721
commit 35f1633180
13 changed files with 121 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/about/index.html
View File

@ -20,6 +20,7 @@
<li><a href="../projects">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
<li><a href="../shop">Shop</a></li>
</ul>
</nav>
</header>

47
docs/assets/css/main.css
View File

@ -135,11 +135,50 @@ section a:hover, section a:focus {
padding: 25px;
}
.extramargin {
margin: 30px;
}
.centercontainer {
display: inline-block;
text-align: left;
}
.nowidth {
width: unset;
}
.shopimage {
width: 10%;
height: auto;
}
.fill {
width: 90%;
}
.button {
display: inline-block;
margin: 10px;
padding: 15px;
border-radius: 30px;
font-size: 16px;
background-color: #777777;
color: #ffffff;
text-decoration: none;
transition: background-color 750ms;
}
.button:hover {
color: #ffffff;
background-color: #555555;
}
.iblock {
display: inline-block;
width: 90%;
}
@media screen and (min-width: 1000px) {
.top {
grid-row: 1;
@ -202,6 +241,14 @@ section a:hover, section a:focus {
section p {
font-size: 16px;
}
.shopimage {
width: 25%;
}
.iblock {
width: 100%;
}
}
@media screen and (max-width: 370px) {

BIN
docs/assets/img/donation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
docs/assets/img/tshirt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
docs/calendar/index.html
View File

@ -21,6 +21,7 @@
<li><a href="../projects">Projects</a></li>
<li><a href="#" id="current">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
<li><a href="../shop">Shop</a></li>
</ul>
</nav>
</header>

1
docs/contact/general/index.html
View File

@ -21,6 +21,7 @@
<li><a href="../../projects">Projects</a></li>
<li><a href="../../calendar">Calendar</a></li>
<li><a href=".." id="current">Contact Us</a></li>
<li><a href="../../shop">Shop</a></li>
</ul>
</nav>
</header>

1
docs/contact/help/index.html
View File

@ -21,6 +21,7 @@
<li><a href="../../projects">Projects</a></li>
<li><a href="../../calendar">Calendar</a></li>
<li><a href=".." id="current">Contact Us</a></li>
<li><a href="../../shop">Shop</a></li>
</ul>
</nav>
</header>

1
docs/contact/index.html
View File

@ -21,6 +21,7 @@
<li><a href="../projects">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="#" id="current">Contact Us</a></li>
<li><a href="../shop">Shop</a></li>
</ul>
</nav>
</header>

1
docs/contact/volunteer/index.html
View File

@ -49,6 +49,7 @@
<li><a href="../../projects">Projects</a></li>
<li><a href="../../calendar">Calendar</a></li>
<li><a href="..">Contact Us</a></li>
<li><a href="../../shop">Shop</a></li>
</ul>
</footer>
<script src="../../assets/js/scroll.js"></script>

15
docs/index.html
View File

@ -23,6 +23,7 @@
<li><a href="projects">Projects</a></li>
<li><a href="calendar">Calendar</a></li>
<li><a href="contact">Contact Us</a></li>
<li><a href="shop">Shop</a></li>
</ul>
</nav>
</header>
@ -30,24 +31,13 @@
<h1 class="cover-tagline">Helping others through troubling times</h1>
</div>
<main>
<stripe-buy-button
buy-button-id="buy_btn_1Mr5uyIMVsaz1FbAY3ZPB6jw"
publishable-key="pk_test_51Mr3gpIMVsaz1FbA0Qhoacsyl3PzNFcvZ9TRXyLZ4nyp1MqIo9lQxbi9SzrJWqLqjhQkMxRYCGizcB3KkgolPIWu00LdVXnixz"
>
</stripe-buy-button><br />
<stripe-buy-button
buy-button-id="buy_btn_1MrO1EIMVsaz1FbAcmGTsAry"
publishable-key="pk_test_51Mr3gpIMVsaz1FbA0Qhoacsyl3PzNFcvZ9TRXyLZ4nyp1MqIo9lQxbi9SzrJWqLqjhQkMxRYCGizcB3KkgolPIWu00LdVXnixz"
>
</stripe-buy-button><br />
<span>See bottom of page for required test mode details.</span>
<article>
<section class="center extrapadding">
<h1>Help The Chereb Foundation</h1><br />
<span>You can help The Chereb Foundation today in many ways. The list below gives some suggestions on how to help us.</span><br />
<ul class="textleft centercontainer">
<li>Help by praying for us</li>
<li>Help by donation (links above)</li>
<li>Help by donation (see the <a href="shop">shop</a>)</li>
<li>Help by volunteering regularly (apply <a href="contact/volunteer">here</a>)</a></li>
<li>Help by attending events (i.e. donating blood or food, helping pack boxes during events)</li>
</ul><br />
@ -62,7 +52,6 @@
<span>Mail to our address on the <a href="contact">Contact Us</a> page</span><br />
</section>
</article>
<span>The donate and buy a t-shirt button are in test mode, which means that they do not actually transfer funds or ship a t-shirt. For a test run, use card number 4242 4242 4242 4242, any future date, and any CVC for a card or Klarna. For Cash App, use the app on your phone logged into any account. It will not transfer real money. For US bank account, use Test Institution and the Success account. It also supports Google and Apple Pay using a normal card. Again, it won't transfer real money. You can remove the card afterwards if you wish. You can use any phone number and address, however, David Jentes may have access. He will not use this information in any way, and will delete it immediately following ISC.</span>
</main>
<footer data-m="bounce-up" data-m-delay="1" duration="1">
<ul class="flex fcenter">

1
docs/projects/index.html
View File

@ -21,6 +21,7 @@
<li><a href="#" id="current">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
<li><a href="../shop">Shop</a></li>
</ul>
</nav>
</header>

63
docs/shop/index.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<title>Shop - The Chereb Foundation</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/pages.css">
<link rel="stylesheet" href="../assets/css/movement.css">
</head>
<body>
<header data-m="reveal-right" data-m-duration="0.5">
<h1>The Chereb Foundation</h1>
<a href="javascript:void(0)" id="menu"><img src="../assets/img/hamburger.svg" width="25"></a>
<nav>
<ul>
<li><a href="..">Home</a></li>
<li><a href="../about" id="current">About</a></li>
<li><a href="../projects">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
<li><a href="../shop">Shop</a></li>
</ul>
</nav>
</header>
<main data-m="drop" data-m-duration="0.5">
<h1>Shop</h1>
<span>Please read test mode details at the bottom</span>
<section class="flex col extrapadding">
<img src="../assets/img/donation.png" class="shopimage extramargin" />
<div class="iblock">
<h2>Donate</h2>
<h3>Choose your amount</h3>
<span class="fill">This donation goes to the ministry of your choice. Choose your ministry and donation amount at checkout. Read more about our ministries on the <a href="../projects">Projects</a> page.</span><br />
<a href="https://donate.stripe.com/test_bIY14JaOS63hgPm3cf" class="button">Donate</a>
</div>
</section>
<section class="flex col extrapadding">
<img src="../assets/img/tshirt.png" class="shopimage extramargin" />
<div class="iblock">
<h2>"Change the world" T-shirt</h2>
<h3>$14.99</h3>
<span class="fill">Inspire yourself and others to change the world by wearing this t-shirt! All profits from the t-shirt go to the ministry of your choice.</span><br />
<a href="https://buy.stripe.com/test_14k4gV0ae9ft1Us5ko" class="button">Purchase</a>
</div>
</section>
<span>The item purchase buttons are in test mode, which means that they do not actually transfer funds or ship a t-shirt. For a test run, use card number 4242 4242 4242 4242, any future date, and any CVC for a card or Klarna. For Cash App, use the app on your phone logged into any account. It will not transfer real money. For US bank account, use Test Institution and the Success account. It also supports Google and Apple Pay using a normal card. Again, it won't transfer real money. You can remove the card afterwards if you wish. You can use any phone number and address, however, David Jentes may have access. He will not use this information in any way, and will delete it immediately following ISC.</span>
</main>
<footer data-m="bounce-up" data-m-duration="0.5">
<ul>
<li><a href="..">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="../projects">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="../contact">Contact Us</a></li>
</ul>
</footer>
<script src="../assets/js/scroll.js"></script>
<script src="../assets/js/menu.js"></script>
</body>
</html>

3
docs/thankyou/index.html
View File

@ -20,7 +20,8 @@
<li><a href="../about">About</a></li>
<li><a href="../projects">Projects</a></li>
<li><a href="../calendar">Calendar</a></li>
<li><a href="#" id="current">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="../shop" id="current">Shop</a></li>
</ul>
</nav>
</header>