diff --git a/assets/css/V2-section2.css b/assets/css/V2-section2.css new file mode 100644 index 0000000..5b8b81e --- /dev/null +++ b/assets/css/V2-section2.css @@ -0,0 +1,47 @@ +.big { + background-color: rgb(40, 115, 138); + width: 100vw; + height: 250px; + display: block; + justify-content: center; + align-items: center; +} +.our-bg { + /* border: 2px solid red; */ + width: 100vw inherit; + font-family: sans-serif; + font-weight: bold; + font-size: 20px; + padding-left: 47vw; + color: #fff; + padding-top: 6vh; +} +p { + /* border: 2px solid red; */ + width: 100vw inherit; + font-family: sans-serif; + font-weight: bold; + font-size: 13px; + color: #fff; + margin-bottom: -10px; +} +.paragrapgh-bg1 { + width: 100vw inherit; + padding-left: 40vw; +} +.paragrapgh-bg2 { + width: 100vw inherit; + padding-left: 38vw; +} +.paragrapgh-bg3 { + width: 100vw inherit; + padding-left: 35vw; +} +.paragrapgh-bg4 { + width: 100vw inherit; + padding-left: 35vw; +} +.paragrapgh-bg5 { + width: 100vw inherit; + padding-left: 45vw; +} diff --git a/assets/css/V2-section3.css b/assets/css/V2-section3.css new file mode 100644 index 0000000..0f008f3 --- /dev/null +++ b/assets/css/V2-section3.css @@ -0,0 +1,409 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.blog { +/* margin: auto; */ +display: flex; +gap: 15%; +margin: 9%; +flex-direction: row; + +} +.introduction{ + order: 1; +} +.introduction .introduction1{ + display: flex; + border-radius: 20px 20px 10px 10px; + +} +.introduction1 img{ + width: 140px; + padding-bottom: 20px; + +} +.paragraph { +padding-top: 15px; +} +.paragraph .intro{ + padding-left: 20px; + width: 220px; + font-size: 17px; +} +.paragraph .date{ + padding-top: 6px; + padding-left: 20px; +font-size: 13px; +} +.introduction .introduction2{ + display: flex; +} +.introduction2 img{ + width: 140px; + padding-bottom: 20px; +} + +.introduction .introduction3{ + display: flex; +} +.introduction3 img{ + width: 140px; +} +.insights { +width: 420px; +order: 2; +} +.insights h2{ + height: 50px; +} +.insights p{ + height: 180px; + text-align: left; +} +.insights h3{ + text-align: center; + +} +.insights h3 a{ + text-decoration: none; + color: black; + position: relative; +} +.insights h3 a::after { + content: ''; + position: absolute; + left: 0; + bottom: -4px; + width: 0; + height: 2px; + background-color: #28738A; + opacity: 0; + } + + @keyframes line-appear { + 0% { + opacity: 0; + width: 0; + } + 100% { + opacity: 1; + width: 50%; + margin-left: 15%; + + } + } + + .insights h3 a:hover::after { + animation: line-appear 0.5s forwards; + } +.insights h3 a:hover{ + color:#1c4d5c; + cursor: pointer; +} + + + + +/* RESPONSIVENESS */ + +@media screen and (max-width:400px){ + .blog{ + flex-direction: column; + width: 100%; + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ +height: 50px; +font-size: 20px; + } + .insights p{ + width: 280px; + height: 230px; + font-size: 15px; + } + .insights h3{ + height: 50px; + font-size: 16px; + margin-right: 140px; + } + .introduction1 img{ + width: 100px; + } + .introduction2 img{ + width: 100px; + } + .introduction3 img{ + width: 100px; + } + .paragraph{ + padding-top: 6px; + } +.paragraph .intro{ + font-size: 14px; +} +.paragraph .date{ + font-size: 12px; +} +} + +@media screen and (min-width:401px) and (max-width:480px){ + .blog{ + flex-direction: column; + width: 100%; + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 24px; + } + .insights p{ + width: 400px; + height: 280px; + font-size: 18px; + } + .insights h3{ + height: 60px; + font-size: 18px; + margin-right: 140px; + margin-top: -11%; + } + .introduction1 img{ + width: 120px; + } + .introduction2 img{ + width: 120px; + } + .introduction3 img{ + width: 120px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 18px; + } + .paragraph .date{ + font-size: 15px; + } + } + @media screen and (min-width:481px) and (max-width:580px){ + .blog{ + flex-direction: column; + width: 100%; + /* margin-left:22% ; */ + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 24px; + } + .insights p{ + width: 480px; + height: 280px; + font-size: 18px; + + } + .insights h3{ + height: 60px; + font-size: 18px; + margin-right: 140px; + margin-top: -20%; + } + .introduction1 img{ + width: 120px; + } + .introduction2 img{ + width: 120px; + } + .introduction3 img{ + width: 120px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 18px; + } + .paragraph .date{ + font-size: 15px; + } + } + @media screen and (min-width:601px) and (max-width:700px){ + .blog{ + flex-direction: column; + width: 100%; + /* margin-left:22% ; */ + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 24px; + margin-left: 10%; + } + .insights p{ + width: 650px; + height: 280px; + font-size: 18px; + } + .insights h3{ + height: 60px; + font-size: 18px; + margin-right: 140px; + margin-top: -32%; + margin-left: 26%; + } + .introduction1 img{ + width: 120px; + } + .introduction2 img{ + width: 120px; + } + .introduction3 img{ + width: 120px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 18px; + } + .paragraph .date{ + font-size: 15px; + } + } + @media screen and (min-width:701px) and (max-width:800px){ + .blog{ + gap: 12%; + margin: 6%; + } +.introduction .introduction1 img{ + width: 28%; + +} +.paragraph .intro{ + font-size: 14px; + margin-top: -5%; +} +.paragraph .date{ +font-size: 11px; +} +.introduction .introduction2 img{ + width: 28%; + +} +.introduction .introduction3 img{ + width: 28%; + +} +.insights h2{ + font-size: 17px; +} +.insights p{ + width: 350px; + margin-top: -3%; +} +.insights h3{ + margin-top: 4%; +} + } + + @media screen and (min-width:801px) and (max-width:880px){ + .blog{ + gap: 12%; + margin: 6%; + } +.introduction .introduction1 img{ + width: 28%; + +} +.paragraph .intro{ + font-size: 14px; + margin-top: -5%; +} +.paragraph .date{ +font-size: 11px; +} +.introduction .introduction2 img{ + width: 28%; + +} +.introduction .introduction3 img{ + width: 28%; + +} +.insights h2{ + font-size: 17px; +} +.insights p{ + width: 350px; + margin-top: -3%; +} +.insights h3{ + margin-top: 4%; +} + } + @media screen and (min-width:881px) and (max-width:940px){ + .blog{ + gap: 12%; + margin: 6%; + } +.introduction .introduction1 img{ + width: 28%; + +} +.paragraph .intro{ + font-size: 14px; + margin-top: -5%; +} +.paragraph .date{ +font-size: 11px; +} +.introduction .introduction2 img{ + width: 28%; + +} +.introduction .introduction3 img{ + width: 28%; + +} +.insights h2{ + font-size: 17px; +} +.insights p{ + width: 450px; + margin-top: -3%; +} +.insights h3{ + margin-top: 4%; +} + } + + @media screen and (min-width:941px) and (max-width:1030px){ + .insights p{ + width: 430px; + + } + + } \ No newline at end of file diff --git a/assets/css/connect.css b/assets/css/connect.css new file mode 100644 index 0000000..41474e2 --- /dev/null +++ b/assets/css/connect.css @@ -0,0 +1,163 @@ +* { + padding: 0px; + margin: 0px; +} +body { + height: 100%; +} + +.connect-container { + width: 80%; + height: 60vh; + margin: 20px 10em; + font-family: "poppins", sans-serif; + display: inline-flex; + /* gap: 5%; */ + padding: 10px; + border:1px solid yellow; +} +.connect-content { + width: 50%; +} + +.connect-icons { + min-width: 45%; + height: 100%; + background: white; + position: relative; +} +.square { + height: 60%; + width: 60%; + background:#00c2ff1f; + transform: translate(30%, 30%); + animation: anime alternate 1s; + border-radius: 30px; +} +.mbaza-hand{ + width: 40%; + border-radius: 50%; + /* background: rgb(59, 59, 167); */ + transform: translate(70%, 3%); + /* display:flex; + justify-content: center; + align-items: center; */ +} +.mbaza-hand h3 { + transform: translateY(150%); +} + +.social-icon { + width: 80px; + height: 80px; + border-radius: 50%; + position: absolute; + background: white; + /* box-shadow: 1px 1px 10px 1px rgb(83, 82, 82); */ + transform: scale(0.8); + cursor: pointer; + transition: 0.4s; + border: 1px solid black; +} +.social-icon img { + border-radius: 50%; + width: 60%; + height: 60%; + transform: translate(30%, 30%); +} +.social-icon1 { + top: 8%; + left: 20%; +} +.social-icon2 { + top: 35%; + left: 12%; +} +.social-icon3 { + top: 0%; + left: 50%; +} +.social-icon4 { + right: 20%; +} +.social-icon5 { + top: 60%; + left: 30%; +} +.social-icon6 { + bottom: 10%; + left: 56%; +} +.social-icon7 { + top: 8%; + right: 17%; +} +.social-icon8 { + top: 40%; + right: 21%; +} +.social-icon9 { + top: 20%; + left: 60%; + /* background: red; */ + animation: anime alternate 1s reverse; +} +.social-icon:hover { + transform: scale(1); + box-shadow: 1px 1px 15px 1px rgb(47, 47, 47); +} +.connect-content { + padding: 30px; +} +.connect-content h2 { + text-align: center; + margin-bottom: 20px; +} +.connect-content p { + font-size: 1.1em; + line-height: 150%; + margin-bottom: 20px; +} +.connect-content a { + margin: 5px; + text-decoration: none; + text-align: center; + padding: 3px 0px; + font-weight: 600; +} +.mbaza-hand img { + transform: translate(0%, 60%); + width: 10rem; +} +@media screen and (max-width: 800px) { + .connect-container { + display: block; + } + .connect-icons { + width: 100%; + } + .connect-content { + width: 100%; + } +} + +@kefyframe anime { + from { + transform: scale(0.7); + } + + to { + transform: scale(0.85); + } +} +@media screen and (max-width: 800px) { + .connect-container { + display: block; + } + .connect-icons { + width: 100%; + } + .connect-content { + width: 100%; + } +} diff --git a/assets/css/downloadaccess.css b/assets/css/downloadaccess.css new file mode 100644 index 0000000..ed454c2 --- /dev/null +++ b/assets/css/downloadaccess.css @@ -0,0 +1,46 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + body { + margin: 10% 0 0 10%; + font-family: sans-serif; + } + body h3 { + padding-left: 40px; + } + form { + margin-top: 20px; + margin-left: 50px; + width: 56%; + height: 70vh; + padding: 40px 0 0 200px; + background-color: #ddd8d8; + border-radius: 5px; + } + .input-box { + padding-bottom: 30px; + } + .input { + padding: 10px 200px 10px 0; + } + input[type] { + border: none; + border-radius: 10px; + } + button { + padding: 8px 30px; + border-radius: 10px; + border: none; + background-color: #f59221; + } + button a { + text-decoration: none; + color: black; + } + #text { + padding-top: 15px; + font-size: 12px; + } + \ No newline at end of file diff --git a/assets/css/gallery.css b/assets/css/gallery.css new file mode 100644 index 0000000..b687782 --- /dev/null +++ b/assets/css/gallery.css @@ -0,0 +1,100 @@ + + + .lens__on__life__container { + padding: 1rem 0rem; + width:80%; + margin: auto; + border: 1px solid blue; + } + + .lens__on__life__container h2 { + text-align: center; + font-size: 28px; + text-decoration: underline; + text-underline-offset: 1.5rem; + text-decoration-line: underline; + text-decoration-thickness: .3rem; + margin-bottom: 6rem; + } + + .slider { + background: white; + height: 400px; + margin: auto; + overflow: hidden; + position: relative; + width: 100%; + } + + .slider::before, .slider::after { + content: ""; + height: 100%; + position: absolute; + width: 100px; + z-index: 2; + } + + .slider::after { + right: 0; + top: 0; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + } + + .slider::before { + left: 0; + top: 0; + } + + .slider .slide-track { + height: 100%; + animation: scroll 80s linear infinite; + display: flex; + gap:3rem; + width: calc(400px * 11); + padding: 1rem 0rem; + } + + /* .slider .slide-track:hover { + animation-play-state: paused; + } */ + + .slider .slide { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2rem; + overflow: hidden; + } + + .slider .slide:nth-child(even) { + transform: rotate(5deg); + } + + .slider .slide:nth-child(odd) { + transform: rotate(-5deg); + } + + .slider .slide:hover { + transform: rotate(0deg); + transform: scale(1.1); + } + + .slider .slide:hover { + } + + @keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(calc(-250px * 9)); + } + } + + .slide img { + width:100%; + height:100%; + } \ No newline at end of file diff --git a/assets/css/index.css b/assets/css/index.css new file mode 100644 index 0000000..057663f --- /dev/null +++ b/assets/css/index.css @@ -0,0 +1,626 @@ +body{ + font-family: Optimistic Text,-apple-system,ui-sans-serif,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; + margin:0; + padding:0; +} + +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: Optimistic Text,-apple-system,ui-sans-serif,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; +} +.headerSection nav{ + width: 100%; + height: 50px; + background-color: #28738A; +} +.headerSection nav ul{ + margin-right: 20px; + float: right; + padding-top: -60px; +} +.headerSection nav ul li{ + display: inline-block; + line-height: 50px; + margin: 0 25px; +} +.headerSection li a{ + text-decoration: none; + color: white; + font-size: 18px; + cursor: pointer; +} +.headerSection li a:hover{ + color: orange; +} +.headerSection .toggle i{ + display: none; +} +.headerSection .dropdown-menu{ + position: absolute; + top: 60px; + right: -100px; + width: 300px; +} +.headerSection .dropdown-menu ul li{ +display: block; +} +.headerSection .dropdown-menu li a{ + color:white; + background: rgb(11, 154, 154); +} + +@media screen and (max-width:900px) +{ + .headerSection nav{ + width: 300px; + height: 250px; + position: static; + } + .headerSection nav ul{ + padding: 5px; + margin: 0 10px; + } + .headerSection nav ul li{ + /* align-items: center; + margin: auto; */ + display: block; + object-fit: fill; + } + .headerSection nav li a { + justify-content: center; + + } + +} +@media screen and (max-width:1200px){ + .headerSection nav{ + width: 900px; + height: 400px; + } + .headerSection nav ul li { + display: block; + object-fit: fill; + } +} + +.hero { + position: relative; + height: 60vh; + width: 100%; + background-image: url("../img/project/NPL30-min.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.dark-layer { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.1) 100%); +} +.content-layer { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + padding: 0 10%; + color: white; + font-size: 2em; + font-weight: bold; +} +.content-logo{ + height: inherit; + margin-top:2em; +} +.content-left { + flex: 1; + text-align: center; +} +.content-right { + flex: 1; + font-size: 20px; +} + +.content-left-top { + margin-bottom: 1em; + font-size: 50px; +} +.content-left-top h1{ + margin-bottom: 0; +} +.content-left-top span{ + font-weight: 400; +} + +.content-left-bottom { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.btn-explore { + background-color: #c5761d; + color: white; + border: none; + border-radius: 30px; + padding: 20px 40px; + margin-right: 1em; + cursor: pointer; + font-weight: bold; + font-size: 1.0rem; +} +.btn-explore:hover{ + background-color: #F59221; +} + +.btn-contact { + background-color: transparent; + color: white; + border: 2px solid white; + border-radius: 30px; + padding: 20px 40px; + box-shadow: 2px 2px 5px rgba(0,0,0,0.5); + cursor: pointer; + font-weight: bold; + font-size: 1.0rem; +} +.date-section { + display: flex; + align-items: center; + color: white; +} + +.date-icon { + margin-right: 1em; + font-size: 2em; +} + +.date-text { + display: flex; + flex-direction: column; + align-items: center; +} + +.date-day { + font-size: 1.8em; + margin-bottom: -0.2em; +} + +.date-month { + font-size: 2em; + font-weight: bold; + color:#A2B9C1; +} + +.location-section { + display: flex; + align-items: center; + color: white; +} + +.location-icon { + margin-right: 1em; + font-size: 2em; +} + +.location-text { + display: flex; + flex-direction: column; + align-items: center; +} + +.location-city { + font-size: 1.5em; +} + +.location-building { + font-size: 1.5em; + font-weight: bold; + margin-bottom: 0.5em; +} +#location-building{ + color: #A2B9C1 +} + +.location-floor { + font-size: 1.2em; +} + +.event-section { + margin-top: 1em; +} +.event-section h2{ + font-weight: 400; +} + +hr { + width: 250px; + border: 1px solid white; + margin: 1em auto; + margin-left: 0; +} + + +.intro { + width: 80%; + margin: auto; + border: 1px solid red; + font-size: 20px; + /* color: blue; */ +} + +.intro-container { + display: flex; + flex-direction: row; + width: 100%; +} + +.africa-img { + width: 40%; + position: relative; +} + + + +.africa-img img { + width: 100%; +} + +.left-side { + width: 60%; +} + +.lower { + width: 100%; + display: flex; + gap: 5rem; + flex-direction: row; + margin-top: 100px; +} + +.lower-right { + width: 50%; +} + +.lower-left { + width: 50%; +} +.lower-left p{ + font-size: 20px; + text-align: center; + padding-top: 20px; +} +.lower-right p{ + font-size: 20px; + text-align: center; + padding-top: 20px; +} + +.welcoming-part { + margin: 50px 10px 0px 100px; +} +.welcoming-part p{ + font-size: 20px; + text-align: center; +} + +.welcoming-part h2 { + display: flex; + justify-content: center; + padding-bottom: 20px; +} + +.lower-left h2 { + display: flex; + justify-content: center; + +} + +.lower-right h2 { + display: flex; + justify-content: center; + +} +.intro hr{ + width: 13px; + font-weight: bold; + font-size: medium; + color: black; + margin: auto; +} + +.big { + background-color: rgb(40, 115, 138); + width: 100vw; + height: 250px; + display: block; + justify-content: center; + align-items: center; + } + .big .our-bg { + /* border: 2px solid red; */ + width: 100vw inherit; + font-weight: bold; + font-size: 20px; + padding-left: 47vw; + color: #fff; + padding-top: 6vh; + } + .big p { + /* border: 2px solid red; */ + width: 100vw inherit; + font-weight: bold; + font-size: 13px; + color: #fff; + margin-bottom: -10px; + } + .big .paragrapgh-bg1 { + width: 100vw inherit; + padding-left: 40vw; + } + .big .paragrapgh-bg2 { + width: 100vw inherit; + padding-left: 38vw; + } + .big .paragrapgh-bg3 { + width: 100vw inherit; + padding-left: 35vw; + } + .big .paragrapgh-bg4 { + width: 100vw inherit; + padding-left: 35vw; + } + .big .paragrapgh-bg5 { + width: 100vw inherit; + padding-left: 45vw; + } + + .blog { + /* margin: auto; */ + display: flex; + gap: 15%; + margin: 20px auto; + /* border: 1px solid red; */ + flex-direction: row; + /* align-items: center; */ + justify-content:center; + width: 80%; + border:1px solid blue; + font-size: 20px; + padding: 10px 0px; + } + .introduction{ + order: 1; + /* border: 1px solid blue; */ + /* display: flex; */ + } + .introduction .introduction1{ + display: flex; + border-radius: 20px 20px 10px 10px; + + } + .introduction1 img{ + width: 140px; + padding-bottom: 20px; + + } + .paragraph { + padding-top: 15px; + } + .paragraph .intro{ + padding-left: 20px; + width: 220px; + font-size: 17px; + } + .paragraph .date{ + padding-top: 6px; + padding-left: 20px; + font-size: 13px; + } + .introduction .introduction2{ + display: flex; + } + .introduction2 img{ + width: 140px; + padding-bottom: 20px; + } + + .introduction .introduction3{ + display: flex; + } + .introduction3 img{ + width: 140px; + } + .insights { + width: 420px; + order: 2; + /* border: 1px solid blue; */ + } + .insights h2{ + padding-bottom: 20px; + text-align: center; + } + .insights p{ + text-align: left; + } + .insights h4{ + text-align: center; + } + .insights a:hover{ + color:#28738A; + cursor: pointer; + } + .insights a{ + color:#28738A; + } + .connect-container{ + margin: auto; + } + + /* RESPONSIVENESS */ + + @media screen and (max-width:400px){ + .blog{ + flex-direction: column; + width: 100%; + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 20px; + } + .insights p{ + width: 280px; + height: 230px; + font-size: 15px; + } + .insights h3{ + height: 50px; + font-size: 16px; + margin-right: 140px; + } + .introduction1 img{ + width: 100px; + } + .introduction2 img{ + width: 100px; + } + .introduction3 img{ + width: 100px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 14px; + } + .paragraph .date{ + font-size: 12px; + } + } + + @media screen and (max-width:600px){ + .blog{ + flex-direction: column; + width: 100%; + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 24px; + } + .insights p{ + width: 350px; + height: 280px; + font-size: 18px; + } + .insights h3{ + height: 60px; + font-size: 18px; + margin-right: 140px; + } + .introduction1 img{ + width: 120px; + } + .introduction2 img{ + width: 120px; + } + .introduction3 img{ + width: 120px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 18px; + } + .paragraph .date{ + font-size: 15px; + } + } + + .connect-icons { + width: 45%; + height: 100%; + background: white; + position: relative; + } + + @media screen and (max-width: 800px) { + + .connect-icons { + width: 100%; + } + } + footer{ + width: 100%; + background-color: #28738A; + } + + + .icons1 img{ + width: 32px; + height: 32px; + padding: 5px 5px; + } + #foater{ + gap: 5%; + display: flex; + justify-content: center; + + } + #foater h3{ + margin-top: 30px; + color:#fff; + font-style: normal; + font-weight: 800; + font-size: 20px; + line-height: 24px; + } + #foater span{ + font-size: 15px; + display:block; + font-style: normal; + + line-height: 35px; + color: rgb(255, 255, 255); + opacity: 0.7; + } + + + .copy{ + gap: 2%; + display: flex; + margin-top: 20px; + justify-content: center; + padding-bottom: 20px; + } + .copy p{ + color: rgb(255, 255, 255); + opacity: 0.7; + font-size: 15px; + text-align: inherit; + } + .copy p a{ + font-style: normal; + color: rgb(241, 145, 18); + font-weight: 900; + } \ No newline at end of file diff --git a/assets/css/intro.css b/assets/css/intro.css new file mode 100644 index 0000000..ebe29a3 --- /dev/null +++ b/assets/css/intro.css @@ -0,0 +1,90 @@ +* { + margin: 0; + padding: 0; +} + +.intro { + width: 90%; + margin: auto; +} + +.intro-container { + display: flex; + flex-direction: row; + width: 100%; +} + +.africa-img { + width: 40%; + position: relative; +} + + + +.africa-img img { + width: 100%; +} + +.left-side { + width: 60%; +} + +.lower { + width: 100%; + display: flex; + gap: 5rem; + flex-direction: row; + margin-top: 100px; +} + +.lower-right { + width: 50%; +} + +.lower-left { + width: 50%; +} +.lower-left p{ + font-size: 20px; + text-align: center; + padding-top: 20px; +} +.lower-right p{ + font-size: 20px; + text-align: center; + padding-top: 20px; +} + +.welcoming-part { + margin: 50px 10px 0px 100px; +} +.welcoming-part p{ + font-size: 20px; + text-align: center; +} + +.welcoming-part h2 { + display: flex; + justify-content: center; + padding-bottom: 20px; +} + +.lower-left h2 { + display: flex; + justify-content: center; + +} + +.lower-right h2 { + display: flex; + justify-content: center; + +} +hr{ + width: 13px; + font-weight: bold; + font-size: medium; + color: black; + margin: auto; +} + diff --git a/assets/css/product-details.css b/assets/css/product-details.css index e69de29..2ecdd66 100644 --- a/assets/css/product-details.css +++ b/assets/css/product-details.css @@ -0,0 +1,1092 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); +body{ + margin: 0px; + border: 0px; + color: fff; + margin: 2px 0px 0px 171px; + background: #FFF; +} +.stats{ + /* border: 2px solid green; */ + display: flex; + justify-content: space-around; + margin: 65px; + font-family: sans-serif Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; +} +.stat{ + /* border: 2px solid blue; */ + font-size: 30px; + margin: 5px 0px 0px 0px; + font-size: 17px; + width: 45px; + height: 20px; + font-weight: bold; + font-family: sans-serif; +} +.chart1{ +/* border: 2px solid red; */ +margin: 35px 0px 0px 0px; +height: 244px; +width: 392px; + +} +.chart2{ + /* border: 2px solid blueviolet; */ + margin: 120px 120px 0 100px; + height: 302px; + width: 439; +} +.container{ + height: 10vh; + text-decoration: none; + text-align: center; + display: flex; + justify-content: center; + margin-right: 400px; + +} +.heading{ + padding-right: 20px; + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: center; + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 19px; + color: #000000; +} +.heading::before{ + content: ""; + background: #000100; + display: block; + margin-left: 20px; + height: 1px; + width: 50px; +} +.heading::after{ + content: ""; + background: #000100; + margin-left: 20px; + display: block; + width: 50px; + height: 1px; +} +.text h1{ + + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 16px; + padding-bottom: 0px; + + color: #000000; +} +.text h1 i { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 14px; + padding-bottom: 0px; +} +em{ + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 17px; + color: #699BF7; +} +i{ + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #000000; +} +.text p { + padding-bottom: 0px; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 17px; + margin-left: 19px; + color: #000000; +} +.metrics{ + display: flex; + margin-left: 19px; +} +.metrics small{ + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 17px; + color: #000000; +} +.number b img{ + display: inline; +} +.number { + margin-left: 10px; + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 20px; +} +.cont1 { + /* border: 2px solid green; */ + width: 10%; + margin-left: 40px; + margin-top: 30px; +} +.feed-txt { + /* border: 1px solid yellow; */ + font-family: sans-serif; + font-weight: bold; + font-size: 13px; +} +.para1 { + /* border: 1px solid yellowgreen; */ +} +.cont2 { + /* border: 2px solid navy; */ + width: 40%; + margin-left: 40px; + padding-top: 10px; +} +.txt1 { + /* border: 1px solid purple; */ + font-family: sans-serif; + font-weight: bold; + margin-left: 50px; + font-size: 13px; +} +.three { + font-weight: normal; +} +.txt2 { + /* border: 1px solid plum; */ + font-family: sans-serif; + font-size: 12px; + font-weight: 10px; + margin-left: 70px; +} +.bttn { + /* border: 2px solid tomato; */ + border: 0px; + width: 20%; + height: 25px; + background-color: orange; + border-radius: 50px; + font-family: sans-serif; + margin-left: 70px; +} +.box { + /* border: 2px solid red; */ + margin-top: 50px; + margin-left: 90px; + height: 300px; + width: 70%; + display: flex; +} +.box1 { + height: 75%; + width: 25%; + border: 1px solid black; + border-radius: 15px; +} +.img1 { + /* border: 1px solid green; */ + height: 75px; + width: 115px; + margin-left: 50px; + margin-top: 40px; +} +.img2 { + /* border: 1px solid green; */ + height: 45px; + width: 180px; + margin-left: 20px; + margin-top: 45px; +} +.img3 { + /* border: 1px solid green; */ + height: 60px; + width: 60px; + margin-left: 80px; + margin-top: 40px; +} +.box2 { + height: 75%; + width: 25%; + border: 1px solid black; + border-radius: 15px; + margin-left: 35px; +} +.box3 { + height: 75%; + width: 25%; + border: 1px solid black; + border-radius: 15px; + margin-left: 35px; +} +.tex { + /* border: 1px solid red; */ + font-family: sans-serif; + font-weight: bolder; + font-weight: 60px; + font-size: 12px; + display: flex; + justify-content: center; + margin-top: 14px; +} +.smll-txt { + /* border: 2px solid green; */ + width: 72%; + font-family: sans-serif; + font-weight: 1px; + font-size: 9px; + margin-left: 25px; +} +.smll-txt1 { + /* border: 2px solid greenyellow; */ + width: 35%; + font-family: sans-serif; + font-weight: 1px; + font-size: 9px; + margin-left: 70px; + margin-top: -5px; +} +.smll-txt2-1 { + /* border: 1px solid yellow; */ + width: 82%; + font-family: sans-serif; + font-weight: 1px; + font-size: 9px; + margin-left: 20px; + /* margin-top: 10px; */ +} +.smll-txt2 { + /* border: 2px solid red; */ + width: 38%; + font-family: sans-serif; + font-weight: 1px; + font-size: 9px; + margin-left: 70px; + margin-top: 4px; +} +.read1 { + /* border: 2px solid blue; */ + width: 40px; + font-family: sans-serif; + display: flex; + text-decoration: none; + color: black; + font-weight: 1px; + font-size: 8px; + margin-left: 160px; + margin-top: -17px; +} +.read2 { + /* border: 2px solid blue; */ + width: 40px; + font-family: sans-serif; + display: flex; + text-decoration: none; + color: black; + font-weight: 1px; + font-size: 8px; + margin-left: 160px; + margin-top: -20px; +} +.read3 { + /* border: 2px solid blue; */ + width: 40px; + font-family: sans-serif; + display: flex; + text-decoration: none; + color: black; + font-weight: 1px; + font-size: 8px; + margin-left: 160px; + margin-top: -20px; +} +.l1 { + /* border: 1px solid plum; */ + width: 85%; + font-family: sans-serif; + font-size: 9px; + font-weight: 10px; + margin-left: 15px; +} +.l2 { + /* border: 1px solid plum; */ + font-family: sans-serif; + width: 75%; + font-size: 9px; + font-weight: 10px; + margin-left: 25px; + margin-top: -5px; +} +.l3 { + /* border: 1px solid plum; */ + font-family: sans-serif; + width: 72%; + font-size: 9px; + font-weight: 10px; + margin-left: 30px; + margin-top: -5px; +} +.pgn1 { + /* border: 1px solid purple; */ + height: 20px; + width: 20px; + margin-left: 15px; + margin-top: 5px; +} +.pgn2 { + /* border: 1px solid yellow; */ + height: 20px; + width: 20px; + margin-left: 16px; + margin-top: 25px; +} +.pgn3 { + /* border: 1px solid yellow; */ + height: 20px; + width: 20px; + margin-left: 10px; + margin-top: 9px; +} +/* +* +* +* +* +* +* +*/ +@media screen and (min-width: 320px) { + .cont1 { + /* border: 2px solid green; */ + width: 20%; + margin-left: 8px; + } + .feed-txt { + font-size: 10px; + } + .cont2 { + /* border: 2px solid navy; */ + width: 75%; + padding-top: 4px; + margin: 20px 0px 0px 35px; + } + .txt1 { + /* border: 1px solid purple; */ + margin-left: 0px; + font-size: 10px; + } + .txt2 { + /* border: 1px solid plum; */ + font-size: 10px; + font-weight: 9px; + margin-left: 15px; + } + .bttn { + /* border: 2px solid tomato; */ + width: 45%; + height: 22px; + font-size: 10px; + margin-left: 15px; + } + .box { + /* border: 2px solid red; */ + margin-top: 10%; + margin-left: 12%; + height: 100%; + width: 75%; + display: grid; + } + .box1 { + height: 200px; + width: 89%; + border-radius: 10px; + margin: 10px 0px 0px 10px; + } + .img1 { + /* border: 1px solid green; */ + height: 80px; + margin: 5% 0% 0% 20%; + } + .img2 { + /* border: 1px solid green; */ + height: 55px; + margin: 9% 0% 0% 5%; + } + .img3 { + /* border: 1px solid green; */ + height: 60px; + width: 60px; + margin: 6% 0% 0% 35%; + } + .box2 { + height: 200px; + width: 89%; + border-radius: 10px; + margin: 20px 0px 0px 10px; + } + .box3 { + height: 200px; + width: 89%; + border-radius: 10px; + margin: 20px 0px 0px 10px; + } + .tex { + /* border: 1px solid red; */ + width: 70%; + font-weight: 60px; + font-size: 10px; + margin: 5% 0% 0% 17%; + } + .smll-txt { + /* border: 2px solid green; */ + width: 82%; + margin-left: 9%; + } + .smll-txt1 { + /* border: 2px solid greenyellow; */ + width: 37%; + margin: -2% 0% 0% 32%; + } + .smll-txt2-1 { + /* border: 1px solid yellow; */ + width: 95%; + margin-left: 3%; + } + .smll-txt2 { + /* border: 1px solid red; */ + width: 43%; + margin: 0% 0% 0% 30%; + } + .read1 { + /* border: 2px solid blue; */ + width: 21%; + font-size: 8px; + margin: -10% 0% 0% 74%; + } + .read2 { + /* border: 2px solid blue; */ + width: 21%; + margin: -10% 0% 0% 74%; + } + .read3 { + /* border: 2px solid blue; */ + width: 21%; + margin: -10% 0% 0% 74%; + } + .l1 { + /* border: 1px solid plum; */ + width: 93%; + margin-left: 3%; + } + .l2 { + /* border: 1px solid plum; */ + width: 85%; + margin-left: 8%; + } + .l3 { + /* border: 1px solid plum; */ + font-family: sans-serif; + width: 82%; + margin-left: 10%; + } + .pgn1 { + /* border: 1px solid yellow; */ + margin: 9% 0% 0% 3%; + } + .pgn2 { + /* border: 1px solid yellow; */ + margin: 13% 0% 0% 3%; + } + .pgn3 { + /* border: 1px solid yellow; */ + margin: 7% 0% 0% 3%; + } +} +@media screen and (min-width: 375px) { + .img1 { + /* border: 1px solid green; */ + margin: 5% 0% 0% 25%; + } + .smll-txt { + /* border: 2px solid green; */ + width: 70%; + margin-left: 15%; + } + .smll-txt1 { + /* border: 2px solid greenyellow; */ + width: 32%; + margin: -2% 0% 0% 33%; + } + .img2 { + /* border: 1px solid green; */ + margin: 9% 0% 0% 13%; + } + .img3 { + /* border: 1px solid green; */ + margin: 6% 0% 0% 38%; + } + .tex { + /* border: 1px solid red; */ + margin: 5% 0% 0% 15%; + } + .smll-txt2-1 { + /* border: 1px solid yellow; */ + width: 80%; + margin-left: 10%; + } + .smll-txt2 { + /* border: 1px solid red; */ + width: 37%; + margin: 0% 0% 0% 32%; + } + .pgn2 { + /* border: 1px solid yellow; */ + margin: 12% 0% 0% 3%; + } + .pgn3 { + /* border: 1px solid yellow; */ + margin: 6% 0% 0% 3%; + } + .l1 { + /* border: 1px solid plum; */ + width: 80%; + margin-left: 10%; + } + .l2 { + /* border: 1px solid plum; */ + width: 72%; + margin-left: 13%; + } + .l3 { + /* border: 1px solid plum; */ + width: 68%; + margin-left: 16%; + } +} +@media screen and (min-width: 414px) { + .smll-txt { + /* border: 2px solid green; */ + width: 65%; + margin-left: 18%; + } + .smll-txt1 { + /* border: 2px solid greenyellow; */ + width: 30%; + margin: -2% 0% 0% 35%; + } + .smll-txt2-1 { + /* border: 1px solid yellow; */ + width: 72%; + margin-left: 15%; + } + .smll-txt2 { + /* border: 1px solid red; */ + width: 32%; + margin: 0% 0% 0% 35%; + } + .l1 { + /* border: 1px solid plum; */ + width: 70%; + margin-left: 14%; + } + .l2 { + /* border: 1px solid plum; */ + width: 64%; + margin-left: 17%; + } + .l3 { + /* border: 1px solid plum; */ + width: 61%; + margin-left: 19%; + } + .pgn1 { + /* border: 1px solid yellow; */ + margin: 7% 0% 0% 3%; + } + .pgn2 { + /* border: 1px solid yellow; */ + margin: 8% 0% 0% 3%; + } + .pgn3 { + /* border: 1px solid yellow; */ + margin: 1% 0% 0% 3%; + } + .read1 { + /* border: 2px solid blue; */ + width: 16%; + margin: -9% 0% 0% 78%; + } + .read2 { + /* border: 2px solid blue; */ + width: 16%; + margin: -9% 0% 0% 78%; + } + .read3 { + /* border: 2px solid blue; */ + width: 16%; + margin: -9% 0% 0% 78%; + } +} +@media screen and (min-width: 600px) { + .cont1 { + /* border: 2px solid green; */ + width: 20%; + margin-left: 8px; + } + .feed-txt { + /* border: 1px solid orange; */ + font-size: 15px; + } + .cont2 { + /* border: 2px solid navy; */ + width: 75%; + padding-top: 4px; + margin: 20px 0px 0px 35px; + } + .txt1 { + /* border: 1px solid purple; */ + font-size: 15px; + } + .txt2 { + /* border: 1px solid plum; */ + font-size: 13px; + margin-left: 15px; + } + .bttn { + /* border: 2px solid tomato; */ + width: 30%; + height: 25px; + font-size: 13px; + margin-left: 20px; + } + .box { + /* border: 2px solid red; */ + margin-top: 10%; + margin-left: 12%; + height: 100%; + width: 75%; + } + .box1 { + height: 250px; + width: 70%; + border-radius: 10px; + margin: 10% 0% 0% 15%; + } + .img1 { + /* border: 1px solid green; */ + height: 40%; + width: 50%; + margin: 3% 0% 0% 25%; + } + .img2 { + /* border: 1px solid green; */ + height: 30%; + width: 65%; + margin: 9% 0% 0% 20%; + } + .img3 { + /* border: 1px solid green; */ + height: 35%; + width: 35%; + margin: 2% 0% 0% 32%; + } + .box2 { + height: 250px; + width: 70%; + border-radius: 10px; + margin: 10% 0% 0% 15%; + } + .box3 { + height: 250px; + width: 70%; + border-radius: 10px; + margin: 10% 0% 0% 15%; + } + .tex { + /* border: 1px solid red; */ + width: 70%; + font-weight: 60px; + font-size: 15px; + margin: 2% 0% 0% 15%; + } + .smll-txt { + /* border: 2px solid green; */ + width: 78%; + font-size: 13px; + margin: 2% 0% 0% 10%; + } + .smll-txt1 { + /* border: 2px solid greenyellow; */ + width: 35%; + font-size: 13px; + margin: 2% 0% 0% 32%; + } + .smll-txt2-1 { + /* border: 1px solid yellow; */ + width: 90%; + font-size: 13px; + margin: 2% 0% 0% 6%; + } + .smll-txt2 { + /* border: 1px solid red; */ + width: 43%; + font-size: 13px; + margin: 2% 0% 0% 30%; + } + .read1 { + /* border: 2px solid blue; */ + width: 17%; + font-size: 10px; + margin: -7% 0% 0% 77%; + } + .read2 { + /* border: 2px solid blue; */ + width: 17%; + font-size: 10px; + margin: -7% 0% 0% 77%; + } + .read3 { + /* border: 2px solid blue; */ + width: 17%; + font-size: 10px; + margin: -7% 0% 0% 77%; + } + .l1 { + /* border: 1px solid plum; */ + width: 87%; + font-size: 13px; + margin-left: 6%; + } + .l2 { + /* border: 1px solid plum; */ + width: 79%; + font-size: 13px; + margin-left: 10%; + } + .l3 { + /* border: 1px solid plum; */ + width: 76%; + font-size: 13px; + margin-left: 11%; + } + .pgn1 { + /* border: 1px solid yellow; */ + margin: 9% 0% 0% 3%; + } + .pgn2 { + /* border: 1px solid yellow; */ + margin: 13% 0% 0% 3%; + } + .pgn3 { + /* border: 1px solid yellow; */ + margin: 1% 0% 0% 3%; + } +} +@media screen and (min-width: 768px) { + .cont1 { + /* border: 2px solid green; */ + width: 15%; + margin-left: 30px; + } + .feed-txt { + /* border: 1px solid orange; */ + font-size: 20px; + } + .cont2 { + /* border: 2px solid navy; */ + width: 75%; + padding-top: 4px; + margin: 20px 0px 0px 85px; + } + .txt1 { + /* border: 1px solid purple; */ + font-size: 20px; + } + .txt2 { + /* border: 1px solid plum; */ + font-size: 15px; + margin-left: 30px; + } + .bttn { + /* border: 2px solid tomato; */ + width: 29%; + height: 30px; + font-size: 15px; + margin-left: 35px; + } + .box { + /* border: 2px solid red; */ + margin-top: 5%; + margin-left: 15%; + height: 100%; + width: 75%; + display: grid; + } + .box1 { + height: 250px; + width: 70%; + margin: 10% 0% 0% 15%; + } + .img2 { + /* border: 1px solid green; */ + height: 30%; + width: 65%; + margin: 9% 0% 0% 20%; + } + .img3 { + /* border: 1px solid green; */ + height: 30%; + width: 30%; + margin: 2% 0% 0% 34%; + } + .box2 { + height: 250px; + width: 70%; + margin: 10% 0% 0% 15%; + } + .box3 { + margin: 10% 0% 0% 15%; + } + .tex { + /* border: 1px solid red; */ + margin: 2% 0% 0% 15%; + } + .smll-txt { + /* border: 2px solid green; */ + width: 70%; + font-size: 15px; + margin: 2% 0% 0% 16%; + } + .smll-txt1 { + /* border: 2px solid greenyellow; */ + width: 31%; + font-size: 15px; + margin: 2% 0% 0% 35%; + } + .smll-txt2-1 { + /* border: 1px solid yellow; */ + width: 80%; + font-size: 15px; + margin: 2% 0% 0% 10%; + } + .smll-txt2 { + /* border: 1px solid red; */ + width: 35%; + font-size: 15px; + margin: 2% 0% 0% 33%; + } + .read1 { + /* border: 2px solid blue; */ + font-size: 13px; + margin: -6% 0% 0% 77%; + } + .read2 { + /* border: 2px solid blue; */ + width: 17%; + font-size: 13px; + margin: -7% 0% 0% 75%; + } + .read3 { + /* border: 2px solid blue; */ + width: 17%; + font-size: 13px; + margin: -6% 0% 0% 75%; + } + .l1 { + /* border: 1px solid plum; */ + width: 78%; + font-size: 15px; + margin-left: 10%; + } + .l2 { + /* border: 1px solid plum; */ + width: 70%; + font-size: 15px; + margin-left: 14%; + } + .l3 { + /* border: 1px solid plum; */ + width: 68%; + font-size: 15px; + margin-left: 15%; + } + .pgn1 { + /* border: 1px solid yellow; */ + margin: 5% 0% 0% 3%; + } + .pgn2 { + /* border: 1px solid yellow; */ + margin: 6% 0% 0% 3%; + } + .pgn3 { + /* border: 1px solid yellow; */ + margin: 0% 0% 0% 3%; + } +} +@media screen and (min-width: 1024px) { + .cont1 { + /* border: 2px solid green; */ + margin-left: 5%; + } + .feed-txt { + /* border: 1px solid orange; */ + font-size: 13px; + } + .cont2 { + /* border: 2px solid navy; */ + width: 75%; + padding-top: 4px; + margin: 1% 0% 0% 9%; + } + .txt1 { + /* border: 1px solid purple; */ + font-size: 13px; + } + .txt2 { + /* border: 1px solid plum; */ + font-size: 10px; + margin-left: 3%; + } + .bttn { + /* border: 2px solid tomato; */ + width: 100px; + height: 23px; + font-size: 10px; + margin-left: 20px; + margin-top: 15px; + } + .box { + /* border: 2px solid red; */ + display: flex; + height: 100%; + width: 85%; + margin: 5% 10% 20% 11%; + } + .box1 { + height: 250px; + width: 65%; + border-radius: 15px; + margin: 3% -4% 0% 0%; + } + .img1 { + /* border: 1px solid green; */ + height: 40%; + width: 60%; + margin: 3% 0% 0% 20%; + } + .img2 { + /* border: 1px solid green; */ + height: 35%; + width: 70%; + margin: 9% 0% 0% 17%; + } + .img3 { + /* border: 1px solid green; */ + height: 40%; + width: 40%; + margin: 2% 0% 0% 30%; + } + .box2 { + height: 250px; + width: 65%; + border-radius: 15px; + margin: 3% -4% 0% 10%; + } + .box3 { + height: 250px; + width: 65%; + border-radius: 15px; + margin: 3% 0% 0% 10%; + } + .tex { + font-size: 13px; + } + .smll-txt { + /* border: 2px solid green; */ + width: 57%; + font-size: 10px; + margin: 3% 0% 0% 20%; + } + .smll-txt1 { + /* border: 2px solid greenyellow; */ + width: 32%; + font-size: 10px; + margin: 2% 0% 0% 33%; + } + .smll-txt2-1 { + /* border: 1px solid yellow; */ + width: 82%; + font-size: 10px; + margin: 3% 0% 0% 8%; + } + .smll-txt2 { + /* border: 1px solid red; */ + width: 37%; + font-size: 10px; + margin: 2% 0% 0% 31%; + } + .read1 { + /* border: 2px solid blue; */ + width: 15%; + font-size: 7px; + margin: -7% 0% 0% 77%; + } + .read2 { + /* border: 2px solid blue; */ + width: 17%; + font-size: 7px; + margin: -6% 0% 0% 77%; + } + .read3 { + /* border: 2px solid blue; */ + width: 17%; + font-size: 7px; + margin: -6% 0% 0% 77%; + } + .l1 { + /* border: 1px solid plum; */ + width: 87%; + font-size: 10px; + margin: 3% 0% 0% 7%; + } + .l2 { + /* border: 1px solid plum; */ + width: 79%; + font-size: 10px; + margin: 2% 0% 0% 11%; + } + .l3 { + /* border: 1px solid plum; */ + width: 76%; + font-size: 10px; + margin: 2% 0% 0% 12%; + } + .pgn1 { + /* border: 1px solid yellow; */ + margin: 10% 0% 0% 3%; + } + .pgn2 { + /* border: 1px solid yellow; */ + margin: 6% 0% 0% 3%; + } + .pgn3 { + /* border: 1px solid yellow; */ + margin: 6% 0% 0% 3%; + } +} diff --git a/assets/css/product.css b/assets/css/product.css index e69de29..c6f23c1 100644 --- a/assets/css/product.css +++ b/assets/css/product.css @@ -0,0 +1,963 @@ +:root { + --yellow: #f59221; +} +:root { + --yellow: #f59221; +} +body { + width: 100vw; + box-sizing: border-box; + /* height: 100vh; */ + overflow-x: hidden; + padding: 0px; + margin: 0px; +} +.conttainer { + width: 90%; + margin: 30px auto; + display: flex; + flex-direction: column; +} +/* Header */ +#nav { + height: 110px; + background: rgba(0, 39, 1, 1); +} +header { + width: 100%; + height: 60px; + box-sizing: border-box; + display: flex; + justify-content: space-around; + gap: 10px; + z-index: 2; + position: sticky; + top: 0px; +} +.logo { + width: 100px; + height: 120px; + margin-top: 10px; + margin-left: 40px; +} +.logo img { + width: 80px; + height: 80px; +} + +.menu { +} +.menu ul { + display: flex; + list-style: none; + margin-left: -150px; + transform: translate(-60px); +} + +.menu ul li { + text-decoration: none; + margin: 0px 15px; +} +.menu ul li a { + text-decoration: none; + font-size: 0.8em; + color: white; + font-weight: 400; + font-family: "poppins", monospace; + transition: 0.4s; +} +.menu ul li a:hover { + color: #f59221; +} +.blog-button { + justify-self: flex-end; + /* margin-left: 500px; */ + transform: translateY(50%); + height: 40px; + width: 140px; +} +.blog-button button { + padding: 13px 25px; + border-radius: 40px; + color: black; + font-size: 1em; + font-weight: 600; + font-family: "inter", "poppins", sans-serif; + background: #f59221; + border: none; + display: flex; + animation: move; + transition: 0.4s; +} +.blog-button button:hover { + background: #04391b; + color: white; + border: 1px solid #f59221; + box-shadow: 1px 1px 5px #f59221; +} +.line { + width: 22px; + height: 2.5px; + background: black; + margin-top: 5px; + position: absolute; + right: 0px; +} +.blog { + z-index: 3; +} +.arrow { + border-right: 3px solid black; + border-top: 3px solid black; + height: 10px; + width: 10px; + rotate: 45deg; + border-radius: 2px; + position: absolute; + right: 0; +} +.arr { + display: flex; + gap: -5px; + position: relative; + width: 30px; + margin-left: 5px; +} +.blog-button::before { + content: ""; + text-align: center; + height: inherit; + width: inherit; + display: none; + border-radius: 40px; + background: #002701; + /* transition: 0.5s cubic-bezier(1, 0, 0.6, 1); */ + transition: width 2s; + transition-timing-function: cubic-bezier(0.4, 0.7, 1, 0.1); + position: absolute; +} +.blog-button button:hover .blog-button::before { + width: 100px; +} +.blog-button button:hover .arr { + -ms-transform-origin-x: 12px; + margin-left: 5px; +} +.blog-button button:hover .arrow { + border-right: 3px solid white; + border-top: 3px solid white; +} +.blog-button button:hover .line { + background: white; +} +.blog-button button:hover .blog-button::before { + display: block; + color: white; +} + +@media screen and (max-width: 1920px) { + .header { + height: 50px; + } + .menu ul { + display: flex; + list-style: none; + /* margin-left: -100px; */ + transform: translate(-30px); + } + + .logo { + margin-left: 20px; + } +} + +@media screen and (max-width: 1100px) { + .logo { + margin-left: 20px; + } +} +@media screen and (max-width: 800px) { + .menu ul { + transform: translateX(-60px); + } + .menu ul li { + margin: 0px 12px; + } + .menu ul li a { + font-size: 0.65em; + } + .blog-button { + transform: translateY(50px); + transform: translateX(-30px); + height: 35px; + width: 120px; + } + .blog-button button { + transform: translateY(100%); + padding: 10px 17px; + font-size: 0.75em; + } + .arrow { + border-right: 2px solid black; + border-top: 2px solid black; + height: 10px; + width: 10px; + } + .line { + width: 19px; + height: 2px; + background: black; + } + .arr { + width: 30px; + margin-left: 0px; + } +} +@media screen and (max-width: 600px) { + .blog-button { + display: none; + } + .logo img { + width: 70px; + height: 70px; + } + .menu { + display: none; + } + + .burger { + display: block; + } +} + +/* Header end */ +/* burger menu */ +.burger { + height: 30px; + width: 20px; + /* background: white; */ + transform: translateY(50px); + transform: translateX(-20px); + margin-top: 30px; + padding: 0px 1px; + align-items: center; + display: none; +} +.bline { + background: black; + height: 14%; + width: 100%; + margin: auto; + margin-bottom: 4px; +} +.burger-menu { + display: none; + z-index: 5; + width: 40%; + background: rgb(34, 26, 26); + height: 100%; + position: fixed; + right: 0; + top: 0; + text-align: center; +} +.bmenu { + width: 150px; + text-align: center; + margin: 200px auto; + /* background: red; */ +} +.bmenu ul { + display: block; + list-style: none; +} + +.bmenu ul li { + text-decoration: none; + margin: 15px; +} +.bmenu ul li a { + text-decoration: none; + font-size: 1.05em; + color: white; + font-weight: 500; + font-family: "poppins", monospace; + transition: 0.4s; +} +.bmenu ul li a:hover { + color: #f59221; +} +.cross { + height: 30px; + width: 30px; + border-radius: 50%; + /* background: grey; */ + position: absolute; + top: 50px; + left: 50px; +} +.cross:hover .cro { + background: red; + /* box-shadow: 1px 3px 6px 1px red; */ +} +.cro { + width: 70%; + height: 3px; + background: white; + transition: cubic-bezier(0.075, 0.82, 0.165, 1); + transition: 0.4s; +} +.cross1 { + position: absolute; + top: 13px; + transform: rotate(45deg); + left: 4px; +} +.cross2 { + transform: rotate(135deg); + position: absolute; + top: 13px; + left: 4px; +} + +@media screen and (max-width: 700px) { + .blog-button { + display: none; + } + .logo img { + width: 70px; + height: 70px; + } + .menu { + display: none; + } + + .burger { + display: block; + } + .burger-menu { + width: 70%; + } + .bmenu ul li a { + font-size: 1em; + } +} +/* burger menu end */ +.projects-intro { + padding: 10px 0px; + margin-bottom: 20px; +} + +/* .projects-intro button { + border-radius: 12px; + padding: 5px 30px; + border: none; + background-color: var(--yellow); + color: white; + text-align: center; + font-weight: bold; +} */ + +.projects-Container { + display: flex; + gap: 30px; +} +.card-container { + border: 1px solid; + margin-top: 0%; + justify-content: space-between; + border-radius: 20px 20px 20px 20px; + width: 21%; + height: 9%; +} + +.first { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding-right: 10px; +} +.first p { + font-family: sans-serif; + + font-weight: bolder; +} +.first img { + padding-top: 15px; + height: 19px; +} + +.second img { + padding-left: 49px; + height: 100px; +} +.third { + width: 80%; + margin: 5px auto; +} +.third h3 { + font-size: 14px; + font-weight: bold; +} + +.fourth { + width: 80%; + margin: 5px auto; + display: flex; + justify-content: space-between; + align-items: center; +} +.fourth p { + font-size: 14px; + cursor: pointer; +} +.projects-Container { + display: flex; +} + +.prodContainer { + width: 90%; + margin: auto; + margin: 65px; + display: block; + align-items: center; + justify-content: center; + font-size: 1.2em; + position: relative; + + font-family: "Inter", sans-serif; +} +.upperPart { + margin: 15px 100px; + justify-self: center; +} +.title { + text-align: center; + margin: 0px 00px; +} +.mainTitle { + margin-left: 300px; + + width: 200px; + padding: auto 0px; + font-size: 1.5em; +} +.mainTitle::before, +.mainTitle::after { + content: ""; + font-size: 0.2px; + width: 10px; + margin: 0px 20px 4px 20px; + padding: 2px 40px 0px 40px; + flex: 1 0 20px; + background: black; +} + +.amount { + font-size: 1.15em; + font-weight: 0; +} +.btn { + padding: 7px 15px; + background: rgb(219, 219, 219); + border-radius: 30px; + border: none; + margin-top: -30px; +} + +.btn:hover { + background: rgb(171, 171, 171); +} +.btn.active { + background: orange; + font-weight: 700; + transition: 0.5s; +} +.btn.active:hover { + background: rgb(227, 148, 2); +} + +.status { + position: static; + margin-left: 320px; + width: 350px; + margin-right: 350px; +} +.status .btn { + padding: 10px 20px; + margin: 5px; +} +.align { + display: flex; +} +.lowerPart { + margin: 60px 5px; +} +.align { + margin-bottom: 0; + padding-bottom: 0; +} + +.align .btn { + margin-top: 10px; +} +.align .accomplished p { + font-size: 1em; + margin-right: 20px; + margin-top: 12px; + font-weight: 700; +} +.accomplished .amount { + font-weight: 100; + font-size: 1em; +} +.feedBack { + margin: 0 0 0 30px; +} +/* card boxes */ + +.cards { + margin-left: 60px; + /* */ +} +.upperCards { + display: flex; +} +.lowerCards { + display: flex; +} +.box { + height: 300px; + width: 20%; + border: 1px solid black; + margin: 10px 20px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + font-size: 1em; +} +.box p { + font-size: 0.8em; + margin-bottom: 30px; +} +.rateStar { + display: flex; + flex-direction: row-reverse; + /* margin-right: 25px; */ + font-size: 0.9em; +} +.rateStar p { + margin-top: 0px; +} +.rateStar img { + width: 20px; + height: 20px; + margin: 5px; + margin-top: 0px; +} +.rateStar p { + font-weight: 900; +} +.sttImages img { + align-self: flex-end; + margin-left: 25px; + width: 230px; + height: 100px; + margin-top: -10px; +} +.sttImages-project img { + align-self: flex-end; + margin-left: 25px; + width: 230px; + height: 100px; + margin-top: 10px; +} +.fileImages { + width: 50px; + margin-left: 100px; + margin-top: -40px; +} +.fileImages-project { + width: 50px; + margin-left: 100px; + margin-top: 10px; +} +.ttsImages { + width: 100px; + margin-left: 55px; + margin-right: 5px; + margin-bottom: 50px; +} +.ttsImages-project { + margin-top: 40px; + width: 100px; + margin-left: 55px; + margin-right: 5px; + margin-bottom: 50px; +} +.boxText { + text-align: center; +} +.boxOptions { + display: flex; + justify-content: space-between; + text-align: center; +} +.boxOptions p { + margin: 10px 45px 0 20px; + font-weight: 600; + /* flex-direction: column; */ + font-size: 0.74em; +} +.boxOptions p:hover { + color: orange; + cursor: pointer; +} +.boxOptionsp1 { + margin-left: 30px; +} +.boxOptions #more { + margin-top: 21px; +} + +.fileText { + font-size: 130%; +} + +/* responsive try */ +@media screen and (max-width: 1950px) { + body { + } + + .menu { + margin-top: 20px; + font-size: 1.3em; + } + .upperCards { + display: flex; + } + .status { + margin-left: 400px; + width: 350px; + margin-right: 350px; + } + .lowerCards { + display: flex; + } + .box { + height: 320px; + width: 300px; + border: 1px solid black; + margin: 10px 40px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .cards { + margin-left: 60px; + } + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 320px; + } + .fileText { + font-size: 0.95em; + } +} + +@media screen and (max-width: 1285px) { + .logo { + width: 300px; + height: 100px; + } + .menu { + margin: 20px; + } + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 270px; + } + .status { + margin-left: 340px; + width: 350px; + margin-right: 350px; + } + + .fileText { + font-size: 0.95em; + } + + .boxOptions p { + margin: 10px 45px 0 20px; + font-weight: 600; + font-size: 0.74em; + } + @media screen and (max-width: 1270px) { + } + @media screen and (max-width: 1256px) { + .boxOptions { + display: flex; + text-align: center; + font-size: 0.94em; + } + .cards { + margin-left: 40px; + /* */ + } + .boxOptions p { + margin: 10px 45px 0 20px; + font-weight: 600; + font-size: 0.74em; + } + + .box { + height: 310px; + width: 280px; + margin: 10px 40px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .fileText { + font-size: 100%; + margin-bottom: 0px; + } + .boxOptions { + margin-top: -15px; + } + } + + @media screen and (max-width: 1206px) { + .box { + height: 300px; + width: 260px; + margin: 10px 35px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .fileImages { + width: 45px; + height: 90px; + margin-left: 90px; + margin-top: -45px; + } + .fileText .fileOption p { + font-size: 0.4em; + } + } + + @media screen and (max-width: 1199px) { + .fileImages { + width: 45px; + height: 87px; + margin-left: 90px; + margin-top: -45px; + } + .ttsImages { + width: 95px; + margin-left: 52px; + margin-right: 5px; + margin-bottom: 40px; + margin-top: -12px; + } + .sttImages { + margin-right: 0px; + margin-left: -15px; + margin-top: -12px; + } + .box { + height: 285px; + } + } + @media screen and (max-width: 1100px) { + .fileText { + font-size: 0.91em; + margin-top: -5px; + } + .sttImages { + margin-right: 0px; + margin-left: -15px; + margin-top: -15px; + } + .sttText { + font-size: 0.91em; + } + .ttsText { + font-size: 0.91em; + } + .card { + margin-left: 20px; + } + .mainTitle { + margin-left: 270px; + } + .status { + margin-left: 310px; + width: 350px; + margin-right: 350px; + } + } + @media screen and (max-width: 1030px) { + .status { + margin-left: 200px; + width: 350px; + margin-right: 350px; + } + .lowerCards { + display: flex; + } + .box { + height: 320px; + width: 300px; + border: 1px solid black; + margin: 10px 40px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 130px; + } + .upperCards { + flex-wrap: wrap; + display: inline-flex; + } + .lowerCards { + flex-wrap: wrap; + display: inline-flex; + } + } + @media screen and (max-width: 900px) { + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 10%; + } + .status { + margin-left: 23%; + width: 350px; + } + } + @media screen and (max-width: 765px) { + .btn { + padding: 7px 17px; + margin-top: -30px; + } + .status .btn { + padding: 12px 22px; + margin: 5px; + } + .lowerPart { + margin: 40px 5px; + } + .align { + margin-bottom: 0; + padding-bottom: 0; + } + + .align .btn { + margin-top: 10px; + } + .align .accomplished p { + font-size: 1.15em; + margin-right: 20px; + margin-top: 15px; + font-weight: 900; + } + .accomplished .amount { + font-weight: 100; + font-size: 1em; + } + } + @media screen and (max-width: 715px) { + .align .accomplished p { + font-size: 1.15em; + margin-right: 20px; + margin-top: 15px; + font-weight: 900; + } + .accomplished .amount { + font-weight: 100; + font-size: 1em; + } + .align .btn { + margin-top: 10px; + } + .upperPart { + margin: 15px 100px; + } + .align { + display: block; + margin-left: 27%; + margin-bottom: 15px; + } + .align p { + margin-left: 20px; + } + .cards { + margin-left: 20%; + } + .feed { + margin-left: 15%; + } + } + @media screen and (max-width: 705px) { + .status { + margin-left: 23%; + width: 350px; + } + .mainTitle::before, + .mainTitle::after { + width: 6px; + margin: 0px 20px 4px 20px; + padding: 2px 30px 0px 30px; + flex: 1 0 20px; + background: black; + } + .prodContainer { + margin: auto; + margin-right: 100px; + } + .accomplished { + font-size: 0.8em; + } + .btn { + margin: 5px; + } + .feedBack { + font-size: 0.85em; + margin-left: 60px; + } + } +} +@media screen and (max-width: 585px) { + .prodContainer { + margin: auto; + margin-right: 100px; + } + .btn { + margin: 2px; + } +} + +@media screen and (max-width: 500px) { + .prodContainer { + margin-left: -15px; + } + .mainTitle { + margin-left: 0%; + margin-right: 5%; + } + .status { + margin-left: 10%; + width: 350px; + } +} diff --git a/assets/css/users.css b/assets/css/users.css new file mode 100644 index 0000000..6301c3c --- /dev/null +++ b/assets/css/users.css @@ -0,0 +1,129 @@ +*{ + margin: 0; + padding: 0; +} +body a{ + text-decoration: none; + color:black; +} + +#ho{ + color: rgb(255, 174, 0); +} +button{ + background-color:rgb(255, 162, 0) ; + color:black; + padding: 10px; + border-radius: 40px; + margin-top: 10px; + border: none; + text-align: center; + font-weight: bold; + margin-bottom: 10px; + width: 100px; + margin-left: 10%; + font-size: 12px; +} +img{ + width: 100%; +} +.pushin{ + margin-left: 8%; + font-family: Verdana, Geneva, Tahoma, sans-serif; + padding: 10px; +} +.card{ + /* margin-left: 6%; */ + width: 300px; + /* border: 1px solid red; */ + font-family: Verdana, Geneva, Tahoma, sans-serif; + /* margin-bottom: 6%; */ + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.cardie{ + padding: 30px; + display:flex; + gap: 20px; +} +.card a{ + color: #28738A; +} +.card a p{ + color: black; +} +.card .imgcard{ + width:200px; + height:200px; + border:1px solid #28738A; + border-radius: 50%; + margin-bottom: 10px; +} +.card img{ + width: 100%; + height: 100%; + object-fit:cover; + border-radius: 50%; + border:1px solid black; +} +.card h4{ + text-align: center; +} +.card p{ + text-align: center; +} +.cardie{ + width: 95%; + display: flex; + flex-wrap: wrap; + /* gap: 1%; */ + justify-content: center; + +} +.cardiee p{ +font-size: .8em; +} +.cardiee h4{ +font-size: .9em; +} +.card{ + padding:5px; + align-items: center; + justify-items: center; +} +@media (min-width: 992px) and (max-width: 1200px) { + .cardie{ + display: flexbox; + flex-wrap: wrap; + } +} + + +/* Tablet desktop :768px. */ +@media (min-width: 768px) and (max-width: 991px) { + .cardie{ + display: flexbox; + flex-wrap: wrap; + } + +} + + +/* small mobile :320px. */ +@media (max-width: 767px) { + .cardie{ + display: flexbox; + flex-wrap: wrap; + } + +} + +/* Large Mobile :480px. */ +@media only screen and (min-width: 480px) and (max-width: 767px) { + .cardie{ + display: flexbox; + flex-wrap: wrap; + } +} diff --git a/assets/image/1200px-Flickr 2.png b/assets/image/1200px-Flickr 2.png new file mode 100644 index 0000000..f054a68 Binary files /dev/null and b/assets/image/1200px-Flickr 2.png differ diff --git a/assets/image/72-729738_youtube-red-circle-circle-youtube-logo-png-clipart 2.png b/assets/image/72-729738_youtube-red-circle-circle-youtube-logo-png-clipart 2.png new file mode 100644 index 0000000..e4ebd72 Binary files /dev/null and b/assets/image/72-729738_youtube-red-circle-circle-youtube-logo-png-clipart 2.png differ diff --git a/assets/image/GitHub-Mark 2.png b/assets/image/GitHub-Mark 2.png new file mode 100644 index 0000000..5b8453a Binary files /dev/null and b/assets/image/GitHub-Mark 2.png differ diff --git a/assets/image/Slack_icon_2019 2.png b/assets/image/Slack_icon_2019 2.png new file mode 100644 index 0000000..1e6e8d1 Binary files /dev/null and b/assets/image/Slack_icon_2019 2.png differ diff --git a/assets/image/hf-logo 2.png b/assets/image/hf-logo 2.png new file mode 100644 index 0000000..11d218d Binary files /dev/null and b/assets/image/hf-logo 2.png differ diff --git a/assets/image/renew 2.png b/assets/image/renew 2.png new file mode 100644 index 0000000..962a79d Binary files /dev/null and b/assets/image/renew 2.png differ diff --git a/assets/image/social-media-twitter-logo-blue-isolated-free-vector 2.png b/assets/image/social-media-twitter-logo-blue-isolated-free-vector 2.png new file mode 100644 index 0000000..a8e02d5 Binary files /dev/null and b/assets/image/social-media-twitter-logo-blue-isolated-free-vector 2.png differ diff --git a/assets/image/ter 2.png b/assets/image/ter 2.png new file mode 100644 index 0000000..bd44409 Binary files /dev/null and b/assets/image/ter 2.png differ diff --git a/assets/img/PXL_20230401_165339491 1.png b/assets/img/PXL_20230401_165339491 1.png new file mode 100644 index 0000000..9e5e21a Binary files /dev/null and b/assets/img/PXL_20230401_165339491 1.png differ diff --git a/assets/img/article/speech.PNG b/assets/img/article/speech.PNG new file mode 100644 index 0000000..1c9ff40 Binary files /dev/null and b/assets/img/article/speech.PNG differ diff --git a/assets/img/community-profiles/Aaliyah.jpg b/assets/img/community-profiles/Aaliyah.jpg new file mode 100644 index 0000000..5367b77 Binary files /dev/null and b/assets/img/community-profiles/Aaliyah.jpg differ diff --git a/assets/img/community-profiles/Angelo.png b/assets/img/community-profiles/Angelo.png new file mode 100644 index 0000000..dedab69 Binary files /dev/null and b/assets/img/community-profiles/Angelo.png differ diff --git a/assets/img/community-profiles/Eric.png b/assets/img/community-profiles/Eric.png new file mode 100644 index 0000000..65c9551 Binary files /dev/null and b/assets/img/community-profiles/Eric.png differ diff --git a/assets/img/community-profiles/Gloria.png b/assets/img/community-profiles/Gloria.png new file mode 100644 index 0000000..c9b43b4 Binary files /dev/null and b/assets/img/community-profiles/Gloria.png differ diff --git a/assets/img/community-profiles/Liliane.png b/assets/img/community-profiles/Liliane.png new file mode 100644 index 0000000..b354b8c Binary files /dev/null and b/assets/img/community-profiles/Liliane.png differ diff --git a/assets/img/community-profiles/Rodger.JPG b/assets/img/community-profiles/Rodger.JPG new file mode 100644 index 0000000..48d9076 Binary files /dev/null and b/assets/img/community-profiles/Rodger.JPG differ diff --git a/assets/img/community-profiles/Samuel.jpg b/assets/img/community-profiles/Samuel.jpg new file mode 100644 index 0000000..c1fdd26 Binary files /dev/null and b/assets/img/community-profiles/Samuel.jpg differ diff --git a/assets/img/community-profiles/angelique.jpg b/assets/img/community-profiles/angelique.jpg new file mode 100644 index 0000000..fb34e50 Binary files /dev/null and b/assets/img/community-profiles/angelique.jpg differ diff --git a/assets/img/community-profiles/benigne.jpg b/assets/img/community-profiles/benigne.jpg new file mode 100644 index 0000000..a22c8da Binary files /dev/null and b/assets/img/community-profiles/benigne.jpg differ diff --git a/assets/img/community-profiles/eddy.png b/assets/img/community-profiles/eddy.png new file mode 100644 index 0000000..b026314 Binary files /dev/null and b/assets/img/community-profiles/eddy.png differ diff --git a/assets/img/community-profiles/elvis.jpg b/assets/img/community-profiles/elvis.jpg new file mode 100644 index 0000000..1164770 Binary files /dev/null and b/assets/img/community-profiles/elvis.jpg differ diff --git a/assets/img/community-profiles/floris.jpg b/assets/img/community-profiles/floris.jpg new file mode 100644 index 0000000..d7834b7 Binary files /dev/null and b/assets/img/community-profiles/floris.jpg differ diff --git a/assets/img/community-profiles/happy.jpg b/assets/img/community-profiles/happy.jpg new file mode 100644 index 0000000..b103801 Binary files /dev/null and b/assets/img/community-profiles/happy.jpg differ diff --git a/assets/img/community-profiles/immacule.jpeg b/assets/img/community-profiles/immacule.jpeg new file mode 100644 index 0000000..03c59ae Binary files /dev/null and b/assets/img/community-profiles/immacule.jpeg differ diff --git a/assets/img/community-profiles/kelly.jpg b/assets/img/community-profiles/kelly.jpg new file mode 100644 index 0000000..d76f325 Binary files /dev/null and b/assets/img/community-profiles/kelly.jpg differ diff --git a/assets/img/community-profiles/khali.jpg b/assets/img/community-profiles/khali.jpg new file mode 100644 index 0000000..a739d43 Binary files /dev/null and b/assets/img/community-profiles/khali.jpg differ diff --git a/assets/img/community-profiles/patrick.jpg b/assets/img/community-profiles/patrick.jpg new file mode 100644 index 0000000..c64ced2 Binary files /dev/null and b/assets/img/community-profiles/patrick.jpg differ diff --git a/assets/img/community-profiles/rene.jpg b/assets/img/community-profiles/rene.jpg new file mode 100644 index 0000000..bcbc750 Binary files /dev/null and b/assets/img/community-profiles/rene.jpg differ diff --git a/assets/img/community-profiles/robert.jpg b/assets/img/community-profiles/robert.jpg new file mode 100644 index 0000000..a025957 Binary files /dev/null and b/assets/img/community-profiles/robert.jpg differ diff --git a/assets/img/community-profiles/samuel.PNG b/assets/img/community-profiles/samuel.PNG new file mode 100644 index 0000000..67a0d48 Binary files /dev/null and b/assets/img/community-profiles/samuel.PNG differ diff --git a/assets/img/community-profiles/sosten.jpg b/assets/img/community-profiles/sosten.jpg new file mode 100644 index 0000000..142dc99 Binary files /dev/null and b/assets/img/community-profiles/sosten.jpg differ diff --git a/assets/img/connect-icons/Blogger-icon.svg b/assets/img/connect-icons/Blogger-icon.svg new file mode 100644 index 0000000..b4b4d9e --- /dev/null +++ b/assets/img/connect-icons/Blogger-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/GitHub-icon.svg b/assets/img/connect-icons/GitHub-icon.svg new file mode 100644 index 0000000..ece70aa --- /dev/null +++ b/assets/img/connect-icons/GitHub-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/flickr-icon.svg b/assets/img/connect-icons/flickr-icon.svg new file mode 100644 index 0000000..a8766c9 --- /dev/null +++ b/assets/img/connect-icons/flickr-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/huggingface-icon.svg b/assets/img/connect-icons/huggingface-icon.svg new file mode 100644 index 0000000..e58c415 --- /dev/null +++ b/assets/img/connect-icons/huggingface-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/instagram-icon.svg b/assets/img/connect-icons/instagram-icon.svg new file mode 100644 index 0000000..f59e04d --- /dev/null +++ b/assets/img/connect-icons/instagram-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/linkedin-icon.svg b/assets/img/connect-icons/linkedin-icon.svg new file mode 100644 index 0000000..62cd512 --- /dev/null +++ b/assets/img/connect-icons/linkedin-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/slack-icon.svg b/assets/img/connect-icons/slack-icon.svg new file mode 100644 index 0000000..2a78385 --- /dev/null +++ b/assets/img/connect-icons/slack-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/twitter-icon.svg b/assets/img/connect-icons/twitter-icon.svg new file mode 100644 index 0000000..aab5ff7 --- /dev/null +++ b/assets/img/connect-icons/twitter-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/connect-icons/youtube-icon.svg b/assets/img/connect-icons/youtube-icon.svg new file mode 100644 index 0000000..b9253a6 --- /dev/null +++ b/assets/img/connect-icons/youtube-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/hand/hand1.png b/assets/img/hand/hand1.png new file mode 100644 index 0000000..04abe43 Binary files /dev/null and b/assets/img/hand/hand1.png differ diff --git a/assets/img/hand/handlogo.png b/assets/img/hand/handlogo.png new file mode 100644 index 0000000..622556f Binary files /dev/null and b/assets/img/hand/handlogo.png differ diff --git a/assets/img/hand/waving-hand.png b/assets/img/hand/waving-hand.png new file mode 100644 index 0000000..eb3af29 Binary files /dev/null and b/assets/img/hand/waving-hand.png differ diff --git a/assets/img/logo/africa-world.png b/assets/img/logo/africa-world.png new file mode 100644 index 0000000..7b15118 Binary files /dev/null and b/assets/img/logo/africa-world.png differ diff --git a/assets/img/logo/africa.png b/assets/img/logo/africa.png new file mode 100644 index 0000000..067a98e Binary files /dev/null and b/assets/img/logo/africa.png differ diff --git a/assets/img/logo/our africa.png b/assets/img/logo/our africa.png new file mode 100644 index 0000000..644086d Binary files /dev/null and b/assets/img/logo/our africa.png differ diff --git a/assets/img/nlp pic.svg b/assets/img/nlp pic.svg new file mode 100644 index 0000000..5091371 --- /dev/null +++ b/assets/img/nlp pic.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/nlp pic2.png b/assets/img/nlp pic2.png new file mode 100644 index 0000000..38ef02c Binary files /dev/null and b/assets/img/nlp pic2.png differ diff --git a/assets/img/pik 4.png b/assets/img/pik 4.png new file mode 100644 index 0000000..e4e3689 Binary files /dev/null and b/assets/img/pik 4.png differ diff --git a/assets/img/product/MBAZANLP-img.png b/assets/img/product/MBAZANLP-img.png new file mode 100644 index 0000000..fa4353c Binary files /dev/null and b/assets/img/product/MBAZANLP-img.png differ diff --git a/assets/img/product/sts.png b/assets/img/product/sts.png new file mode 100644 index 0000000..365602e Binary files /dev/null and b/assets/img/product/sts.png differ diff --git a/assets/img/project/PXL_1.jpg b/assets/img/project/PXL_1.jpg new file mode 100644 index 0000000..fbd3ab0 Binary files /dev/null and b/assets/img/project/PXL_1.jpg differ diff --git a/assets/img/project/PXL_10.jpg b/assets/img/project/PXL_10.jpg new file mode 100644 index 0000000..982072a Binary files /dev/null and b/assets/img/project/PXL_10.jpg differ diff --git a/assets/img/project/PXL_11.jpg b/assets/img/project/PXL_11.jpg new file mode 100644 index 0000000..d316ed9 Binary files /dev/null and b/assets/img/project/PXL_11.jpg differ diff --git a/assets/img/project/PXL_12.jpg b/assets/img/project/PXL_12.jpg new file mode 100644 index 0000000..6d75084 Binary files /dev/null and b/assets/img/project/PXL_12.jpg differ diff --git a/assets/img/project/PXL_13.jpg b/assets/img/project/PXL_13.jpg new file mode 100644 index 0000000..a269620 Binary files /dev/null and b/assets/img/project/PXL_13.jpg differ diff --git a/assets/img/project/PXL_14.jpg b/assets/img/project/PXL_14.jpg new file mode 100644 index 0000000..f42268f Binary files /dev/null and b/assets/img/project/PXL_14.jpg differ diff --git a/assets/img/project/PXL_15.jpg b/assets/img/project/PXL_15.jpg new file mode 100644 index 0000000..e598c93 Binary files /dev/null and b/assets/img/project/PXL_15.jpg differ diff --git a/assets/img/project/PXL_16.jpg b/assets/img/project/PXL_16.jpg new file mode 100644 index 0000000..8fddb4f Binary files /dev/null and b/assets/img/project/PXL_16.jpg differ diff --git a/assets/img/project/PXL_17.jpg b/assets/img/project/PXL_17.jpg new file mode 100644 index 0000000..eb0f627 Binary files /dev/null and b/assets/img/project/PXL_17.jpg differ diff --git a/assets/img/project/PXL_18.jpg b/assets/img/project/PXL_18.jpg new file mode 100644 index 0000000..927e6ed Binary files /dev/null and b/assets/img/project/PXL_18.jpg differ diff --git a/assets/img/project/PXL_2.jpg b/assets/img/project/PXL_2.jpg new file mode 100644 index 0000000..843fb2a Binary files /dev/null and b/assets/img/project/PXL_2.jpg differ diff --git a/assets/img/project/PXL_3.jpg b/assets/img/project/PXL_3.jpg new file mode 100644 index 0000000..22f7a3a Binary files /dev/null and b/assets/img/project/PXL_3.jpg differ diff --git a/assets/img/project/PXL_4.jpg b/assets/img/project/PXL_4.jpg new file mode 100644 index 0000000..97eedac Binary files /dev/null and b/assets/img/project/PXL_4.jpg differ diff --git a/assets/img/project/PXL_5.jpg b/assets/img/project/PXL_5.jpg new file mode 100644 index 0000000..e1f0cdb Binary files /dev/null and b/assets/img/project/PXL_5.jpg differ diff --git a/assets/img/project/PXL_6.jpg b/assets/img/project/PXL_6.jpg new file mode 100644 index 0000000..99383e4 Binary files /dev/null and b/assets/img/project/PXL_6.jpg differ diff --git a/assets/img/project/PXL_7.jpg b/assets/img/project/PXL_7.jpg new file mode 100644 index 0000000..e96490a Binary files /dev/null and b/assets/img/project/PXL_7.jpg differ diff --git a/assets/img/project/PXL_8.jpg b/assets/img/project/PXL_8.jpg new file mode 100644 index 0000000..9ceced6 Binary files /dev/null and b/assets/img/project/PXL_8.jpg differ diff --git a/assets/img/project/PXL_9.jpg b/assets/img/project/PXL_9.jpg new file mode 100644 index 0000000..1760e06 Binary files /dev/null and b/assets/img/project/PXL_9.jpg differ diff --git a/assets/img/shape/Vector white.svg b/assets/img/shape/Vector white.svg new file mode 100644 index 0000000..8343774 --- /dev/null +++ b/assets/img/shape/Vector white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/shape/Vector.svg b/assets/img/shape/Vector.svg new file mode 100644 index 0000000..49cb0b9 --- /dev/null +++ b/assets/img/shape/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/bakame/LICENSE b/bakame/LICENSE new file mode 100644 index 0000000..dd37311 --- /dev/null +++ b/bakame/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 MBAZA-NLP + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/bakame/README.md b/bakame/README.md new file mode 100644 index 0000000..91c34ab --- /dev/null +++ b/bakame/README.md @@ -0,0 +1,2 @@ +# bakame-frontend +This repo holds widgets that will consume the backend API of the Bakame chatbot and will be integrated in the main community website diff --git a/bakame/images/Vector.png b/bakame/images/Vector.png new file mode 100644 index 0000000..26b56ee Binary files /dev/null and b/bakame/images/Vector.png differ diff --git a/bakame/images/cancel.svg b/bakame/images/cancel.svg new file mode 100644 index 0000000..3fde81b --- /dev/null +++ b/bakame/images/cancel.svg @@ -0,0 +1,3 @@ + + + diff --git a/bakame/images/mic.svg b/bakame/images/mic.svg new file mode 100644 index 0000000..71d1db7 --- /dev/null +++ b/bakame/images/mic.svg @@ -0,0 +1,3 @@ + + + diff --git a/bakame/images/mobile-icon.svg b/bakame/images/mobile-icon.svg new file mode 100644 index 0000000..2b1cf55 --- /dev/null +++ b/bakame/images/mobile-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/bakame/images/pause.svg b/bakame/images/pause.svg new file mode 100644 index 0000000..4a1a59b --- /dev/null +++ b/bakame/images/pause.svg @@ -0,0 +1,3 @@ + + + diff --git a/bakame/images/send.svg b/bakame/images/send.svg new file mode 100644 index 0000000..d989288 --- /dev/null +++ b/bakame/images/send.svg @@ -0,0 +1,3 @@ + + + diff --git a/bakame/index.css b/bakame/index.css new file mode 100644 index 0000000..b480d9f --- /dev/null +++ b/bakame/index.css @@ -0,0 +1,283 @@ +.mainContainer{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } +.mainContainer h2{ + display: block; + margin: auto; + font-size: 50px; + color: rgb(90, 166, 248); + +} + +.chatbot,.smallDev { + position: fixed; + bottom: 0; + right: 0; + margin-bottom: 20px; + margin-right: 20px; + } + /* set some basic styles for the div */ + .chatbot,.smallDev{ + padding: 10px; + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0px 1px 5px 1px #BCBCBC; + width: 30%; + + } + /* center the text inside the div */ + .chatbot p { + text-align: center; + } + + + + .formSections{ + display:flex; + justify-content: space-between; + } + .formSections .leftSection{ + padding: 15px 30px 5px 25px; + min-width: 60%; + max-width: 100%; + } + .formSections .rightSection{ + display: flex; + justify-content: center; + align-items: flex-end; + } + .formSections .leftSection .chatbotTitle{ + font-size: 18px; + font-family: arial; + font-weight: medium; + margin-bottom: 20px; + } + + + .formSections .leftSection input { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 1px gray; + border-style: none none solid none; + padding-left:2px; + margin-top: 30px; + outline: none; + } + .formSections .rightSection button { + background-color: #F59221; + color: white; + margin: 8px 0; + border: none; + cursor: pointer; + border-radius: 50%; + } + .formSections .rightSection button img{ + padding: 16px 16px; + width: 20px; + } + + .responsesSection { + display: flex; + flex-direction: column; + /* justify-content: flex-start; */ + gap: .5rem; + } + + .responsesSection .questions { + justify-self: flex-end; + } + + .responsesSection .answers { + justify-self: flex-start; + background: #aaaaaa; + } + .chatbot .bakame .title{ + display: block; + margin: auto; + width: 90%; + /* border: 1px solid red; */ + } + .chatbot .bakame{ + display: block; + /* border: 1px solid blue; */ + } + .chatbot .bakame .header{ + display: flex; + align-items:center; + justify-content: center; + padding: 10px 0px; + /* border-bottom: 1px solid #BCBCBC; */ + + } + .chatbot .bakame .content{ + /* border: 1px solid green; */ + height: 300px; + width: inherit; + overflow: auto; + + } + +.content::-webkit-scrollbar-track +{ + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); + background-color: #F5F5F5; + border-radius: 10px; +} + +.content::-webkit-scrollbar +{ + width: 10px; + background-color: #F5F5F5; +} + +.content::-webkit-scrollbar-thumb +{ + border-radius: 10px; + background-color: #FFF; + background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#f9a749), to(#F59221), + color-stop(.6,#bababa)) +} + + .content .chatTextContent { + display: flex; + flex-direction: column; + align-items: flex-end; + font-family: helvetica; + } + + .chatTextContent p { + width: 50%; + margin-right: 1rem; + border-radius: .8rem; + padding: .5rem; + text-align: right; + font-size: .8rem; + background-color: #bababa; + } + .chatTextResponse { + font-family: helvetica; + } + + .chatTextResponse p{ + width: 50%; + margin-left: 1rem; + border-radius: .8rem; + padding: .5rem; + text-align: left; + font-size: .8rem; + background-color: #f9a749; + } + + + .chatbot .bakame .content .initialText{ + width: inherit; + height: inherit; + display: flex; + justify-content: center; + align-items: center; + } + .chatbot .bakame .content .initialText label{ + color: #BCBCBC; + } + + .bakameRecording { + display: flex; + justify-content: space-between; + } + + .bakameRecording .bakameCounter{ + padding: 0px 30px; + background: #D9D9D9; + color: red; + display: flex; + align-items: center; + justify-content: center; + /* border: 1px solid red; */ + padding-right: 90px; + padding-left: 90px; + border-radius: 10px; + } + .bakameRecording #bakameCancel, .bakameRecording #bakamePause, .bakameRecording #bakameAudio{ + border-radius: 50%; + border: 1px solid black; + padding:10px; + } + .bakameRecording #bakameCancel{ + padding:10px 15px; + } + .bakameRecording #bakamePause{ + padding: 10px 12px; + } + .bakameRecording #bakameAudio img{ + width: 20px; + height: auto; + } + .bakameRecording #bakameAudio{ + padding: 10px 15px; + } + .bakameRecording #bakameAudio{ + background: #F59221; + border: none; + } + + @media screen and (min-width:800px){ + .smallDev{ + display:none; + } + } + + @media screen and (max-width: 900px){ + .chatbot{ + display:none; + /* height: 32%; */ + } + + .smallDev{ + display:block; + /* border: 1px solid red; */ + width: 70px; + height: 70px; + } + #bakameMobile{ + width: inherit; + height: inherit; + border: none; + background-color: transparent; + + } + #bakameMobile img{ + width:inherit; + height: inherit; + } + } + @media screen and (max-width:700px){ + .chatbot{ + /* display: block; */ + width: 80%; + /* height: 32%; */ + } + .smallDev{ + display:block; + } + } + @media screen and (max-width:800px){ + .chatbot{ + /* display: block; */ + width: 80%; + /* height: 32%; */ + } + .smallDev{ + display:block; + } + } + /* @media screen and (max-width:400px){ + #bakameAudio{ + margin-left: 20px; + } + } */ + \ No newline at end of file diff --git a/bakame/index.html b/bakame/index.html new file mode 100644 index 0000000..0696581 --- /dev/null +++ b/bakame/index.html @@ -0,0 +1,81 @@ + + + + + + + Chatbot + + + + +
+

BAKAME CHATBOT

+
+ +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+ + + + +
+
+ +
+ + + + + +
+
+ +
+ + + +
+ + + +
+ +
+ + +
+
+ +
+ + + diff --git a/bakame/index.js b/bakame/index.js new file mode 100644 index 0000000..9735a65 --- /dev/null +++ b/bakame/index.js @@ -0,0 +1,405 @@ +console.log("hello i'm Bakame, your guy"); + +const chatbot = document.querySelector(".chatbot"); +const bakame = document.querySelector("#bakame"); +const bakameSaba = document.querySelector("#bakameSaba"); +const bakameType = document.querySelector("#bakameType"); +const bakameSend = document.querySelector("#bakameSend"); +const bakameMic = document.querySelector("#bakameMic"); + +const bakameRecording = document.querySelector("#bakameRecording"); +const bakameCancel = document.querySelector("#bakameCancel"); +const bakamePause = document.querySelector("#bakamePause"); +const bakameAudio = document.querySelector("#bakameAudio"); + +const timerLabel = document.getElementById("timerLabel"); +const content = document.querySelector(".content"); +const initialContent = document.querySelector(".initialText"); +const chatContent = document.querySelector(".chatTextContent"); +const chatResponse = document.querySelector(".chatTextResponse"); +const bakameMobile = document.querySelector("#bakameMobile"); +const smallDev = document.querySelector(".smallDev"); +const bakameContent = document.querySelector(".content"); + +var recorder = null; +var timerCounter = null; +const mins10 = 600000; + +const userGenerator = () => { + return `user${Date.now()}`; +} + + +// user CRUD +const setUser = () => { + let user = userGenerator(); + window.localStorage.setItem("mbazaUser", user); +} +const deleteUser = () => { + window.localStorage.setItem("mbazaUser", "nouser"); +} +const getUser = () => { + let user = window.localStorage.getItem("mbazaUser"); + return user; +} + +// default function to run +(() => { + setUser(); + console.log("user", userGenerator()); +})(); + + +let wait10mins = window.setInterval(() => { + deleteUser(); + setUser(); + // console.log("user", userGenerator()); +}, mins10); + +const bakameClean = () => { + bakame.style["display"] = "none"; + bakameSend.style["display"] = "none"; + bakameRecording.style["display"] = "none"; + timerLabel.textContent = ''; +}; + +const bakameCleanRecorder = () => { + timerLabel.textContent = ''; + clearInterval(timerCounter); + +} + + +const recordAudio = () => + new Promise(async (resolve) => { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + const mediaRecorder = new MediaRecorder(stream); + const audioChunks = []; + + mediaRecorder.addEventListener("dataavailable", (event) => { + audioChunks.push(event.data); + }); + + const start = () => mediaRecorder.start(); + + const stop = () => + new Promise((resolve) => { + mediaRecorder.addEventListener("stop", () => { + const audioBlob = new Blob(audioChunks, { type: "audio/mpeg" }); + const audioUrl = URL.createObjectURL(audioBlob); + const audio = new Audio(audioUrl); + const play = () => audio.play(); + resolve({ audioBlob, audioUrl, play }); + }); + mediaRecorder.stop(); + }); + resolve({ start, stop }); + }); + +const stopRecoder = async () => { + const audio = await recorder.stop(); + audio.play(); + console.log(audio); + timerLabel.textContent = ''; +} + +const bakameRecordCount = async () => { + let startTime = new Date().getTime(); + (async () => { + recorder = await recordAudio(); + recorder.start(); + })(); + + timerCounter = setInterval(function () { + const currentTime = new Date().getTime(); + const timeDiff = currentTime - startTime; + + // Calculate minutes and seconds from time difference + const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000); + + // Add leading zero to seconds if necessary + const formattedSeconds = seconds < 10 ? "0" + seconds : seconds; + + // Update the timer label + timerLabel.textContent = `${minutes}:${formattedSeconds}`; + }, 1000); +}; + +bakameClean(); + + +const regexInputValidataion = (input) => { + let regexB = /^(?:\b[^\W\d_aeiou]{17,}\b|\b[^\W\d_aeiou]+\b(?=\W|$))/gi + const isMatch = regexB.test(input); + + console.log(isMatch); + console.log(input.length); + +} + +// in any given sentence it should check and match only +// if it is a sentence made up of 1 word and composed of more than 16 characters +// or if in the whole sentence there's no any vowel, or words of that sentence has no vowels +// otherwise it should return false + +// catch the whole input and match if it is only made of consonants, +// if it is more than 16 characters long in 1 word +// if it is +const foldUp = () => { + console.log("foldUp"); + bakame.style["display"] = "block"; + bakameSaba.style["display"] = "none"; +}; +const foldDown = () => { + console.log("foldDown"); + bakame.style["display"] = "none"; + bakameSaba.style["display"] = "block"; +}; + +// Event listeners + +bakameType.addEventListener("focus", () => { + console.log("input focused"); + foldUp(); +}); + +bakameType.addEventListener("input", () => { + if (bakameType.value === "") { + bakameMic.style["display"] = "block"; + bakameSend.style["display"] = "none"; + } + if (bakameType.value !== "") { + bakameMic.style["display"] = "none"; + bakameSend.style["display"] = "block"; + } +}); + +bakameType.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + event.preventDefault(); + regexInputValidataion(bakameType.value); + console.log("Return key pressed!", bakameType.value); + initialContent.style['display'] = 'none'; + rasaApi(bakameType.value); + bakameType.value = ""; + } +}); + +bakameMic.addEventListener("click", (event) => { + event.preventDefault(); + foldUp(); + bakameMic.style["display"] = "none"; + bakameSaba.style["display"] = "none"; + bakameType.style["display"] = "none"; + bakameRecording.style["display"] = "flex"; +}); + +bakameSend.addEventListener("click", (event) => { + event.preventDefault(); + regexInputValidataion(bakameType.value); + + initialContent.style['display'] = 'none'; + + rasaApi(bakameType.value); + bakameType.value = ""; + +}); + +bakameMic.addEventListener("click", (event) => { + event.preventDefault(); + console.log("Mic clicked"); + bakameRecordCount(); +}); + +bakameCancel.addEventListener("click", (event) => { + event.preventDefault(); + console.log("cancel clicked"); + foldUp(); + bakameMic.style["display"] = "block"; + bakameSaba.style["display"] = "none"; + bakameType.style["display"] = "block"; + bakameRecording.style["display"] = "none"; + stopRecoder(); + bakameCleanRecorder(); +}); + +bakameAudio.addEventListener("click", (event) => { + event.preventDefault(); + bakameCleanRecorder(); +}); + +bakameMobile.addEventListener("click", () => { + chatbot.style["display"] = "block"; + smallDev.style["display"] = "none"; +}); + + +// calling the api + +const rasaApi = (query) => { + + let rasaURL = "http://chatbot.mbaza.org:5005/webhooks/rest/webhook"; + let user = getUser(); + let reqData = { + sender: user, + message: query + } + const sendRequest = async () => { + const { data: res } = await axios.post(rasaURL, reqData, { + headers: { + "Content-Type": "application/json", + }, + }); + // res = [ + // { + // recipient_id: "user", + // text: "Murakaza neza kuri Bakame" + // }, + // { + // recipient_id: "user", + // image: "https://rtn.rw/wp-content/uploads/2019/07/irembo-300x83.png" + // }, + // { + // recipient_id: "user", + // text: "murashaka gukora ku wuhe munsi", + // buttons: [ + // { + // title: "2023-01-23", + // payload: "/permanent_driving_license_date{\"permanent_driving_license_date_slot\": \"2023-01-23\"}" + // }, + // { + // title: "2023-02-01", + // payload: "/permanent_driving_license_date{\"permanent_driving_license_date_slot\": \"2023-02-01\"}" + // }, + // { + // title: "2023-02-15", + // payload: "/permanent_driving_license_date{\"permanent_driving_license_date_slot\": \"2023-02-15\"}" + // } + // ] + // } + // ] + const axios = require('axios'); +const FormData = require('form-data'); +const fs = require('fs'); +let data = new FormData(); +data.append('audio_file', fs.createReadStream('/Users/kayarn/Desktop/Sources/bakame-backend-api/permit.wav')); +data.append('user_id', 'user1'); + +let config = { + method: 'post', + maxBodyLength: Infinity, + url: '----url/speak---', + headers: { + ...data.getHeaders() + }, + data : data +}; + +axios.request(config) +.then((response) => { + console.log(JSON.stringify(response.data)); +}) +.catch((error) => { + console.log(error); +}); + + +/* the above codes are not used for now */ + let divReq = createDomRequestTree(query); + console.log("divReq",divReq); + bakameContent.appendChild(divReq); + // chatContent.innerHTML = ` + //

+ // ${query} + //

`; + + const sendButtonRequest = (title,pld)=>{ + + console.log("called ",title,pld); + } + + //responses + allResponse = ''; + let divButtons = createDiv(); // this div will hold the buttons + + res.map((response) => { + console.log("reespo", response); + + let text = response.text || ""; + // let image = response.image || ""; + let buttons = response.buttons || []; + + buttons.length && buttons.map((btn) => { + let button = document.createElement('button'); + button.setAttribute("class","BakameBtn"); + button.payload=btn.payload; + button.onclick=`sendButtonRequest(${btn.title},${btn.payload})` + //onclick the button should call a function to send another req with the payload provided + button.innerHTML = btn.title; + divButtons.appendChild(button); + }); + + + //append the button's div into the response div + + allResponse += ` +

+ ${response.text} +

`; + + let divRes = createDomResponseTree(response.text); + bakameContent.appendChild(divRes); + // let + if(response.buttons){ + divRes.appendChild(divButtons); + } + //on the above allResponse, instead it should be a content, + // which will append the children in chronological order + //both for the request then the response + }); + + // chatResponse.innerHTML = allResponse; + // after all, no more of chatResponse or allResponse + // then build a function to handle when a user clicks on a button + console.log("--->", res); + } + + + sendRequest(); + +} + +const createDiv = () =>{ + let div = document.createElement('div'); + return div; +} + +// this function will receive the request data +// it should create the request div and its children included and return it + +function createDomRequestTree(req){ + let chatTextContent = document.createElement('div'); + chatTextContent.setAttribute("class","chatTextContent"); + const questionsContent= document.createElement("p"); + questionsContent.setAttribute("class","questionsContent"); + questionsContent.innerHTML=req; + chatTextContent.appendChild(questionsContent); + + return chatTextContent; +} + + +//this function will receive the response object +// it should create the response div and its children included and return it +const createDomResponseTree = (res)=>{ + let chatTextResponse = document.createElement('div'); + chatTextResponse.setAttribute("class","chatTextResponse"); + const questionsContent = document.createElement('p'); + questionsContent.setAttribute("class","questionsContent"); + questionsContent.innerHTML=res; + chatTextResponse.appendChild(questionsContent); + + return chatTextResponse; + +} \ No newline at end of file diff --git a/bakame/interactive-chatbot-rasa-responses-format.txt b/bakame/interactive-chatbot-rasa-responses-format.txt new file mode 100644 index 0000000..421674f --- /dev/null +++ b/bakame/interactive-chatbot-rasa-responses-format.txt @@ -0,0 +1,37 @@ +message request: + { + "sender":"user", + "message":"mwaramutse" + } + +message responses: + [ + { + "recipient_id":"user", + "text":"murakaza neza kuri Bakame" + }, + { + "recipient_id":"user", + "image":"https://rtn.rw/wp-content/uploads/2019/07/irembo-300x83.png" + } + ] + +buttons responses: + [ + "recipient_id":"user", + "text":"murashaka gukora ku wuhe munsi", + "buttons":[ + { + "title": "2023-01-23", + "payload": "/permanent_driving_license_date{\"permanent_driving_license_date_slot\": \"2023-01-23\"}" + }, + { + "title": "2023-02-01", + "payload": "/permanent_driving_license_date{\"permanent_driving_license_date_slot\": \"2023-02-01\"}" + }, + { + "title": "2023-02-15", + "payload": "/permanent_driving_license_date{\"permanent_driving_license_date_slot\": \"2023-02-15\"}" + } + ] + ] diff --git a/bakame/mbaza.png b/bakame/mbaza.png new file mode 100644 index 0000000..ffd35e5 Binary files /dev/null and b/bakame/mbaza.png differ diff --git a/bakame/package.js b/bakame/package.js new file mode 100644 index 0000000..128512f --- /dev/null +++ b/bakame/package.js @@ -0,0 +1,163 @@ +let html = ` +
+
+ +
+ + + + + +
+`; + +let styles = ` + .mainContainer{ + color: #0000ff; + background-color:#000; + } +`; + +// document.body.innerHTML=html; + +// const readConfigs = () =>{ +// // Create a new XHR object +// const xhr = new XMLHttpRequest(); + +// // Open a GET request to the JSON file +// xhr.open('GET', './index.html', true); + +// // Set the response type to JSON +// xhr.responseType = 'json'; + +// // Handle the onload event +// xhr.onload = () => { +// if (xhr.status === 200) { +// // Parse the response as JSON and do something with the data +// const data = xhr.response; +// // return data; +// let {chatbots} = data; +// chatbots.map((chatbot,idx)=>{ +// let option = document.createElement('option'); +// option.setAttribute("value",chatbot.name); +// option.setAttribute("languages",chatbot.languages); +// option.innerHTML = chatbot.name; +// bakameApiSelect.appendChild(option); +// if(idx ==0){ +// bakameApiSelect.selectedIndex = 0; +// option.setAttribute("selected",true); +// setLanguagesFromConfigs(chatbot.languages); +// } + + +// }) +// console.log(data); +// } else { +// console.error('Failed to load JSON file'); +// } +// }; + +// // Send the request +// xhr.send(); + +// } + + +// read the css and include it + + const readIndexCss = ()=>{ + // Make an HTTP request to the CSS file + const xhr = new XMLHttpRequest(); + xhr.open("GET", "./bakame/index.css"); + xhr.onload = function() { + const cssText = xhr.responseText; + console.log("css",cssText); + + var head = document.getElementsByTagName('HEAD')[0]; + // creating a link + const style = document.createElement("style"); + let link = document.createElement("link"); + link.setAttribute("href", "./bakame/index.css"); + link.setAttribute("rel","stylesheet"); + head.appendChild(link); + // let css = readIndexCss(); + // style.innerHTML= cssText; + // head.appendChild(style); + // return cssText; + }; + xhr.send(); + + } + readIndexCss(); + + + // READ the java script and include it on the page + const readIndexJS = () =>{ + const xhr = new XMLHttpRequest(); + xhr.open("GET", "./bakame/index.js"); + xhr.onload = function(){ + const jsText = xhr.responseText; + console.log("js", jsText); + + + } + } + + const readIndexToExtractTheChatbot = (css) =>{ + + const xhr = new XMLHttpRequest(); + xhr.open("GET", "./bakame/index.html"); + + xhr.onload = function() { + const responseText = xhr.responseText; + const parser = new DOMParser(); + const doc = parser.parseFromString(responseText, "text/html"); + // const mainContainer = doc.querySelector(".mainContainer"); + // let mainContent = document.createElement("div"); + // mainContent. + const chatbot = doc.querySelector(".chatbot"); + const smallDev = doc.querySelector(".smallDev"); + let head = document.getElementsByTagName('HEAD')[0]; + + console.log("head",head); + // document.body.appendChild(mainContainer); + document.body.appendChild(chatbot); + document.body.appendChild(smallDev); + + let script = document.createElement("script"); + script.setAttribute("src","./bakame/index.js" ); + + document.body.appendChild(script); + }; + xhr.send(); + + + } + + readIndexToExtractTheChatbot(); + + + + // so far the chatbot is included but the images, links, and other path related features are to be done next + + /* + + +- responsiveness +- edit the world map to add the african continent +- add the background section +- include the images gallery +- integrate other pages and include external resources +- add real content +- deploy + + + + + + + + + + + */ \ No newline at end of file diff --git a/data.json b/data.json new file mode 100644 index 0000000..e8999c0 --- /dev/null +++ b/data.json @@ -0,0 +1,14 @@ +{ + "socialMedia":{ + "twitter":"https://twitter.com/NlpMbaza", + "linkedin":"https://linkedin.com/company/mbaza-nlp", + "slack":"https://join.slack.com/t/mbazanlpcommunity/shared_invite/zt-1u932og1w-0nXf4VhkgvBIPGrsTArvtw", + "flickr":"https://www.flickr.com/photos/196742720@N06/albums", + "github":"https://github.com/MBAZA-NLP", + "huggingFace":"https://huggingface.co/mbazaNLP", + "youtube":"https://www.youtube.com/@mbazanlpcommunity4761", + "instagram":"", + "blog":"https://blog.dev.mbaza.org/" + + } +} \ No newline at end of file diff --git a/index.html b/index.html index 11f0261..d31bf34 100644 --- a/index.html +++ b/index.html @@ -1,567 +1,279 @@ - - - + + - - - Home - Mbaza - - - - - - - - - - - - - - - - - - - - - - - - - + Hero Section + + + + + - - + +
+ +
+ +
+
- - -
-
- - -
-
- - -
-
-
-
-
- -
-
-
- -
+ +
+
+
+ +
+
+

MBAZA-NLP

+ COMMUNITY +
+
+ + +
+
+
+
+
+
+
25
+
MAY
+
+
+
+
+
+
+
KIGALI
+
CCB
+
FLOOR 7
+
+
+
+

Community Gathering

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

Welcome to the Mbaza NLP Community!

+

We are a community working on Natural Language Processing (NLP) + for Kinyarwanda and other low-resource languages. For example, we are working + on Kinyarwanda automatic speech recognition (ASR, also known as Speech-to-Text, STT), + Text-to-Speech (TTS), and semantic chatbots

+
+
+
+

Vision

+
+

Sustainable community rooted in partnership, + extending on pre-existing open packages to + create inclusive NLP solutions for Kinyarwanda + and other low-resource languages

-
-
- - - -
-
- Blog -
+
+

Mission

+
+

Foster the use of NLP and AI, to implement innovative + use cases in Rwanda and the East Africa region

+
+
-
- + + - - - -
- - -
-
- -
-
-
-
-
-
-
- -

MBAZA NLP, - - COMMUNITY -

- -
-
-
-
-
+
+
+

Our Lens on Life

+
+
+
+
-
- - - - - -
-
-
-
-
-
- -
-
-
-
-
-
-
-

About
-

-
-
-
-
-

- We are a community working on Natural Language Processing (NLP) for Kinyarwanda and other low-resource languages. For example, we are working on Kinyarwanda automatic speech recognition (ASR, also known as Speech-to-Text, STT), Text-to-Speech (TTS), and semantic chatbots. -

-
-
- Learn more -
-
-
-
+
+
-
- - - - - -
-
-
-
-
-
- -
-
-
-
-
- -
-

Up Coming events

-
    -
-
-
-
- - - - -
-
-
-
Our Partners
-
- -
- -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - - diff --git a/pages/product.html b/package.html similarity index 59% rename from pages/product.html rename to package.html index 789c4a9..4fbf16f 100644 --- a/pages/product.html +++ b/package.html @@ -4,12 +4,13 @@ - Mbaza product List - + Document + - -
+ +
+

Hello text

- \ No newline at end of file + \ No newline at end of file diff --git a/pages/download.html b/pages/download.html new file mode 100644 index 0000000..82e7d61 --- /dev/null +++ b/pages/download.html @@ -0,0 +1,68 @@ + + + + + + + Download Access + + + +

+ Fill the form below and submit to be able to have access to the download + link: +

+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ + + diff --git a/pages/product-details.html b/pages/product-details.html deleted file mode 100644 index 22dbc58..0000000 --- a/pages/product-details.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - Mbaza Product Description - - - -
-
- -
-
- - \ No newline at end of file diff --git a/pages/users.html b/pages/users.html new file mode 100644 index 0000000..e5758f2 --- /dev/null +++ b/pages/users.html @@ -0,0 +1,217 @@ + + + + + + + Mbaza Community Members + + + + + + +
+ +
+ +
+
+ + + mbaza pic +

Would you like to join us and contribute?

+ +
+
+
+ card pic +
+

Ntirushwa Kelly Brice

+

Software Engineer

 +
+
+
+ card pic +
+

Munyeshuri Manzi Patrick

+

Front-End engineer/
Product design

 +
+
+
+ card pic + +
+

H. Rwibutso Robert

+

Software developer

 +
+
+
+ card pic + +
+

Ngarukiyimana sostene

+

Fullstack developer

 +
+
+
+ card pic + +
+

Gikundiro Ange Marie Happy

+

Frontend Engineer

 +
+ +
+
+ card pic + +
+

Imanishimwe Immaculee

+

Frontend Engineer

 +
+
+
+ card pic +
+ +

Samuel Rutunda

+

Technologist (NLP)

 +
+
+
+ card pic + +
+

Angelique Uwimbabazi

+

Software Engineer

 +
+
+
+ card pic + +
+

Angelo christian Gatete Ishema

+

Software Engineer

 +
+
+
+ card pic +
+

Benigne Abineza

+

Frontend Engineer

 +
+ +
+
+ card pic +
+

Eddy Nzobarinda

+

Software Engineer

 +
+
+
+ card pic +
+

Elvis Mugisha

+

software engineer

 +
+ +
+
+ card pic +
+

Umutoni Gloria

+

Frontend Engineer

 +
+
+
+ card pic + +
+

Hirwa Khalifa

+

Security Engineer

 +
+
+
+ card pic +
+

BYAKUNDA Roger

+

Machine Learning

 +
+ +
+
+ card pic +
+

Olanrewaju Samuel

+

Computational Linguist

 +
+
+
+ card pic + +
+

Ariane Shimirwa

+

ML Engineer/Data Scientist

 +
+
+
+ card pic +
+

Floris Nzabakira

+

NLP Engineer

 +
+
+
+ card pic + +
+

Rene Promesse

+

Software developer

 +
+
+
+ card pic + +
+

Aliah Uwonkunda

+

Frontend Engineer

 +
+
+
+ card pic +
+ +

Eric Maniraguha

+

Machine Learning and Data Scientist

+
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/test pages/V2-section2.html b/test pages/V2-section2.html new file mode 100644 index 0000000..5390cc7 --- /dev/null +++ b/test pages/V2-section2.html @@ -0,0 +1,30 @@ + + + + + + + Document + + + +
+
Our background
+

+ The community builds on the technology developed for the +

+

+ Mbaza COVID-19 Chatbot by a consortium of parteners including GIZ, +

+

+ Digital Umuganda, Arxia,Mozilla and RISA.This technology is now made + freely +

+

+ available to the community to continue the development on the technology + and +

+

to use it for exciting new use cases.

+
+ + diff --git a/test pages/connect.html b/test pages/connect.html new file mode 100644 index 0000000..fa55e12 --- /dev/null +++ b/test pages/connect.html @@ -0,0 +1,76 @@ + + + + + + + Connect + + + + +
+
+
+
+ +
+
+ + + + + + + + + + + +
+
+

CONNECT WITH US

+

+ Explore the world of NLP and connect with our community through our + communication channels. Stay up-to-date with the latest news, + research, and industry insights by following us on social media. For a + more in-depth discussion, join our forums to connect with like-minded + individuals, ask questions, and share your ideas. You can also reach + out to us via email or chat to connect with our experts and get + personalized support. Join our community today and unlock the power of + NLP! +

+ mbazanlp.community@gmail.com +
+
+ + diff --git a/test pages/foater.css b/test pages/foater.css new file mode 100644 index 0000000..7f98853 --- /dev/null +++ b/test pages/foater.css @@ -0,0 +1,55 @@ +footer{ + width: 100%; + background-color: #28738A; +} + + +.icons1 img{ + width: 32px; + height: 32px; + padding: 5px 5px; + } +#foater{ + gap: 5%; + display: flex; + justify-content: center; + +} +#foater h3{ + margin-top: 30px; + color:#fff; + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-size: 20px; + line-height: 24px; +} +#foater span{ + font-size: 15px; + display:block; + font-family: 'Inter'; + font-style: normal; + + line-height: 35px; + color: rgb(255, 255, 255); + opacity: 0.7; +} + + +.copy{ + gap: 2%; + display: flex; + margin-top: 10px; + justify-content: center; +} +.copy p{ + color: rgb(255, 255, 255); + opacity: 0.7; + font-size: 15px; +text-align: inherit; +} +.copy p a{ + font-style: normal; + color: rgb(241, 145, 18); + font-weight: 900; +} \ No newline at end of file diff --git a/test pages/foater.html b/test pages/foater.html new file mode 100644 index 0000000..7f4f502 --- /dev/null +++ b/test pages/foater.html @@ -0,0 +1,46 @@ + + + + + + + + Foater + + + + + \ No newline at end of file diff --git a/test pages/intro.html b/test pages/intro.html new file mode 100644 index 0000000..8f3ed23 --- /dev/null +++ b/test pages/intro.html @@ -0,0 +1,50 @@ + + + + + + + + Document + + + + + +
+
+
+ +
+
+
+
+

Welcome to the Mbaza NLP Community!

+

We are a community working on Natural Language Processing (NLP) + for Kinyarwanda and other low-resource languages. For example, we are working + on Kinyarwanda automatic speech recognition (ASR, also known as Speech-to-Text, STT), + Text-to-Speech (TTS), and semantic chatbots

+
+
+
+

Vision

+
+

Sustainable community rooted in partnership, + extending on pre-existing open packages to + create inclusive NLP solutions for Kinyarwanda + and other low-resource languages

+
+
+

Mission

+
+

Foster the use of NLP and AI, to implement innovative + use cases in Rwanda and the East Africa region

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/test pages/product-details.html b/test pages/product-details.html new file mode 100644 index 0000000..a79dcab --- /dev/null +++ b/test pages/product-details.html @@ -0,0 +1,147 @@ + + + + + + + Mbaza Product Description + + + + + + +
+ +
+ +

Speech to Text

+ +
+
+ +

Name: Speech to text (STT) model

+ +

Description :

+

+ The Kinyarwanda Speech-to-Text (STT) Model project is focused on creating an accurate machine learning model for transcribing spoken
+ Kinyarwanda into written text. With over 12 million speakers worldwide, Kinyarwanda is an important language to develop speech
+ recognition technology for.

+ + The project will involve collecting a large dataset of spoken Kinyarwanda and using it to train a deep learning model. The model will be
+ evaluated using metrics such as accuracy and word error rate, and its performance will be compared to other existing STT models for
+ African languages.,
+ The ultimate goal of the project is to improve access to information and communication for Kinyarwanda speakers by enabling them to use
+ voice-enabled technology to interact with digital devices and services. Overall, the Kinyarwanda STT Model project has the potential to
+ make a significant impact in improving accessibility and inclusivity for Kinyarwanda speakers.
+ +

+

License : Speech to text (STT) model

+

Scope :

+

+ The ultimate goal of the project is to improve access to information and communication for Kinyarwanda speakers by enabling them to use
+ voice-enabled technology to interact with digital devices and services. The project's scope appears to be focused on developing a
+ language model for Kinyarwanda specifically, with potential for future applications in speech recognition and natural language processing.
+

+

Timeline : Feb 2023 - March 2023

+

Price : Free

+

Contributors : Rene Promesse, Arnaud, Floris, Samuel

+

Partners/Sponsors : MiniICT

+

Metrics

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Transcription accuracy:4.5 ./s
Word Error Rate (WER):4.5 ./s
Character Error Rate (CER): 4.5 ./s
Sentence Error Rate (SER): 4.5 ./s
Recognition Accuracy:4.5 ./s
Latency:5s ./s
+
+ + +
+

stats

+
+ +
+
+ +
+ +
+ +
+

Feedback:

+
+
+

+ Projects under development (3) +

+

Would you like to join us and contribute?

+ +
+
+
+ +

Bakame chatbot

+

Speak Kinyarwamda and get the text of

+

the spoken words

+ + Read more +
+
+ +

Text to speech

+

+ Write Kinyarwanda and get the audio voice of +

+

the written sentence

+ + Read more +
+
+ +

Kinyarwanda Dataset STT

+

Over 2000 hours of Kinyarwanda voice data,

+

making it the second-biggest open voice

+

dataset on the common voice platform.

+ + Read more +
+
+
+ + diff --git a/test pages/product.html b/test pages/product.html new file mode 100644 index 0000000..0245fc4 --- /dev/null +++ b/test pages/product.html @@ -0,0 +1,326 @@ + + + + + + + Mbaza product List + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + + + + +
+
+
+
+
+
+ +
+
+ + +
+
+
+

+ Projects +

+
+
+ + +
+
+
+
+
+

Projects accomplished (131)

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

4.5

+
+
+ +
+
+

Speech To Text

+

Speak Kinyarwanda and get the test of the spoken words

+
+
+
+

Try it out

+
+
+

Read more

+
+
+
+
+
+ +

4.5

+
+
+ +
+
+

Text to Speech

+

+ Write Kinyarwanda and get audio voice of the written sentence +

+
+
+

Try it out

+

Read more

+
+
+
+
+ +

4.5

+
+
+ +
+
+

Kinyarwanda Dataset SST

+

+ Over 2000 hours of Kinyarwanda voice data, making it the + second-biggest open voice dataset on the common voice platform +

+
+
+

Download

+

Read more

+
+
+
+
+
+
+ +

4.5

+
+
+ +
+
+

Speech To Text

+

Speak Kinyarwanda and get the test of the spoken words

+
+
+

Try it out

+

Read more

+
+
+
+
+ +

4.5

+
+
+ +
+
+

Text to Speech

+

+ Write Kinyarwanda and get audio voice of the written sentence +

+
+
+

Try it out

+

Read more

+
+
+
+
+ +

4.5

+
+
+ +
+
+

Kinyarwanda Dataset SST

+

+ Over 2000 hours of Kinyarwanda voice data, making it the + second-biggest open voice dataset on the common voice platform +

+
+
+

Download

+

Read more

+
+
+
+
+
+
+

Projects under debvelopment [3]

+

would you like to join and continue

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

Speech To Text

+

Speak Kinyarwanda and get the test of the spoken words

+
+
+

+

Read more

+
+
+
+ +
+ +
+
+

Text to Speech

+

+ Write Kinyarwanda and get audio voice of the written sentence +

+
+
+

+

Read more

+
+
+
+ +
+ +
+
+

Kinyarwanda Dataset SST

+

+ Over 2000 hours of Kinyarwanda voice data, making it the + second-biggest open voice dataset on the common voice platform +

+
+
+

+

Read more

+
+
+
+ +
+
+
+ + diff --git a/pages/profile.css b/test pages/profile.css similarity index 100% rename from pages/profile.css rename to test pages/profile.css diff --git a/pages/profile.html b/test pages/profile.html similarity index 100% rename from pages/profile.html rename to test pages/profile.html diff --git a/test pages/v2-header.css b/test pages/v2-header.css new file mode 100644 index 0000000..a8c3e5d --- /dev/null +++ b/test pages/v2-header.css @@ -0,0 +1,80 @@ +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; +} +nav{ + width: 100%; + height: 50px; + background-color: rgb(11, 154, 154); +} +nav ul{ + margin-right: 20px; + float: right; + padding-top: -60px; +} +nav ul li{ + display: inline-block; + line-height: 50px; + margin: 0 5px; +} +li a{ + text-decoration: none; + color: white; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + cursor: pointer; +} +li a:hover{ + color: orange; +} +.toggle i{ + display: none; +} +.dropdown-menu{ + position: absolute; + top: 60px; + right: -100px; + width: 300px; +} +.dropdown-menu ul li{ +display: block; +} +.dropdown-menu li a{ + color:white; + background: rgb(11, 154, 154); +} + +@media screen and (max-width:900px) +{ + nav{ + width: 300px; + height: 250px; + position: static; + } + nav ul{ + padding: 5px; + margin: 0 10px; + } + nav ul li{ + /* align-items: center; + margin: auto; */ + display: block; + object-fit: fill; + } + nav li a { + justify-content: center; + + } + +} +@media screen and (max-width:1200px){ + nav{ + width: 900px; + height: 400px; + } + nav ul li { + display: block; + object-fit: fill; + } +} \ No newline at end of file diff --git a/test pages/v2-header.html b/test pages/v2-header.html new file mode 100644 index 0000000..f047d0e --- /dev/null +++ b/test pages/v2-header.html @@ -0,0 +1,24 @@ + + + + + + + Header section + + + + + + + + \ No newline at end of file diff --git a/test pages/v2-section3.css b/test pages/v2-section3.css new file mode 100644 index 0000000..0f008f3 --- /dev/null +++ b/test pages/v2-section3.css @@ -0,0 +1,409 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.blog { +/* margin: auto; */ +display: flex; +gap: 15%; +margin: 9%; +flex-direction: row; + +} +.introduction{ + order: 1; +} +.introduction .introduction1{ + display: flex; + border-radius: 20px 20px 10px 10px; + +} +.introduction1 img{ + width: 140px; + padding-bottom: 20px; + +} +.paragraph { +padding-top: 15px; +} +.paragraph .intro{ + padding-left: 20px; + width: 220px; + font-size: 17px; +} +.paragraph .date{ + padding-top: 6px; + padding-left: 20px; +font-size: 13px; +} +.introduction .introduction2{ + display: flex; +} +.introduction2 img{ + width: 140px; + padding-bottom: 20px; +} + +.introduction .introduction3{ + display: flex; +} +.introduction3 img{ + width: 140px; +} +.insights { +width: 420px; +order: 2; +} +.insights h2{ + height: 50px; +} +.insights p{ + height: 180px; + text-align: left; +} +.insights h3{ + text-align: center; + +} +.insights h3 a{ + text-decoration: none; + color: black; + position: relative; +} +.insights h3 a::after { + content: ''; + position: absolute; + left: 0; + bottom: -4px; + width: 0; + height: 2px; + background-color: #28738A; + opacity: 0; + } + + @keyframes line-appear { + 0% { + opacity: 0; + width: 0; + } + 100% { + opacity: 1; + width: 50%; + margin-left: 15%; + + } + } + + .insights h3 a:hover::after { + animation: line-appear 0.5s forwards; + } +.insights h3 a:hover{ + color:#1c4d5c; + cursor: pointer; +} + + + + +/* RESPONSIVENESS */ + +@media screen and (max-width:400px){ + .blog{ + flex-direction: column; + width: 100%; + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ +height: 50px; +font-size: 20px; + } + .insights p{ + width: 280px; + height: 230px; + font-size: 15px; + } + .insights h3{ + height: 50px; + font-size: 16px; + margin-right: 140px; + } + .introduction1 img{ + width: 100px; + } + .introduction2 img{ + width: 100px; + } + .introduction3 img{ + width: 100px; + } + .paragraph{ + padding-top: 6px; + } +.paragraph .intro{ + font-size: 14px; +} +.paragraph .date{ + font-size: 12px; +} +} + +@media screen and (min-width:401px) and (max-width:480px){ + .blog{ + flex-direction: column; + width: 100%; + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 24px; + } + .insights p{ + width: 400px; + height: 280px; + font-size: 18px; + } + .insights h3{ + height: 60px; + font-size: 18px; + margin-right: 140px; + margin-top: -11%; + } + .introduction1 img{ + width: 120px; + } + .introduction2 img{ + width: 120px; + } + .introduction3 img{ + width: 120px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 18px; + } + .paragraph .date{ + font-size: 15px; + } + } + @media screen and (min-width:481px) and (max-width:580px){ + .blog{ + flex-direction: column; + width: 100%; + /* margin-left:22% ; */ + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 24px; + } + .insights p{ + width: 480px; + height: 280px; + font-size: 18px; + + } + .insights h3{ + height: 60px; + font-size: 18px; + margin-right: 140px; + margin-top: -20%; + } + .introduction1 img{ + width: 120px; + } + .introduction2 img{ + width: 120px; + } + .introduction3 img{ + width: 120px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 18px; + } + .paragraph .date{ + font-size: 15px; + } + } + @media screen and (min-width:601px) and (max-width:700px){ + .blog{ + flex-direction: column; + width: 100%; + /* margin-left:22% ; */ + } + .introduction{ + order: 2; + } + .insights{ + order: 1; + } + .insights h2{ + height: 50px; + font-size: 24px; + margin-left: 10%; + } + .insights p{ + width: 650px; + height: 280px; + font-size: 18px; + } + .insights h3{ + height: 60px; + font-size: 18px; + margin-right: 140px; + margin-top: -32%; + margin-left: 26%; + } + .introduction1 img{ + width: 120px; + } + .introduction2 img{ + width: 120px; + } + .introduction3 img{ + width: 120px; + } + .paragraph{ + padding-top: 6px; + } + .paragraph .intro{ + font-size: 18px; + } + .paragraph .date{ + font-size: 15px; + } + } + @media screen and (min-width:701px) and (max-width:800px){ + .blog{ + gap: 12%; + margin: 6%; + } +.introduction .introduction1 img{ + width: 28%; + +} +.paragraph .intro{ + font-size: 14px; + margin-top: -5%; +} +.paragraph .date{ +font-size: 11px; +} +.introduction .introduction2 img{ + width: 28%; + +} +.introduction .introduction3 img{ + width: 28%; + +} +.insights h2{ + font-size: 17px; +} +.insights p{ + width: 350px; + margin-top: -3%; +} +.insights h3{ + margin-top: 4%; +} + } + + @media screen and (min-width:801px) and (max-width:880px){ + .blog{ + gap: 12%; + margin: 6%; + } +.introduction .introduction1 img{ + width: 28%; + +} +.paragraph .intro{ + font-size: 14px; + margin-top: -5%; +} +.paragraph .date{ +font-size: 11px; +} +.introduction .introduction2 img{ + width: 28%; + +} +.introduction .introduction3 img{ + width: 28%; + +} +.insights h2{ + font-size: 17px; +} +.insights p{ + width: 350px; + margin-top: -3%; +} +.insights h3{ + margin-top: 4%; +} + } + @media screen and (min-width:881px) and (max-width:940px){ + .blog{ + gap: 12%; + margin: 6%; + } +.introduction .introduction1 img{ + width: 28%; + +} +.paragraph .intro{ + font-size: 14px; + margin-top: -5%; +} +.paragraph .date{ +font-size: 11px; +} +.introduction .introduction2 img{ + width: 28%; + +} +.introduction .introduction3 img{ + width: 28%; + +} +.insights h2{ + font-size: 17px; +} +.insights p{ + width: 450px; + margin-top: -3%; +} +.insights h3{ + margin-top: 4%; +} + } + + @media screen and (min-width:941px) and (max-width:1030px){ + .insights p{ + width: 430px; + + } + + } \ No newline at end of file diff --git a/test pages/v2-secton3.html b/test pages/v2-secton3.html new file mode 100644 index 0000000..2a5a749 --- /dev/null +++ b/test pages/v2-secton3.html @@ -0,0 +1,43 @@ + + + + + + + Document + + + +
+
+
+ AI +
+

Introducing the Mbaza nlp community

+

30-april-2023

+
+
+
+ AI +
+

Introducing the Mbaza nlp community

+

30-april-2023

+
+
+
+ AI +
+

Introducing the Mbaza nlp community

+

30-april-2023

+
+
+
+
+

insights,ideas & community news

+

Stay informed and inspired with our Insights, Ideas & Community News section. Get the latest news and updates on community events, initiatives, and projects. Discover expert insights and ideas from thought leaders in the community on topics related to our shared interests. Be inspired by stories of community members making a difference and learn how you can get involved. Our Insights, Ideas & Community News section is your go-to source for all the latest news and information in our community.

+

Find more articles

+
+
+ + + \ No newline at end of file diff --git a/pages/v2_section6.html b/test pages/v2_section6.html similarity index 100% rename from pages/v2_section6.html rename to test pages/v2_section6.html