fixed content boxes

This commit is contained in:
antifallobst 2023-08-24 14:38:54 +02:00
parent a04a9b248a
commit 5b78b830a5
Signed by: antifallobst
GPG Key ID: 2B4F402172791BAF
3 changed files with 111 additions and 59 deletions

View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title> Nerdcult </title> <title> Nerdcult </title>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="style/topbar.css">
<link rel="stylesheet" href="style/index.css">
</head> </head>
<body> <body>
@ -63,33 +64,78 @@
<li class="content-box"> <li class="content-box">
<p class="content-box-heading">Community</p> <p class="content-box-heading">Community</p>
<p class="content-box-paragraph"> <div class="content-box-data">
Nerdcult is a platform for (and by) open source <p>
software developers, that aims to make collaboration Nerdcult is a platform for (and by) open source
as comfortable as possible. We also want to make software developers, that aims to make collaboration
it as easy as possible for users to find contributors as comfortable as possible. We also want to make
for their projects. it as easy as possible for users to find contributors
Join now by creating an account. for their projects.
</p> Join now by creating an account.
</p>
<ul>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Explore</tspan></text>
</g></svg>
</a></li>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Rules</tspan></text>
</g></svg>
</a></li>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Join</tspan></text>
</g></svg>
</a></li>
</ul>
</div>
</li> </li>
<li class="content-box"> <li class="content-box">
<p class="content-box-heading">Tools</p> <p class="content-box-heading">Tools</p>
<div class="content-box-data">
<p>
We provide tools for software development, communication and project management.
This includes a git server, a matrix homeserver, pads and much more :)
</p>
<p class="content-box-paragraph"> <ul>
We provide tools for software development, communication and project management. <li><a href="#">
This includes a git server, a matrix homeserver, pads and much more :) <svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
</p> <path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">List</tspan></text>
</g></svg>
</a></li>
</ul>
</div>
</li> </li>
<li class="content-box"> <li class="content-box">
<p class="content-box-heading">Privacy</p> <p class="content-box-heading">Privacy</p>
<p class="content-box-paragraph"> <div class="content-box-data">
We save as less personal data as possible and our logs are anonymized. <p>
Your private data, is encrypted with a key that derives from your password. We save as less personal data as possible and our logs are anonymized.
By that we couldn't sell data and give attackers nothing they could steal. Your private data, is encrypted with a key that derives from your password.
</p> By that we couldn't sell data and give attackers nothing they could steal.
</p>
<ul>
<li><a href="#">
<svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg" ><g>
<path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z" class="tab-svg-path" />
<text x="67.010414" y="31.911449"><tspan class="tab-svg-text">Learn More</tspan></text>
</g></svg>
</a></li>
</ul>
</div>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -2,45 +2,6 @@ body {
background: #191c2e; background: #191c2e;
} }
.tabs li {
display: inline-block;
padding-left: 2px;
}
.tabs li a {
position: relative;
}
.tab-svg-path {
position: absolute;
fill: #21253c;
stroke: #690455;
stroke-width: 4;
stroke-miterlimit: 10;
pointer-events: all;
}
.tab-svg-text {
fill: #FFFFFF;
font-family: "Roboto";
font-size: 18px;
text-anchor: middle;
}
#tabs-main {
float: left;
margin-left: 32px;
padding: 0;
list-style: none;
}
#tabs-account {
float: right;
margin-right: 32px;
padding: 0;
list-style: none;
}
main { main {
position: absolute; position: absolute;
padding: 0; padding: 0;
@ -71,7 +32,7 @@ main {
border: 4px solid #690455; border: 4px solid #690455;
border-radius: 12px; border-radius: 12px;
margin-right: 32px; margin-right: 32px;
width: auto; width: calc(100% / 3);
height: auto; height: auto;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -87,10 +48,16 @@ main {
width: 100%; width: 100%;
} }
.content-box-paragraph { .content-box-data {
font-family: Roboto; font-family: Roboto;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
width: 100%; width: 100%;
}
.content-box-data ul {
margin: 0;
padding: 0;
list-style: none;
} }

39
style/topbar.css Normal file
View File

@ -0,0 +1,39 @@
.tabs li {
display: inline-block;
padding-left: 2px;
}
.tabs li a {
position: relative;
}
.tab-svg-path {
position: absolute;
fill: #21253c;
stroke: #690455;
stroke-width: 4;
stroke-miterlimit: 10;
pointer-events: all;
}
.tab-svg-text {
fill: #FFFFFF;
font-family: "Roboto";
font-size: 18px;
text-anchor: middle;
}
#tabs-main {
float: left;
margin-left: 32px;
padding: 0;
list-style: none;
}
#tabs-account {
float: right;
margin-right: 32px;
padding: 0;
list-style: none;
}