fede.re/index.html

179 lines
2.4 KiB
HTML

<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fede.re</title>
<link rel="stylesheet" type="text/css" media="screen" href="https://fonts.ppsfleet.navy/ibm_plex/Web/css/ibm-plex-sans.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="feuille.jpeg" id="logo" class="logo">
<img src="feuille-square.jpeg" id="logo-square" class="logo">
<div id="main-description">
<h1>Fédéré</h1>
<h2>Highest quality federation</h2>
<section class="services">
<a href="https://tube.fede.re" class="service">Peertube</a>
<a href="https://pad.fede.re" class="service">Etherpad</a>
<a href="https://matrix.fede.re" class="service">Matrix</a>
<a href="https://poll.fede.re" class="service">Framadate</a>
</section>
</div>
</header>
<footer>
</footer>
<style>
body, html
{
margin: 0;
background-color: white;
}
body
{
display: flex;
}
*
{
font-family: 'IBM Plex Sans', sans;
}
header
{
display: flex;
margin-top: 30px;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
}
header > *
{
margin: 3em;
}
.logo
{
border-radius: 8px 50px 50px 50px;
width: 400px;
max-width: 80%;
}
#logo-square
{
display: none;
}
#main-description
{
flex:2;
}
h1
{
margin: 0;
font-weight: 400;
}
h2
{
font-size: 6rem;
margin: 0;
width: 702px;
}
a
{
display:block;
text-align:center;
padding:0.3em;
font-size:1.5em;
}
.services
{
display: flex;
flex-direction:row;
flex-wrap: wrap;
}
.service
{
padding:0.5em 2em;
background-color: white;
margin: 0.3em;
border-radius: 3px;
color:black;
box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
border: 1px solid #d3d3d382;
}
@media only screen and (max-width: 1350px) {
header {
flex-direction: column;
}
h2
{
font-size: 3rem;
width: auto;
}
#main-description
{
flex:0;
margin-top: 2em;
}
header > *
{
margin: auto;
}
.logo
{
width: 300px;
}
#logo-square
{
display: block;
}
#logo
{
display: none;
}
}
@media only screen and (max-width: 900px) {
h2
{
font-size: 2rem;
width: auto;
}
.services
{
flex-direction: column;
}
#main-description
{
text-align: center;
}
.logo
{
width: 200px;
}
}
</style>
</body>
</html>