Skip to content
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

Jump to bottom

1st changes landing #206

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

1st changes landing #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added dist/assets/img/Border.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/assets/img/IMG_7011.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/assets/img/IMG_7012.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/assets/img/IMG_7012.jpg.jfif
View file
Open in desktop
Binary file not shown.
57 changes: 44 additions & 13 deletions dist/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root {
--bs-blue: #0d6efd;
--bs-blue: #00c0ff;
--bs-indigo: #6610f2;
--bs-purple: #7464a1;
--bs-pink: #d63384;
Expand Down Expand Up @@ -55,7 +55,7 @@
--bs-white-rgb: 255, 255, 255;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-rgb: 33, 37, 41;
--bs-body-rgb: #00c0ff;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
Expand Down Expand Up @@ -90,6 +90,7 @@ body {
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #07c1fa;
}

hr {
Expand Down Expand Up @@ -602,8 +603,30 @@ progress {
}

.img-fluid {
max-width: 100%;
max-width: 55%;
height: auto;

}
img:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;

/* When the animation is finished, start again */
/* animation-iteration-count: infinite; */
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.img-thumbnail {
Expand Down Expand Up @@ -1392,7 +1415,9 @@ progress {

.col-lg-6 {
flex: 0 0 auto;
width: 50%;
width: 30%;
display: flex;
justify-content: center;
}

.col-lg-7 {
Expand Down Expand Up @@ -7407,6 +7432,10 @@ textarea.form-control-lg {
.mx-2 {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important;
margin-top: 1rem !important;
font-size: calc(1.600rem + 1.5vw) !important;
color: rgb(255, 255, 255)

}

.mx-3 {
Expand Down Expand Up @@ -7897,6 +7926,8 @@ textarea.form-control-lg {
.text-info {
--bs-text-opacity: 1;
color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;

margin-bottom: 1rem !important;
}

.text-warning {
Expand Down Expand Up @@ -8002,7 +8033,7 @@ textarea.form-control-lg {

.bg-light {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
/* background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; */
}

.bg-dark {
Expand All @@ -8012,7 +8043,7 @@ textarea.form-control-lg {

.bg-black {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
/* background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; */
}

.bg-white {
Expand Down Expand Up @@ -11546,14 +11577,14 @@ body {
.masthead {
position: relative;
width: 100%;
height: auto;
height: fit-content;
min-height: 35rem;
padding: 15rem 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/bg-masthead.jpg");
background-position: center;
background: url("../assets/img/IMG_7012.jpg");
background-position: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
background-size: 100%;
}
.masthead h1, .masthead .h1 {
font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
Expand Down Expand Up @@ -11593,7 +11624,7 @@ body {

.about-section {
padding-top: 10rem;
background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 75%, rgba(0, 0, 0, 0.8) 100%);
background: rgb(145, 88, 9)
}
.about-section p {
margin-bottom: 5rem;
Expand All @@ -11608,7 +11639,7 @@ body {
@media (min-width: 992px) {
.projects-section .featured-text {
padding: 0 0 0 2rem;
border-left: 0.5rem solid #64a19d;
border-left: 0.5rem solid #915809;
}
}
.projects-section .project-text {
Expand All @@ -11628,7 +11659,7 @@ body {

.signup-section {
padding: 10rem 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 75%, #000 100%), url("../assets/img/bg-signup.jpg");
background: rgb(145, 88, 9);
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
Expand Down
147 changes: 33 additions & 114 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="description" content="" />
<meta name="author" content="" />
<title>Grayscale - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link rel="icon" type="image/x-icon" href="assets/img/IMG_7011.jpg" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
Expand All @@ -19,7 +19,7 @@
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
<a class="navbar-brand" href="#page-top">Moody Krows</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
Expand All @@ -28,7 +28,6 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#signup">Contact</a></li>
</ul>
</div>
</div>
Expand All @@ -38,9 +37,9 @@
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="d-flex justify-content-center">
<div class="text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
<a class="btn btn-primary" href="#about">Get Started</a>
<h1 class="mx-auto my-0 text-uppercase"></h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5"></h2>
<!-- <a class="btn btn-primary" href="#about">Get Started</a> -->
</div>
</div>
</div>
Expand All @@ -50,58 +49,45 @@ <h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstr
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8">
<h2 class="text-white mb-4">Built with Bootstrap 5</h2>
<h2 class="text-white mb-4">Iinfo about the project</h2>
<p class="text-white-50">
Grayscale is a free Bootstrap theme created by Start Bootstrap. It can be yours right now, simply download the template on
<a href="https://startbootstrap.com/theme/grayscale/">the preview page.</a>
The theme is open source, and you can use it for any purpose, personal or commercial.
the best project ever done
</p>
</div>
</div>
<img class="img-fluid" src="assets/img/ipad.png" alt="..." />
<!-- <img class="img-fluid" src="assets/img/ipad.png" alt="..." /> -->
</div>
</section>
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
<div class="container px-4 px-lg-5">
<!-- Featured Project Row-->
<!-- <script src="https://cdn.logwork.com/widget/countdown.js"></script>
<a href="https://logwork.com/countdown-qiqs" class="countdown-timer" data-style="columns" data-timezone="America/Chicago"
data-textcolor="#cc8722" data-date="2021-09-15 14:57" data-unitscolor="#cc8722">Countdown</a> -->
<div class="row gx-0 mb-4 mb-lg-5 align-items-center">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="assets/img/bg-masthead.jpg" alt="..." /></div>
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="assets/img/IMG_7011.jpg" alt="..." /></div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Shoreline</h4>
<p class="text-black-50 mb-0">Grayscale is open source and MIT licensed. This means you can use it for any project - even commercial projects! Download it, customize it, and publish your website!</p>
<h4>INFO </h4>
<p class="text-black-50 mb-0">Moody Krows will ROCK(or Gloomify) your world! Excited to release the art for our new NFT Project soon. Stay tuned for Spooky Season.</p>
</div>
</div>
</div>
<!-- Project One Row-->
<h1 class="text-white mb-4 text-center">THE COLLECTION</h1>
<div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-01.jpg" alt="..." /></div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Misty</h4>
<p class="mb-0 text-white-50">An example of where you can put an image of a project, or anything else, along with a description.</p>
<hr class="d-none d-lg-block mb-0 ms-0" />
</div>
</div>
</div>
</div>
<div class="col-lg-6"><img class="img-fluid" src="assets/img/Border.png" alt="..." /></div>
<div class="col-lg-6"><img class="img-fluid" src="assets/img/Border.png" alt="..." /></div>
<div class="col-lg-6"><img class="img-fluid" src="assets/img/Border.png" alt="..." /></div>

</div>
<!-- Project Two Row-->
<div class="row gx-0 justify-content-center">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-02.jpg" alt="..." /></div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Mountains</h4>
<p class="mb-0 text-white-50">Another example of a project with its respective description. These sections work well responsively as well, try this theme on a small screen!</p>
<hr class="d-none d-lg-block mb-0 me-0" />
</div>
</div>
</div>
<div class="col-lg-6"><img class="img-fluid" src="assets/img/Border.png" alt="..." /></div>
<div class="col-lg-6" ><img class="img-fluid" src="assets/img/Border.png" alt="..." /></div>
<div class="col-lg-6"><img class="img-fluid" src="assets/img/Border.png" alt="..." /></div>

</div>
</div>
</div>
Expand All @@ -112,88 +98,21 @@ <h4 class="text-white">Mountains</h4>
<div class="row gx-4 gx-lg-5">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
<h2 class="text-white mb-5">Subscribe to receive updates!</h2>
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form class="form-signup" id="contactForm" data-sb-form-api-token="API_TOKEN">
<!-- Email address input-->
<div class="row input-group-newsletter">
<div class="col"><input class="form-control" id="emailAddress" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
<div class="col-auto"><button class="btn btn-primary disabled" id="submitButton" type="submit">Notify Me!</button></div>
</div>
<div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:required">An email is required.</div>
<div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:email">Email is not valid.</div>
<!-- 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 mt-2 text-white">
<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 mt-2">Error sending message!</div></div>
</form>
<h2 class="text-white mb-5">Some Text Here</h2>

</div>
</div>
</div>
</section>
<!-- Contact-->
<section class="contact-section bg-black">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Address</h4>
<hr class="my-4 mx-auto" />
<div class="small text-black-50">4923 Market Street, Orlando FL</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-envelope text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Email</h4>
<hr class="my-4 mx-auto" />
<div class="small text-black-50"><a href="#!">[email protected]</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-mobile-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Phone</h4>
<hr class="my-4 mx-auto" />
<div class="small text-black-50">+1 (555) 902-8832</div>
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a class="mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
</div>
</div>
</section>
<div class="container px-4 px-lg-5 ">
<div class="social d-flex justify-content-center">
<a class="mx-2" href="https://twitter.com/KrowsCo"><i class="fab fa-twitter"></i></a>
<a class="mx-2" href="https://discord.gg/BjgxsExuzm"><i class="fab fa-discord"></i></a>
</div>
</div>

<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; Your Website 2021</div></footer>
<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; Moody Krows 2021</div></footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
Expand Down
Loading