Skip to content

Commit

Permalink
progressing on styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjaminmodayil
benjaminmodayil committed Dec 23, 2018
1 parent 73b43bf commit e43297d
Show file tree
Hide file tree
Showing 13 changed files with 5,135 additions and 2,292 deletions.
5 changes: 5 additions & 0 deletions .babelrc
View file
@@ -0,0 +1,5 @@
{
"presets": [
"@babel/preset-env"
]
}
155 changes: 135 additions & 20 deletions layouts/index.html
View file
Expand Up @@ -8,31 +8,146 @@
<title>Apprenticeships</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.4/dist/instantsearch-theme-algolia.min.css">
<link rel="stylesheet" href="/vendor.css">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/generated.css">
</head>

<body>
<div class="search">
<div id="search__box">
<!-- SearchBox widget will appear here -->
<body class="font-primary text-black relative">
<nav class="flex justify-between items-center max-w-5xl mx-auto w-full py-6 mb-32 xxl-mb-48">
<a href="/" class="font-bold text-2xl">Apprenticeships.me</a>
<div class="text-base font-bold flex justify-between">
<a href="#" class="bg-white text-black flex justify-between items-center px-4 py-2 rounded">
<img src="/images/github-black.svg" alt="">
<span class="ml-2">Visit on Github</span>
</a>
<a href="#" class="bg-green text-white px-6 py-2 rounded ml-8 self-center">Contribute</a>
</div>
</nav>

<div class="w-1-6 flex justify-center">
<nav class="bg-pink-lightest fixed p-6 rounded-lg shadow z-50">
<ul class="list-reset font-bold text-base">
<li class="mb-4"><a class="font-bold text-black-light hover-text-black transition" href="">What is an
apprenticeship?</a></li>
<li class="mb-4"><a class="font-bold text-black-light hover-text-black transition" href="">Listings</a></li>
<li class="mb-4"><a class="font-bold text-black-light hover-text-black transition" href="">Contributors</a></li>
<li class="mb-4"><a class="font-bold text-black-light hover-text-black transition" href="">Resources</a></li>
</ul>
</nav>
</div>
<ul id="hits">
{{/* The below is overridden by the index generated by search on load, but still here in case JS doesn't load. (Search bar isn't displayed either if JS doesn't load. So default is a list generated by HUGO) */}}
{{ range .Site.Pages }}
{{ if .Params.location }}
<li>
<a class="post post-entry" href="{{.Params.link}}" target="_blank" rel="noopener noreferrer">
<h2 class="post-header">{{ .Params.company }}</h2>
<p>{{ .Params.location }}</p>
<p>{{ .Params.description }}</p>
</a>
</li>
{{end}}
{{end}}
</ul>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.4"></script>

<header class="mb-64">
<div class="w-5-6 flex justify-between max-w-lgxl w-full relative mx-auto">
<h1 class="text-4xl w-96 relative z-40">Find a new career learning from the industry itself.</h1>
<img class="absolute pin-r pin-t -mt-32 z-20" src="/images/header.svg" alt="">
</div>
</header>

<section class="bg-pink-lightest py-32">
<div class="flex justify-between max-w-lgxl w-5-6 mx-auto">
<img src="/images/section-one.svg" alt="">
<div class="max-w-smxs">
<h2 class="border-b-2 border-pink text-2xl inline-block mb-8">What is an apprenticeship?</h2>
<p class="text-base leading-normal">Back in the good old days of the Renaissance, apprenticeships were quite common and acted as legal contracts
between
the apprentice and master. This was a way for apprentices to start learning the necessary skills in their field and
eventually become masters themselves.</p>
</div>
</div>
</section>

<section>
<div class="max-w-lgxl w-5-6 mx-auto">
<h2 class="border-b-2 border-pink text-2xl inline-block mb-8">Find an apprenticeship</h2>
<div class="search">
<div id="search__box" class="w-full">
<!-- SearchBox widget will appear here -->
</div>
</div>
<ul id="hits" class="list-reset flex justify-between flex-wrap">
{{/* The below is overridden by the index generated by search on load, but still here in case JS doesn't load.
(Search bar isn't displayed either if JS doesn't load. So default is a list generated by HUGO) */}}
{{ range .Site.Pages }}
{{ if .Params.location }}
<li>
<a class="post post-entry" href="{{.Params.link}}" target="_blank" rel="noopener noreferrer">
<h2 class="post-header">{{ .Params.company }}</h2>
<p>{{ .Params.location }}</p>
<p>{{ .Params.description }}</p>
</a>
</li>
{{end}}
{{end}}
</ul>
</div>
</section>
<section>
<div>
<h2 class="border-b-2 border-pink text-2xl inline-block mb-8">Related resources</h2>
<ul>
<li>
<a href="">
<h3>Apprentice.at</h3>
</a>
<p>A directory of apprenticeships</p>
</li>
<li>
<a href="">
<h3>Apprentice.io</h3>
</a>
<p>Largest community of U.S. based software engineering apprenticeships</p>
</li>
<li>
<a href="">
<h3>Apprentice.thoughtbot.com</h3>
</a>
<p>Community resources for software apprenticeships</p>
</li>

<li>
<a href="">
<h3>Community resources for software apprenticeships</h3>
</a>
<p>A list of apprentice software developer jobs in Chicago.</p>
</li>
<li>
<a href="">
<h3>TalentPath by Treehouse</h3>
</a>
<p>TalentPath by Treehouse aims to help companies scale their engineering teams, find new talent, and achieve their
business goals by training apprentices with their online courses.</p>
</li>
<li>
<a href="">
<h3>TechHire Oakland Apprenticeships</h3>
</a>
<p>A list of emerging tech apprenticeships in the Bay Area.</p>
</li>
</ul>
</div>
</section>

<section class="flex justify-center flex-col text-center">
<div class="w-5-6 self-end flex justify-center">
<div class="max-w-sm w-full flex flex-col items-center">
<h2 class="border-b-2 border-pink text-2xl inline-block mb-8 max-w-sm self-center">
Contributors to Apprenticeships.me
</h2>
<p class="text-base leading-normal">This site and the listings are all available because of people like you and the
contributors below. If you’re looking
to contribute to any of the listings or to this site, take a look at the contriubuting guidelines in the repository
below.</p>
<a href="" class="bg-black text-white mt-8 px-4 py-3 rounded-lg flex justify-between items-center w-48 text-center font-bold text-base"><img src="/images/github-white.svg" alt="">Visit on Github</a>
</div>
</div>
</section>

<footer class="mt-48">
<div class="flex bg-pink justify-end">
<p class="w-5-6 text-center text-white font-normal py-2">Copyright (CHECK REPO ISSUE FOR DETAILS)</p>
</div>
</footer>
<script src="/search.js"></script>

</body>

</html>

0 comments on commit e43297d

Please sign in to comment.