Skip to content

Commit

Permalink
Initial Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Njoguu
Njoguu committed Jun 28, 2024
1 parent bb28e5f commit 1ac3227
Show file tree
Hide file tree
Showing 2 changed files with 262 additions and 0 deletions.
165 changes: 165 additions & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Postman Students - KCA University</title>

<!-- Link to custom css -->
<link rel="stylesheet" href="../styles.css">

<!-- Links to cdns -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white">
<section id="hero">
<div class="hero bg-base-200 min-h-screen">
<div class="hero-content text-center text-white">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Welcome!</h1>
<p class="py-6">
Join our Postman student program and gain the skills that will set you apart. Free training, certifications,
and an exclusive badge await - fuel your developer future, today!
</p>
<button class="btn bg-[#EF5B25] text-white">Join the Postman Student Club!</button>
</div>
</div>
</div>
</section>

<section id="about-us">
<div class="min-h-screen m-2">
<div class="about">
<div class="left">
<h1 class="text-4xl text-[#EF5B25]">About us</h1>
<p class="text-base-200">
Are you passionate about APIs and excited to explore the world of development? Postman Students at
<a class="link text-[#8C7C27]" href="https://www.kcau.ac.ke/">KCA University</a>
is a community designed for you! We're a group of students dedicated to learning and building with APIs. Whether
you're a seasoned developer or just starting out, we welcome you to join our collaborative environment.
</p>
<p class="text-base-200">
Our mission is to empower students like you to unlock the full potential of APIs. We achieve this by hosting
workshops and hackathons, offering mentorship opportunities from industry experts, and fostering a space for
collaboration on projects. We believe that by learning together, we can build the next generation of innovative
API-driven applications.
</p>
</div>
<div class="right">
<img src="https://res.cloudinary.com/dglaey3zm/image/upload/v1719564876/media/postman-students-kca/assets/students_wqudsu.png">
</div>
<div class="clear-both"></div>
</div>
</div>

</section>

<section id="benefits">
<div class="min-h-screen m-2">
<div class="mission">
<div class="left">
<img src="https://res.cloudinary.com/dglaey3zm/image/upload/v1719564830/media/postman-students-kca/assets/student-program-postman-illustration_ueuvpj.svg">
</div>
<div class="right">
<h1 class="text-4xl text-[#EF5B25]">Benefits</h1>
<p class="text-base-200">
Joining Postman Students offers a wealth of benefits to fuel your development journey. You'll gain valuable,
in-demand API skills through workshops, tutorials, and hands-on projects. Master the art of building, testing,
and managing APIs, a critical skillset for modern developers.
</p>
<p class="text-base-200">
But learning isn't everything! Postman Students also fosters a vibrant community where you can network with fellow developers,
both peers and industry professionals. Attend workshops and guest lectures to gain insights from experts, participate in exciting
events, and collaborate on projects. Plus, you'll have the chance to earn exclusive API certifications from Postman, further
solidifying your credentials and standing out in the job market. Don't miss this opportunity to become a leader in the API developer
community and potentially become a Postman Student Leader on your campus!
</p>
</div>
<div class="clear-both"></div>
</div>
</div>
</section>

<section id="events">
<h1 class="text-3xl text-center text-[#EF5B25]">Events</h1>
<div id="events-container" class="min-h-screen flex flex-wrap justify-center gap-8 m-2">
<span class="text-black loading loading-bars loading-md"></span>
</div>
</section>

<section id="get-involved">
<div class="r">
<div class="text-center text-white bg-[#EF5B25] p-10 mt-5">
<img src="https://res.cloudinary.com/dglaey3zm/image/upload/v1719564876/media/postman-students-kca/assets/postman-students_n3usdo.png" alt="" class="mx-auto">
<button class="btn btn-outline text-white mt-5">Join our Postman Student Club!</button>
</div>
</div>
</section>

<section id="resources">
<div class="min-h-screen pt-5 m-2">
<h1 class="text-3xl text-center text-[#EF5B25] pt-5">Resources</h1>
<div class="pt-5 mx-auto px-4 py-4">
<ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
<li>
<a href="#">
<div class="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://cdn.iconscout.com/icon/free/png-256/jira-282222.png" class="w-full h-32 object-cover" alt="JIRA Thumbnail">
<div class="px-4 py-2 flex flex-col items-start justify-between">
<strong class="text-base font-bold">JIRA - Development Taskboard</strong>
<span class="text-gray-600 text-xs">This is a Kanban style taskboard used to track the progress of development tasks.</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://projects.invisionapp.com/d/main#/projects">
<div class="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://www.invisionapp.com/assets/img/invision-logo-square.png" class="w-full h-32 object-cover" alt="InvisionApp Thumbnail">
<div class="px-4 py-2 flex flex-col items-start justify-between">
<strong class="text-base font-bold">InvisionApp - Design Board</strong>
<span class="text-gray-600 text-xs">InvisionApp is a prototyping and design brainstorming tool for apps and user interfaces.</span>
</div>
</div>
</a>
</li>
</ul>
</div>

</div>
</section>

<footer class="footer bg-base-200 text-white p-10">
<nav>
<h6 class="footer-title">Postman Student Programs</h6>
<a class="link link-hover" href="https://www.postman.com/student-program/student-expert/">Postman Student Experts</a>
<a class="link link-hover" href="https://www.postman.com/student-program/student-leader/">Postman Student Leader</a>
<a class="link link-hover" href="https://www.postman.com/student-program/educator/">Postman Classroom</a>
<a class="link link-hover" href="https://discord.com/invite/bKjz3CXbB6">Join Student Community on Discord</a>
<a class="link link-hover" href="https://www.postman.com/student-program/">Learn More</a>
</nav>
<nav>
<h6 class="footer-title">KCA University</h6>
<a class="link link-hover" href="https://www.kcau.ac.ke/about-kca-university/">About KCA University</a>
<a class="link link-hover" href="https://www.kcau.ac.ke/contact-us/">Contact</a>
<a class="link link-hover" href="https://www.kcau.ac.ke/enquire-now/">Join KCA University</a>
</nav>
<form>
<h6 class="footer-title">Newsletter</h6>
<fieldset class="form-control w-80">
<label class="label">
<span class="label-text">Enter your email address</span>
</label>
<div class="join">
<input
type="text"
placeholder="[email protected]"
class="input input-bordered join-item" />
<button class="btn bg-[#EF5B25] join-item text-white">Subscribe</button>
</div>
</fieldset>
</form>
</footer>
</body>
</html>
97 changes: 97 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
font-family: "Poppins", sans-serif;
}

.about {
padding: 5% 0;
width: 100%;
height: auto;
background-color: #fff;
}
.about .left {
padding: 2% 0;
float: left;
width: 50%;
display: inline-block;
}
.about .right {
width: 50%;
display: inline-block;
}
.about .right img {
width: 100%;
}
.about .left h1 {
text-align: center;
margin: 0 0 10px 0;
}
.about .left hr {
width: 20%;
border-top: 2px solid #000;
border-bottom: none;
}
.about .left p {
font-size: 1rem;
margin: 40px auto;
width: 80%;
}

.mission {
padding: 5% 0;
width: 100%;
height: auto;
background-color: #fff;
}
.mission .right {
padding: 2% 0;
width: 50%;

display: inline-block;
}
.mission .left {
float: left;
width: 50%;
display: inline-block;
}
.mission .left img {
width: 100%;
}
.mission .right h1 {
text-align: center;
margin: 0 0 20px 0;
}

.mission .right p {
font-size: 1rem;
margin: 40px auto;
width: 80%;
}

/* media */
@media (max-width: 1200px) {
.mission .right p {
font-size: 0.8rem;
margin: 20px auto;
}
.about .left p {
font-size: 0.8rem;
margin: 20px auto;
}
}

@media (max-width: 992px) {
.about .left {
width: 100%;
}
.about .right {
width: 100%;
}
.mission .left {
width: 100%;
}
.mission .right {
width: 100%;
}
}

0 comments on commit 1ac3227

Please sign in to comment.