Commit 78cb4047 authored by Qwerty's avatar Qwerty

Add templates

parent c998e79f
......@@ -461,7 +461,89 @@ nav {
flex-wrap: wrap;
justify-content: space-around;
}
/********* CORPORATE WEB DESIGN **********************/
/*header {
text-align:center;
background: transparent url("https://source.unsplash.com/random") no-repeat scroll center center / cover;
background-size: cover;
padding:5em;
margin:0;
width:100%;
box-sizing: content-box;
top:0;
left:0;
}
nav {
margin:0;
background: #333;
padding:1em;
}
nav a {
color:#fff;
text-decoration:none;
}
article {
margin-top:1em;
margin-bottom:1em;
max-width:700px;
margin:auto;
}
footer {
background:#ccc;
color:#333;
padding:2em;
text-align:center;
margin-bottom:0;
}*
/******************************************************/
/**********Material Design*****************************/
/*body,
html {
background: #eee;
}
a {
color: #4496cc;
text-decoration: none
}
a:hover {
color: #337199;
text-decoration: none
}
nav {
background: #fab;
color: #fff;
min-height: 64px;
padding:1em;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
nav > a {
padding: 10px;
color: #fff;
text-decoration: none
}
nav > a:hover {
border-bottom: 3px solid #fff;
color: #fff;
text-decoration: none
}
main {
padding: 2em;
margin: 0.5em auto 1em auto;
max-width: 900px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
background: #fff;
}
*/
/******************************************************/
/********** minimalist ********************************/
/*body,
html {
max-width:700px;
margin:auto;
}
*/
/******************************************************/
/* -----------------------------------------------------
8 - RESPONSIVE
----------------------------------------------------- */
......
......@@ -3,6 +3,8 @@
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="reset.css"/>
<!--<link rel="stylesheet" href="corporate.css"/>-->
<link rel="stylesheet" href="minimalist.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Title Name</title>
</head>
......@@ -16,63 +18,65 @@
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
<article>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>It's a paragraph</p>
<figure>
<img src="https://source.unsplash.com/random" alt="Picture"/>
<figcaption>Random Picture</figcaption>
</figure>
<blockquote>I love chocolate - Napoléon Bonaparte</blockquote>
<code>print hello world</code>
</article>
<form>
<fieldset>
<legend>Legend</legend>
<label><input type="text" /> Text</label>
<label><input type="radio"></label>
<input type="checkbox">
<select multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</fieldset>
<textarea></textarea>
<input type="submit">
</form>
<ul>
<li>Chocolat</li>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ol>
<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>
</ol>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<main>
<article>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>It's a paragraph</p>
<figure>
<img src="https://source.unsplash.com/random" alt="Picture"/>
<figcaption>Random Picture</figcaption>
</figure>
<blockquote>I love chocolate - Napoléon Bonaparte</blockquote>
<code>print hello world</code>
</article>
<form>
<fieldset>
<legend>Legend</legend>
<label><input type="text" /> Text</label>
<label><input type="radio"></label>
<input type="checkbox">
<select multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</fieldset>
<textarea></textarea>
<input type="submit">
</form>
<ul>
<li>Chocolat</li>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ol>
<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>
</ol>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</main>
<footer>
</footer>
</body>
......
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