Skip to content

Issue #52: Fix typo #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Issue #52: Fix typo #62

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
53746be
Fix container typo
TrudyCyns Jul 18, 2023
0343ac5
Minor Changes
TrudyCyns Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 35 additions & 34 deletions pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Image from 'next/image';
import Card from '../components/Card';
import cardData from '../components/metadata/metadata.js';
import bgImg from '../public/images/oscahomepage.jpg';
import Image from "next/image";
import Card from "../components/Card";
import cardData from "../components/metadata/metadata.js";
import bgImg from "../public/images/oscahomepage.jpg";

export default function Home() {
const cardElement = cardData.map((data) => {
Expand All @@ -18,17 +18,17 @@ export default function Home() {
});

return (
<section className='grid'>
<div className='flex justify-center h-screen w-full relative'>
<Image src={bgImg} layout='fill' objectFit='cover' />
<div className='containe md:mx-auto flex-col justify-evenly text-white text-sm absolute w-full p-5 text-center top-[300px] bg- backdrop-blur-sm bg-black/30 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg'>
<h1 className=' text-white text-[30px] md:text-[60px] '>
<section className="grid">
<div className="flex justify-center h-screen w-full relative">
<Image src={bgImg} layout="fill" objectFit="cover" />
<div className="container md:mx-auto flex-col justify-evenly text-white text-sm absolute w-full p-5 text-center top-[300px] bg- backdrop-blur-sm bg-black/30 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg">
<h1 className=" text-white text-[30px] md:text-[60px] ">
Open Source Community <br />
Africa{'{'}
<span className='text-orange-400 '>Kampala</span>
{'}'}
Africa{"{"}
<span className="text-orange-400 ">Kampala</span>
{"}"}
</h1>
<p className='mt-10 '>
<p className="mt-10 ">
Open Source Community Africa (OSCA) is a community for open source
lovers, enthusiasts, advocates and experts within and across Africa,
with the sole aim of increasing the rate of credible open source
Expand All @@ -37,48 +37,49 @@ export default function Home() {
</div>
</div>

<div className='text-center p-20 bg-slate-300'>
<h2 className='text-center pb-10'>What is OSCA?</h2>
<p className='md:px-10'>
<div className="text-center p-20 bg-slate-300">
<h2 className="text-center pb-10">What is OSCA?</h2>
<p className="md:px-10">
Open Source Community Africa (OSCA) is a community of open source
lovers, enthusiasts, advocates and experts across the African
continent. OSCA's sole goal is to increase the rate of credible
countributions to open source by African coders, writers, designers
and everyone involved in the tech space to local & global projects;
changing the perception of Africans from just a billion users to the{' '}
changing the perception of Africans from just a billion users to the{" "}
<strong> NEXT BILLION CREATORS </strong>
</p>
</div>
<div className='container mx-auto text-center mt-[3rem] h-full'>
<div className="container mx-auto text-center mt-[3rem] h-full">
<h2>Why OSCA?</h2>
<iframe
className='container mx-auto w-[560px]'
width='560'
height='315'
src='https://www.youtube.com/embed/oylCYRfk0NQ'
title='YouTube video player'
frameBorder=''
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
allowFullScreen></iframe>
className="container mx-auto w-[560px]"
width="560"
height="315"
src="https://www.youtube.com/embed/oylCYRfk0NQ"
title="YouTube video player"
frameBorder=""
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>

<div className='container mx-auto mt-20 max-w-6xl mx-auto'>
<h2 className='text-center py-20 bg-slate-300'>The Team</h2>
<div className='grid md:grid-cols-2 xl:grid-cols-3 gap-8 justify-center pb-20 px-8 bg-slate-300'>
<div className="container mx-auto mt-20 max-w-6xl mx-auto">
<h2 className="text-center py-20 bg-slate-300">The Team</h2>
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-8 justify-center pb-20 px-8 bg-slate-300">
{cardElement}
</div>
</div>
<div className='flex flex-col md:flex-row justify-center text-center mt-20'>
<div className='md:mr-12'>
<h3 className='text-xl'>Core Values</h3>
<div className="flex flex-col md:flex-row justify-center text-center mt-20">
<div className="md:mr-12">
<h3 className="text-xl">Core Values</h3>
<ul>
<li>Creativity and Excellence</li>
<li>Boldness and Integrity in operations</li>
<li>Developer Nurturing and Skillset enhancement</li>
</ul>
</div>
<div className='mt-5 md:mt-0'>
<h3 className='text-xl'>Benefits</h3>
<div className="mt-5 md:mt-0">
<h3 className="text-xl">Benefits</h3>
<ul>
<li>Be part of Africa's next Billion Creators</li>
<li>Networking with best developer talent</li>
Expand Down