Skip to content

committed #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

committed #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
88aad76
committed
kmercy-afk Oct 14, 2025
537bc81
commit
kmercy-afk Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
109 changes: 52 additions & 57 deletions dist/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,63 +61,58 @@ <h1>Contact Me</h1>
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
<label for="name">Name</label>
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<div class="form-floating">
<input class="form-control" id="email" type="email" placeholder="Enter your email..." data-sb-validations="required,email" />
<label for="email">Email address</label>
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<div class="form-floating">
<input class="form-control" id="phone" type="tel" placeholder="Enter your phone number..." data-sb-validations="required" />
<label for="phone">Phone Number</label>
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
<div class="form-floating">
<textarea class="form-control" id="message" placeholder="Enter your message here..." style="height: 12rem" data-sb-validations="required"></textarea>
<label for="message">Message</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
<br />
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</main>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<div class="control-group form-group mb-3">
<div class="row">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
</div>

<div class="control-group form-group mb-3">
<div class="row">
<label class="col-sm-2 col-form-label" for="email">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
</div>

<div class="control-group form-group mb-3">
<div class="row">
<label class="col-sm-2 col-form-label" for="sex">Sex</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sex" id="man" value="man" checked>
<label class="form-check-label" for="man">Man</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sex" id="woman" value="woman">
<label class="form-check-label" for="woman">Woman</label>
</div>
<p class="help-block text-danger"></p>
</div>
</div>
</div>

<div class="control-group form-group mb-3">
<div class="row">
<label class="col-sm-2 col-form-label" for="text">Text</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" id="text" name="message" placeholder="Text" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
</div>

<div id="success"></div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary" id="sendMessageButton">SEND</button>
</div>
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Expand Down
67 changes: 56 additions & 11 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,62 @@ <h1>Clean Blog</h1>
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
<h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
</a>
<p class="post-meta">
Posted by
<a href="#!">Start Bootstrap</a>
on September 24, 2023
</p>
</div>
<div class="row justify-content-center">
<!-- Row 1 -->
<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
<a href="post.html" class="text-decoration-none">
<div class="card h-100 shadow-sm border-0">
<img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Man must explore, and this is exploration at its greatest</h5>
<p class="card-text flex-grow-1">Problems look mighty small from 150 miles up</p>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
<a href="post.html" class="text-decoration-none">
<div class="card h-100 shadow-sm border-0">
<img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h5>
<p class="card-text flex-grow-1">Success is defined by you. It always seems impossible until it's done.</p>
</div>
</div>
</a>
</div>
</div>
<div class="row justify-content-center">
<!-- Row 2 -->
<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
<a href="post.html" class="text-decoration-none">
<div class="card h-100 shadow-sm border-0">
<img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Science has not yet mastered prophecy</h5>
<p class="card-text flex-grow-1">We predict too much for the next year and yet far too little for the next ten.</p>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
<a href="post.html" class="text-decoration-none">
<div class="card h-100 shadow-sm border-0">
<img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Failure is not an option</h5>
<p class="card-text flex-grow-1">Many say exploration is part of our destiny, but it’s actually our duty to future generations.</p>
</div>
</div>
</a>
</div>
</div>
<!-- Centered Button -->
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10 mx-auto text-center">
<a class="btn btn-primary" href="#">OLDER POSTS →</a>
</div>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
Expand Down