Merge pull request #2 from MihirSachdeva/main

Add TailScout frontend files

TailScout/frontend/assets/css/styles.css

@@ -0,0 +1,395 @@
+/* CUSTOM CSS */
+/* Apply all custom styles here, in a clear and hierarchical order. */
+
+body {
+  padding-top: 4rem;
+  font-size: 1.2em;
+  color: #5a5a5a;
+}
+
+.btn {
+  font-weight: 700;
+}
+
+.btn-primary {
+  background-image: linear-gradient(90deg, #214289 -0.32%, #3d87b8 100.32%);
+}
+
+.btn-primary:hover {
+  background-image: linear-gradient(90deg, #1e3c7e -0.32%, #397aa5 100.32%);
+}
+
+.btn-primary:active {
+  background-image: linear-gradient(
+    90deg,
+    #162e61 -0.32%,
+    #30678b 100.32%
+  ) !important;
+}
+
+.background-animation-container {
+  position: absolute;
+  top: 15%;
+  left: 15%;
+  display: flex;
+}
+
+.background-animation {
+  height: 170px;
+  width: 170px;
+  border-radius: 40px;
+  background-color: #3d87b8a1;
+  border: 10px solid #214289;
+  backdrop-filter: blur(20px);
+  animation: shimmy 4s infinite;
+  animation-direction: alternate;
+  margin-right: 40px;
+}
+
+.color-2 {
+  background-color: #00ca7d7c;
+  border: 10px solid #59ce2a;
+  animation: shimmy 5s infinite;
+  animation-direction: alternate;
+}
+
+.color-3 {
+  background-color: #ffeb3877;
+  border: 10px solid #ffb938;
+  animation: shimmy 6s infinite;
+  animation-direction: alternate;
+}
+
+@keyframes shimmy {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, 70px);
+  }
+}
+
+.navbar {
+  padding: 5px 140px;
+  background-color: #ffffffd2 !important;
+  backdrop-filter: blur(20px) saturate(200%);
+  border-bottom: none;
+}
+
+.navbar-border-bottom {
+  border-bottom: 1px solid #8080804d;
+}
+
+.nav-logo-image {
+  height: 50px;
+  margin-right: 5px;
+}
+
+.nav-logo {
+  display: flex;
+  align-items: center;
+  font-size: 25px;
+  font-weight: 900;
+  color: #2f2f2f !important;
+}
+
+.navbar-toggler {
+  border: none;
+}
+
+.bg-blur-light {
+  background-color: #ffffffad;
+  backdrop-filter: blur(25px);
+}
+
+.main {
+  margin: 20px 140px;
+}
+
+.section-title {
+  text-align: center;
+  margin: 20px 0;
+  font-size: 2em;
+}
+
+.hero-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+}
+
+.hero-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.hero-right {
+  margin: 10px;
+}
+
+.hero-title {
+  font-size: 2.8em;
+  color: #5a5a5a;
+  width: 100%;
+  font-weight: 800;
+}
+
+.hero-description {
+  margin: 10px 0;
+  max-width: 500px;
+}
+
+.hero-buttons {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.hero-buttons > button,
+.hero-buttons > a {
+  margin: 10px;
+  margin-left: 0;
+}
+
+.hero-video {
+  border-radius: 10px;
+}
+
+.hero-video-description {
+  text-align: center;
+  font-size: 0.85em;
+}
+
+.hero-spacer {
+  height: 80px;
+}
+
+.chevron-container {
+  position: absolute;
+  left: calc(50% - 10px);
+}
+
+.chevron {
+  position: absolute;
+  width: 28px;
+  height: 5px;
+  width: 20px;
+  opacity: 0;
+  transform: scale3d(0.5, 0.5, 0.5);
+  animation: scroll 3s ease-out infinite;
+}
+
+.chevron:first-child {
+  animation: scroll 3s ease-out 1s infinite;
+}
+
+.chevron:nth-child(2) {
+  animation: scroll 3s ease-out 2s infinite;
+}
+
+.chevron:before,
+.chevron:after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 51%;
+  background: #808080d4;
+}
+
+.chevron:before {
+  left: 0;
+  transform: skew(0deg, 30deg);
+}
+
+.chevron:after {
+  right: 0;
+  width: 50%;
+  transform: skew(0deg, -30deg);
+}
+
+@keyframes scroll {
+  25% {
+    opacity: 1;
+  }
+  33% {
+    opacity: 1;
+    transform: translateY(30px);
+  }
+  67% {
+    opacity: 1;
+    transform: translateY(40px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
+  }
+}
+
+.container {
+  max-width: unset !important;
+}
+
+.feature-row {
+  display: flex;
+  justify-content: center;
+}
+
+.feature-box {
+  padding: 20px 10px;
+  margin: 10px !important;
+  border-radius: 15px;
+  background: #ffffff;
+  border: 1px solid #80808055;
+  max-width: 350px;
+}
+
+.feature-box > img {
+  height: unset;
+  width: 80%;
+  padding-bottom: 50px;
+  border-radius: 4px;
+}
+
+.feature-step {
+  width: 50px;
+  height: 50px;
+  background-image: linear-gradient(90deg, #214289 -0.32%, #3d87b8 100.32%);
+  border-radius: 100px;
+  font-size: 20px;
+  text-align: center;
+  padding: 10px;
+  color: #ffffff;
+  font-weight: 900;
+  position: absolute;
+  top: -10px;
+  left: -10px;
+}
+
+.marketing .col-lg-4 {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+.marketing h2 {
+  font-weight: 400;
+}
+.marketing .col-lg-4 p {
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.featurette-divider {
+  margin: 5rem 0;
+}
+
+.featurette-heading {
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -0.05rem;
+}
+
+.featurette-image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.featurette-image {
+  width: 100%;
+  border-radius: 4px;
+}
+
+.footer {
+  padding: 20px 140px;
+  border-top: 1px solid #8080804d;
+  background-color: #80808011;
+}
+
+.footer p {
+  margin: 0;
+}
+
+/* RESPONSIVE CSS
+  -------------------------------------------------- */
+
+@media screen and (max-width: 1200px) {
+  .hero-video {
+    width: 356px;
+    height: 200px;
+  }
+}
+
+@media screen and (max-width: 990px) {
+  .navbar {
+    padding: 5px 30px;
+  }
+
+  .hero-section {
+    flex-direction: column;
+    margin: 0;
+  }
+
+  .background-animation {
+    height: 90px;
+    width: 90px;
+    margin-right: 0;
+  }
+
+  .main {
+    margin: 10px;
+  }
+
+  .hero-left {
+    text-align: center;
+  }
+
+  .hero-buttons {
+    flex-direction: column;
+    justify-content: space-evenly;
+  }
+
+  .hero-buttons > button {
+    margin-right: 0;
+  }
+
+  .hero-right {
+    margin: 20px 10px;
+  }
+
+  .featurette-image {
+    margin-top: 20px;
+  }
+
+  .feature-box {
+    min-width: 90%;
+    margin: 10px 0 !important;
+  }
+
+  .footer {
+    padding: 5px 30px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .navbar {
+    padding: 0.5rem 1rem;
+  }
+
+  .footer {
+    padding: 1rem;
+  }
+}
+
+@media (min-width: 40em) {
+  .carousel-caption p {
+    margin-bottom: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+}