From 98168a2b39a0d550e7948e69e5b1ec95baf87e2e Mon Sep 17 00:00:00 2001 From: "MR. ANDOH FRANCIS" Date: Mon, 21 Aug 2023 13:06:21 +0000 Subject: [PATCH 1/4] resolved linters errors --- src/index.html | 3 - src/learn.html | 74 ++++++ src/mentorship.html | 128 ++++++++++ src/programs.html | 559 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 761 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 2c15bff..6376a47 100644 --- a/src/index.html +++ b/src/index.html @@ -416,10 +416,7 @@
Opening hours
© 2022 Copyright: Brightfield Tech Academy - - - \ No newline at end of file diff --git a/src/learn.html b/src/learn.html index e69de29..f2ccd41 100644 --- a/src/learn.html +++ b/src/learn.html @@ -0,0 +1,74 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/src/mentorship.html b/src/mentorship.html index e69de29..8228810 100644 --- a/src/mentorship.html +++ b/src/mentorship.html @@ -0,0 +1,128 @@ + + + + + + Document + + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/src/programs.html b/src/programs.html index 247a7b9..08d74b0 100644 --- a/src/programs.html +++ b/src/programs.html @@ -21,7 +21,566 @@ +
+
+ +
+
+ +
+
+
+
+
+ +
+ +
+

LAND YOUR DREAM JOB +
IN TECH

+

Learn today’s most + in-demand digital skills and + kickstart your new career +

+ +
+
+
+
+
+ + + + + +
+
+
+ +
+
+
+ Skill Path +

Code Foundations

+

+ Everyone’s talking about coding,but where do you start? + This path will give you an introduction to the world of + code and basic concepts. By the end, you’ll know whether Data Science, Computer Science or Web Development is right for you. + +

+
+ To start this Skill Path, Contact us now!!. +
+ +
+ +
+
+
+ +
+ + +
+ +
+

+ DISCOVER OUR CODING PROGRAMS +

+ +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ + +
+ +
+ + + + +
+
+

+ “This program has been instrumental + in allowing our company to continue growing at + a rapid pace." +

+ -----Founder: Oliver Mensah----- +
+
+
+ + + + + +
+

HAVE QUESTIONS?

+

GIVE US A CALL (+233 54 489 2841)

+ +
+ +
+
+
+
+ +
+
+

Online Info Session

+
    +
  • Get a course recommendation
    • +
  • See how we teach
    • +
  • Meet your instructors
    • + + +
+ + +
+ +
+
+
+ +
+
+

Admissions Q&A

+
    +
  • See how the bootcamp works
    • +
  • Learn all our course options
    • +
  • Discover custom financing options
    • +
+ + +
+ +
+ +
+
+ + + +` + + + + +
+
+
+

Frequently Asked Questions

+
+
+
+

+ +

+
+
+
    +
  • Highly qualify educators
    + We have a group of exceptionally skilled teachers who work in the industry and have extensive backgrounds in both teaching and programming. +
    • +
  • Project based learning
    + While working on the projects, students will pick up the principles of coding. + This approach has proven to be a great strategy to keep kids interested in their education and improve their learning opportunities. +
    • +
  • + Project based learning
    + + While working on the projects, students will pick up the principles of coding. This approach has proven to be a great strategy to keep kids interested in their education and improve their learning opportunities. Curriculum Development To keep the quality of our curriculum at a high level, we have invested hundreds of hours in its development. + Robotics, drones, and electronics are all included into our curriculum in a special way.With constant engagement and the ability to be creative, the students will benefit from this. + Our entertaining and interesting curriculum guarantees that students not only learn the fundamentals of coding, +
    • + +
  • Work together with parents
    + At Champion Coders, we believe that students need guidance from us as well as from parents to help them grow. + We communicate with students’ parents regularly to keep them in the loop of their child’s performance. Any students that are struggling in class, we work together with parents to help students in the best possible way. We also go the extra mile by giving free review classes to make sure that no students are left behind. +
    • +
  • + Certificate
    + +
    We will also issue certificate of completion.
    + +
    • +
+ +
+
+
+ + +
+

+ +

+
+
+ Depending on the course and your schedule, our bootcamps last anywhere from 14-36 weeks. Here’s how it breaks down: +
  • + Coding Bootcamp: 14-26 weeks +
    • +
  • + Data Science Bootcamp: 16-20 Weeks +
    • +
  • + Cybersecurity Bootcamp: 24 Weeks +
    • +
  • + UI/UX Bootcamp: 24 Weeks +
    • + +
    +
    +
    +
    +

    +

    +
    + +
    + +
    + + + + +
    +
    +
    +
    +
    +
    +
    + Sample photo + +
    +

    C.E.O - Mr. Oliver Mensh

    +

    + Oliver Mensah is + a Mastercard Foundation Scholar + Alumnus and a software engineer at + Future500 B.V. Besides his day-to-day job as a software engineer, he is very active in the developer community in sub-Saharan Africa and contributes to programs designed to support the professional + development of software engineers in Africa. + +

    +
    +
    +
    +
    +

    Contact Us

    + + +
    + We can help you identify potential candidates. We also share job openings via our channels to a private group of graduates who have successfully completed job readiness seminars. + + Please submit the form below and our staff will reach out to you directly. Thank you for growing tech talent in the region! +
    +

    Student registration form

    + +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    + + +
    + +
    + +
    Gender:
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + +
    +
    + + + +
    +
    + + + +
    +
    + + + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    + " Just too bored? Want to be creative and want to do something thrilling? Here it is, learn now, CSS, JavaScript and much more. + Contact us right now and do not miss out on the chance-- Brightfield Academy." +
    +
    --- Chief Supervisor: Richmond Andoh ---
    + +
    +
    +
    + +
    + + + + + +
    + + + +
    + +
    + +
    + + + \ No newline at end of file From 2eb920003ef2c8ab9c9405abfce2029188819ae1 Mon Sep 17 00:00:00 2001 From: "MR. ANDOH FRANCIS" Date: Tue, 12 Sep 2023 17:47:23 +0000 Subject: [PATCH 2/4] added all files --- ...irt-svgrepo-com.svg => businessPerson.svg} | 0 ...amwork-svgrepo-com(1).svg => teamwork.svg} | 0 src/css/contact.css | 386 ++++++++++++ src/css/learn.css | 550 +++++++++++++++++- src/css/mentorship.css | 463 ++++++++++++++- src/css/programs.css | 483 ++++++++++++++- src/css/style.css | 80 +-- src/index.html | 22 +- src/index.js | 14 +- src/learn.html | 502 +++++++++++++++- src/mentorship.html | 435 +++++++++++++- src/programs.html | 12 +- webpack.config.js | 4 + 13 files changed, 2879 insertions(+), 72 deletions(-) rename src/assets/svg/{business-person-with-a-resolved-expression-shirt-svgrepo-com.svg => businessPerson.svg} (100%) rename src/assets/svg/{teamwork-svgrepo-com(1).svg => teamwork.svg} (100%) create mode 100644 src/css/contact.css diff --git a/src/assets/svg/business-person-with-a-resolved-expression-shirt-svgrepo-com.svg b/src/assets/svg/businessPerson.svg similarity index 100% rename from src/assets/svg/business-person-with-a-resolved-expression-shirt-svgrepo-com.svg rename to src/assets/svg/businessPerson.svg diff --git a/src/assets/svg/teamwork-svgrepo-com(1).svg b/src/assets/svg/teamwork.svg similarity index 100% rename from src/assets/svg/teamwork-svgrepo-com(1).svg rename to src/assets/svg/teamwork.svg diff --git a/src/css/contact.css b/src/css/contact.css new file mode 100644 index 0000000..dc9b6d3 --- /dev/null +++ b/src/css/contact.css @@ -0,0 +1,386 @@ +:root{ + --primary:#00BFFF; + --secondary:#0c1424; + --body: rgb(252, 245, 245); + } + +.authbutton a { + color: white !important; + background-color: var(--primary) !important; /* margin-right: 1rem ; */ + margin-left: 1.25rem; + margin-right: 1.25rem; + padding-top: 1.25rem; + padding-bottom: 1.25rem; + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; + text-decoration: none !important; + font-size: small; +} + + +.navbar-nav > span { + font-size: x-small; + position: absolute; + top: -20px; + right: 15px; + color: var(--primary); + + +} + +.navbar-scroll .nav-link, + +.navbar-scroll .navar-brand { +color: #4f4f4f; +} + +.navbar-scroll .nav-link:hover { +color: #1266f1; +} + +/* Color of the links AFTER scroll */ +.navbar-scrolled .nav-link, + +.navbar-scrolled .navar-brand { +color: #4f4f4f; +} + +/* Color of the navbar AFTER scroll */ +.navbar-scroll, +.navbar-scrolled { +background-color: #fff; +} + +/* An optional height of the navbar AFTER scroll */ +.navbar.navbar-scroll.navbar-scrolled { +padding-top: 5px; +padding-bottom: 5px; +} + + +nav .show ul > li{ +margin: auto; +transition: all 300ms; +padding-top: 1rem; + +} + + +.show .nav-link:hover{ +color: #1266f1 !important;; + +} + +nav .show{ +height: 100vh; +transition: all 0.5s; +position: relative; +} + + + +nav{ +margin-top: 1rem; +width:100vw !important; +margin: 0px; +min-height: 5rem; +position: relative; +font-family: 'Poppins', sans-serif; +} + + +.navbar-toggler{ +border: none; +} + +.navbar-toggler:focus, +.navbar-toggler:active, +.navbar-toggler-icon:focus{ +outline: none; +box-shadow: none; +border: 0; +} + +.toggler-icon{ +display: block; +height: 2px; +width: 26px; + +background-color: var(--primary); +transition: all 0.5s; +} + + + +.middle-bar { +margin: 5px auto; +} + + + +.navbar-toggler .top-bar{ +transform: rotate(45deg); +transform-origin: 10% 10%; + +} +.navbar-toggler .middle-bar{ +opacity: 0; +filter: alpha(opacity=0); + +} + +.navbar-toggler .bottom-bar{ +transform: rotate(-45deg); +transform-origin: 10% 10%; + +} + +@media (max-width :982) { + nav collapse { + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } +} + + + + + +/* when navbar is collapsed start */ + +.navbar-toggler.collapsed .top-bar{ + +transform: rotate(0); +} +.navbar-toggler.collapsed .middle-bar{ +opacity: 1; +filter: alpha(opacity=100); + +transform: rotate(0); +} + +.navbar-toggler.collapsed .bottom-bar{ + +transform: rotate(0); +} + + + + + + +body { + width:100vw; + font-family: 'Noto Sans Mono', monospace; + + background-color: rgb(252, 245, 245); + z-index: -3; + /* display: flex; + flex-direction: column; + align-items: center; + justify-content: center; */ + color: var(--secondary); + } + + + .wrap{ + max-width: 1398px; + margin: auto; + position:relative; + overflow-x:hidden !important; + + } + + + + /* ============ mobile view .end// ============ */ + + /* video */ + + .wrapme{ + position: relative; + } + + .bgPic{ + background-color:#0c1424; + + } + + + .bgPic > img{ + background-position: cover; + background-repeat: no-repeat; + background-attachment: fixed; + } + + .bgPic .overlay{ + position: absolute; + background-color: rgba(0, 0, 0,0.8); + width: 100%; + height: 100%; + top: 0; + } + + .bgPic .wrap { + + color: white; + position: absolute; + + top: 10%; + bottom: 5%; + left: 5%; + z-index: 2; + font-weight: bolder; + + } + + .bgPic .header{ + font-size: 4vw; + font-weight: bolder; + line-height:90%; + /* text-shadow:1px 1px 5px #fff ; */ + + } + + .bgPic .subheader{ + line-height:100%; + font-size:6vw; + + width: 70%; + } + /* bgpic */ + + + /* header pathwasy */ + + /* end of header pathway*/ + + + + /* start 6 col pathway */ + .wrappathway{ + margin-bottom: 3rem; + margin-top: 3rem; + } + + + #ApplyNow { + + margin: auto; + padding-left: 3rem; + padding-right: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; + border-style: none; + background-color: var(--primary); + color: white !important; + } + + + + #ApplyNow a{ + text-decoration: none; + color: white; + } + + +/* contacts start */ + +section{ + margin-left: 5%; + margin-right: 5%; + position: relative; + margin-top: 4rem; + background-color: white; +} + +.form{ + + padding-bottom: 5%; + padding-top:10%; + padding-right: 5%; + padding-left: 5%; + +} + + + + + +.gradient-custom { + /* fallback for old browsers */ + background: #f093fb; + + /* Chrome 10-25, Safari 5.1-6 */ + background: -webkit-linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1)); + + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + background: linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1)) + } + + .card-registration .select-input.form-control[readonly]:not([disabled]) { + font-size: 1rem; + line-height: 2.15; + padding-left: .75em; + padding-right: .75em; + } + .card-registration .select-arrow { + top: 13px; + } + + + /* contacts end */ + + + + + + + p{ + font-size: large; + } + + + + #floatn img{ + + width: 4rem; + height: 4rm; + border-radius: 6rem; + opacity: 0.4; + +} + + + + + + /* footerstart */ + + footer{ + margin-top: 8rem; + width: 100%; + margin-left: 0px; + margin-right: 0px; + font-family: 'Poppins', sans-serif; + } + + + footer a:hover{ + color: var(--primary) !important; + } + + + footer p:hover{ + color: var(--primary) !important; + } + + + footer a{ + color: var(--primary) !important; + } + + /* footer end */ \ No newline at end of file diff --git a/src/css/learn.css b/src/css/learn.css index d94d416..ed3861b 100644 --- a/src/css/learn.css +++ b/src/css/learn.css @@ -1,5 +1,549 @@ -* { - box-sizing: border-box; - padding: 0; +:root { + --primary: #00bfff; + --secondary: #0c1424; + --body: rgb(252, 245, 245); +} + +/* +font-family: 'Noto Sans Mono', monospace; +font-family: 'Poppins', sans-serif; */ + +body { + width: 100vw; + font-family: 'Noto Sans Mono', monospace; + background-color: rgb(252, 245, 245); + z-index: -3; + + /* display: flex; +flex-direction: column; +align-items: center; +justify-content: center; */ + color: var(--secondary); +} + +.wrap { + max-width: 1398px; + margin: auto; + position: relative; + overflow-x: hidden !important; +} + + +/* header nav */ + +/* header nav */ + + + + +/* Color of the links BEFORE scroll */ +.navbar-scroll .nav-link, +.navbar-scroll .navar-brand { + color: #4f4f4f; +} + +.navbar-scroll .nav-link:hover { + color: #1266f1; +} + +/* Color of the links AFTER scroll */ +.navbar-scrolled .nav-link, +.navbar-scrolled .navar-brand { + color: #4f4f4f; +} + +/* Color of the navbar AFTER scroll */ +.navbar-scroll, +.navbar-scrolled { + background-color: #fff; +} + +/* An optional height of the navbar AFTER scroll */ +.navbar.navbar-scroll.navbar-scrolled { + padding-top: 5px; + padding-bottom: 5px; +} + +nav .show ul > li { + margin: auto; + transition: all 300ms; + padding-top: 1rem; +} + +.show .nav-link:hover { + color: #1266f1 !important; +} + +nav .show { + height: 100vh; + transition: all 0.5s; + position: relative; +} + +nav { + margin-top: 1rem; + width: 100vw !important; margin: 0; + min-height: 5rem; + position: relative; + font-family: 'Poppins', sans-serif; +} + +.navbar-toggler { + border: none; +} + +.navbar-toggler:focus, +.navbar-toggler:active, +.navbar-toggler-icon:focus { + outline: none; + box-shadow: none; + border: 0; +} + +.toggler-icon { + display: block; + height: 2px; + width: 26px; + background-color: var(--primary); + transition: all 0.5s; +} + +.middle-bar { + margin: 5px auto; +} + +.navbar-toggler .top-bar { + transform: rotate(45deg); + transform-origin: 10% 10%; +} + +.navbar-toggler .middle-bar { + opacity: 0; + filter: alpha(opacity=0); +} + +.navbar-toggler .bottom-bar { + transform: rotate(-45deg); + transform-origin: 10% 10%; +} + +@media (max-width: 982) { + nav collapse { + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } +} + + + + + + + + + + +/* when navbar is collapsed start */ + +.navbar-toggler.collapsed .top-bar { + transform: rotate(0); +} + +.navbar-toggler.collapsed .middle-bar { + opacity: 1; + filter: alpha(opacity=100); + transform: rotate(0); +} + +.navbar-toggler.collapsed .bottom-bar { + transform: rotate(0); +} + + + + + + + +/* end of navbar collpsed */ + + + + + + + + + + +/* video */ + +.wrapme { + position: relative; +} + +.bgPic { + background-color: #0c1424; +} + +.bgPic > img { + background-position: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.bgPic .overlay { + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + width: 100%; + height: 100%; + top: 0; +} + +.bgPic .wrap { + color: white; + position: absolute; + top: 10%; + bottom: 5%; + left: 5%; + z-index: 2; + font-weight: bolder; +} + +.bgPic .subheader { + line-height: 100%; + font-size: 8vw; + width: 70%; +} + +/* bgpic */ + + + + + + + +/* overview */ + +#overview { + font-family: 'Poppins', sans-serif; +} + +/* header pathwasy */ + +/* end of header pathway */ + + + +/* start 6 col pathway */ +.wrappathway { + margin-bottom: 3rem; + margin-top: 3rem; +} + +#ApplyNow { + margin: auto; + padding-left: 3rem; + padding-right: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; + border-style: none; + background-color: var(--primary); + color: white !important; +} + +#ApplyNow a { + text-decoration: none; + color: white; +} + + +/* end of 6 col pathway */ + + + +/* start of firsttestimonial */ +#firsttestimonial { + margin-top: 3rem; + margin-bottom: 3rem; + background-color: var(--secondary); + position: relative; + height: 30rem; + z-index: -3; +} + +* flip over */ +/* start of first middlePagePictures */ +#FirstFlipOver { + height: 100%; + width: 90%; + position: relative; + z-index: -2; + padding: 10% 10% 10% 10%; + margin: auto; + position: relative; + background-color: rgba(233, 230, 227, 0.5) !important; +} + +#firstImageholder { + background-image: url(../../dist/images/louiz.jpg); + background-size: contain; + background-repeat: no-repeat; + top: 1rem; + bottom: 1rem; + width: 90%; + position: absolute; + z-index: -1; +} + +.FirstOverlayOfFlipOver { + min-height: 20rem; + max-width: 70%; + background-color: rgb(255, 255, 255); + margin-top: 2%; + margin-left: 39%; + margin-bottom: 4%; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); + z-index: 2; +} + +.FirstOverlayOfFlipOver > h6 { + font-size: 98%; + color: rgb(0, 0, 0); + padding-right: 10%; + padding-left: 10px; + padding-top: 3rem; + padding-bottom: 10px; + width: 80%; + margin: auto; +} + +.FirstOverlayOfFlipOver > hr { + border-color: white; +} + + + + + + +/* end of flip over */ + +/* end of firsttestimonial */ + + + + + + +/* end of two vid section start */ + + +/* about founder start */ +.bio .text-center { + color: var(--primary); +} + + +/* about founder end */ + + +/* after flip what you need to know section */ + +.wrapvector { + margin-top: 3rem; + margin-bottom: 3rem; +} + +.circleVector { + width: 200px; + height: 200px; + background-color: var(--primary); + border-radius: 8rem; + position: relative; +} + +.wrapvector .body { + padding-left: 1rem; + padding-right: 1rem; + width: 200px; +} + +.wrapvector > .body > p { + font-size: small; + margin-top: 2rem; +} + +.wrapvector > .body > h4 { + margin-top: 2rem; +} + +.wrapvector > .body { + margin: auto; +} + +.wrapvector .circleVector > .fa-user-group { + margin: auto; + padding-top: 2rem; + color: white; +} + +.wrapvector .circleVector > .fa-business-time { + margin: auto; + padding-top: 2rem; + color: white; +} + +.wrapvector .circleVector > .fa-laptop { + margin: auto; + padding-top: 2rem; + color: white; +} + +.wrapvector .circleVector > .fa-certificate { + margin: auto; + padding-top: 3rem; + color: white; +} + + + + + + +/* end of what you need to know */ + + + +/* requirements starts */ + +.requirementSec button { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 3rem; + padding-right: 3rem; + border-style: none; + background-color: var(--primary); + color: white !important; + margin: auto; +} + +.requirementSec button a { + text-decoration: none; + color: white; + font-weight: bold; +} + + +/* requirements end */ + + + + +/* testimonies start */ +.testimoniesSec { + background-color: var(--secondary); + color: white; + margin-bottom: 3rem; + margin-top: 3rem; +} + +.testimoniesSec h1 { + width: 70%; + margin: auto; + color: white; + padding-top: 2rem; + padding-bottom: 2rem; +} + +/* .testimoniesSec small{ + +} */ + + +/* tetimonies end */ + + + + + + + +/* interested in mentoring? section */ +.interestedSection .wrap { + width: 80%; + padding-top: 4rem; + padding-bottom: 3rem; +} + +.interestedSection { + background-color: white; + margin-top: 3rem; + margin-left: 2.5rem; + margin-right: 2.5rem; +} + +.interestedSection .wrap button { + margin-top: 2rem; + padding: 1.2rem; + border-style: none; + background-color: var(--primary); + color: white !important; +} + +.interestedSection a { + color: white; +} + + + + + + + + +/* interested inmentoring section */ + +#floatn img { + width: 4rem; + height: 4rm; + border-radius: 6rem; + opacity: 0.4; +} + + + + + + + + + +/* footerstart */ + +footer { + margin-top: 8rem; + width: 100%; + margin-left: 0; + margin-right: 0; + font-family: 'Poppins', sans-serif; +} + +footer a:hover { + color: var(--primary) !important; +} + +footer p:hover { + color: var(--primary) !important; +} + +footer a { + color: var(--primary) !important; } + +/* footer end */ diff --git a/src/css/mentorship.css b/src/css/mentorship.css index d94d416..e445204 100644 --- a/src/css/mentorship.css +++ b/src/css/mentorship.css @@ -1,5 +1,460 @@ -* { - box-sizing: border-box; - padding: 0; - margin: 0; +:root { + --primary: #00bfff; + --secondary: #0c1424; + --body: rgb(252, 245, 245); } + +/* +font-family: 'Noto Sans Mono', monospace; +font-family: 'Poppins', sans-serif; +*/ + +body { + width: 100vw; + font-family: 'Noto Sans Mono', monospace; + background-color: rgb(252, 245, 245); + z-index: -3; + + /* display: flex; + flex-direction: column; + align-items: center; + justify-content: center; */ + color: var(--secondary); +} + +.wrap { + max-width: 1398px; + margin: auto; + position: relative; + overflow-x: hidden !important; +} + + +/* header nav */ + +/* header nav */ +.navext { + background-color: var(--primary); + height: 7rem; + width: 100vw; +} + +.wrapme { + position: relative; +} + +.bgPic { + background-color: #0c1424; +} + +.bgPic > img { + background-position: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.bgPic .overlay { + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + width: 100%; + height: 100%; + top: 0; +} + +.bgPic .wrap { + color: white; + position: absolute; + top: 10%; + bottom: 5%; + left: 5%; + z-index: 2; + font-weight: bolder; +} + +.bgPic .header { + font-size: 4vw; + font-weight: bolder; + line-height: 90%; + + /* text-shadow:1px 1px 5px #fff ; */ +} + +.bgPic .subheader { + line-height: 100%; + font-size: 6vw; + width: 70%; +} + +/* bgpic */ + + + + + + +/* bgpic */ + + +/* header pathwasy */ + +/* end of header pathway */ + + + +/* start 6 col pathway */ +.wrappathway { + margin-bottom: 3rem; + margin-top: 3rem; +} + +#ApplyNow { + margin: auto; + padding-left: 3rem; + padding-right: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; + border-style: none; + background-color: var(--primary); + color: white !important; +} + +#ApplyNow a { + text-decoration: none; + color: white; +} + + +/* end of 6 col pathway */ + + + +/* start of firsttestimonial */ +#firsttestimonial { + margin-top: 3rem; + margin-bottom: 3rem; + background-color: var(--secondary); + position: relative; + height: 30rem; + z-index: -3; +} + +* flip over */ +/* start of first middlePagePictures */ +#FirstFlipOver { + height: 100%; + width: 90%; + position: relative; + z-index: -2; + padding: 10% 10% 10% 10%; + margin: auto; + position: relative; + background-color: rgba(233, 230, 227, 0.5) !important; +} + +#firstImageholder { + background-image: url(../../dist/images/louiz.jpg); + background-size: contain; + background-repeat: no-repeat; + top: 1rem; + bottom: 1rem; + width: 90%; + position: absolute; + z-index: -1; +} + +.FirstOverlayOfFlipOver { + min-height: 20rem; + max-width: 70%; + background-color: rgb(255, 255, 255); + margin-top: 2%; + margin-left: 39%; + margin-bottom: 4%; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); + z-index: 2; +} + +.FirstOverlayOfFlipOver > h6 { + font-size: 98%; + color: rgb(0, 0, 0); + padding-right: 10%; + padding-left: 10px; + padding-top: 3rem; + padding-bottom: 10px; + width: 80%; + margin: auto; +} + +.FirstOverlayOfFlipOver > hr { + border-color: white; +} + + + + + + +/* start of as mentor */ + +.AsMent { + background-color: var(--secondary); + color: white; +} + +.AsMentWrap { + width: 80%; + margin: auto; + padding-top: 2rem; + padding-bottom: 2rem; +} + +/* end of end of as mentor */ + + + + + + +/* end of two vid section start */ + + +/* about founder start */ +.bio .text-center { + color: var(--primary); +} + + +/* about founder end */ + + +/* after flip what you need to know section */ + +.wrapvector { + margin-top: 3rem; + margin-bottom: 3rem; +} + +.circleVector { + width: 200px; + height: 200px; + background-color: var(--primary); + border-radius: 8rem; + position: relative; +} + +.wrapvector .body { + padding-left: 1rem; + padding-right: 1rem; + width: 200px; +} + +.wrapvector > .body > p { + font-size: small; + margin-top: 2rem; +} + +.wrapvector > .body > h4 { + margin-top: 2rem; +} + +.wrapvector > .body { + margin: auto; +} + +.wrapvector .circleVector > .fa-video { + margin: auto; + padding: 2rem; + color: white; +} + +.wrapvector .circleVector > .fa-business-time { + margin: auto; + padding: 2rem; + color: white; +} + +.wrapvector .circleVector > .fa-handshake-angle { + margin: auto; + padding: 2rem; + color: white; +} + +.wrapvector .circleVector > .fa-certificate { + margin: auto; + padding: 2rem; + color: white; +} + + + + +/* end of what you need to know */ + + +/* */ +#becomeMember { + padding-left: 3rem; + padding-right: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; + border-style: none; + background-color: var(--primary); + color: white !important; + font-family: 'Poppins', sans-serif; +} + +#becomeMember a { + text-decoration: none; + color: white; +} + + + + +/* requirements starts */ + +.requirementSec button { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 3rem; + padding-right: 3rem; + border-style: none; + background-color: var(--primary); + color: white !important; + margin: auto; +} + +.requirementSec button a { + text-decoration: none; + color: white; + font-weight: bold; +} + + +/* requirements end */ + + + + +/* testimonies start */ +.testimoniesSec { + background-color: var(--secondary); + color: white; + margin-bottom: 3rem; + margin-top: 3rem; +} + +.testimoniesSec h1 { + width: 70%; + margin: auto; + color: white; + padding-top: 2rem; + padding-bottom: 2rem; +} + +/* .testimoniesSec small{ + +} */ + + +/* tetimonies end */ + + + + + + + + + +/* interested in mentoring section */ +.mentormotiv { + background-color: white; + margin: 2rem; +} + +.mentorMotivationwrap { + width: 70%; + margin: auto; + padding: 5%; + color: var(--secondary); +} + +hr { + border-color: var(--secondary); +} + +.card-registration .btn-outline-light { + color: white; + background-color: var(--primary); +} + +#floatn img { + width: 4rem; + height: 4rm; + border-radius: 6rem; + opacity: 0.4; +} + +/* interested in mentoring? section */ +.interestedSection .wrap { + width: 80%; + padding-top: 4rem; + padding-bottom: 3rem; +} + +.interestedSection { + background-color: white; + margin-top: 3rem; + margin-left: 2.5rem; + margin-right: 2.5rem; +} + +.interestedSection .wrap button { + margin-top: 2rem; + padding: 1.2rem; + border-style: none; + background-color: var(--primary); + color: white !important; +} + +.interestedSection a { + color: white; +} + + + + + + + + +/* interested inmentoring section */ + + + + + + +/* footerstart */ + +footer { + margin-top: 8rem; + width: 100%; + margin-left: 0; + margin-right: 0; + font-family: 'Poppins', sans-serif; +} + +footer a:hover { + color: var(--primary) !important; +} + +footer p:hover { + color: var(--primary) !important; +} + +footer a { + color: var(--primary) !important; +} + +/* footer end */ diff --git a/src/css/programs.css b/src/css/programs.css index d94d416..ef44792 100644 --- a/src/css/programs.css +++ b/src/css/programs.css @@ -1,5 +1,482 @@ -* { - box-sizing: border-box; - padding: 0; +:root { + --primary: #00bfff; + --secondary: #0c1424; + --body: rgb(252, 245, 245); +} + +.authbutton a { + color: white !important; + background-color: var(--primary) !important; /* margin-right: 1rem ; */ + margin-left: 0.25rem; + margin-right: 0.25rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; + text-decoration: none !important; + font-size: small; +} + +.navbar-nav > span { + font-size: x-small; + position: absolute; + top: -20px; + right: 15px; + color: var(--primary); +} + +.navbar-scroll .nav-link, +.navbar-scroll .navar-brand { + color: #4f4f4f; +} + +.navbar-scroll .nav-link:hover { + color: #1266f1; +} + +/* Color of the links AFTER scroll */ +.navbar-scrolled .nav-link, +.navbar-scrolled .navar-brand { + color: #4f4f4f; +} + +/* Color of the navbar AFTER scroll */ +.navbar-scroll, +.navbar-scrolled { + background-color: #fff; +} + +/* An optional height of the navbar AFTER scroll */ +.navbar.navbar-scroll.navbar-scrolled { + padding-top: 5px; + padding-bottom: 5px; +} + +nav .show ul > li { + margin: auto; + transition: all 300ms; + padding-top: 1rem; +} + +.show .nav-link:hover { + color: #1266f1 !important; +} + +nav .show { + height: 100vh; + transition: all 0.5s; + position: relative; +} + +nav { + margin-top: 1rem; + width: 100vw !important; margin: 0; + min-height: 5rem; + position: relative; + font-family: 'Poppins', sans-serif; +} + +.navbar-toggler { + border: none; +} + +.navbar-toggler:focus, +.navbar-toggler:active, +.navbar-toggler-icon:focus { + outline: none; + box-shadow: none; + border: 0; +} + +.toggler-icon { + display: block; + height: 2px; + width: 26px; + background-color: var(--primary); + transition: all 0.5s; +} + +.middle-bar { + margin: 5px auto; +} + +.navbar-toggler .top-bar { + transform: rotate(45deg); + transform-origin: 10% 10%; +} + +.navbar-toggler .middle-bar { + opacity: 0; + filter: alpha(opacity=0); +} + +.navbar-toggler .bottom-bar { + transform: rotate(-45deg); + transform-origin: 10% 10%; +} + +@media (max-width: 982) { + nav collapse { + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } +} + + + + + +/* when navbar is collapsed start */ + +.navbar-toggler.collapsed .top-bar { + transform: rotate(0); +} + +.navbar-toggler.collapsed .middle-bar { + opacity: 1; + filter: alpha(opacity=100); + transform: rotate(0); +} + +.navbar-toggler.collapsed .bottom-bar { + transform: rotate(0); +} + +.wrap { + max-width: 1398px; + margin: auto; + position: relative; + overflow-x: hidden !important; +} + + + +/* video */ + +.wrapme { + position: relative; +} + +.bgPic { + background-color: #0c1424; +} + +.bgPic > img { + background-position: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.bgPic .overlay { + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + width: 100%; + height: 100%; + top: 0; +} + +.bgPic .wrap { + color: white; + position: absolute; + top: 10%; + bottom: 5%; + left: 5%; + z-index: 2; + font-weight: bolder; +} + +.bgPic .header { + font-size: 5vw; + font-weight: bolder; + line-height: 70%; + + /* text-shadow:1px 1px 5px #fff ; */ +} + +.bgPic .subheader { + line-height: 110%; + font-size: 3vw; + width: 70%; +} + + +/* bgpic */ + +/* flip over */ + +/* start of logo section */ +.logoSectionWrap { + margin-top: 3rem; + color: #0c1424; +} + +.logoSectionWrap img { + margin: auto; +} + +.logoSectionWrap button { + margin-top: 2rem; + margin-left: 2rem; + padding: 2rem 2rem 2rem 2rem; + background-color: var(--primary); + border-style: none; + color: white; + font-size: large; +} + + +/* end of logo section */ + + + +/* start of progrms section */ + +.programsOffered > .heading { + margin: 5rem; + padding: 4rem; + font-size: 4vh; + font-weight: bolder; + color: white; +} + +.programsOffered { + margin-top: 3rem; + + background-color: #f3f3f5; + margin-bottom: 5rem; + color: white; + height: 100%; +} + +.programsOffered #leftcol { + height: 30rem; + background-color: rgb(251, 247, 247); + border-radius: 1rem; + margin-bottom: 3rem; + margin-left: 3rem; + margin-right: 3rem; +} + +.programsOffered .rightColContainer { + height: 30rem; + background-color: transparent; + border-radius: 1rem; + margin-bottom: 3rem; + margin-right: 2rem; + margin-left: 2rem; +} + +.programsOffered .rightcols { + height: 8rem; + background-color: rgb(228, 224, 224); + margin-left: 1rem; + margin-right: 1rem; + padding: 1srem; + border-radius: 1rem; +} + +.rightColContainer .top { + margin-top: 0; +} + +.rightColContainer .bottom { + margin-bottom: 0; +} + + +/* end of progarams section */ + + +/* BEFORE ACCORDION */ +.custom-list { + list-style-type: none; + margin-left: 0; + padding-left: 0; +} + +.custom-list li::before { + content: "\2714"; + color: blue; + display: inline-block; + width: 1em; + margin-left: -1em; +} + +.beForeAccordionButton { + margin-top: 1rem; + margin-left: 1rem; + padding: 1rem 1rem 1rem 1rem; + background-color: var(--primary); + border-style: none; + color: white; + font-size: large; +} + + + +/* FAQ */ + +.FAQ { + margin: auto; + font-family: 'Poppins', sans-serif; +} + +.FAQ > h1 { + font-weight: bolder; + font-family: 'Poppins', sans-serif; +} + + +/* FAQ */ + +/* start of details and vid section */ +.twoVidSection { + margin-top: 3rem; + margin-bottom: 3rem; +} + +/* about founder start */ +.bio .text-center { + color: var(--primary); +} + +/* form area start */ +.card-registration .select-input.form-control[readonly]:not([disabled]) { + font-size: 1rem; + line-height: 2.15; + padding-left: 0.75em; + padding-right: 0.75em; +} + +.card-registration .select-arrow { + top: 13px; +} + +select { + line-height: 2.15rem; + font-size: 1rem; + padding-left: 0.75em; + padding-right: 0.75em; + border-style: none; +} + +.formstart { + margin-top: 3rem; +} + +.contactArea { + background-color: white; + color: #0c1424; + margin-bottom: 2rem; +} + +.card-body > h6 { + line-height: 1.5rem; +} + +.OliverBio p { + color: rgb(48, 47, 47); + line-height: 1.9rem; + width: 80%; + border-right: 1px solid #0c1424; + border-left: 1px solid #0c1424; + padding-left: 1rem; + padding-right: 1rem; +} + +.OliverBio h4 { + margin-bottom: 2rem; +} + +.OliverBio { + margin-top: 2rem; +} + +#OliverBioimg { + margin-top: 4rem; + margin-left: 0; + border-top-left-radius: 5rem; +} + +/* form area end */ + +section .sub { + background-color: var(--primary); + color: white; +} + + + +/* programmeDesc start */ + +.programmeDesc { + background-color: #0c1424; +} + +.programmeDesc blockquote { + z-index: 1; + padding-left: 2rem; + padding-bottom: 0.5rem; + padding-top: 3rem; + color: white; + padding-left: 2rem; + padding-right: 2rem; + margin: auto; + width: 70%; + color: #fff; +} + +.programmeDesc #chief { + color: white; + margin-bottom: 3rem; +} + +.programmeDesc .wrap { + margin-bottom: 3rem; +} + + + +/* programmeDesc end */ + +section p { + font-size: x-large; + font-family: 'Poppins', sans-serif; +} + +#floatn img { + width: 4rem; + height: 4rm; + border-radius: 6rem; + opacity: 0.4; +} + + + + + +/* footerstart */ + +footer { + margin-top: 8rem; + width: 100%; + margin-left: 0; + margin-right: 0; + font-family: 'Poppins', sans-serif; +} + +footer a:hover { + color: var(--primary) !important; +} + +footer p:hover { + color: var(--primary) !important; +} + +footer a { + color: var(--primary) !important; } diff --git a/src/css/style.css b/src/css/style.css index 707074c..20157ea 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -7,25 +7,31 @@ --body: rgb(252, 245, 245); } -* { - border: 1px solid red; - padding: 0; - margin: 0; +*{ + padding: 0px; + margin: 0px; box-sizing: border-box; } -header { - width: 100vw; -} - body { + color: #00bfff; width: 100vw; - font-family: 'Noto Sans Mono', monospace; - background-color: rgb(252, 245, 245); - z-index: -3; - color: var(--secondary); + +} +/* Navbar start */ +.navbarWrapper { + background-color: var(--primary); + height: 6rem; + width: 100%; + overflow-y: hidden; } +.companyLogo { + max-height: 25%; + max-width: 18%; + overflow:hidden; + margin-left: 1rem; +} .navbar-nav > span { font-size: x-small; position: absolute; @@ -39,24 +45,23 @@ body { color: #4f4f4f; } -.navbar-scrolled .nav-link, -.navbar-scrolled .navar-brand { - color: #4f4f4f; -} - -.nav-link:active { +.navbar-scroll .nav-link:hover { color: #1266f1; } -.navbar-scroll .nav-link:hover { - color: #1266f1; +/* Color of the links AFTER scroll */ +.navbar-scrolled .nav-link, +.navbar-scrolled .navar-brand { + color: #4f4f4f; } +/* Color of the navbar AFTER scroll */ .navbar-scroll, .navbar-scrolled { background-color: #fff; } +/* An optional height of the navbar AFTER scroll */ .navbar.navbar-scroll.navbar-scrolled { padding-top: 5px; padding-bottom: 5px; @@ -79,6 +84,9 @@ nav .show { } nav { + margin-top: 1rem; + width: 100vw !important; + margin: 0; min-height: 5rem; position: relative; font-family: 'Poppins', sans-serif; @@ -115,6 +123,7 @@ nav { .navbar-toggler .middle-bar { opacity: 0; + filter: alpha(opacity=0); } .navbar-toggler .bottom-bar { @@ -122,8 +131,8 @@ nav { transform-origin: 10% 10%; } -@media (max-width: 982px) { - nav .collapse { +@media (max-width: 982) { + nav collapse { margin: auto; display: flex; flex-direction: column; @@ -132,13 +141,19 @@ nav { } } + + + + +/* when navbar is collapsed start */ + .navbar-toggler.collapsed .top-bar { transform: rotate(0); } .navbar-toggler.collapsed .middle-bar { opacity: 1; - filter: alpha(100); + filter: alpha(opacity=100); transform: rotate(0); } @@ -226,11 +241,6 @@ nav { } } -.videotextButton { - background-color: #05aae1; - color: white; -} - .videoWrapper video { object-fit: cover; height: 100vw; @@ -242,10 +252,6 @@ nav { bottom: 0; } -.bio { - width: 100%; -} - .missionAndValues { background-color: #505170; } @@ -256,12 +262,12 @@ nav { padding: 1rem; } -.bio .h4, +.missionAndValuesContainer .h4, p { color: white; } -.wrapParentDualSection .textArea { +.ParentWrapperForDualSection .textArea { padding: 3rem; } @@ -279,6 +285,12 @@ p { border-color: white; } +/* Section Number 4 */ +.hallMark { + color: #0c1424; + background-color: rgb(247, 246, 245); +} + #centerCounterArea { padding-top: 10%; padding-bottom: 15%; diff --git a/src/index.html b/src/index.html index 6376a47..bd101ed 100644 --- a/src/index.html +++ b/src/index.html @@ -26,7 +26,7 @@
    + +
    + + + +
    + +
    +
    +
    +
    + +
    + +
    +

    LEARNING NEVER EXHAUSTS, + THE MIND +

    +

    + LEARN +

    + +
    +
    +
    +
    + + + +
    +

    + OVERVIEW +

    +
    +
    + +

    + At Brightfied Tech Academy, you’ll learn by doing. + Just as a blacksmith apprentice works first with the + metal before understanding the metallurgy, + here, you will tinker and build with code before the concepts + really sink in. If you’ve never coded before, it’s a lot + like playing a musical instrument: you need to practice, + over and over, making mistakes, yet growing each time in + your skill. And the more you practice, the easier it becomes, + the more you can hear the melody, see the patterns, and understand the craft. +

    +

    + What makes us unique: deeper learning-by-doing through a cyclical, + iterative process . First, you learn the fundamentals of + programming using the Javascript language. Then you apply those + same fundamentals in a different programming language, deepening your understanding of them. Then again in a different language.
    + This allows you to use the concepts in different situations, developing both your ability to program and + your ability to learn a new + language - a mission critical skill as a software
    + developer. +

    + +
    +
    +
    + +
    + +
    +
    +
    + + + + +
    +
    +
    +

    Learning Pathways

    + +
    +
    +
    + + + + + +
    +
    +
    +
    +

    + Web Development with JavaScript +

    +

    + Learn how to build, create, and maintain websites. Front-end developers craft the + look and feel of a website that is visible to the end user. +

    +
    + +
    +
    +
    +

    + Data Analysis with Python +

    +

    + Use raw data to find trends and answer questions. You’ll learn crucial Python and SQL skills necessary for advanced analytics. +

    +
    + +
    +
    +
    +

    + Software Development with C# +

    +

    + In this pathway, you’ll learn how to create a computer program that completes a specific task or set of tasks. +

    +
    + +
    +
    + + + +
    +
    +
    +

    + User Experience (UX) Design +

    +

    + Learn how to research, analyze, create designs that software developers will use to create applications +

    +
    + +
    +
    +
    +

    + Quality Assurance Testing +

    +

    + Learn about the tools and code used to test all kinds of software to ensure the highest quality products are produced +

    +
    + +
    +
    +
    +

    + Two Courses For Every Pathway! +

    +

    + All of these pathways contain two 12-week courses, the first introducing you to the concept and the second expanding on it in more detail +

    +
    + +
    +
    +
    + + + + + +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + + + +
    + + +
    +
    +
    +
    +
    +
    +
    +
    + “I was lost after completing High School and needed a career so I went to Brightfield to try a class.I needed for my job and the soft skills I needed to prosper. This program gave me a whole new start and I’m forever grateful.” + Charles, Brightfied graduate. +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + +
    +
    +
    +
    +

    + What you need to know +

    + +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +

    + Online or In-person +

    +
    + You will attend an + in-person or virtual + class meetup (once a week in the evenings), complete an online + curriculum, and build several projects for your online portfolio. +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +

    + It takes time +

    +
    + You will complete two or more courses + (12 weeks each) in the pathway to + the programming language of your choice. + 15-20 hours of time is required each week + for class and curriculum work. +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +

    + You need a computer +

    +
    + You will need a desktop computer or + laptop (Windows, Mac, or Linux) and access + to the internet. If you do not have a computer, let us know and we may be able to help you get one. + You do not need a brand new computer. +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +

    + Show off your skills +

    +
    + Upon completion, you will + get a Certificate of Completion that is recognized + by many local developers. You will also create projects for your digital + portfolio that shows employers you know what you're doing. +
    +
    +
    + +
    +
    +
    +
    + + + + + + + +
    +
    +
    +
    +
    +

    Requirements

    +

    + In order to participate in Brightfield's Academy Programs, you must be looking to enter the tech industry as a career, and reside in one of the following counties: Ghana-Sefwi Bekwai, + ,Nigeria,Togo. +

    + +
    + +
    +
    +
    +
    + + + + + +
    +
    +
    +
    +

    + “I’m very happy I followed my curiosity and got into this field. + It can be challenging at times, but I enjoy the challenge.” +

    +

    — Francis Kwabena Andoh, graduate and full-time developer

    + +
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
    + +
    +
    +

    + Meet Richmond Andoh, Samuel Abu and Francis K. Andoh our 2022 graduates from the Full Stack Career Cohort Program at Brightfied Tech Academy +

    + + +
    + + +
    +
    +
    + ... +
    +
    Card title
    +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    +
    +
    + Last updated 3 mins ago +
    +
    +
    +
    +
    + ... +
    +
    Card title
    +

    This card has supporting text below as a natural lead-in to additional content.

    +
    +
    + Last updated 3 mins ago +
    +
    +
    +
    +
    + ... +
    +
    Card title
    +

    This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

    +
    +
    + Last updated 3 mins ago +
    +
    +
    +
    + + + + + +
    +
    +
    +