Commit 7e4de76c authored by Noémie Kerroux's avatar Noémie Kerroux

Initial commit

parents
/*
Name : Skull Web Prototype
Version : 1.0.0
Author : Noémie Kerroux
Website: http://noemiekerroux.fr/
Gitlab : https://gitlab.com/noemie-kerroux/skull-web-prototype
*/
html, body {
margin: 0px;
padding: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: inherit;
text-decoration: none;
}
.content {
width: calc(100% - 40px);
max-width: 1280px;
margin: 0px auto;
}
.lineclear {
width: 100%;
display: block;
float: none;
clear: both;
}
header, footer {
padding: 20px 0px;
}
.large-section {
padding: 100px 0px;
}
header .sitename {
float: left;
display: flex;
align-items: center;
}
header .navigation {
float: right;
display: block;
}
header .burger-menu {
float: right;
display: none;
padding: 10px;
font-size: 0px;
line-height: 0px;
cursor: pointer;
}
header .burger-menu img {
width: 30px;
height: 30px;
}
header .sitename .logo {
width: 50px;
height: 50px;
margin-right: 15px;
}
header ul,
footer ul {
padding: 0px;
margin: 0px;
}
header ul li,
footer ul li {
list-style: none;
margin-right: 20px;
display: inline-block;
}
header ul li a,
footer ul li a {
padding: 10px;
display: block;
}
header ul li:last-child,
footer ul li:last-child {
margin-right: 0px;
}
@media screen and (max-width: 1279px) {
header .navigation {
display: none;
}
header .navigation.open {
display: block;
float: none;
clear: both;
}
header .burger-menu {
display: block;
}
header nav ul {
padding-top: 20px;
}
header ul li,
header ul li a {
display: block;
width: 100%;
}
}
This diff is collapsed.
jQuery(document).ready(function() {
jQuery(".burger-menu").click(function() {
jQuery(".navigation").toggleClass('open');
});
// Your code here
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Skull Web Prototype</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="page-container">
<header>
<div class="content">
<div class="sitename">
<img src="assets/images/logo.png" alt="" class="logo">
<div>Skull Web Prototype</div>
</div>
<div class="burger-menu">
<img src="assets/images/menu.png" alt="">
</div>
<nav class="navigation">
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="lineclear"></div>
</div>
</header>
<section class="large-section">
<div class="content">
<!-- Your content here -->
<h1>Skull Web Prototype</h1>
<div>
<h2>Subtitle</h2>
<p>Nisi mihi Phaedrum, inquam, tu mentitum aut Zenonem putas, quorum utrumque audivi, cum mihi nihil sane praeter sedulitatem probarent, omnes mihi Epicuri sententiae satis notae sunt. atque eos, quos nominavi, cum Attico nostro frequenter audivi, cum miraretur ille quidem utrumque, Phaedrum autem etiam amaret, cotidieque inter nos ea, quae audiebamus, conferebamus, neque erat umquam controversia, quid ego intellegerem, sed quid probarem.</p>
<h3>Title</h3>
<p>Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.</p>
</div>
</div>
</section>
<footer>
<div class="content">
<ul>
<li><a href="#">Foter link 1</a></li>
<li><a href="#">Foter link 2</a></li>
<li><a href="#">Foter link 3</a></li>
<li><a href="#">Foter link 4</a></li>
</ul>
</div>
</footer>
</div>
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>
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