fixed content boxes
This commit is contained in:
parent
a04a9b248a
commit
5b78b830a5
GPG Key ID:
2B4F402172791BAF
56
index.html
56
index.html
|
|
@ -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,7 +64,8 @@
|
||||||
<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">
|
||||||
|
<p>
|
||||||
Nerdcult is a platform for (and by) open source
|
Nerdcult is a platform for (and by) open source
|
||||||
software developers, that aims to make collaboration
|
software developers, that aims to make collaboration
|
||||||
as comfortable as possible. We also want to make
|
as comfortable as possible. We also want to make
|
||||||
|
|
@ -71,25 +73,69 @@
|
||||||
for their projects.
|
for their projects.
|
||||||
Join now by creating an account.
|
Join now by creating an account.
|
||||||
</p>
|
</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 class="content-box-paragraph">
|
<p>
|
||||||
We provide tools for software development, communication and project management.
|
We provide tools for software development, communication and project management.
|
||||||
This includes a git server, a matrix homeserver, pads and much more :)
|
This includes a git server, a matrix homeserver, pads and much more :)
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
<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">
|
||||||
|
<p>
|
||||||
We save as less personal data as possible and our logs are anonymized.
|
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.
|
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.
|
By that we couldn't sell data and give attackers nothing they could steal.
|
||||||
</p>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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