Commit decb2b94 authored by Eugen Rochko's avatar Eugen Rochko

Add elephants graphic

parent e401d4f5
import React from 'react';
import elephantGrid from './assets/instance_badges.png';
const HowItWorks = () => (
<div className='how-it-works' id='how-it-works'>
<div className='container'>
<h2>How it works</h2>
<div className='row'>
<div className='specs'>
<h2>How it works</h2>
<p>Anyone can run a server of Mastodon. Each server hosts individual user accounts, the content they produce, and the content they subscribe to.</p>
<p>Each user account has a globally unique name (e.g. @user@example.com), consisting of the local username (@user), and the domain name of the server it is on (example.com).</p>
<p>Users can follow each other, regardless of where they're hosted &mdash; when a local user follows a user from a different server, the server subscribes to that user's updates for the first time.</p>
</div>
<div className='specs'>
<p>Anyone can run a server of Mastodon. Each server hosts individual user accounts, the content they produce, and the content they subscribe to.</p>
<p>Each user account has a globally unique name (e.g. @user@example.com), consisting of the local username (@user), and the domain name of the server it is on (example.com).</p>
<p>Users can follow each other, regardless of where they're hosted &mdash; when a local user follows a user from a different server, the server subscribes to that user's updates for the first time.</p>
<div className='network-grid'>
<img src={elephantGrid} alt='Fediverse' />
</div>
</div>
<div className='benefits'>
......
......@@ -26,9 +26,23 @@
.specs {
width: 40%;
margin-right: 30px;
}
.benefits {
margin-top: 50px;
}
.network-grid {
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 446px;
img {
display: block;
}
}
}
Markdown is supported
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