The Sieara Project
My sister Sieara was a really amazing person. She would give her last to anyone in need. In the spirit of giving I'd like to share my knowledge with those of you who want to learn. Most codes can be found online if you know where to look, but you'd still need to know how to resize them for google sites.
Learning to create websites has taught me to be patient, to be precise and to have balance in my life. Most projects take long hours and tons of work to complete. It can be stressful, but also rewarding. I wanted to do something special and give back as best I can in the name of my sister. Share knowledge and grow💕.
If you'd like to share your code with others who aren't tech savvy visit the contact page.
If you would like to share your substance misuse or mental health struggle stories please visit the contact page.
If you or someone you know is suffering with alcoholism or mental health issues, know that you matter. Help is available to you here.
Hey Human!
You Matter.✨
Newsletter Sign Up Using Google Sheets and HTML
First Create a sheet in Google Sheets. https://docs.google.com/spreadsheets
Create labels. For this I used Name and Email, but you can change it to whatever you want. Just be sure to change the data tags in the HTML.
For the code to work you will need to connect your Google sheet to https://sheetdb.io/
Once you create an account inside of Sheetsdb - Create a new API
Paste the URL of your Google Sheet into the Sheetsdb
<!DOCTYPE html>
<html>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
color: blue
}
form {
font-family: Arial;
Color: black; // Change Daily News text color
}
.container {
padding: 15px;
background-color: transparent;
}
input[type=text],
input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid;
color: black; // Change text box color and button text color
}
input[type=checkbox] {
margin-top: 16px;
color: red;
}
input[type=submit] {
background-color: #FD6D2F; // Change button color
color: black;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
</style>
<body> <!Change SheetDB link to yours>
<form action="https://sheetdb.io/api/v1/uchgggghtyrjgddghg" method="post" id='sheetdb-form'>
<div class="container">
<div class="container" style="background-color:transparent">
<!Change the data tags if you are not using name or email>
<input type="text" placeholder="Full Name" name="data[name]" required>
<input type="text" placeholder="Email address" name="data[email]" required>
<label>
<input type="checkbox" style="background-color:transparent" checked="checked" name="subscribe"> Daily Newsletter </label>
</div>
<div class="container">
<input type="submit" value="Subscribe">
</div>
</form>
<script>
var form = document.getElementById('sheetdb-form');
form.addEventListener("submit", e => {
e.preventDefault();
fetch(form.action, {
method: "POST",
body: new FormData(document.getElementById("sheetdb-form")),
}).then(response => response.json()).then((html) => {
// Add your redirect link or javascript here
window.open('https://changethislink.com', '_blank');
});
});
</script>
</body>
</html>
Simple Product Card
This is a simple product card that is NOT connected to any checkout gateway. I use these in my Google sites to show clients what is possible.
<<!DOCTYPE html>
<html>
<head>
<style>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<div class="card">
<img src="imghosturl" alt="Digital Planner" style="width:100%">
<h1>Cute Digital Planner</h1>
<p class="price">$19.99</p>
<p>Get this Cute Digital Planner in our shop today! Lorem impsum journal planner. Ipsum 365 days, ipsum task, and more.</p>
<p><button>Add to Cart</button></p>
</div>
</body>
</html>
PRODUCT CARD WITH PAYPAL ADD TO CART
To add the product card like I have simply copy the code below. You will need to add your PayPal button Value in order for this to work! It is a transparent responsive button! You can easily change the font to one of your choosing. I use my favorite Font Bellota.
To add your paypal button value you locate the tag paypalbuttonvalue below and place your button value in it's place.
<input type="hidden" name="hosted_button_id" value="paypalbuttonvalue">⬅️ change this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Bellota Text' rel='stylesheet'>
<style>
{
font-family: 'Bellota Text';font-size: 18px; text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: 'Bellota Text';
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
.card button:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">Product Card</h2>
<div class="card">
<img src="https://hostedimage.jpg" alt="Turkish Bath Towels" style="width:100%">
<h1>Turkish Bath Towels</h1>
<p class="price">$19.99</p>
<p>Thick, Soft Cotton Towels. Lorem rorem ipsum lorem towlsum. Sustainable towel, source, water, calm, 100% authentic.</p>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="paypalbuttonvalue">
<button alt="Add to Cart" border="0" src="border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;" width="1" height="1"></form>Add to Cart</form>
</div>
</body>
</html>
Social Media Icons
Social media icons aren't a difficult task - yet often I find tons of convoluted codes that aren't required. The below social media HTML allows you to change the colors of your social media icons individually. If you want to add an icon for a different social media checkout https://fontawesome.com/v6/search?s=solid%2Cbrands and add or remove the fa-whatever you're changing it to (Descriptive I know).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Bellota Text' rel='stylesheet'>
<style>
.fa {
padding: 15px;
font-size: 10px;
width: 10px;
text-align: center;
text-decoration: none;
margin:center;
border-radius: 50%;
border: none;
outline: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 200px;
margin: auto;
vertical-align: middle;
display: inline-block;
margin-right: 5px;
margin-left: 5px
margin-top: 5 px;
}
.fa:hover {
opacity: 0.7;
}
.fa: a {
padding: 25px;
text-align: center;
color: #fff;
}
.fa-facebook {
background: #FD6D2F;
color: white;
}
.fa-twitter {
background: #FD6D2F;
color: white;
}
.fa-linkedin {
background: #FD6D2F;
color: white;
}
.fa-youtube {
background: #FD6D2F;
color: white;
}
.fa-instagram {
background: #FD6D2F;
color: white;
}
.fa-pinterest {
background: #FD6D2F;
color: white;
}
</style>
</head>
<body>
<a href="addurl" class="fa fa-facebook"></a>
<a href="addurl" class="fa fa-youtube"></a>
<a href="addurl" class="fa fa-twitter"></a>
<a href="addurl" class="fa fa-instagram"></a>
<a href="addurl" class="fa fa-pinterest"></a>
<a href="addurl class="fa fa-linkedin"></a>
</body>
</html>