Skip to content

Instantly share code, notes, and snippets.

@chrismuiruriz

chrismuiruriz/amalgam.markdown

Created June 12, 2020 00:17
Show Gist options
  • Save chrismuiruriz/cd825894b42034823572dd36695ef050 to your computer and use it in GitHub Desktop.
Save chrismuiruriz/cd825894b42034823572dd36695ef050 to your computer and use it in GitHub Desktop.
Download ZIP
Amalgam
Raw
index.html
<div class="app" id="app">
<!-- -TODO: Unhide this -->
<header class="header h-screen bg-gray-700 relative">
<!-- Toolbar Menu -->
<div class="toolbar z-20 absolute top-0 left-0 w-full">
<div class="p-5 flex justify-between items-center max-w-screen-lg mx-auto relative">
<!-- Logo -->
<a href="#">
<img src="http://localhost/amalgram/assets/logo.png" class="w-32"/>
</a>
<!--/Logo -->
<!-- Menu -->
<ul class="items-center text-white hidden md:inline-flex">
<li class="mx-3">
<a href="#" class="text-sm uppercase font-medium tracking-wide">
<span>Faculty & Curriculum</span>
</a>
</li>
<li class="mx-3">
<a href="#" class="text-sm uppercase font-medium tracking-wide">
<span>Programme</span>
</a>
</li>
<li class="mx-3">
<a href="#" class="text-sm uppercase font-medium tracking-wide">
<span>News</span>
</a>
</li>
<li class="mx-3">
<a href="#" class="text-sm uppercase font-medium tracking-wide">
<span>Contact</span>
</a>
</li>
</ul>
<!-- /Menu -->
<!-- CTA Button -->
<a href="#" class="bg-orange-500 text-white p-2 px-3 rounded-sm">
<span class="inline-block text-sm uppercase tracking-wide fon-semibold">Register Now</span>
</a>
<!-- /CTA Button -->
</div>
</div>
<!-- /Toolbar Menu -->
<!-- Banner -->
<div class="banner min-h-full w-full bg-blue-700 relative z-10 flex items-center">
<div class="bg-hero absolute top-0 left-0 h-full w-full bg-cover bg-no-repeat bg-top"></div>
<div class="overlay absolute top-0 left-0 h-full w-full bg-overlay opacity-75"></div>
<div class="max-w-screen-lg mx-auto p-6 w-full relative pt-8">
<h1 class="text-white tracking-wide leading-tight mb-3 text-4xl md:text-5xl">Welcome to Amalgam</h1>
<h2 class="text-white font-medium tracking-wide text-orange-400 leading-tight mb-8 text-xl mdtext-3xl">A leadership development brand</h2>
<h4 class="text-white font-medium tracking-wide text-orange-400 leading-tight flex items-center text-xs md:text-base">
<span class="h-1 w-12 bg-white inline-block mr-4 opacity-50">&nbsp;</span>
<span class="uppercase text-white font-semibold tracking-wide inline-block">Strength, Durability &amp; Character</span>
</h4>
</div>
</div>
<!-- /Banner -->
</header>
<!-- TODO: Unhide this -->
<section class="py-16 p-5">
<div class="flex justify-between flex-wrap">
<div class="w-full md:w-1/2 mb-8 md:mb-1">
<div class="h-full img-h-wrapper shadow-md">
<img src="http://localhost/amalgram/assets/partners.jpg" alt="" class="w-full" />
</div>
</div>
<div class="w-full md:w-1/2 md:pl-12">
<p class="text-white font-medium tracking-wide leading-tight flex items-center text-xs md:text-base mb-4">
<span class="h-1 w-8 bg-orange-400 inline-block mr-4 opacity-50">&nbsp;</span>
<span class="uppercase text-orange-400 font-semibold text-xs tracking-wide inline-block">About Us</span>
</p>
<h4 class="text-gray tracking-wide font-medium leading-tight mb-3 text-xl md:text-2xl">Who we are</h4>
<article class="italic mt-5 mb-5 block font-light">
"Amalgam's principals are not academics or trainers, but instead three successful businessmen."
</article>
<p class="font-normal mb-5">
<span class="font-medium">Amalgam Leadership</span> is Kenya’s leadership development brand. Amalgam aims to provide a forum for cutting edge, practical, and networked learning for Business Leaders in an intimate setting, hence the defining statement <span class="text-teal-700 font-semibold">"Leaders together"</span>.
</p>
<p class="font-normal mb-8">
The Amalgam learning style and timetable takes into account the busy schedules of the Business Leader and the need for practical knowledge that can be translated into action by the Business Leader to drive success for their companies.
</p>
<a href="#" class="inline-block border rounded-sm px-4 p-3 uppercase text-sm border-orange-400">Learn More</a>
</div>
</div>
</section>
<!-- TODO: Unhide this -->
<section class="py-16 p-5 a-bg">
<div class="max-w-screen-lg mx-auto">
<p class="text-white font-medium tracking-wide leading-tight flex items-center text-xs md:text-base mb-4">
<span class="h-1 w-8 bg-orange-400 inline-block mr-4 opacity-50">&nbsp;</span>
<span class="uppercase text-orange-400 font-semibold text-xs tracking-wide inline-block">Amalgam</span>
</p>
<h4 class="text-white tracking-wide font-semibold leading-tight mb-3 text-2xl md:text-3xl">Curriculum</h4>
<div class="pt-8 md:grid md:grid-cols-4 md:gap-4 items-start">
<div class="p-5 py-6 a-card-bg shadow-sm rounded-sm text-center mb-4 md:flex-col md:flex md:items-center relative">
<h5 class="uppercase mb-3 text-orange-400 tracking-wide font-semibold">Leadership</h5>
<button class="inline-block w-auto rounded-full text-white text-xs p-1 px-4 absolute bottom-0 mb-5 bg-orange-400 bg-opacity-50 expand-btn z-20">Expand</button>
<p class="text-white text-sm font-light z-10 relative expandable-el">This curriculum equips our participants to become accomplished organisational leaders. It explores the 3 linked pillars of leadership: Leading the self, Leading the Organisation and Leading Other People.</p>
</div>
<div class="p-5 py-6 a-card-bg shadow-sm rounded-sm text-center mb-4 md:flex-col md:flex md:items-center relative">
<h5 class="uppercase mb-3 text-orange-400 tracking-wide font-semibold">Finance</h5>
<button class="inline-block w-auto rounded-full text-white text-xs p-1 px-4 absolute bottom-0 mb-5 bg-orange-400 bg-opacity-50 expand-btn z-20">Expand</button>
<p class="text-white text-sm font-light z-10 relative expandable-el">This curriculum enhances our participants' financial literacy enabling them to interrogate financial statements and reports in a more insightful way. It introduces the latest thinking on financial reporting: what should be measured, how it should be measured, and how best to share resuts on real-time platforms.</p>
</div>
<div class="p-5 py-6 a-card-bg shadow-sm rounded-sm text-center mb-4 md:flex-col md:flex md:items-center relative">
<h5 class="uppercase mb-3 text-orange-400 tracking-wide font-semibold">Technology</h5>
<button class="inline-block w-auto rounded-full text-white text-xs p-1 px-4 absolute bottom-0 mb-5 bg-orange-400 bg-opacity-50 expand-btn z-20">Expand</button>
<p class="text-white text-sm font-light z-10 relative expandable-el">This curriculum delivers a practical understanding of the key technological trends impacting businesses today. it prepares our participants to champion the use of technology to transform their bsuinesses, and explore the growing challenges of cybersecurity.</p>
</div>
<div class="p-5 py-6 a-card-bg shadow-sm rounded-sm text-center mb-4 md:flex-col md:flex md:items-center relative">
<h5 class="uppercase mb-3 text-orange-400 tracking-wide font-semibold">Marketing</h5>
<button class="inline-block w-auto rounded-full text-white text-xs p-1 px-4 absolute bottom-0 mb-5 bg-orange-400 bg-opacity-50 expand-btn z-20">Expand</button>
<p class="text-white text-sm font-light z-10 relative expandable-el">This curriculum provides our participants with a high level understanding of how marketing works and the major contribution it can make to business success. It equios our participants to ask the right questions of their marketing staff.</p>
</div>
</div>
<div class="pt-8 flex justify-center">
<a href="#" class="inline-block border rounded-sm px-4 p-3 uppercase text-xs text-white border-orange-400">Learn More</a>
</div>
</div>
</section>
<!-- TODO: Unhide this -->
<section class="py-16 p-5">
<div class="max-w-screen-lg mx-auto">
<p class="text-white font-medium tracking-wide leading-tight flex items-center text-xs md:text-base mb-4">
<span class="h-1 w-8 bg-orange-400 inline-block mr-4 opacity-50">&nbsp;</span>
<span class="uppercase text-orange-400 font-semibold text-xs tracking-wide inline-block">Leadership</span>
</p>
<h4 class="text-gray-700 tracking-wide font-semibold leading-tight mb-3 text-2xl md:text-3xl">The Faculty</h4>
<div class="pt-8">
<div class="swiper-container swiper-faculty">
<div class="swiper-wrapper">
<div class="swiper-slide w-1/2 md:w-3/12 pr-6" v-for="item in facultyList" :key="item.image">
<a href="#">
<img :src="`http://localhost/amalgram/assets/faculty/${item.image}`" alt="" />
<div class="p-2">
<div class="font-semibold mb-1 text-md truncate w-11/12">{{item.name}}</div>
<div class="text-sm">{{item.title}}</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="pt-8 flex justify-center">
<a href="#" class="inline-block border rounded-sm px-4 p-3 uppercase text-xs text-gray-700 border-orange-400">Learn More</a>
</div>
</div>
</section>
<!-- TODO: Unhide this -->
<section class="py-16 p-5">
<div class="max-w-screen-lg mx-auto">
<div class="flex justify-between flex-wrap">
<div class="w-full md:w-1/2 md:pr-12">
<p class="text-white font-medium tracking-wide leading-tight flex items-center text-xs md:text-base mb-4">
<span class="h-1 w-8 bg-orange-400 inline-block mr-4 opacity-50">&nbsp;</span>
<span class="uppercase text-orange-400 font-semibold text-xs tracking-wide inline-block">Testimonials</span>
</p>
<h4 class="text-gray-700 tracking-wide font-semibold leading-tight mb-3 text-2xl md:text-3xl capitalize leading-normal"><span class="block">What people say</span> <span class="block">about us?</span></h4>
<div class="swiper-container swiper-testimonials py-8">
<div class="swiper-wrapper">
<div class="swiper-slide w-full">
<div class="p-4 b-bg">
<p class="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>
<div class="p-4">
<div class="font-semibold mb-1 text-md">Lenny Nganga</div>
<div class="text-sm">Founding Partner</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="p-4 relative">
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 a-bg p-4 md:p-8 py-12">
<p class="text-white font-medium tracking-wide leading-tight flex items-center text-xs md:text-base mb-4">
<span class="h-1 w-8 bg-orange-400 inline-block mr-4 opacity-50">&nbsp;</span>
<span class="uppercase text-orange-400 font-semibold text-xs tracking-wide inline-block">Request</span>
</p>
<h4 class="text-white tracking-wide font-semibold leading-tight mb-3 text-2xl md:text-3xl capitalize leading-normal"><span class="block">Get In Touch</span> </h4>
<form class="mt-8">
<div class="grid md:grid-cols-2 md:gap-2 sm:grid-cols-1md:mb-4">
<div class="sm:md-4">
<label class="hidden">Name</label>
<input type="text" required placeholder="Name" class="bg-transparent border border-white mb-4 p-2 text-white w-full"/>
</div>
<div>
<label class="hidden">Email</label>
<input type="email" required placeholder="Email" class="bg-transparent border border-white mb-4 p-2 text-white w-full"/>
</div>
</div>
<div class="grid md:grid-cols-2 md:gap-2 sm:grid-cols-1 md:mb-4">
<div class="sm:md-4">
<label class="hidden">Phone</label>
<input type="email" required placeholder="Phone" class="bg-transparent border border-white mb-4 p-2 text-white w-full" />
</div>
<div>
<label class="hidden">Subject</label>
<input type="textl" required placeholder="Subject" class="bg-transparent border border-white mb-4 p-2 text-white w-full"/>
</div>
</div>
<div>
<label class="hidden">Message</label>
<textarea required placeholder="Your Message" rows="4" class="bg-transparent border border-white mb-4 p-2 text-white w-full"></textarea>
</div>
<div class="pt-4 flex">
<button class="inline-block border rounded-sm px-4 p-3 uppercase text-xs text-white border-orange-400">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- TODO: Unhide this -->
<section class="py-16 p-5 b-bg">
<div class="max-w-screen-lg mx-auto">
<p class="text-white font-medium tracking-wide leading-tight flex items-center text-xs md:text-base mb-4">
<span class="h-1 w-8 bg-orange-400 inline-block mr-4 opacity-50">&nbsp;</span>
<span class="uppercase text-orange-400 font-semibold text-xs tracking-wide inline-block">News &amp; Updates</span>
</p>
<h4 class="text-gray-700 tracking-wide font-semibold leading-tight mb-3 text-2xl md:text-3xl">Latest Updates</h4>
<div class="pt-8">
<div class="swiper-container swiper-faculty">
<div class="swiper-wrapper">
<div class="swiper-slide w-1/2 md:w-3/12 pr-6">
<a href="#" class="block bg-white shadow-md">
<img src="https://via.placeholder.com/350x300/CCC/999/PLACEHOLDER" alt="" />
<div class="p-2">
<div class="font-semibold mb-1 text-md truncate truncate w-11/12">Leadership Curriculum</div>
<div class="text-sm">By Dr. Yolande</div>
</div>
</a>
</div>
<div class="swiper-slide w-1/2 md:w-3/12 pr-6">
<a href="#" class="block bg-white shadow-md">
<img src="https://via.placeholder.com/350x300/CCC/999/PLACEHOLDER" alt="" />
<div class="p-2">
<div class="font-semibold mb-1 text-md truncate truncate w-11/12">Finance Curriculum</div>
<div class="text-sm">Richard Ndungu</div>
</div>
</a>
</div>
<div class="swiper-slide w-1/2 md:w-3/12 pr-6">
<a href="#" class="block bg-white shadow-md">
<img src="https://via.placeholder.com/350x300/CCC/999/PLACEHOLDER" alt="" />
<div class="p-2">
<div class="font-semibold mb-1 text-md truncate truncate w-11/12">Technology Curriculum</div>
<div class="text-sm">By Martin Kiarie</div>
</div>
</a>
</div>
<div class="swiper-slide w-1/2 md:w-3/12 pr-6">
<a href="#" class="block bg-white shadow-md">
<img src="https://via.placeholder.com/350x300/CCC/999/PLACEHOLDER" alt="" />
<div class="p-2">
<div class="font-semibold mb-1 text-md truncate truncate w-11/12">Marketing Curriculum</div>
<div class="text-sm">By Lenny Nganga</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 relative">
<div class="c-bg absolute bottom-0 left-0 w-full h-1/2"></div>
<div class="relative max-w-screen-lg mx-auto md:flex items-center justify-between py-8 p-5 a-bg">
<h4 class="text-white tracking-wide font-semibold leading-tight mb-3 text-xl md:text-2xl capitalize">Always stay in touch</h4>
<form class="flex md:w-1/2 flex-wrap items-baseline md:items-stretch">
<input type="email" class="flex-1 bg-transparent a-card-bg p-3 px-4 md:mb-0 mr-4 mb-4" placeholder="Email address" />
<button class="bg-orange-500 text-white p-2 px-3 rounded-sm inline-block text-sm uppercase tracking-wide fon-semibold">subscribe</button>
</form>
</div>
</section>
<footer class="c-bg px-5 pb-4">
<div class="relative max-w-screen-lg mx-auto md:grid md:grid-cols-4 md:gap-4">
<div class="mb-8 md:mb-4">
<img src="http://localhost/amalgram/assets/logo.png" alt="" class="w-11/12 footer-logo"/>
</div>
<div class="mb-4">
<h6 class="mb-2 text-lg text-white font-semibold">Quick Links</h6>
<ul>
<li class="mb-1">
<a href="#" class="block text-white text-sm">Home</a>
</li>
<li class="mb-1">
<a href="#" class="block text-white text-sm">About</a>
</li>
<li class="mb-1">
<a href="#" class="block text-white text-sm">Faculty</a>
</li>
<li class="mb-1">
<a href="#" class="block text-white text-sm">Contacts</a>
</li>
</ul>
</div>
<div class="mb-4">
<h6 class="mb-3 text-lg text-white font-semibold">Programmes</h6>
<ul>
<li class="mb-1">
<a href="#" class="block text-white text-sm">Leadership</a>
</li>
<li class="mb-1">
<a href="#" class="block text-white text-sm">Finance</a>
</li>
<li class="mb-1">
<a href="#" class="block text-white text-sm">Technology</a>
</li>
<li class="mb-1">
<a href="#" class="block text-white text-sm">Marketing</a>
</li>
</ul>
</div>
<div class="mb-4">
<h6 class="mb-2 text-lg text-white font-semibold">Contacts</h6>
<div class="text-white text-sm mb-1">
<p class="mb-1">--Head Office</p>
<p class="mb-1">3rd Floor; Riara Corporate Suites, Riara Road</p>
<p class="mb-1">Phone: (+254) 722 481 850</p>
<p class="mb-1 hidden">Email: registrar@amalgamleadership.com</p>
</div>
</div>
</div>
<div class="relative max-w-screen-lg mx-auto mt-8 pt-8 md:flex md:justify-between border-t border-t-1">
<div class="mb-6 flex justify-center md:justify-start">
<a href="#" class="inline-block mr-2">
<img src="http://localhost/amalgram/assets/icons/facebook.svg" class="w-6" alt=""/>
</a>
<a href="#" class="inline-block mx-2">
<img src="http://localhost/amalgram/assets/icons/twitter.svg" class="w-6" alt=""/>
</a>
<a href="#" class="inline-block mx-2">
<img src="http://localhost/amalgram/assets/icons/linkedin.svg" class="w-6" alt=""/>
</a>
</div>
<div class="text-center md:text-left">
<p class="text-gray-400 font-light">&copy; 2020 Amalgam Leadership Group - All Rights Reserved</p>
</div>
</div>
</footer>
<div :class="{'loader fixed a-bg top-0 left-0 w-full h-screen flex justify-center items-center':true, 'stop-loading':hideLoader}">
<div>
<div class="text-center">
<img src="http://localhost/amalgram/assets/logo.png" alt="" class="loader-logo mx-auto"/>
</div>
<div class="mt-8 text-center">
<div class="text-gray-400 uppercase tracking-widest text-center text-sm loader-text relative inline-block">Loading</div>
</div>
</div>
</div>
</div>
Raw
script.js
/* Vue */
const vueConfig= {
data() {
return {
hideLoader: false,
baseUrl: 'http://localhost/amalgram/',
facultyList: [
{
"image": "Lenny.jpg",
"name": "LENNY NG’ANG’A",
"title": "Founding Partner",
"link": "#"
},
{
"image": "Chris.jpg",
"name": "Chris Harrison ",
"title": "Founding Partner",
"link": "#"
},
{
"image": "Ndirangu.jpg",
"name": "Ndirangu Maina",
"title": "Founding Partner and Chairman",
"link": "#"
},
{
"image": "John-Waibochi.jpg",
"name": "John Waibochi",
"title": ".",
"link": "#"
},
{
"image": "Angela.jpg",
"name": "Dr. Angela Gichaga",
"title": ".",
"link": "#"
},
{
"image": "Yolande.jpg",
"name": "Dr. Yolande Coombes",
"title": ".",
"link": "#"
},
{
"image": "Timothy-Oriedo.jpg",
"name": "Timothy Oriedo",
"title": ".",
"link": "#"
},
{
"image": "Richard.jpg",
"name": "Richard Boro Ndung’u",
"title": ".",
"link": "#"
},
{
"image": "Martin.jpg",
"name": "Martin Kiarie",
"title": ".",
"link": "#"
},
]
}
},
created() {
console.log('Mambo');
},
mounted() {
let self = this;
//faculty scarousel
var facultySwiper = new Swiper('.swiper-faculty', {
slidesPerView: 'auto',
Observer: true,
loop: true,
ObserveParents: true,
autoplay: { delay: 2000 },
});
//testimonial carousel
var testimonialsSwiper = new Swiper('.swiper-testimonials', {
slidesPerView: 'auto',
Observer: true,
ObserveParents: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
//hide page loader
setTimeout(function() {
self.hideLoader = true;
},2000);
}
}
const app = new Vue(vueConfig)
app.$mount('#app')
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.2/js/swiper.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
Raw
style.scss
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
a, button, input, textarea {
outline: none !important;
}
.bg-hero {
background-image:url('http://localhost/amalgram/assets/partners.jpg');
}
.bg-overlay {
background: #3A3F45;
}
.banner {
padding-top: 100px;
}
img {
max-width: 100%;
}
.img-h-wrapper {
background: #f5f4f4;
}
.a-bg {
background:#2C333D;
}
.b-bg {
background: #F8F8F8;
}
.c-bg {
background: #363D47;
}
.a-card-bg {
background: #363D47;
}
.h-1\/2 {
height: 50%;
}
@media (min-width: 768px) {
.expandable-el {
height: 150px;
overflow-y: hidden;
text-overflow: ellipsis;
position: relative;
transition: all 0.3s ease-in;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(54,61,71);
background: linear-gradient(0deg, rgba(54,61,71,0.7) 8%, rgba(255,255,255,0) 100%);
}
}
}
.expand-btn {
&:focus {
opacity: 0;
+ p {
height: auto;
&:after {
display: none;
}
}
}
@media (max-width: 768px) {
display: none;
}
}
.footer-logo {
@media (max-width: 768px) {
width: 200px;
}
}
.loader {
transition: opacity 0.5s ease-in-out;
&.stop-loading {
pointer-events: none;
opacity: 0;
}
img {
width: 150px;
}
}
.loader-text {
overflow-x: hidden;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: #ccc;
animation-name: loading;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
//animation-fill-mode: forwards;
animation-direction: alternate;
}
}
/* Animations */
@keyframes loading {
from {
transform: translatex(-20px)
}
to {
transform: translatex(80px)
}
}
@media (max-width: 768px) {
.overlay {
opacity: 0.95;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.2/css/swiper.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment