Move theme into pelican project
parent
2037b72c52
commit
d365b870f6
175
index.html
175
index.html
|
|
@ -1,175 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A layout example that shows off a responsive product landing page.">
|
||||
<title>Landing Page – Layout Examples – Pure</title>
|
||||
|
||||
<link rel="stylesheet" href="css/pure-min.css" integrity="sha384-" crossorigin="anonymous">
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="css/grids-responsive-old-ie-min.css">
|
||||
<![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<link rel="stylesheet" href="css/grids-responsive-min.css">
|
||||
<!--<![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="css/font-awesome.css">
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
|
||||
<![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<link rel="stylesheet" href="css/layouts/marketing.css">
|
||||
<!--<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="">Your Site</a>
|
||||
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="splash-container">
|
||||
<div class="splash">
|
||||
<h1 class="splash-head">Big Bold Text</h1>
|
||||
<p class="splash-subhead">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://purecss.io" class="pure-button pure-button-primary">Get Started</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<h2 class="content-head is-center">Excepteur sint occaecat cupidatat.</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-rocket"></i>
|
||||
Get Started Quickly
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-mobile"></i>
|
||||
Responsive Layouts
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-th-large"></i>
|
||||
Modular
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-check-square-o"></i>
|
||||
Plays Nice
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ribbon l-box-lrg pure-g">
|
||||
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
|
||||
<img width="300" alt="File Icons" class="pure-img-responsive" src="img/common/file-icons.png">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
|
||||
|
||||
<h2 class="content-head content-head-ribbon">Laboris nisi ut aliquip.</h2>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 class="content-head is-center">Dolore magna aliqua. Uis aute irure.</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-2-5">
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
|
||||
<label for="name">Your Name</label>
|
||||
<input id="name" type="text" placeholder="Your Name">
|
||||
|
||||
|
||||
<label for="email">Your Email</label>
|
||||
<input id="email" type="email" placeholder="Your Email">
|
||||
|
||||
<label for="password">Your Password</label>
|
||||
<input id="password" type="password" placeholder="Your Password">
|
||||
|
||||
<button type="submit" class="pure-button">Sign Up</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-3-5">
|
||||
<h4>Contact Us</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
|
||||
<h4>More Information</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer l-box is-center">
|
||||
View the source of this layout to learn more. Made with love by the YUI Team.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,10 +4,12 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- BASE STYLES --
|
||||
* Most of these are inherited from Base, but I want to change a few.
|
||||
*/
|
||||
|
||||
body {
|
||||
line-height: 1.7em;
|
||||
color: #7f8c8d;
|
||||
|
|
@ -29,17 +31,19 @@ label {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- LAYOUT STYLES --
|
||||
* These are some useful classes which I will need
|
||||
*/
|
||||
|
||||
.l-box {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.l-box-lrg {
|
||||
padding: 2em;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.is-center {
|
||||
|
|
@ -47,11 +51,11 @@ label {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* -- PURE FORM STYLES --
|
||||
* Style the form inputs and labels
|
||||
*/
|
||||
|
||||
.pure-form label {
|
||||
margin: 1em 0 0;
|
||||
font-weight: bold;
|
||||
|
|
@ -66,10 +70,12 @@ label {
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- PURE BUTTON STYLES --
|
||||
* I want my pure-button elements to look a little different
|
||||
*/
|
||||
|
||||
.pure-button {
|
||||
background-color: #1f8dd6;
|
||||
color: white;
|
||||
|
|
@ -93,11 +99,13 @@ a.pure-button-primary {
|
|||
.home-menu {
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
.home-menu {
|
||||
background: #2d3e50;
|
||||
}
|
||||
|
||||
.pure-menu.pure-menu-fixed {
|
||||
/* Fixed menus normally have a border at the bottom. */
|
||||
border-bottom: none;
|
||||
|
|
@ -118,6 +126,7 @@ a.pure-button-primary {
|
|||
.home-menu a {
|
||||
color: #6FBEF3;
|
||||
}
|
||||
|
||||
.home-menu li a:hover,
|
||||
.home-menu li a:focus {
|
||||
background: none;
|
||||
|
|
@ -149,12 +158,17 @@ a.pure-button-primary {
|
|||
height: 50%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 100px; left: 0; bottom: 0; right: 0;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
/* This is the main heading that appears on the blue section */
|
||||
|
||||
.splash-head {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
|
@ -166,17 +180,21 @@ a.pure-button-primary {
|
|||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* This is the subheading that appears on the blue section */
|
||||
|
||||
.splash-subhead {
|
||||
color: white;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- CONTENT STYLES --
|
||||
* This represents the content area (everything below the blue section)
|
||||
*/
|
||||
|
||||
.content-wrapper {
|
||||
/* These styles are required for the "scroll-over" effect */
|
||||
position: absolute;
|
||||
|
|
@ -185,15 +203,18 @@ a.pure-button-primary {
|
|||
min-height: 12%;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* We want to give the content area some more padding */
|
||||
|
||||
.content {
|
||||
padding: 1em 1em 3em;
|
||||
}
|
||||
|
||||
|
||||
/* This is the class used for the main content headers (<h2>) */
|
||||
|
||||
.content-head {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -201,26 +222,35 @@ a.pure-button-primary {
|
|||
margin: 2em 0 1em;
|
||||
}
|
||||
|
||||
|
||||
/* This is a modifier class used when the content-head is inside a ribbon */
|
||||
|
||||
.content-head-ribbon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* This is the class used for the content sub-headers (<h3>) */
|
||||
|
||||
.content-subhead {
|
||||
color: #1f8dd6;
|
||||
}
|
||||
.content-subhead i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.content-subhead i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
|
||||
/* This is the class used for the dark-background areas. */
|
||||
|
||||
.ribbon {
|
||||
background: #2d3e50;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
|
||||
/* This is the class used for the footer */
|
||||
|
||||
.footer {
|
||||
background: #111;
|
||||
position: fixed;
|
||||
|
|
@ -228,59 +258,55 @@ a.pure-button-primary {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||
* On tablets and other medium-sized devices, we want to customize some
|
||||
* of the mobile styles.
|
||||
*/
|
||||
@media (min-width: 48em) {
|
||||
|
||||
@media (min-width: 48em) {
|
||||
/* We increase the body font size */
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* We can align the menu header to the left, but float the
|
||||
menu items to the right. */
|
||||
.home-menu {
|
||||
text-align: left;
|
||||
}
|
||||
.home-menu ul {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.home-menu ul {
|
||||
float: right;
|
||||
}
|
||||
/* We increase the height of the splash-container */
|
||||
/* .splash-container {
|
||||
/* .splash-container {
|
||||
height: 500px;
|
||||
}*/
|
||||
|
||||
/* We decrease the width of the .splash, since we have more width
|
||||
to work with */
|
||||
.splash {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
|
||||
/* We remove the border-separator assigned to .l-box-lrg */
|
||||
.l-box-lrg {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||
* On desktops and other large devices, we want to over-ride some
|
||||
* of the mobile and tablet styles.
|
||||
*/
|
||||
|
||||
@media (min-width: 78em) {
|
||||
/* We increase the header font size even more */
|
||||
.splash-head {
|
||||
font-size: 300%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
@media only screen and (min-width: 0em) {
|
||||
.splash-container {
|
||||
background-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 25.5em) {
|
||||
.splash-container {
|
||||
background-size: 33.3334%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
.splash-container {
|
||||
background-size: 25%;
|
||||
}
|
||||
.splash {
|
||||
min-height: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 64em) {
|
||||
.splash-container {
|
||||
background-size: 20%;
|
||||
}
|
||||
.splash {
|
||||
min-height: 24em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 80em) {
|
||||
.splash-container {
|
||||
background-size: 10%;
|
||||
}
|
||||
.splash {
|
||||
min-height: 24em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
.icon {
|
||||
background-color: #00ff00;
|
||||
background-image: url("../images/play.svg");
|
||||
background-size: 20px 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 12px 10px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
margin: 0.5em 2em;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.pure-menu-heading {
|
||||
background-image: url("../images/luppp.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: 0em;
|
||||
background-size: 2.3em;
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
a.pure-button-primary {
|
||||
padding: 0em 0em;
|
||||
background: #2b2b2b;
|
||||
color: white;
|
||||
border-radius: 0px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.splash {
|
||||
background: #000000;
|
||||
border: 2px solid #ff9900;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
border: 0;
|
||||
letter-spacing: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.splash-container {
|
||||
background-color: black;
|
||||
background-image: url("../images/header.png");
|
||||
background-repeat: repeat-x;
|
||||
background-position-y: 100px;
|
||||
background-position-x: 5px;
|
||||
}
|
||||
|
||||
.ribbon,
|
||||
.home-menu {
|
||||
background: #2b2b2b;
|
||||
}
|
||||
|
||||
.home-menu a,
|
||||
.content-subhead {
|
||||
color: #ff9900;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
|
@ -0,0 +1,174 @@
|
|||
<?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:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666665 8.466667"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.1 r15371"
|
||||
sodipodi:docname="luppp.svg">
|
||||
<defs
|
||||
id="defs2">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient913">
|
||||
<stop
|
||||
style="stop-color:#ff7a00;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop909" />
|
||||
<stop
|
||||
style="stop-color:#ff7a00;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop911" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient905">
|
||||
<stop
|
||||
style="stop-color:#0d0d0d;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop901" />
|
||||
<stop
|
||||
style="stop-color:#4c4c4c;stop-opacity:0"
|
||||
offset="1"
|
||||
id="stop903" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient905"
|
||||
id="linearGradient907"
|
||||
x1="3.7041667"
|
||||
y1="291.9729"
|
||||
x2="6.0854168"
|
||||
y2="294.35416"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient913"
|
||||
id="linearGradient915"
|
||||
x1="5.8208332"
|
||||
y1="289.0625"
|
||||
x2="5.8208332"
|
||||
y2="291.70831"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.2"
|
||||
inkscape:cx="-5.4179081"
|
||||
inkscape:cy="11.98911"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
units="px"
|
||||
inkscape:window-width="1884"
|
||||
inkscape:window-height="1051"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid4485" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<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>
|
||||
<dc:date>2017</dc:date>
|
||||
<dc:creator>
|
||||
<cc:Agent>
|
||||
<dc:title>Timothée Giet</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:creator>
|
||||
<cc:license
|
||||
rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
|
||||
</cc:Work>
|
||||
<cc:License
|
||||
rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#Notice" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#Attribution" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#ShareAlike" />
|
||||
</cc:License>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-288.53332)">
|
||||
<path
|
||||
style="fill:#ff7a00;fill-opacity:1;stroke:none;stroke-width:0.99999994"
|
||||
d="M 16 2 L 16 16 L 2 16 A 14 14 0 0 0 16 30 A 14 14 0 0 0 30 16 A 14 14 0 0 0 16 2 z "
|
||||
transform="matrix(0.26458333,0,0,0.26458333,0,288.53332)"
|
||||
id="path882" />
|
||||
<path
|
||||
style="fill:#8c8c8c;fill-opacity:1;stroke:none;stroke-width:0.99999994"
|
||||
d="M 16 2 A 14 14 0 0 0 2 16 L 16 16 L 16 2 z "
|
||||
transform="matrix(0.26458333,0,0,0.26458333,0,288.53332)"
|
||||
id="path869" />
|
||||
<circle
|
||||
style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0.26458338"
|
||||
id="path873"
|
||||
cx="4.2333331"
|
||||
cy="292.76666"
|
||||
r="2.6458333" />
|
||||
<path
|
||||
style="fill:url(#linearGradient915);fill-opacity:1;stroke:none;stroke-width:0.26458332"
|
||||
d="m 4.2333333,289.06249 v 1.05833 a 2.6458332,2.6458332 0 0 1 2.6458333,2.64583 2.6458332,2.6458332 0 0 1 -2.6458333,2.64584 A 2.6458332,2.6458332 0 0 1 1.5875,292.76665 H 0.52916667 a 3.7041666,3.7041666 0 0 0 3.70416663,3.70417 3.7041666,3.7041666 0 0 0 3.7041666,-3.70417 3.7041666,3.7041666 0 0 0 -3.7041666,-3.70416 z"
|
||||
id="path859"
|
||||
inkscape:connector-curvature="0" />
|
||||
<circle
|
||||
style="fill:#ff7a00;fill-opacity:1;stroke-width:0.26458332"
|
||||
id="path818"
|
||||
cx="4.2333331"
|
||||
cy="289.59164"
|
||||
r="0.52916664" />
|
||||
<circle
|
||||
style="fill:#ff7a00;fill-opacity:1;stroke-width:0.26458332"
|
||||
id="path818-6"
|
||||
cx="-292.76666"
|
||||
cy="1.0583301"
|
||||
r="0.52916664"
|
||||
transform="rotate(-90)" />
|
||||
<path
|
||||
style="fill:#ff7a00;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 3.7041667,291.70832 v 2.11667 l 1.5874997,-1.05834 z"
|
||||
id="path895"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<path
|
||||
style="fill:url(#linearGradient907);stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
|
||||
d="m 5.2916666,292.76665 1.3229166,1.32292 -1.3229166,1.32292 -1.5875,-1.5875 z"
|
||||
id="path899"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
|
|
@ -0,0 +1,74 @@
|
|||
<?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="100"
|
||||
height="100"
|
||||
viewBox="0 0 26.458333 26.458334"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||
sodipodi:docname="play.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="2.8"
|
||||
inkscape:cx="22.437076"
|
||||
inkscape:cy="109.19781"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1028"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<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="Ebene 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-270.54165)">
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
id="path3733"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="10.488839"
|
||||
sodipodi:cy="283.86529"
|
||||
sodipodi:r1="14.937533"
|
||||
sodipodi:r2="7.4687667"
|
||||
sodipodi:arg1="0"
|
||||
sodipodi:arg2="1.0471976"
|
||||
inkscape:flatsided="false"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m 25.426373,283.8653 -11.203151,6.46814 -11.2031495,6.46814 0,-12.93628 0,-12.93629 11.2031505,6.46814 z"
|
||||
inkscape:transform-center-x="-3.7343834"
|
||||
style="stroke-width:0.26458332" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,171 @@
|
|||
<!doctype html>
|
||||
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A layout example that shows off a responsive product landing page.">
|
||||
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pure-min.css">
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="css/grids-responsive-old-ie-min.css">
|
||||
<![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/grids-responsive-min.css">
|
||||
<!--<![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/font-awesome.css">
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
|
||||
<![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/layouts/marketing.css">
|
||||
<!--<![endif]-->
|
||||
|
||||
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/responsive-style.css">
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="">{{ SITENAME }}</a>
|
||||
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="splash-container">
|
||||
<div class="splash">
|
||||
<h1 class="splash-head">{{ SITENAME }}</h1>
|
||||
<p class="splash-subhead">
|
||||
Your Free and Open Source Loop Station on Linux
|
||||
</p>
|
||||
<p>
|
||||
<a href="#content-link" class="pure-button pure-button-primary">
|
||||
<span class="icon"></span>
|
||||
<span class="button-text">Get Started</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper" id="content-link">
|
||||
<div class="content">
|
||||
<h2 class="content-head is-center">Excepteur sint occaecat cupidatat.</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-rocket"></i> Get Started Quickly
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-mobile"></i> Responsive Layouts
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-th-large"></i> Modular
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-check-square-o"></i> Plays Nice
|
||||
</h3>
|
||||
<p>
|
||||
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ribbon l-box-lrg pure-g">
|
||||
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
|
||||
<img width="300" alt="File Icons" class="pure-img-responsive" src="img/common/file-icons.png">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
|
||||
|
||||
<h2 class="content-head content-head-ribbon">Laboris nisi ut aliquip.</h2>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 class="content-head is-center">Dolore magna aliqua. Uis aute irure.</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-2-5">
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
|
||||
<label for="name">Your Name</label>
|
||||
<input id="name" type="text" placeholder="Your Name">
|
||||
|
||||
|
||||
<label for="email">Your Email</label>
|
||||
<input id="email" type="email" placeholder="Your Email">
|
||||
|
||||
<label for="password">Your Password</label>
|
||||
<input id="password" type="password" placeholder="Your Password">
|
||||
|
||||
<button type="submit" class="pure-button">Sign Up</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-3-5">
|
||||
<h4>Contact Us</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
|
||||
<h4>More Information</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer l-box is-center">
|
||||
View the source of this layout to learn more. Made with love by the YUI Team.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue