From 474c107827237a1eb0d543bcd84fcf27ac6631a3 Mon Sep 17 00:00:00 2001
From: ALeksandra Dukadinoska <ane.dukadinoska123@gmail.com>
Date: Sun, 17 Dec 2023 21:09:18 +0100
Subject: [PATCH] Added Banner
---
starter-files/css/components/_banner.scss | 218 ++++++++++++++++++++++
starter-files/css/components/_index.scss | 1 +
starter-files/css/main.css | 173 +++++++++++++++++
starter-files/css/main.css.map | 2 +-
starter-files/index.html | 44 +++++
5 files changed, 437 insertions(+), 1 deletion(-)
create mode 100644 starter-files/css/components/_banner.scss
diff --git a/starter-files/css/components/_banner.scss b/starter-files/css/components/_banner.scss
new file mode 100644
index 0000000..1789715
--- /dev/null
+++ b/starter-files/css/components/_banner.scss
@@ -0,0 +1,218 @@
+@use "../abstracts/variables" as var;
+@use "../abstracts/mixins" as mix;
+@use "sass:math";
+
+.banner{
+ position: relative;
+ min-height: 88vh;
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../../../Design/Brainster\ Background\ 3.jpg);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: var.$gutter-base * 16;
+
+ @include mix.tablet-styles{
+ padding-top: var.$gutter-base * 12;
+ }
+
+ @include mix.mobile-l-styles{
+ padding-top: var.$gutter-base * 8;
+ }
+
+
+
+
+ .inner{
+ flex-basis: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ h2{
+ font-size: 80px;
+ margin: var.$gutter-base * 2;
+ color: transparent;
+ -webkit-text-stroke: 1px var.$background-color-base;
+ background: url(../../../Design/pattern.png);
+ -webkit-background-clip: text;
+ background-position: 0 0;
+ animation: back 20s linear infinite;
+
+
+ @include mix.tablet-styles{
+ font-size: 50px;
+ }
+ }
+
+ @keyframes back{
+ 100%{
+ background-position: 2000px 0;
+ }
+ }
+ img{
+ width: 20%;
+ z-index: 2;
+
+
+ @include mix.tablet-styles{
+ width: 40%;
+ }
+
+ }
+ }
+
+ .wrapper{
+ height: 400px;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: start;
+ flex-direction: column;
+
+
+ @include mix.mobile-l-styles{
+ display: none;
+ }
+
+
+
+ .label{
+ width: 80px;
+ background-size: cover;
+ cursor: pointer;
+ overflow: hidden;
+ border-radius: 50px;
+ margin: var.$gutter-base * 2;
+ display: flex;
+ align-items: flex-end;
+ transition:.6s cubic-bezier(.28, -0.03,0,.99) ;
+ box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
+ border: 3px dotted var.$background-color-base;
+
+ &:hover{
+ border: 3px dotted var.$text-color-hover;
+ }
+
+
+
+ .crd{
+ display: flex;
+ flex-wrap: nowrap;
+
+ .description{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ height: 80px;
+ width: 520px;
+ opacity: 0;
+ transform: translateX(30px);
+ transition-delay: .3s;
+ transition: all .3s ease;
+
+ @include mix.tablet-styles{
+ width: 300px;
+ }
+
+ a{
+ text-transform: uppercase;
+ color: var.$background-color-base;
+ text-decoration: none;
+ font-size: 20px;
+
+ @include mix.tablet-styles{
+ font-size: 15px;
+ }
+
+ h4{
+ margin: 0;
+ position: relative;
+
+ &::after{
+ content: "";
+ width: 0 ;
+ height: 3px;
+ position: absolute;
+ bottom: -3px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: var.$text-color-hover;
+ transition: width 0.5s ;
+
+ }
+ &:hover{
+ color: var.$text-color-hover;
+ }
+
+ &:hover::after{
+ width: 110% ;
+ }
+
+
+ }
+
+ }
+
+ }
+
+
+ }
+
+ }
+ .label[for="c1"]{
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/marketing.jpg);
+ background-position: center;
+ }
+ .label[for="c2"]{
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/coding.jpg);
+ background-position: center;
+ }
+ .label[for="c3"]{
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/data-science.jpg);
+ background-position: center;
+ }
+ .label[for="c4"]{
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/design.jpg);
+ background-position: center;
+ }
+
+ input{
+ display: none;
+
+ &:checked + label{
+ width: 500px;
+
+ @include mix.tablet-styles{
+ width: 300px;
+ }
+
+ }
+ &:checked + label .description{
+ opacity: 1 !important;
+ transform: translateY(0) !important;
+
+ }
+ }
+
+ }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/starter-files/css/components/_index.scss b/starter-files/css/components/_index.scss
index 87803d7..f8af2a1 100644
--- a/starter-files/css/components/_index.scss
+++ b/starter-files/css/components/_index.scss
@@ -1 +1,2 @@
@forward "./navbar";
+@forward "./banner";
diff --git a/starter-files/css/main.css b/starter-files/css/main.css
index 3bd3de9..cae09b1 100644
--- a/starter-files/css/main.css
+++ b/starter-files/css/main.css
@@ -173,4 +173,177 @@ header .navbar .hamburger .three {
width: 30px;
background-color: white;
}
+}
+
+.banner {
+ position: relative;
+ min-height: 88vh;
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../../../Design/Brainster\ Background\ 3.jpg);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: 5rem;
+}
+@media (max-width: 769px) {
+ .banner {
+ padding-top: 3.75rem;
+ }
+}
+@media (max-width: 426px) {
+ .banner {
+ padding-top: 2.5rem;
+ }
+}
+.banner .inner {
+ flex-basis: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.banner .inner h2 {
+ font-size: 80px;
+ margin: 0.625rem;
+ color: transparent;
+ -webkit-text-stroke: 1px #FCD232;
+ background: url(../../../Design/pattern.png);
+ -webkit-background-clip: text;
+ background-position: 0 0;
+ animation: back 20s linear infinite;
+}
+@media (max-width: 769px) {
+ .banner .inner h2 {
+ font-size: 50px;
+ }
+}
+@keyframes back {
+ 100% {
+ background-position: 2000px 0;
+ }
+}
+.banner .inner img {
+ width: 20%;
+ z-index: 2;
+}
+@media (max-width: 769px) {
+ .banner .inner img {
+ width: 40%;
+ }
+}
+.banner .wrapper {
+ height: 400px;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: start;
+ flex-direction: column;
+}
+@media (max-width: 426px) {
+ .banner .wrapper {
+ display: none;
+ }
+}
+.banner .wrapper .label {
+ width: 80px;
+ background-size: cover;
+ cursor: pointer;
+ overflow: hidden;
+ border-radius: 50px;
+ margin: 0.625rem;
+ display: flex;
+ align-items: flex-end;
+ transition: 0.6s cubic-bezier(0.28, -0.03, 0, 0.99);
+ box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8);
+ border: 3px dotted #FCD232;
+}
+.banner .wrapper .label:hover {
+ border: 3px dotted #FD1201;
+}
+.banner .wrapper .label .crd {
+ display: flex;
+ flex-wrap: nowrap;
+}
+.banner .wrapper .label .crd .description {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ height: 80px;
+ width: 520px;
+ opacity: 0;
+ transform: translateX(30px);
+ transition-delay: 0.3s;
+ transition: all 0.3s ease;
+}
+@media (max-width: 769px) {
+ .banner .wrapper .label .crd .description {
+ width: 300px;
+ }
+}
+.banner .wrapper .label .crd .description a {
+ text-transform: uppercase;
+ color: #FCD232;
+ text-decoration: none;
+ font-size: 20px;
+}
+@media (max-width: 769px) {
+ .banner .wrapper .label .crd .description a {
+ font-size: 15px;
+ }
+}
+.banner .wrapper .label .crd .description a h4 {
+ margin: 0;
+ position: relative;
+}
+.banner .wrapper .label .crd .description a h4::after {
+ content: "";
+ width: 0;
+ height: 3px;
+ position: absolute;
+ bottom: -3px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #FD1201;
+ transition: width 0.5s;
+}
+.banner .wrapper .label .crd .description a h4:hover {
+ color: #FD1201;
+}
+.banner .wrapper .label .crd .description a h4:hover::after {
+ width: 110%;
+}
+.banner .wrapper .label[for=c1] {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/marketing.jpg);
+ background-position: center;
+}
+.banner .wrapper .label[for=c2] {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/coding.jpg);
+ background-position: center;
+}
+.banner .wrapper .label[for=c3] {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/data-science.jpg);
+ background-position: center;
+}
+.banner .wrapper .label[for=c4] {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../Design/design.jpg);
+ background-position: center;
+}
+.banner .wrapper input {
+ display: none;
+}
+.banner .wrapper input:checked + label {
+ width: 500px;
+}
+@media (max-width: 769px) {
+ .banner .wrapper input:checked + label {
+ width: 300px;
+ }
+}
+.banner .wrapper input:checked + label .description {
+ opacity: 1 !important;
+ transform: translateY(0) !important;
}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/starter-files/css/main.css.map b/starter-files/css/main.css.map
index 08611d7..21511b3 100644
--- a/starter-files/css/main.css.map
+++ b/starter-files/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","components/_navbar.scss","abstracts/_variables.scss","abstracts/_mixins.scss"],"names":[],"mappings":"AAAQ,2FAAA;ACAR;EAAI,sBAAA;ACGJ;;ADDA;EAAO,SAAA;ACKP;;ADHA;;;;;EAIK,aAAA;ACOL;;ADLA;EACE,cAAA;EACA,eAAA;ACQF;;ACfA;EACI,yBCgByB;EDfzB,yCAAA;ADkBJ;AChBI;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,2BAAA;EACA,eAAA;EACA,yBCOqB;EDNrB,yCAAA;EACA,WAAA;EACA,UAAA;ADkBR;AGbE;EFdE;IAYQ,0BAAA;EDmBV;AACF;ACjBQ;EACI,WAAA;ADmBZ;AGfE;EFLM;IAKQ,UAAA;EDmBd;AACF;ACfQ;EACI,aAAA;EACA,oBAAA;EACA,mBAAA;EACA,SAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;EACA,kBAAA;ADiBZ;ACdY;EACI,gBAAA;ADgBhB;ACVgB;EACI,sBAAA;ADYpB;AG1CE;EF4BU;IAOQ,mBAAA;EDWlB;AACF;ACTgB;EACI,kBAAA;EACA,YC7CS;ED8CT,iBAAA;EACA,qBAAA;ADWpB;ACToB;EACI,qBAAA;ADWxB;ACPoB;EACI,WAAA;EACA,QAAA;EACA,WAAA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;EACA,yBC5DK;ED6DL,sBAAA;ADSxB;ACNoB;EACI,cCjEK;AFyE7B;ACNoB;EACI,WAAA;ADQxB;AGzEE;EFsCc;IA+BQ,YCzEK;EFiF3B;AACF;ACHY;EACI,yBC1Ea;ED2Eb,YCjFa;EDkFb,iBAAA;EACA,qBAAA;EACA,2BAAA;EACA,kBAAA;EACA,eAAA;ADKhB;ACHgB;EACI,yCAAA;EACA,sBAAA;EACA,gBAAA;ADKpB;AG5FE;EFWM;IAqFQ,eAAA;IACA,OAAA;IACA,UAAA;IACA,MAAA;IACA,sBAAA;IACA,2BAAA;IACA,WAAA;IACA,aAAA;IACA,yBCxGa;IDyGb,uBAAA;IACA,gBAAA;IACA,qBAAA;EDAd;ECEc;IACI,MAAA;EDAlB;AACF;ACWQ;EACI,aAAA;EACA,eAAA;EACA,UAAA;EACA,iBAAA;ADTZ;ACWY;EACI,cAAA;EACA,WAAA;EACA,kCAAA;EAEA,gCAAA;EACA,uBC3Ia;ED4Ib,kBAAA;ADThB;ACaY;EACI,WAAA;ADXhB;ACaY;EACI,WAAA;ADXhB;ACaY;EACI,WAAA;ADXhB;AGvIE;EF0HM;IA6BQ,cAAA;IACA,UAAA;EDZd;ECec;IACI,UAAA;EDblB;ECgBc;IACI,wCAAA;IACA,uBCrKS;EFuJ3B;ECiBc;IACI,0CAAA;IACA,WAAA;IACA,uBC3KS;EF4J3B;AACF","file":"main.css"}
\ No newline at end of file
+{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","components/_navbar.scss","abstracts/_variables.scss","abstracts/_mixins.scss","components/_banner.scss"],"names":[],"mappings":"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","file":"main.css"}
\ No newline at end of file
diff --git a/starter-files/index.html b/starter-files/index.html
index 45c6d45..f804230 100644
--- a/starter-files/index.html
+++ b/starter-files/index.html
@@ -69,6 +69,50 @@
</div>
</nav>
</header>
+
+
+ <!-- Banner -->
+ <div class="banner">
+ <div class="wrapper">
+ <input type="radio" name="slide" id="c1" />
+ <label for="c1" class="label">
+ <div class="crd">
+ <div class="description">
+ <a href="https://brainster.co/marketing/" target="_blank"><h4>Digital Marketing</h4></a>
+ </div>
+ </div>
+ </label>
+ <input type="radio" name="slide" id="c2" />
+ <label for="c2" class="label">
+ <div class="crd">
+ <div class="description">
+ <a href="https://brainster.co/full-stack/" target="_blank"><h4>Full-Stack</h4></a>
+ </div>
+ </div>
+ </label>
+ <input type="radio" name="slide" id="c3" />
+ <label for="c3" class="label">
+ <div class="crd">
+ <div class="description">
+ <a href="https://brainster.co/data-science/" target="_blank"><h4>Data-science</h4></a>
+ </div>
+ </div>
+ </label>
+ <input type="radio" name="slide" id="c4" />
+ <label for="c4" class="label">
+ <div class="crd">
+ <div class="description">
+ <a href="https://brainster.co/graphic-design/" target="_blank"> <h4>Graphic Design</h4></a>
+ </div>
+ </div>
+
+ </div>
+ <div class="inner">
+ <h2>BRAINSTER</h2>
+ <img src="../Design/logo-orange.png" alt="" />
+ <h2>LABS</h2>
+ </div>
+ </div>
<!-- Responsive Navbar -->
<script>
--
GitLab