Unverified Commit d7f71898 authored by Georg Krause's avatar Georg Krause
Browse files

Implement features as shown in design draft

parent 60bcd75a
Pipeline #19904 failed with stages
in 3 minutes and 7 seconds
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400&display=swap'); .features {
background-color: #fafaf6;
.feature { padding: 3rem 10rem;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.navbar { .navbar {
...@@ -48,3 +45,24 @@ ...@@ -48,3 +45,24 @@
font-weight: bold; font-weight: bold;
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
} }
.funkwhale.card {
border-radius: 8px;
text-align: center;
padding: 30px 20px;
max-width: 300px;
margin: auto;
}
.funkwhale.card .title {
font-size: 16px;
margin-bottom: 1rem;
}
.funkwhale.card .icon {
background-color: #afdde9;
border-radius: 12px;
height: 160px;
width: 160px;
margin-bottom: 1.5rem;
}
<section class="section has-background-light" id="get-started"> <div class="columns features">
<h1 class="title">Funkwhale is based on open standards and free software and built...</h1> <div class="column">
<div class="columns"> <div class="funkwhale card">
<div class="column feature"> <div class="icon"></div>
<h2 class="title"> <h2 class="title">
<i class="fa fa-music" aria-hidden="true"></i> For music lovers For music lovers
</h2> </h2>
<h3 class="subtitle">Listen to your music</h3> <p>Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features. </p>
<p> </div>
Upload your personal music collection and listen to it, any time and everywhere! </div>
</p> <div class="column">
<button class="button mt-4">Learn more...</button> <div class="funkwhale card">
</div> <div class="icon"></div>
<div class="column feature"> <h2 class="title">For artists and podcasters</h2>
<h2 class="title"> <p>Use Funkwhale as a publishing platform, whether you make music or podcasts, and allow people to subscribe to your podcasts from their favourite app.</p>
<i class="fa fa-podcast" aria-hidden="true"></i> For podcast lovers </div>
</h2> </div>
<h3 class="subtitle">Subscribe to any podcast</h3> <div class="column">
<p> <div class="funkwhale card">
Listen to your favorite podcasts and discover new podcasts from our network! <div class="icon"></div>
</p> <h2 class="title">Decentralized & Federated</h2>
<button class="button mt-4">Learn more...</button> <p>Content can be shared across
autonomous instances. The network is not tied to any corporation or entity, which gives you independance and choice.</p>
</div>
</div>
<div class="column">
<div class="funkwhale card">
<div class="icon"></div>
<h2 class="title">Community-driven</h2>
<p>Free software build by the community using standard protocols and open
source technology. No third-party analytics. No tracking. No ads. You are
in control.</p>
</div>
</div>
</div> </div>
<div class="column feature">
<h2 class="title">
<i class="fa fa-upload" aria-hidden="true"></i> For publishers
</h2>
<h3 class="subtitle">Publish your music or podcast</h3>
<p>
Make your audio content available to the hole Funkwhale network and beyond!
</p>
<button class="button mt-4">Learn more...</button>
</div>
<div class="column feature">
<h2 class="title">
<i class="fa fa-users" aria-hidden="true"></i> By a friendly community
</h2>
<h3 class="subtitle">Take part in shaping our software</h3>
<p>
Funkwhale belongs to the Community, become a member and participate in the development of an independend platform!
</p>
<button class="button mt-4">Become a contributor</button>
</div>
</div>
</section>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment