fixed content boxes
This commit is contained in:
parent
a04a9b248a
commit
5b78b830a5
GPG Key ID:
2B4F402172791BAF
82
index.html
82
index.html
|
|
@ -3,7 +3,8 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title> Nerdcult </title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="style/topbar.css">
|
||||
<link rel="stylesheet" href="style/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -63,33 +64,78 @@
|
|||
<li class="content-box">
|
||||
<p class="content-box-heading">Community</p>
|
||||
|
||||
<p class="content-box-paragraph">
|
||||
Nerdcult is a platform for (and by) open source
|
||||
software developers, that aims to make collaboration
|
||||
as comfortable as possible. We also want to make
|
||||
it as easy as possible for users to find contributors
|
||||
for their projects.
|
||||
Join now by creating an account.
|
||||
</p>
|
||||
<div class="content-box-data">
|
||||
<p>
|
||||
Nerdcult is a platform for (and by) open source
|
||||
software developers, that aims to make collaboration
|
||||
as comfortable as possible. We also want to make
|
||||
it as easy as possible for users to find contributors
|
||||
for their projects.
|
||||
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 class="content-box">
|
||||
<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">
|
||||
We provide tools for software development, communication and project management.
|
||||
This includes a git server, a matrix homeserver, pads and much more :)
|
||||
</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">List</tspan></text>
|
||||
</g></svg>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="content-box">
|
||||
<p class="content-box-heading">Privacy</p>
|
||||
|
||||
<p class="content-box-paragraph">
|
||||
We save as less personal data as possible and our logs are anonymized.
|
||||
Your private data, is encrypted with a key that derives from your password.
|
||||
By that we couldn't sell data and give attackers nothing they could steal.
|
||||
</p>
|
||||
<div class="content-box-data">
|
||||
<p>
|
||||
We save as less personal data as possible and our logs are anonymized.
|
||||
Your private data, is encrypted with a key that derives from your password.
|
||||
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>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,45 +2,6 @@ body {
|
|||
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 {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
|
|
@ -71,7 +32,7 @@ main {
|
|||
border: 4px solid #690455;
|
||||
border-radius: 12px;
|
||||
margin-right: 32px;
|
||||
width: auto;
|
||||
width: calc(100% / 3);
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -87,10 +48,16 @@ main {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.content-box-paragraph {
|
||||
.content-box-data {
|
||||
font-family: Roboto;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-box-data ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue