Modernize html structure

This commit is contained in:
Pablo Moyano 2020-03-14 05:05:49 +01:00
parent fcca4bb86d
commit a4541c088d
2 changed files with 107 additions and 104 deletions

View File

@ -37,7 +37,7 @@ You probably already know that, otherwise you can visit him here "https://fosc.s
/*GLOBAL ATTRIBUTES*/ /*GLOBAL ATTRIBUTES*/
/**********************************************************************************/ /**********************************************************************************/
*{ * {
padding: 0; padding: 0;
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;

View File

@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"></html>
<!-- ****************************** --> <!-- ****************************** -->
<!-- * Ah shit, here we go again. * --> <!-- * Ah shit, here we go again. * -->
@ -9,112 +10,113 @@
<!-- Second, this document is free, so you can see it, use it and modify it as you wish. --> <!-- Second, this document is free, so you can see it, use it and modify it as you wish. -->
<!-- Finally, the document is divided into parts for better reading. The style pages and scripts are in different documents. The google fonts and others icons are linked in head section. --> <!-- Finally, the document is divided into parts for better reading. The style pages and scripts are in different documents. The google fonts and others icons are linked in head section. -->
<!-- That's all, thank you. --> <!-- That's all, thank you. -->
<html lang="en">
<head> <head>
<meta charset="utf-8">
<title>FOSC - Free Open Source Club</title> <title>FOSC - Free Open Source Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="FOSC, Hackerspace from Cartagena"> <meta name="description" content="FOSC, Hackerspace from Cartagena">
<meta name="keywords" content="Open Source, Free Software, Linux, Hackerspace, Foss"> <meta name="keywords" content="Open Source, Free Software, Linux, Hackerspace, Foss">
<meta name="author" content="FOSC"> <meta name="author" content="FOSC">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/Logo-invert.png" type="image/gif"> <link rel="icon" href="img/Logo-invert.png" type="image/gif">
<link rel="stylesheet" type="text/css" href="cs.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css"> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <!-- <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> -->
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>
</head> </head>
<header> <body>
<section class="navigation">
<div class="nav-container"> <header>
<div class="brand"> <section class="navigation">
<picture> <div class="nav-container">
<source type="image/webp" data-srcset="img/Logo-invert.webp"> <div class="brand">
<source type="image/png" data-srcset="img/Logo-invert.png"> <picture>
<img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;"> <source type="image/webp" data-srcset="img/Logo-invert.webp">
</picture> <source type="image/png" data-srcset="img/Logo-invert.png">
</div> <img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
<nav> </picture>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div> </div>
<ul class="nav-list"> <nav>
<li> <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<a href="https://fosc.space/"><i class="mdi mdi-home"></i>Home</a> <ul class="nav-list">
</li> <li>
<li> <a href="https://fosc.space/"><i class="mdi mdi-home"></i>Home</a>
<a href="https://blog.fosc.space"><i class="mdi mdi-notebook"></i>Blog</a> </li>
</li> <li>
<li> <a href="https://blog.fosc.space"><i class="mdi mdi-notebook"></i>Blog</a>
<a href="#!"><i class="mdi mdi-cogs"></i>Services</a> </li>
<ul class="nav-dropdown"> <li>
<li> <a href="#!"><i class="mdi mdi-cogs"></i>Services</a>
<a href="https://cloud.fosc.space">Cloud</a> <ul class="nav-dropdown">
</li> <li>
<li> <a href="https://cloud.fosc.space">Cloud</a>
<a href="https://doc.fosc.space">Wiki</a> </li>
</li> <li>
<li> <a href="https://doc.fosc.space">Wiki</a>
<a href="https://rss.fosc.space">RSS</a> </li>
</li> <li>
<li> <a href="https://rss.fosc.space">RSS</a>
<a href="https://netdata.fosc.space">NetData</a> </li>
</li> <li>
<li> <a href="https://netdata.fosc.space">NetData</a>
<a href="https://analytics.fosc.space">Analytics</a> </li>
</li> <li>
<li> <a href="https://analytics.fosc.space">Analytics</a>
<a href="https://git.fosc.space">Stolen Code</a> </li>
</li> <li>
</ul> <a href="https://git.fosc.space">Stolen Code</a>
</li> </li>
<li> </ul>
<a href="https://gallery.fosc.space"><i class="mdi mdi-image"></i>Gallery</a> </li>
</li> <li>
<li> <a href="https://gallery.fosc.space"><i class="mdi mdi-image"></i>Gallery</a>
<a href="https://download.fosc.space"><i class="mdi mdi-download"></i>Downloads</a> </li>
</li> <li>
<li> <a href="https://download.fosc.space"><i class="mdi mdi-download"></i>Downloads</a>
<a href="#contact"><i class="mdi mdi-account"></i>Contact</a> </li>
</li> <li>
</ul> <a href="#contact"><i class="mdi mdi-account"></i>Contact</a>
</nav> </li>
</div> </ul>
</section> </nav>
</div>
<script> </section>
(function($) { // Begin jQuery
$(function() { // DOM ready <script>
// If a link has a dropdown, add sub menu toggle. (function($) { // Begin jQuery
$('nav ul li a:not(:only-child)').click(function(e) { $(function() { // DOM ready
$(this).siblings('.nav-dropdown').toggle(); // If a link has a dropdown, add sub menu toggle.
// Close one dropdown when selecting another $('nav ul li a:not(:only-child)').click(function(e) {
$('.nav-dropdown').not($(this).siblings()).hide(); $(this).siblings('.nav-dropdown').toggle();
e.stopPropagation(); // Close one dropdown when selecting another
}); $('.nav-dropdown').not($(this).siblings()).hide();
// Clicking away from dropdown will remove the dropdown class e.stopPropagation();
$('html').click(function() { });
$('.nav-dropdown').hide(); // Clicking away from dropdown will remove the dropdown class
}); $('html').click(function() {
// Toggle open and close nav styles on click $('.nav-dropdown').hide();
$('#nav-toggle').click(function() { });
$('nav ul').slideToggle(); // Toggle open and close nav styles on click
}); $('#nav-toggle').click(function() {
// Hamburger to X toggle $('nav ul').slideToggle();
$('#nav-toggle').on('click', function() { });
this.classList.toggle('active'); // Hamburger to X toggle
}); $('#nav-toggle').on('click', function() {
}); // end DOM ready this.classList.toggle('active');
})(jQuery); // end jQuery });
</script> }); // end DOM ready
</header> })(jQuery); // end jQuery
</script>
</header>
<body>
<div class="hero"> <div class="hero">
<h1>Welcome to <span class="color">FOSC</span></h1> <h1>Welcome to <span class="color">FOSC</span></h1>
<h3>Hackerspace located at Polytechnic University of Cartagena</h3> <h3>Hackerspace located at Polytechnic University of Cartagena</h3>
@ -345,21 +347,22 @@
</div> </div>
</div> </div>
</div> </div>
<footer>
<hr>
<div class="foot-logo">
<picture>
<source type="image/webp" data-srcset="img/Logo-invert.webp">
<source type="image/png" data-srcset="img/Logo-invert.png">
<img class="lazy" data-src="img/Logo-invert.png">
</picture>
<a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
<div class="author">
<p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> and <a href="https://www.flaticon.com/authors/smalllikeart" title="Smalllikeart">Smalllikeart</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a>.</p>
</div>
</div>
</footer>
</body> </body>
<footer>
<hr>
<div class="foot-logo">
<picture>
<source type="image/webp" data-srcset="img/Logo-invert.webp">
<source type="image/png" data-srcset="img/Logo-invert.png">
<img class="lazy" data-src="img/Logo-invert.png">
</picture>
<a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
<div class="author">
<p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> and <a href="https://www.flaticon.com/authors/smalllikeart" title="Smalllikeart">Smalllikeart</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a>.</p>
</div>
</div>
</footer>
</html> </html>