Skip to content

Commit

Permalink
Finished www v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmybisenius
jimmybisenius committed Nov 28, 2020
1 parent e84fb1f commit 67892a2
Showing 1 changed file with 65 additions and 14 deletions.
79 changes: 65 additions & 14 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
<style type="text/css">
* { font-family: 'Inter', sans-serif; outline: none !important; }
.terminal { font-family: 'Roboto Mono', 'Inter', sans-serif; }
.terminal, .terminal * { font-family: 'Roboto Mono', 'Inter', sans-serif !important; }
.social-mark { opacity: .5; width:20px; height: auto; }
.social-mark:hover { opacity: 1; }
</style>
Expand All @@ -34,7 +34,7 @@ <h1 class="text-gray-900 text-6xl lg:text-7xl font-extrabold mb-8">Beautiful FOS
A Github repository template to make your repositories <span class="text-black font-semibold">beautiful in minutes.</span>
</p>
<div class="flex flex-col md:flex-row items-center mt-10 space-x-4">
<a href="https://github.com/Neutron-Creative/Beautiful-FOSS" class="w-full md:w-auto font-semibold text-white bg-gray-900 hover:bg-gray-700 py-3 px-6 rounded-xl">Get started</a>
<a href="https://github.com/Neutron-Creative/Beautiful-FOSS" class="w-full md:w-auto font-semibold text-white bg-blue-600 hover:bg-blue-500 py-3 px-6 rounded-xl">Get started</a>
<div class="terminal flex flex-none bg-gray-50 text-gray-400 hover:text-gray-900 rounded-xl items-center justify-center space-x-2 px-6 py-3 border border-gray-200 w-full md:w-auto">
<span>$</span>
<span class="text-gray-900">git clone https://github.com/Neutron-Creative/Beautiful-FOSS.git</span>
Expand All @@ -60,7 +60,8 @@ <h2 class="font-extrabold text-gray-900 text-5xl tracking-tight mb-8">
<!-- Feature 1 -->
<section class="w-full flex flex-col items-center justify-center">
<!-- Container -->
<div class="w-full max-w-5xl px-8 py-20 lg:py-44 pb-0 lg:pb-0">
<div class="w-full max-w-5xl px-8 py-20 lg:py-44 pb-0 lg:pb-0 flex flex-col md:flex-row items-center">
<div class="flex flex-col w-full md:w-1/2 justify-center items-start mr-4">
<!--
Icons
<div class="w-12 h-12 rounded-xl bg-indigo-600 mb-8"></div>
Expand All @@ -70,19 +71,62 @@ <h3 class="text-6xl text-gray-900 font-extrabold mb-8">Beautify your Github</h3>
<p class="text-2xl leading-relaxed font-medium mb-6">
A beautiful &amp; well branded readme file will hook users in &amp; help them understand what they're looking at and how to use it.
</p>
</div>
<!-- Readme example -->
<a href="https://github.com/Neutron-Creative/Beautiful-FOSS" class="hidden md:flex overflow-hidden shadow-xl relative w-full min-w-sm max-w-sm ml-8 bg-gray-800 rounded-md flex-col items-center justify-center transform-gpu transform" style="transform:perspective(1040px) rotate(0) rotateX(2deg) rotateY(-12deg) translateZ(-10px) scale(1.05);">
<!-- Prevents clicking on documents -->
<div class="w-full h-full absolute t-0 l-0 r-0 b-0 z-1"></div>
<!-- Example readme -->
<div class="w-full flex flex-row bg-gray-900 p-3 items-center">
<span class="text-sm text-gray-200 tracking-wide mr-2">README.md</span>
<div class="flex flex-row items-center justify-center ml-auto" style="filter:invert(1);opacity:.5;">
<img src="https://neutroncreative.com/github-mark.svg" class="mr-2" style="width:12px;"/>
<span class="text-xs tracking-wider">Neutron-Creative/Singlelink</span>
</div>
</div>
<div class="p-6 flex flex-col items-center text-center justify-center">
<img src="https://singlelink.co/singlelink-brandmark-white.svg" width="185" alt="SingleLink Logo" class="mb-4">
<div class="flex flex-row items-center justify-center mb-4">
<img src="https://img.shields.io/badge/beta-2.0.1-%2303d2d4" alt="Version" class="mr-2">
<img src="https://img.shields.io/badge/license-GPL-%236ab04c" alt="License" class="mr-2">
<img src="https://img.shields.io/badge/users-500+-%2330336b" alt="Users" class="mr-2">
</div>
<p class="text-gray-600 text-sm leading-relaxed mb-4">Welcome to the Singlelink Client Github repository. Here you can browse the source, view open issues and monitor development.</p>
<h2 class="text-gray-500 text-xl font-medium mb-2 leading-relaxed">Build Setup</h2>
<div class="terminal bg-gray-700 rounded p-4 tracking-wider text-sm text-left w-full">
<span class="italic text-indigo-600 font-medium" style="color:#fffF;opacity:.5"># install dependencies<br></span>
<span class="font-medium" style="color:#0f0">$</span>
<span class="text-gray-200">npm install</span>
<br/><br/>
<span class="italic text-indigo-600 font-medium" style="color:#fffF;opacity:.5"># serve with hot reload at on port 3000<br></span>
<span class="font-medium" style="color:#0f0">$</span>
<span class="text-gray-200">npm run dev</span>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- Feature 2 -->
<section class="w-full flex flex-col items-center justify-center">
<!-- Container -->
<div class="w-full max-w-5xl px-8 py-20 lg:py-44 pb-0 lg:pb-0">
<!--
Icons
<div class="w-12 h-12 rounded-xl bg-indigo-600 mb-8"></div>
-->
<h2 class="text-lg tracking-wide font-semibold text-indigo-600 uppercase mb-3">Enhanced SEO &amp; Previews</h2>
<h3 class="text-6xl text-gray-900 font-extrabold mb-8">Get found online</h3>
<p class="text-2xl leading-relaxed font-medium mb-6">A beautiful &amp; well branded readme file will hook users in &amp; help them understand what they're looking at and how to use it.</p>
<div class="w-full max-w-5xl px-8 py-20 lg:py-44 pb-0 lg:pb-0 flex flex-col md:flex-row items-center justify-center">
<div class="flex flex-col w-full md:w-2/3 justify-center items-start mr-4">
<!--
Icons
<div class="w-12 h-12 rounded-xl bg-indigo-600 mb-8"></div>
-->
<h2 class="text-lg tracking-wide font-semibold text-pink-600 uppercase mb-3">Enhanced SEO &amp; Previews</h2>
<h3 class="text-6xl text-gray-900 font-extrabold mb-8">Get found online</h3>
<p class="text-2xl leading-relaxed font-medium mb-6">Without a landing page, quality SEO, and open graph previews, you're missing out on potential users. Beautiful FOSS makes generating these easy!</p>
</div>
<!-- Floating preview -->
<a href="https://singlelink.co" class="hidden md:flex w-1/3 bg-gray-100 rounded-xl border border-r-0 border-t-0 border-b-0 border-l-2 border-gray-200 ml-auto p-3 flex-col shadow-lg cursor-pointer transform transform-gpu" style="transform:perspective(1040px) rotate(0) rotateX(2deg) rotateY(-12deg) translateZ(-10px) scale(1.05);">
<div class="w-full h-full absolute t-0 l-0 r-0 b-0 z-1"></div>
<span class="text-blue-600 font-semibold mb-2 text-sm">Singlelink - A single link for everything!</span>
<span class="text-xs mb-4 font-medium leading-loose">A single link for everything. Build your profile in seconds and get started for free!</span>
<img class="w-full h-auto rounded-lg" src="https://singlelink.co/SingleLink-Hero-v2.png"/>
</a>
</div>
</section>
<!-- Feature 3 -->
Expand All @@ -93,9 +137,16 @@ <h3 class="text-6xl text-gray-900 font-extrabold mb-8">Get found online</h3>
Icons
<div class="w-12 h-12 rounded-xl bg-indigo-600 mb-8">
-->
<h2 class="text-lg tracking-wide font-semibold text-indigo-600 uppercase mb-3">Forever free</h2>
<h2 class="text-lg tracking-wide font-semibold text-blue-600 uppercase mb-3">Forever free</h2>
<h3 class="text-6xl text-gray-900 font-extrabold mb-8">100% free, no catch.</h3>
<p class="text-2xl leading-relaxed font-medium mb-6">The best part about Beautiful FOSS is there's no excuse not to use it - it's entirely free! Licensed via LGPL, you're free to use this in your project and modify however you need without paying a dime.</p>
<p class="text-2xl leading-relaxed font-medium mb-10">The best part about Beautiful FOSS is there's no excuse not to use it - it's entirely free! Licensed via LGPL, you're free to use this in your project and modify however you need without paying a dime.</p>
<div class="flex flex-col md:flex-row items-center space-x-4">
<a href="https://github.com/Neutron-Creative/Beautiful-FOSS" class="w-full md:w-auto font-semibold text-white bg-blue-600 hover:bg-blue-500 py-3 px-6 rounded-xl">Get started</a>
<div class="terminal flex flex-none bg-gray-50 text-gray-400 hover:text-gray-900 rounded-xl items-center justify-center space-x-2 px-6 py-3 border border-gray-200 w-full md:w-auto">
<span>$</span>
<span class="text-gray-700">git clone https://github.com/Neutron-Creative/Beautiful-FOSS.git</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
Expand All @@ -113,7 +164,7 @@ <h3 class="text-6xl text-gray-900 font-extrabold mb-8">100% free, no catch.</h3>
</li>
</a>
<a href="https://discord.gg/3pBM4Px">
<li class="cursor-pointer social-mark">
<li class="cursor-pointer social-mark">
<img src="https://neutroncreative.com/discord-mark.svg"/>
</li>
</a>
Expand Down

0 comments on commit 67892a2

Please sign in to comment.