Commit 880e62ec authored by Kasalehlia's avatar Kasalehlia

first design, already mostly responsive

parents
File added
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1920"
height="1080"
viewBox="0 0 1920 1080"
id="svg3439"
version="1.1"
inkscape:version="0.91 r"
sodipodi:docname="background.svg">
<defs
id="defs3441" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="825.66592"
inkscape:cy="674.50265"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-page="true"
inkscape:snap-smooth-nodes="true"
inkscape:object-nodes="true"
inkscape:window-width="1434"
inkscape:window-height="878"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:window-maximized="0" />
<metadata
id="metadata3444">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,27.637839)">
<rect
style="opacity:1;fill:#010118;fill-opacity:1;fill-rule:nonzero;stroke:#0000ff;stroke-width:0.80000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3447"
width="1920"
height="1080"
x="0"
y="-27.637838" />
<g
id="g4827">
<path
inkscape:connector-curvature="0"
id="path4789"
d="m 397.14286,-27.637839 114.28571,222.857139 242.85714,-40 -148.57142,368.57143 417.14281,11.42857 94.2858,-291.42857 382.8571,182.85714 185.7143,260 140,-245.71428 L 1708.5714,155.2193 1780,-27.637839"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4791"
d="m 754.28571,155.2193 117.14286,-182.857139 245.71433,271.428569 -511.42861,280 -314.28572,28.57143 20,300 -174.28571,200.00004"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4793"
d="M 1117.1429,243.79073 754.28571,155.2193 291.42857,552.36216 511.42857,195.2193 222.85714,232.36216 88.571429,95.219301 0,529.50502"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4795"
d="m 605.71429,523.79073 265.71428,248.57143 -560,80 L 620,1052.3622 868.57143,769.50502 1057.1429,675.2193 l -34.2858,-140 240,68.57143 L 1500,426.64787 1708.5714,155.2193 1440,158.07645 1345.7143,-27.637839 1117.1429,243.79073"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4797"
d="m 1057.1429,675.2193 291.4285,122.85715 -85.7143,-194.28572 422.8572,82.85714 -20,294.28569 -317.1429,-182.85711 -231.4285,151.42857 -245.71433,-177.14286 65.71429,280.00004"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4799"
d="m 1202.8571,1052.3622 -85.7142,-102.85718 308.5714,102.85718 240,-71.42864 180,71.42864 L 1920,849.50502 1685.7143,686.64787 1920,689.50502"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4801"
d="m 1500,426.64787 -60,-268.57142 -322.8571,85.71428"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4803"
d="M 605.71429,523.79073 311.42857,852.36216 105.05586,688.70724 291.42857,552.36216 212.13203,377.58026 0,529.50502"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4805"
d="M 0,70.493887 88.571429,95.219301 397.14286,-27.637839 222.85714,232.36216 212.13203,377.58026 105.05586,688.70724 0,759.41792 311.42857,852.36216 0,961.44843"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4807"
d="m 1500,426.64787 325.7143,14.28572 94.2857,-60 L 1828.5714,178.07645 1920,100.93359 1780,-27.637839"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4809"
d="m 1708.5714,155.2193 120,22.85715"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4811"
d="M 1708.5714,155.2193 1491.4286,-27.637839 1440,158.07645"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4813"
d="M 511.42857,195.2193 697.14286,-27.637839 754.28571,155.2193"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4815"
d="m 1117.1429,243.79073 -2.8572,-271.428569"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4817"
d="m 1117.1429,949.50502 -60,-274.28572 -451.42861,-151.42857"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4819"
d="M 1117.1429,949.50502 937.14286,1052.3622"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4821"
d="m 1685.7143,686.64787 -337.1429,111.42858 77.1429,254.28575"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4823"
d="m 1117.1429,243.79073 145.7142,360 -205.7142,71.42857"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path4825"
d="M 1825.7143,440.93359 1920,543.79073"
style="fill:none;fill-rule:evenodd;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</svg>
@font-face {
font-family: "Geo";
src: url("Geo-Regular.ttf")
}
html {
min-height: 100vh;
background: url(background.svg);
background-size: cover;
background-attachment: fixed;
font-family: 'Geo', sans-serif;
color: #ff00de;
}
body {
margin: 0;
}
#specht {
height: 70vh;
}
.main > div, .headers {
font-size: 200%;
}
.headers {
position: fixed;
top: 0px;
border: 1px solid #0000ff;
border-top: none;
background-color: #010118;
width: 750px;
height: 99px;
}
.headers h1, .headers h3 {
margin-top: 10px;
margin-bottom: 0.3em;
}
h2 {
margin-bottom: 0.6em;
}
.nav {
list-style: none;
margin: 0;
}
.main {
max-width: 750px;
}
#top {
position: absolute;
}
.nav li a {
color: #ff00de;
font-size: 200%;
}
iframe {
width: 400px;
height: 300px;
max-width: 100%;
}
@media (max-width: 969px) {
.main {
margin: 0 auto;
padding-top: 108px;
}
.headers {
left: 50%;
margin-left: -375px;
}
.nav-container {
position: fixed;
left: 50%;
margin-left: -375px;
max-width: 750px;
width: 750px;
top: 100px;
height: 40px;
border: 1px solid #0000ff;
background-color: #010118;
}
.nav {
margin: auto auto;
padding: 0;
}
.nav li {
display: inline;
margin: 0 10px;
}
.main > div > h2 {
padding-top: 140px;
}
}
@media (max-width: 749px) {
.main {
margin: 0 10px;
}
}
@media (max-width: 600px) {
body {
font-size: smaller;
}
.headers {
font-size: 18px;
height: 59px;
}
.nav-container {
top: 60px;
font-size: smaller;
height: 30px;
padding-top: 3px;
}
.main {
padding-top: 78px;
}
.main > div > h2 {
padding-top: 100px;
}
}
@media (min-width: 970px) {
.main {
margin: 0 0 0 210px;
padding-top: 70px;
}
.nav {
position: fixed;
top: 0;
left: 0;
}
.headers {
margin-left: 210px;
}
.nav {
padding: 0;
width: 210px;
margin-top: 50px;
}
.nav li {
padding: 1.2em 40px;
border: 1px solid #0000ff;
background-color: #010118;
margin: 10px 10px 0 10px;
max-width: 190px;
}
.main > div > h2 {
padding-top: 100px;
}
}
@media (min-width: 1170px) {
.main {
margin: 0 auto;
}
.nav {
left: calc(50% - 585px)
}
.headers {
left: 50%;
margin-left: -375px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hacken Open Air 2::17</title>
<link rel="stylesheet" href="hoa.css">
</head>
<body>
<div id="top"></div>
<div class="headers" align="center">
<h1>Hacken Open Air 2::17</h1>
</div>
<div class="nav-container" align="center">
<ul class="nav">
<li><a href="#top">Top</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
<div class="main">
<div align="center">
<h3>07.09 - 10.09 in Peine</h3>
<img id="specht" src="specht.svg">
</div>
<div id="location">
<h2>Location</h2>
<iframe scrolling="no" src="http://www.openstreetmap.org/export/embed.html?bbox=10.189990997314455%2C52.26994320551473%2C10.367832183837892%2C52.34970691137587&amp;layer=mapnik&amp;marker=52.30984302379418%2C10.278911590576172" style="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/?mlat=52.3098&amp;mlon=10.2789#map=13/52.3098/10.2789">View Larger Map</a></small>
</div>
<div id="info">
<h2>Info</h2>
Rerum quia qui delectus facere est laudantium ut harum. Accusantium et rerum eveniet quo eum dolor. Perspiciatis adipisci nisi quos exercitationem. Qui vel doloribus dolores exercitationem.
Dignissimos eum non eos modi. Odio assumenda fugit aut iure. Nemo repellat fugit neque natus nihil. Accusamus ut ipsam error ut enim.
Reprehenderit laborum dolores quo vitae. Corporis quia consequuntur praesentium qui tempore deleniti vitae ut. Itaque voluptatem dolore officia non autem alias. Et asperiores aperiam non. Et autem voluptas qui quis ut est est.
Quis cum consequuntur nesciunt cumque cum aspernatur autem. Sit non fugit cum sit aperiam temporibus ut consequatur. Aperiam inventore exercitationem quia voluptatem deleniti nihil. Iusto molestias impedit voluptatem. Quam ea quas porro rerum. Earum fugit dolorem recusandae ipsum quibusdam magni.
Beatae asperiores officiis iusto fugit. Sapiente qui voluptatum explicabo doloribus hic quia aut iure. Accusamus sed beatae labore enim. Temporibus sit enim fugit ut sit ratione voluptatibus rem.
</div>
<div id="kontakt">
<h2>Kontakt</h2>
Rerum quia qui delectus facere est laudantium ut harum. Accusantium et rerum eveniet quo eum dolor. Perspiciatis adipisci nisi quos exercitationem. Qui vel doloribus dolores exercitationem.
Dignissimos eum non eos modi. Odio assumenda fugit aut iure. Nemo repellat fugit neque natus nihil. Accusamus ut ipsam error ut enim.
Reprehenderit laborum dolores quo vitae. Corporis quia consequuntur praesentium qui tempore deleniti vitae ut. Itaque voluptatem dolore officia non autem alias. Et asperiores aperiam non. Et autem voluptas qui quis ut est est.
Quis cum consequuntur nesciunt cumque cum aspernatur autem. Sit non fugit cum sit aperiam temporibus ut consequatur. Aperiam inventore exercitationem quia voluptatem deleniti nihil. Iusto molestias impedit voluptatem. Quam ea quas porro rerum. Earum fugit dolorem recusandae ipsum quibusdam magni.
Beatae asperiores officiis iusto fugit. Sapiente qui voluptatum explicabo doloribus hic quia aut iure. Accusamus sed beatae labore enim. Temporibus sit enim fugit ut sit ratione voluptatibus rem.
</div>
</div>
</body>
</html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="80.087112mm"
height="193.70815mm"
viewBox="0 0 283.77325 686.36744"
id="svg2"
version="1.1"
inkscape:version="0.91 r"
sodipodi:docname="specht.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="-37.267902"
inkscape:cy="381.94618"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-smooth-nodes="true"
inkscape:object-nodes="true"
inkscape:window-width="1434"
inkscape:window-height="878"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-283.46954,-145.45101)">
<path
id="path4290"
style="fill:none;fill-rule:evenodd;stroke:#ff00cc;stroke-width:3.00000027;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:16.4;stroke-dasharray:none"
d="m 323.75389,539.70979 5.55584,-18.18275 10.6066,12.12183 m 43.43656,-32.82996 13.38452,9.34392 m -91.16626,-12.87945 23.73858,24.24366 34.09265,-0.75761 33.33503,-10.6066 -3.28299,17.9302 m 116.67262,143.94674 34.34518,-72.22591 m -112.63201,150.51273 30.80966,-15.65736 -36.3655,-43.94164 59.09393,-19.69797 -62.12438,-49.49749 m 32.10322,-60.95564 -32.10322,60.95564 50.50762,-1.51521 11.61676,51.0127 m -33.94973,-396.70313 23.30357,43.125 -12.94642,38.48214 49.85654,32.25328 -10.57083,98.10387 43.40079,113.52308 -50.1865,-67.8088 -20.52418,88.01186 70.71068,-20.20306 m -69.74008,-282.36237 48.52688,45.4816 -11.61676,25.25382 26.26397,23.2335 -10.10152,55.55839 17.67766,10.10153 m -44.41094,9.21045 -58.92857,15 52.14286,30.71428 m -75.07241,-237.76234 35.07241,24.54805 -66.38714,51.71847 91.74428,25.78154 -101.84581,53.51543 64.34581,51.48457 -48.68844,26.80225 41.90272,4.26917 -22.70983,28.05571 m -24.24366,-327.28942 27.90547,1.38896 m 22.61945,24.27332 -13.52808,-15.68702 -11.23795,4.04061 m 56.55175,3.43213 -36.98004,-16.56412 m -32.19861,-23.61231 23.35978,15.02602 26.13769,-39.26968 16.16244,4.41941 3.51874,60.00068 31.33153,-45.73227 m -46.68868,355.73227 18.4044,59.44043 36.3655,52.02285 19.69797,63.13454 m -117.1777,-174.7564 42.70983,0.15858 m 26.9907,-263.30331 -7.6157,20.17831 36.91012,70.73542 16.16245,78.79189 16.66751,132.83506 m -64.82936,-203.52308 -17.85714,-40.35715 -7.5,-37.14286 -2.85715,-44.46428 -12.5,-15.53572 31.78572,-8.21428 11.63355,13.86673 m -2.70498,131.84756 -21.78572,59.64285 -15.71428,45.35715 -6.78572,31.07142 20,28.21429 38.92858,-28.57143 6.78571,-45.71428 z m -6.38639,-220.23591 12.50064,2.77792 11.23794,-0.75761 m -11.23794,0.75761 -2.65165,20.07678 m 36.11295,-52.14912 -33.4613,32.07234 -18.56156,11.74302 m 28.78935,-0.88388 -12.87944,9.21764 m -21.97082,-20.83439 6.06091,12.50063 15.90991,8.33376 18.94036,5.93465 m -70.58441,23.86485 -15.15229,5.80838 15.27856,6.18718 m -6.69226,-15.27855 6.56599,3.28299 2.27284,5.3033 -2.14657,6.69226 -6.18719,2.39912 -6.9448,-3.15673 -2.14657,-5.42957 3.03046,-5.93465 z m -39.64849,29.16815 3.15672,-21.46574 25.75889,14.01587 -2.0203,26.89531 m -18.18275,-9.59645 -8.71256,-9.84899 -11.49049,-7.82868 m 40.4061,0.37881 -28.91561,7.44987 -78.16056,25.50635 m 0,0 66.67007,-33.33503 14.64721,-13.63706 13.13199,-22.72843 23.23351,-14.64721 26.26396,-9.59645 10.10153,-8.08122 12.12183,-2.02031 45.96194,-29.29442 -7.57615,17.17259 -14.64721,14.14214 -1.01015,11.61675 6.06092,15.15229 -10.10153,32.32488 -9.59645,27.27412 0,32.82996 22.22336,32.32488 18.68782,33.33503 14.64721,48.48732 7.57614,65.65992 -1.01015,52.02286 0,70.71067 -5.55584,51.01271 -9.09137,84.34774 -44.44671,-64.14469 -22.72843,63.63961 -0.50508,96.97464 -30.30458,-81.31728 -5.55584,-59.599 -3.03045,-69.19546 -10.60661,-61.11422 -19.19289,-32.32488 -53.53809,5.55584 -11.61675,41.92133 -14.14214,0.25255 4.04061,-18.94037 5.55584,-17.17259 -10.6066,-21.21321 -28.28427,-18.18274 20.70813,-3.03046 -14.14214,-13.63706 11.61675,-1.01015 31.81981,27.27412 22.72843,-0.50508 25.75889,-8.5863 -5.55584,-51.0127 10.10153,-79.29697 21.2132,-46.46702 10.10153,-29.7995 -7.07107,-20.20305 -18.18275,-9.59645 z"
inkscape:connector-curvature="0" />
</g>
</svg>
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