clement callaert
2 years ago
40 changed files with 2729 additions and 0 deletions
@ -0,0 +1,22 @@ |
|||
const mongodb = require('mongodb'); |
|||
|
|||
const MongoClient = mongodb.MongoClient; |
|||
|
|||
let database; |
|||
|
|||
async function connectToDatabase() { |
|||
const client = await MongoClient.connect('mongodb://127.0.0.1:27017') |
|||
database = client.db('BDS'); |
|||
} |
|||
|
|||
function getDb() { |
|||
if (!database) { |
|||
throw { message: 'You must connect first!' }; |
|||
} |
|||
return database; |
|||
} |
|||
|
|||
module.exports = { |
|||
connectToDatabase: connectToDatabase, |
|||
getDb: getDb, |
|||
}; |
|||
@ -0,0 +1,37 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) |
|||
|
|||
## Getting started |
|||
|
|||
* [Usage](usage.md) — Overview of the project contents. |
|||
* [FAQ](faq.md) — Frequently asked questions along with their answers. |
|||
|
|||
## HTML5 Boilerplate core |
|||
|
|||
* [HTML](html.md) — Guide to the default HTML. |
|||
* [CSS](css.md) — Guide to the default CSS. |
|||
* [JavaScript](js.md) — Guide to the default JavaScript. |
|||
* [Everything else](misc.md). |
|||
|
|||
## Development |
|||
|
|||
* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further with |
|||
the boilerplate. |
|||
|
|||
## Related projects |
|||
|
|||
The [H5BP organization](https://github.com/h5bp) maintains several projects that |
|||
complement HTML5 Boilerplate, projects that can help you improve different |
|||
aspects of your website/web app (e.g.: the performance, security, etc.). |
|||
|
|||
* [Server Configs](https://github.com/h5bp/server-configs) — Fast and smart |
|||
configurations for web servers such as Apache and Nginx. |
|||
* [Apache](https://github.com/h5bp/server-configs-apache) |
|||
* [Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae) |
|||
* [Internet Information Services |
|||
(IIS)](https://github.com/h5bp/server-configs-iis) |
|||
* [lighttpd](https://github.com/h5bp/server-configs-lighttpd) |
|||
* [Nginx](https://github.com/h5bp/server-configs-nginx) |
|||
* [Node.js](https://github.com/h5bp/server-configs-node) |
|||
* [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) |
|||
* [create-html5-boilerplate](https://github.com/h5bp/create-html5-boilerplate) — Quick start HTML5 Boilerplate development |
|||
* [main.css](https://github.com/h5bp/main.css) — the main.css file included with HTML5 Boilerplate |
|||
@ -0,0 +1,44 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation |
|||
table of contents](TOC.md) |
|||
|
|||
# The CSS |
|||
|
|||
HTML5 Boilerplate's CSS includes: |
|||
|
|||
* [Normalize.css](#normalizecss) |
|||
* [main.css](#maincss) |
|||
|
|||
## Normalize.css |
|||
|
|||
In order to make browsers render all elements more consistently and in line with |
|||
modern standards, we include Normalize.css — a modern, HTML5-ready alternative |
|||
to CSS resets. |
|||
|
|||
As opposed to CSS resets, Normalize.css: |
|||
|
|||
* targets only the styles that need normalizing |
|||
* preserves useful browser defaults rather than erasing them |
|||
* corrects bugs and common browser inconsistencies |
|||
* improves usability with subtle improvements |
|||
* doesn't clutter the debugging tools |
|||
* has better documentation |
|||
|
|||
For more information about Normalize.css, please refer to its [project |
|||
page](https://necolas.github.io/normalize.css/). |
|||
|
|||
## main.css |
|||
|
|||
Several base styles are included that build upon `Normalize.css`. These styles: |
|||
|
|||
* provide basic typography settings that improve text readability |
|||
* protect against unwanted `text-shadow` during text highlighting |
|||
* tweak the default alignment of some elements (e.g.: `img`, `video`, |
|||
`fieldset`, `textarea`) |
|||
* style the prompt that is displayed to users using an outdated browser |
|||
* and more... |
|||
|
|||
These styles are included in |
|||
[main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css). |
|||
See the [main.css](https://github.com/h5bp/main.css) project |
|||
[documentation](https://github.com/h5bp/main.css/blob/master/README.md#features) |
|||
for a full discussion of these styles. |
|||
@ -0,0 +1,605 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation |
|||
table of contents](TOC.md) |
|||
|
|||
# Extend and customise HTML5 Boilerplate |
|||
|
|||
Here is some useful advice for how you can make your project with HTML5 |
|||
Boilerplate even better. We don't want to include it all by default, as not |
|||
everything fits with everyone's needs. |
|||
|
|||
* [App Stores](#app-stores) |
|||
* [DNS prefetching](#dns-prefetching) |
|||
* [Google Universal Analytics](#google-universal-analytics) |
|||
* [Internet Explorer](#internet-explorer) |
|||
* [Miscellaneous](#miscellaneous) |
|||
* [News Feeds](#news-feeds) |
|||
* [Search](#search) |
|||
* [Social Networks](#social-networks) |
|||
* [URLs](#urls) |
|||
* [Web Apps](#web-apps) |
|||
* [security.txt](#security.txt) |
|||
|
|||
## App Stores |
|||
|
|||
### Smart App Banners in iOS 6+ Safari |
|||
|
|||
Stop bothering everyone with gross modals advertising your entry in the App |
|||
Store. Including the following [meta |
|||
tag](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) |
|||
will unobtrusively give the user the option to download your iOS app, or open it |
|||
with some data about the user's current state on the website. |
|||
|
|||
```html |
|||
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT"> |
|||
``` |
|||
|
|||
## DNS prefetching |
|||
|
|||
In short, DNS Prefetching is a method of informing the browser of domain names |
|||
referenced on a site so that the client can resolve the DNS for those hosts, |
|||
cache them, and when it comes time to use them, have a faster turn around on the |
|||
request. |
|||
|
|||
### Implicit prefetches |
|||
|
|||
There is a lot of prefetching done for you automatically by the browser. When |
|||
the browser encounters an anchor in your html that does not share the same |
|||
domain name as the current location the browser requests, from the client OS, |
|||
the IP address for this new domain. The client first checks its cache and then, |
|||
lacking a cached copy, makes a request from a DNS server. These requests happen |
|||
in the background and are not meant to block the rendering of the page. |
|||
|
|||
The goal of this is that when the foreign IP address is finally needed it will |
|||
already be in the client cache and will not block the loading of the foreign |
|||
content. Fewer requests result in faster page load times. The perception of this |
|||
is increased on a mobile platform where DNS latency can be greater. |
|||
|
|||
### Explicit prefetches |
|||
|
|||
Typically the browser only scans the HTML for foreign domains. If you have |
|||
resources that are outside of your HTML (a javascript request to a remote server |
|||
or a CDN that hosts content that may not be present on every page of your site, |
|||
for example) then you can queue up a domain name to be prefetched. |
|||
|
|||
```html |
|||
<link rel="dns-prefetch" href="//example.com"> |
|||
<link rel="dns-prefetch" href="https://ajax.googleapis.com"> |
|||
``` |
|||
|
|||
You can use as many of these as you need, but it's best if they are all |
|||
immediately after the [Meta |
|||
Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset) |
|||
element (which should go right at the top of the `head`), so the browser can act |
|||
on them ASAP. |
|||
|
|||
#### Common Prefetch Links |
|||
|
|||
Amazon S3: |
|||
|
|||
```html |
|||
<link rel="dns-prefetch" href="//s3.amazonaws.com"> |
|||
``` |
|||
|
|||
Google APIs: |
|||
|
|||
```html |
|||
<link rel="dns-prefetch" href="https://ajax.googleapis.com"> |
|||
``` |
|||
|
|||
Microsoft Ajax Content Delivery Network: |
|||
|
|||
```html |
|||
<link rel="dns-prefetch" href="//ajax.microsoft.com"> |
|||
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com"> |
|||
``` |
|||
|
|||
### Further reading about DNS prefetching |
|||
|
|||
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control |
|||
* https://dev.chromium.org/developers/design-documents/dns-prefetching |
|||
* https://docs.microsoft.com/en-us/archive/blogs/ie/internet-explorer-9-network-performance-improvements |
|||
|
|||
## Google Universal Analytics |
|||
|
|||
### More tracking settings |
|||
|
|||
The [optimized Google Universal Analytics |
|||
snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) |
|||
included with HTML5 Boilerplate includes something like this: |
|||
|
|||
```js |
|||
ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview'); |
|||
``` |
|||
|
|||
To customize further, see Google's [Advanced |
|||
Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/), |
|||
[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages), |
|||
and |
|||
[Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) |
|||
Docs. |
|||
|
|||
### Track jQuery AJAX requests in Google Analytics |
|||
|
|||
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google |
|||
Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/). |
|||
|
|||
Add this to `plugins.js`: |
|||
|
|||
```js |
|||
/* |
|||
* Log all jQuery AJAX requests to Google Analytics |
|||
* See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ |
|||
*/ |
|||
if (typeof ga !== "undefined" && ga !== null) { |
|||
$(document).ajaxSend(function(event, xhr, settings){ |
|||
ga('send', 'pageview', settings.url); |
|||
}); |
|||
} |
|||
``` |
|||
|
|||
### Track JavaScript errors in Google Analytics |
|||
|
|||
Add this function after `ga` is defined: |
|||
|
|||
```js |
|||
(function(window){ |
|||
var undefined, |
|||
link = function (href) { |
|||
var a = window.document.createElement('a'); |
|||
a.href = href; |
|||
return a; |
|||
}; |
|||
window.onerror = function (message, file, line, column) { |
|||
var host = link(file).hostname; |
|||
ga('send', { |
|||
'hitType': 'event', |
|||
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', |
|||
'eventAction': message, |
|||
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(), |
|||
'nonInteraction': 1 |
|||
}); |
|||
}; |
|||
}(window)); |
|||
``` |
|||
|
|||
### Track page scroll |
|||
|
|||
Add this function after `ga` is defined. Note, the following snippet requires jQuery. |
|||
|
|||
```js |
|||
$(function(){ |
|||
var isDuplicateScrollEvent, |
|||
scrollTimeStart = new Date, |
|||
$window = $(window), |
|||
$document = $(document), |
|||
scrollPercent; |
|||
|
|||
$window.scroll(function() { |
|||
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height()); |
|||
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% |
|||
isDuplicateScrollEvent = 1; |
|||
ga('send', 'event', 'scroll', |
|||
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's' |
|||
); |
|||
} |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
## Internet Explorer |
|||
|
|||
### IE Pinned Sites |
|||
|
|||
Enabling your application for pinning will allow IE users to add it to their |
|||
Windows Taskbar and Start Menu. This comes with a range of new tools that you |
|||
can easily configure with the elements below. See more [documentation on IE |
|||
Pinned |
|||
Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg491731(v%3dvs.85)). |
|||
|
|||
### Name the Pinned Site for Windows |
|||
|
|||
Without this rule, Windows will use the page title as the name for your |
|||
application. |
|||
|
|||
```html |
|||
<meta name="application-name" content="Sample Title"> |
|||
``` |
|||
|
|||
### Give your Pinned Site a tooltip |
|||
|
|||
You know — a tooltip. A little textbox that appears when the user holds their |
|||
mouse over your Pinned Site's icon. |
|||
|
|||
```html |
|||
<meta name="msapplication-tooltip" content="A description of what this site does."> |
|||
``` |
|||
|
|||
### Set a default page for your Pinned Site |
|||
|
|||
If the site should go to a specific URL when it is pinned (such as the |
|||
homepage), enter it here. One idea is to send it to a special URL so you can |
|||
track the number of pinned users, like so: |
|||
`https://www.example.com/index.html?pinned=true` |
|||
|
|||
```html |
|||
<meta name="msapplication-starturl" content="https://www.example.com/index.html?pinned=true"> |
|||
``` |
|||
|
|||
### Recolor IE's controls manually for a Pinned Site |
|||
|
|||
IE will automatically use the overall color of your Pinned Site's favicon to |
|||
shade its browser buttons. UNLESS you give it another color here. Only use named |
|||
colors (`red`) or hex colors (`#ff0000`). |
|||
|
|||
```html |
|||
<meta name="msapplication-navbutton-color" content="#ff0000"> |
|||
``` |
|||
|
|||
### Manually set the window size of a Pinned Site |
|||
|
|||
If the site should open at a certain window size once pinned, you can specify |
|||
the dimensions here. It only supports static pixel dimensions. 800x600 minimum. |
|||
|
|||
```html |
|||
<meta name="msapplication-window" content="width=800;height=600"> |
|||
``` |
|||
|
|||
### Jump List "Tasks" for Pinned Sites |
|||
|
|||
Add Jump List Tasks that will appear when the Pinned Site's icon gets a |
|||
right-click. Each Task goes to the specified URL, and gets its own mini icon |
|||
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you need. |
|||
|
|||
```html |
|||
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"> |
|||
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"> |
|||
``` |
|||
|
|||
### (Windows 8) High quality visuals for Pinned Sites |
|||
|
|||
Windows 8 adds the ability for you to provide a PNG tile image and specify the |
|||
tile's background color. [Full details on the IE |
|||
blog](https://docs.microsoft.com/en-us/archive/blogs/ie/high-quality-visuals-for-pinned-sites-in-windows-8). |
|||
|
|||
* Create a 144x144 image of your site icon, filling all of the canvas, and using |
|||
a transparent background. |
|||
* Save this image as a 32-bit PNG and optimize it without reducing colour-depth. |
|||
It can be named whatever you want (e.g. `metro-tile.png`). |
|||
* To reference the tile and its color, add the HTML `meta` elements described in |
|||
the IE Blog post. |
|||
|
|||
### (Windows 8) Badges for Pinned Sites |
|||
|
|||
IE will poll an XML document for badge information to display on your app's tile |
|||
in the Start screen. The user will be able to receive these badge updates even |
|||
when your app isn't actively running. The badge's value can be a number, or one |
|||
of a predefined list of glyphs. |
|||
|
|||
* [Tutorial on IEBlog with link to badge XML |
|||
schema](https://docs.microsoft.com/en-us/archive/blogs/ie/pinned-sites-in-windows-8) |
|||
* [Available badge |
|||
values](https://docs.microsoft.com/en-us/uwp/schemas/tiles/badgeschema/element-badge) |
|||
|
|||
```html |
|||
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=https://www.example.com/path/to/file.xml"> |
|||
``` |
|||
|
|||
## Search |
|||
|
|||
### Direct search spiders to your sitemap |
|||
|
|||
After creating a [sitemap](https://www.sitemaps.org/protocol.html) |
|||
|
|||
Submit it to search engine tool: |
|||
* [Google](https://www.google.com/webmasters/tools/sitemap-list) |
|||
* [Bing](https://www.bing.com/toolbox/webmaster) |
|||
* [Yandex](https://webmaster.yandex.com/) |
|||
* [Baidu](https://zhanzhang.baidu.com/) OR Insert the following line anywhere in |
|||
your robots.txt file, specifying the path to your sitemap: |
|||
``` |
|||
Sitemap: https://example.com/sitemap_location.xml |
|||
``` |
|||
|
|||
### Hide pages from search engines |
|||
|
|||
According to Heather Champ, former community manager at Flickr, you should not |
|||
allow search engines to index your "Contact Us" or "Complaints" page if you |
|||
value your sanity. This is an HTML-centric way of achieving that. |
|||
|
|||
```html |
|||
<meta name="robots" content="noindex"> |
|||
``` |
|||
|
|||
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES. |
|||
|
|||
### Firefox and IE Search Plugins |
|||
|
|||
Sites with in-site search functionality should be strongly considered for a |
|||
browser search plugin. A "search plugin" is an XML file which defines how your |
|||
plugin behaves in the browser. [How to make a browser search |
|||
plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin). |
|||
|
|||
```html |
|||
<link rel="search" title="" type="application/opensearchdescription+xml" href=""> |
|||
``` |
|||
|
|||
|
|||
## Miscellaneous |
|||
|
|||
* Use |
|||
[polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). |
|||
|
|||
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via |
|||
[microdata](http://microformats.org/wiki/microdata)) for optimum search |
|||
results |
|||
[visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html). |
|||
|
|||
* If you want to disable the translation prompt in Chrome or block Google |
|||
Translate from translating your web page, use [`<meta name="google" |
|||
content="notranslate">`](https://support.google.com/webmasters/answer/79812). |
|||
To disable translation for a particular section of the web page, add |
|||
[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276). |
|||
|
|||
* If you want to disable the automatic detection and formatting of possible |
|||
phone numbers in Safari on iOS, use [`<meta name="format-detection" |
|||
content="telephone=no">`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html). |
|||
|
|||
* Avoid development/stage websites "leaking" into SERPs (search engine results |
|||
page) by [implementing X-Robots-tag |
|||
headers](https://github.com/h5bp/html5-boilerplate/issues/804). |
|||
|
|||
|
|||
## News Feeds |
|||
|
|||
### RSS |
|||
|
|||
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from |
|||
scratch](https://www.rssboard.org/rss-specification)? |
|||
|
|||
```html |
|||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> |
|||
``` |
|||
|
|||
### Atom |
|||
|
|||
Atom is similar to RSS, and you might prefer to use it instead of or in addition |
|||
to it. [See what Atom's all |
|||
about](https://en.wikipedia.org/wiki/Atom_(Web_standard)). |
|||
|
|||
```html |
|||
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml"> |
|||
``` |
|||
|
|||
### Pingbacks |
|||
|
|||
Your server may be notified when another site links to yours. The href attribute |
|||
should contain the location of your pingback service. |
|||
|
|||
```html |
|||
<link rel="pingback" href=""> |
|||
``` |
|||
|
|||
* High-level explanation: |
|||
https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks |
|||
* Step-by-step example case: |
|||
https://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 |
|||
* PHP pingback service: |
|||
https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ |
|||
|
|||
|
|||
|
|||
## Social Networks |
|||
|
|||
### Facebook Open Graph data |
|||
|
|||
You can control the information that Facebook and others display when users |
|||
share your site. Below are just the most basic data points you might need. For |
|||
specific content types (including "website"), see [Facebook's built-in Open |
|||
Graph content |
|||
templates](https://developers.facebook.com/docs/sharing/opengraph/using-objects). |
|||
Take full advantage of Facebook's support for complex data and activity by |
|||
following the [Open Graph |
|||
tutorial](https://developers.facebook.com/docs/sharing/webmasters/getting-started). |
|||
|
|||
For a reference of Open Graph's markup and properties, you may check [Facebook's |
|||
Open Graph Protocol reference](https://ogp.me). Finally, you can validate your |
|||
markup with the [Facebook Object |
|||
Debugger](https://developers.facebook.com/tools/debug/) (needs registration to |
|||
Facebook). |
|||
|
|||
```html |
|||
<meta property="fb:app_id" content="123456789"> |
|||
<meta property="og:url" content="https://www.example.com/path/to/page.html"> |
|||
<meta property="og:type" content="website"> |
|||
<meta property="og:title" content=""> |
|||
<meta property="og:image" content="https://www.example.com/path/to/image.jpg"> |
|||
<meta property="og:description" content=""> |
|||
<meta property="og:site_name" content=""> |
|||
<meta property="article:author" content=""> |
|||
``` |
|||
|
|||
### Twitter Cards |
|||
|
|||
Twitter provides a snippet specification that serves a similar purpose to Open |
|||
Graph. In fact, Twitter will use Open Graph when Cards is not available. You can |
|||
read more about the various snippet formats in the |
|||
[official Twitter Cards |
|||
documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards), |
|||
and you can validate your markup with the [Card |
|||
validator](https://cards-dev.twitter.com/validator) (needs registration to |
|||
Twitter). |
|||
|
|||
```html |
|||
<meta name="twitter:card" content="summary"> |
|||
<meta name="twitter:site" content="@site_account"> |
|||
<meta name="twitter:creator" content="@individual_account"> |
|||
<meta name="twitter:url" content="https://www.example.com/path/to/page.html"> |
|||
<meta name="twitter:title" content=""> |
|||
<meta name="twitter:description" content=""> |
|||
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg"> |
|||
``` |
|||
|
|||
### Schema.org |
|||
|
|||
Google also provides a snippet specification that serves a similar purpose to |
|||
Facebook's Open Graph or Twitter Cards. This metadata is a subset of |
|||
[schema.org's microdata vocabulary](https://schema.org/), which covers many |
|||
other schemas that can describe the content of your pages to search engines. For |
|||
this reason, this metadata is more generic for SEO, notably for Google's |
|||
search-engine, although this vocabulary is also used by Microsoft, Pinterest and |
|||
Yandex. |
|||
|
|||
You can validate your markup with the [Structured Data Testing |
|||
Tool](https://search.google.com/structured-data/testing-tool). Also, please |
|||
note that this markup requires to add attributes to your top `html` tag. |
|||
|
|||
```html |
|||
<html class="no-js" lang="" itemscope itemtype="https://schema.org/Article"> |
|||
<head> |
|||
|
|||
<link rel="author" href=""> |
|||
<link rel="publisher" href=""> |
|||
<meta itemprop="name" content=""> |
|||
<meta itemprop="description" content=""> |
|||
<meta itemprop="image" content=""> |
|||
``` |
|||
|
|||
## URLs |
|||
|
|||
### Canonical URL |
|||
|
|||
Signal to search engines and others "Use this URL for this page!" Useful when |
|||
parameters after a `#` or `?` is used to control the display state of a page. |
|||
`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as |
|||
the cleaner, more accurate `https://www.example.com/cart.html`. |
|||
|
|||
```html |
|||
<link rel="canonical" href=""> |
|||
``` |
|||
|
|||
### Separate mobile URLs |
|||
|
|||
If you use separate URLs for desktop and mobile users, you should consider |
|||
helping search engine algorithms better understand the configuration on your web |
|||
site. |
|||
|
|||
This can be done by adding the following annotations in your HTML pages: |
|||
|
|||
* on the desktop page, add the `link rel="alternate"` tag pointing to the |
|||
corresponding mobile URL, e.g.: |
|||
|
|||
`<link rel="alternate" media="only screen and (max-width: 640px)" |
|||
href="https://m.example.com/page.html" >` |
|||
|
|||
* on the mobile page, add the `link rel="canonical"` tag pointing to the |
|||
corresponding desktop URL, e.g.: |
|||
|
|||
`<link rel="canonical" href="https://www.example.com/page.html">` |
|||
|
|||
For more information please see: |
|||
|
|||
* https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls |
|||
|
|||
|
|||
## Web Apps |
|||
|
|||
There are a couple of meta tags that provide information about a web app when |
|||
added to the Home Screen on iOS: |
|||
|
|||
* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and |
|||
provide the default iOS app view. You can control the color scheme of the |
|||
default view by adding `apple-mobile-web-app-status-bar-style`. |
|||
|
|||
```html |
|||
<meta name="apple-mobile-web-app-capable" content="yes"> |
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
|||
``` |
|||
|
|||
* You can use `apple-mobile-web-app-title` to add a specific sites name for the |
|||
Home Screen icon. |
|||
|
|||
```html |
|||
<meta name="apple-mobile-web-app-title" content=""> |
|||
``` |
|||
|
|||
For further information please read the [official |
|||
documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) |
|||
on Apple's site. |
|||
|
|||
|
|||
### Apple Touch Icons |
|||
|
|||
Apple touch icons are used as icons when a user adds your webapp to the home |
|||
screen of an iOS devices. |
|||
|
|||
Though the dimensions of the icon can vary between iOS devices and versions one |
|||
`180×180px` touch icon named `icon.png` and including the following in the |
|||
`<head>` of the page is enough: |
|||
|
|||
```html |
|||
<link rel="apple-touch-icon" href="icon.png"> |
|||
``` |
|||
|
|||
For a more comprehensive overview, please refer to Mathias' [article on Touch |
|||
Icons](https://mathiasbynens.be/notes/touch-icons). |
|||
|
|||
|
|||
### Apple Touch Startup Image |
|||
|
|||
Apart from that it is possible to add start-up screens for web apps on iOS. This |
|||
basically works by defining `apple-touch-startup-image` with an according link |
|||
to the image. Since iOS devices have different screen resolutions it maybe |
|||
necessary to add media queries to detect which image to load. Here is an example |
|||
for an iPhone: |
|||
|
|||
```html |
|||
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup.png"> |
|||
``` |
|||
|
|||
|
|||
### Chrome Mobile web apps |
|||
|
|||
Chrome Mobile has a specific meta tag for making apps [installable to the |
|||
homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen) |
|||
which tries to be a more generic replacement to Apple's proprietary meta tag: |
|||
|
|||
```html |
|||
<meta name="mobile-web-app-capable" content="yes"> |
|||
``` |
|||
|
|||
Same applies to the touch icons: |
|||
|
|||
```html |
|||
<link rel="icon" sizes="192x192" href="highres-icon.png"> |
|||
``` |
|||
|
|||
### Theme Color |
|||
|
|||
You can add the [`theme-color` meta |
|||
extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color) |
|||
in the `<head>` of your pages to suggest the color that browsers and OSes should |
|||
use if they customize the display of individual pages in their UIs with varying |
|||
colors. |
|||
|
|||
```html |
|||
<meta name="theme-color" content="#ff69b4"> |
|||
``` |
|||
|
|||
The `content` attribute extension can take any valid CSS color. |
|||
|
|||
Currently, the `theme-color` meta extension is supported by [Chrome 39+ for |
|||
Android |
|||
Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android). |
|||
|
|||
|
|||
## security.txt |
|||
|
|||
When security risks in web services are discovered by users they often lack the |
|||
channels to disclose them properly. As a result, security issues may be left |
|||
unreported. |
|||
|
|||
Security.txt defines a standard to help organizations define the process for |
|||
users to disclose security vulnerabilities securely. Include a text file on your |
|||
server at `.well-known/security.txt` with the relevant contact details. |
|||
|
|||
Check [https://securitytxt.org/](https://securitytxt.org/) for more details. |
|||
@ -0,0 +1,42 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation |
|||
table of contents](TOC.md) |
|||
|
|||
# Frequently asked questions |
|||
|
|||
* [Why is the Google Analytics code at the bottom? Google recommends it be |
|||
placed in the |
|||
`<head>`.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head) |
|||
* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is |
|||
released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released) |
|||
* [Where can I get help with support |
|||
questions?](#where-can-i-get-help-with-support-questions) |
|||
|
|||
--- |
|||
|
|||
## Why is the Google Analytics code at the bottom? Google recommends it be placed in the `<head>`. |
|||
|
|||
The main advantage of placing it in the `<head>` is that you will track the |
|||
user's `pageview` even if they leave the page before it has been fully loaded. |
|||
|
|||
Here's a handy quote from [Mathias |
|||
Bynens](https://mathiasbynens.be/notes/async-analytics-snippet#comment-50) about |
|||
our placement choice. |
|||
>I should point out that it’s Google — not me — recommending to place this |
|||
script before all other scripts in the document. The only real advantage is to |
|||
catch a pageView call if your page fails to load completely (for example, if the |
|||
user aborts loading, or quickly closes the page, etc.). Personally, I wouldn’t |
|||
count that as a page view, so I actually prefer to place this script at the |
|||
bottom, after all other scripts. This keeps all the scripts together and |
|||
reinforces that scripts at the bottom are the right move. (Usually I concatenate |
|||
and minify all my scripts into one .js file — the GA snippet being the suffix.) |
|||
|
|||
## Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released? |
|||
|
|||
No, just as you don't normally replace the foundation of a house once it was |
|||
built. However, there is nothing stopping you from trying to work in the latest |
|||
changes, but you'll have to assess the costs/benefits of doing so. |
|||
|
|||
## Where can I get help with support questions? |
|||
|
|||
Please ask for help on |
|||
[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate). |
|||
@ -0,0 +1,253 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation |
|||
table of contents](TOC.md) |
|||
|
|||
# The HTML |
|||
|
|||
By default, HTML5 Boilerplate provides two `html` pages: |
|||
|
|||
* [`index.html`](#indexhtml) - a default HTML skeleton that should form the |
|||
basis of all pages on your website |
|||
* `404.html` - a placeholder 404 error page |
|||
|
|||
## `index.html` |
|||
|
|||
### The `no-js` Class |
|||
|
|||
The `no-js` class is provided in order to allow you to more easily and |
|||
explicitly add custom styles based on whether JavaScript is disabled (`.no-js`) |
|||
or enabled (`.js`). Using this technique also helps [avoid the |
|||
FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/). |
|||
|
|||
### Language Attribute |
|||
|
|||
Please consider specifying the language of your content by adding a |
|||
[value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) |
|||
to the `lang` attribute in the `<html>` as in this example: |
|||
|
|||
```html |
|||
<html class="no-js" lang="en"> |
|||
``` |
|||
|
|||
### The order of the `<title>` and `<meta>` tags |
|||
|
|||
The charset declaration (`<meta charset="utf-8">`) must be included completely |
|||
within the [first 1024 bytes of the |
|||
document](https://html.spec.whatwg.org/multipage/semantics.html#charset) |
|||
and should be specified as early as possible (before any content that could be |
|||
controlled by an attacker, such as a `<title>` element) in order to avoid a |
|||
potential [encoding-related security |
|||
issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki) |
|||
in Internet Explorer |
|||
|
|||
### Meta Description |
|||
|
|||
The `description` meta tag provides a short description of the page. In some |
|||
situations this description is used as a part of the snippet shown in the search |
|||
results. |
|||
|
|||
```html |
|||
<meta name="description" content="This is a description"> |
|||
``` |
|||
|
|||
Google's [Create good meta |
|||
descriptions](https://support.google.com/webmasters/answer/35624?hl=en#meta-descriptions) |
|||
documentation has useful tips on creating an effective description. |
|||
|
|||
### Mobile Viewport |
|||
|
|||
There are a few different options that you can use with the [`viewport` meta |
|||
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and |
|||
Media Queries - The Complete Idiot's Guide"). You can find out more in [the MDN |
|||
Web |
|||
Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). |
|||
HTML5 Boilerplate comes with a simple setup that strikes a good balance for |
|||
general use cases. |
|||
|
|||
```html |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
``` |
|||
|
|||
If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you |
|||
can do so with additional viewport parameters. [Check the WebKit |
|||
blog](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) for |
|||
details. |
|||
|
|||
### Open Graph Metadata |
|||
|
|||
The [Open Graph Protocol](https://ogp.me/) allows you to define the way your |
|||
site is presented when referenced on third party sites and applications |
|||
(Facebook, Twitter, LinkedIn). The protocol provides a series of meta elements |
|||
that define the details of your site. The required attributes define the title, |
|||
preview image, URL, and [type](https://ogp.me/#types) (e.g., video, music, |
|||
website, article). |
|||
|
|||
``` html |
|||
<meta property="og:title" content=""> |
|||
<meta property="og:type" content=""> |
|||
<meta property="og:url" content=""> |
|||
<meta property="og:image" content=""> |
|||
``` |
|||
|
|||
In addition to these four attributes there are many more attributes you can use |
|||
to add more richness to the description of your site. This just represents the |
|||
most basic implementation. |
|||
|
|||
To see a working example, the following is the open graph metadata for the HTML5 |
|||
Boilerplate site. In addition to the required fields we add `og:description` to |
|||
describe the site in more detail. |
|||
|
|||
``` html |
|||
<meta name="og:url" content="https://html5boilerplate.com/"> |
|||
<meta name="og:title" content="HTML5 ★ BOILERPLATE"> |
|||
<meta name="og:type" content="website"> |
|||
<meta name="og:description" content="The web’s most popular front-end template which helps you build fast, robust, and adaptable web apps or sites."> |
|||
<meta name="og:image" content="https://html5boilerplate.com/icon.png"> |
|||
``` |
|||
|
|||
### Web App Manifest |
|||
|
|||
HTML5 Boilerplate includes a simple web app manifest file. |
|||
|
|||
The web app manifest is a simple JSON file that allows you to control how your |
|||
app appears on a device's home screen, what it looks like when it launches in |
|||
that context and what happens when it is launched. This allows for much greater` |
|||
control over the UI of a saved site or web app on a mobile device. |
|||
|
|||
It's linked to from the HTML as follows: |
|||
|
|||
```html |
|||
<link rel="manifest" href="site.webmanifest"> |
|||
``` |
|||
|
|||
Our |
|||
[site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) |
|||
contains a very skeletal "app" definition, just to show the basic usage. You |
|||
should fill this file out with [more information about your site or |
|||
application](https://developer.mozilla.org/en-US/docs/Web/Manifest) |
|||
|
|||
### Favicons and Touch Icon |
|||
|
|||
The shortcut icons should be put in the root directory of your site. |
|||
`favicon.ico` is automatically picked up by browsers if it's placed in the root. |
|||
HTML5 Boilerplate comes with a default set of icons (include favicon and one |
|||
Apple Touch Icon) that you can use as a baseline to create your own. |
|||
|
|||
Please refer to the more detailed description in the [Extend section](extend.md) |
|||
of these docs. |
|||
|
|||
### The Content Area |
|||
|
|||
The central part of the boilerplate template is pretty much empty. This is |
|||
intentional, in order to make the boilerplate suitable for both web page and web |
|||
app development. |
|||
|
|||
### Modernizr |
|||
|
|||
HTML5 Boilerplate uses a custom build of Modernizr. |
|||
|
|||
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes |
|||
to the `html` element based on the results of feature test and which ensures |
|||
that all browsers can make use of HTML5 elements (as it includes the HTML5 |
|||
Shiv). This allows you to target parts of your CSS and JavaScript based on the |
|||
features supported by a browser. |
|||
|
|||
Starting with version 3 Modernizr can be customized using the |
|||
[modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) |
|||
and the [Modernizr command line |
|||
utility](https://www.npmjs.com/package/modernizr-cli). |
|||
|
|||
### What About Polyfills? |
|||
|
|||
If you need to include |
|||
[polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill) in your |
|||
project, you must make sure those load before any other JavaScript. If you're |
|||
using a polyfill CDN service, like [polyfill.io](https://polyfill.io/v3/), just put |
|||
it before the other scripts in the bottom of the page: |
|||
|
|||
```html |
|||
<script src="js/vendor/modernizr-3.10.0.min.js"></script> |
|||
<script src="https://polyfill.io/v3/polyfill.min.js"></script> |
|||
<script src="js/plugins.js"></script> |
|||
<script src="js/main.js"></script> |
|||
</body> |
|||
``` |
|||
|
|||
If you like to just include the polyfills yourself, you could include them in |
|||
`js/plugins.js`. When you have a bunch of polyfills to load in, you could also |
|||
create a `polyfills.js` file in the `js/vendor` directory or include the files |
|||
individually and combine them using a build tool. Always ensure that the |
|||
polyfills are all loaded before any other JavaScript. |
|||
|
|||
There are some misconceptions about Modernizr and polyfills. It's important to |
|||
understand that Modernizr just handles feature checking, not polyfilling itself. |
|||
The only thing Modernizr does regarding polyfills is that the team maintains [a |
|||
huge list of cross Browser |
|||
polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). |
|||
|
|||
### jQuery |
|||
|
|||
As of v8.0.0 we no longer include jQuery by default. Web development has |
|||
changed a lot since we started this project and while many millions of sites |
|||
still use jQuery there are many sites and applications that don't. 10 years ago |
|||
jQuery _was_ JavaScript for most developers. That's not the case any more so |
|||
we've made the decision to remove jQuery from the project. |
|||
|
|||
If you're interested in including it, you can easily install jQuery using the |
|||
following command: |
|||
|
|||
``` |
|||
npm install jQuery |
|||
``` |
|||
|
|||
You can then copy the minified file into the `vendor` folder and add jQuery |
|||
to the `index.html` manually. |
|||
|
|||
To load jQuery from a CDN with a local fallback you can use the following: |
|||
|
|||
``` html |
|||
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> |
|||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.5.1.min.js"><\/script>')</script> |
|||
``` |
|||
|
|||
### Google Universal Analytics Tracking Code |
|||
|
|||
Finally, an optimized version of the Google Universal Analytics tracking code is |
|||
included. |
|||
|
|||
We use `analytics.js` rather than the newer `gtag.js` as [it's faster and |
|||
supports tasks and |
|||
plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370) |
|||
|
|||
Starting with version 8.0.0 we, by default, [anonymize IP |
|||
addresses](https://support.google.com/analytics/answer/2763052). By |
|||
default Google Analytics records the full IP address of a user visiting the |
|||
site, but that full IP address is never available to the Google Analytics |
|||
property admin. By anonymizing the IP address you can make your site more |
|||
GDPR-compliant as a full IP address can be defined as PII (personally |
|||
identifiable information.) |
|||
|
|||
The beacon transport mechanism is used to send all hits [which saves HTTP |
|||
requests and improves |
|||
performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js). |
|||
|
|||
Google recommends that this script be placed at the top of the page. Factors to |
|||
consider: if you place this script at the top of the page, you’ll be able to |
|||
count users who don’t fully load the page, and you’ll incur the max number of |
|||
simultaneous connections of the browser. |
|||
|
|||
Please be aware that while Google [states that it is fully GDPR compliant](https://privacy.google.com/businesses/compliance/), |
|||
it is still possible to use analytics to violate GDPR. |
|||
|
|||
Further information: |
|||
|
|||
* [Introduction to |
|||
Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/) |
|||
* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/) |
|||
* [Privacy Controls in Google Analytics](https://support.google.com/analytics/answer/9019185) |
|||
|
|||
**N.B.** The Google Analytics snippet is included by default mainly because |
|||
Google Analytics is [currently one of the most popular tracking |
|||
solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there. |
|||
However, its usage isn't set in stone, and you SHOULD consider exploring the |
|||
[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software) and |
|||
use whatever suits your needs best. |
|||
@ -0,0 +1,35 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation |
|||
table of contents](TOC.md) |
|||
|
|||
# The JavaScript |
|||
|
|||
Information about the default JavaScript included in the project. |
|||
|
|||
## main.js |
|||
|
|||
This file can be used to contain or reference your site/app JavaScript code. If |
|||
you're working on something more advanced you might replace this file entirely. |
|||
That's cool. |
|||
|
|||
## plugins.js |
|||
|
|||
This file can be used to contain all your plugins, such as jQuery plugins and |
|||
other 3rd party scripts for a simple site. |
|||
|
|||
One approach is to put jQuery plugins inside of a `(function($){ ...})(jQuery);` |
|||
closure to make sure they're in the jQuery namespace safety blanket. Read more |
|||
about [jQuery plugin authoring](https://learn.jquery.com/plugins/). |
|||
|
|||
By default the `plugins.js` file contains a small script to avoid `console` |
|||
errors in browsers that lack a `console`. The script will make sure that, if a |
|||
console method isn't available, that method will have the value of empty |
|||
function, thus, preventing the browser from throwing an error. |
|||
|
|||
## vendor |
|||
|
|||
This directory can be used to contain all 3rd party library code. |
|||
|
|||
Our custom build of the Modernizr library is included by |
|||
default. You may wish to create your own [custom Modernizr build with the online |
|||
builder](https://modernizr.com/download/) or [command line |
|||
tool](https://modernizr.com/docs#command-line-config). |
|||
@ -0,0 +1,203 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation |
|||
table of contents](TOC.md) |
|||
|
|||
# Miscellaneous |
|||
|
|||
* [.gitignore](#gitignore) |
|||
* [.editorconfig](#editorconfig) |
|||
* [Server Configuration](#server-configuration) |
|||
* [robots.txt](#robotstxt) |
|||
* [humans.txt](#humanstxt) |
|||
* [browserconfig.xml](#browserconfigxml) |
|||
* [package.json](#packagejson) |
|||
|
|||
-- |
|||
|
|||
## .gitignore |
|||
|
|||
HTML5 Boilerplate includes a basic project-level `.gitignore`. This should |
|||
primarily be used to avoid certain project-level files and directories from |
|||
being kept under source control. Different development-environments will |
|||
benefit from different collections of ignores. |
|||
|
|||
OS-specific and editor-specific files should be ignored using a "global |
|||
ignore" that applies to all repositories on your system. |
|||
|
|||
For example, add the following to your `~/.gitconfig`, where the `.gitignore` |
|||
in your HOME directory contains the files and directories you'd like to |
|||
globally ignore: |
|||
|
|||
```gitignore |
|||
[core] |
|||
excludesfile = ~/.gitignore |
|||
``` |
|||
|
|||
* More on global ignores: [https://help.github.com/articles/ignoring-files/](https://help.github.com/en/github/using-git/ignoring-files) |
|||
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore |
|||
|
|||
## .editorconfig |
|||
|
|||
The `.editorconfig` file is provided in order to encourage and help you and |
|||
your team define and maintain consistent coding styles between different |
|||
editors and IDEs. |
|||
|
|||
By default, `.editorconfig` includes some basic |
|||
[properties](https://editorconfig.org/#supported-properties) that reflect the |
|||
coding styles from the files provided by default, but you can easily change |
|||
them to better suit your needs. |
|||
|
|||
In order for your editor/IDE to apply the |
|||
[properties](https://editorconfig.org/#supported-properties) from the |
|||
`.editorconfig` file, you may need to [install a |
|||
plugin]( https://editorconfig.org/#download). |
|||
|
|||
__N.B.__ If you aren't using the server configurations provided by HTML5 |
|||
Boilerplate, we highly encourage you to configure your server to block |
|||
access to `.editorconfig` files, as they can disclose sensitive information! |
|||
|
|||
For more details, please refer to the [EditorConfig |
|||
project](https://editorconfig.org/). |
|||
|
|||
## Server Configuration |
|||
|
|||
H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP |
|||
server](https://httpd.apache.org/docs/). If you are not using Apache |
|||
as your web server, then you are encouraged to download a |
|||
[server configuration](https://github.com/h5bp/server-configs) that |
|||
corresponds to your web server and environment. |
|||
|
|||
A `.htaccess` (hypertext access) file is an [Apache HTTP server |
|||
configuration file](https://github.com/h5bp/server-configs-apache). |
|||
The `.htaccess` file is mostly used for: |
|||
|
|||
* Rewriting URLs |
|||
* Controlling cache |
|||
* Authentication |
|||
* Server-side includes |
|||
* Redirects |
|||
* Gzipping |
|||
|
|||
If you have access to the main server configuration file (usually called |
|||
`httpd.conf`), you should add the logic from the `.htaccess` file in, for |
|||
example, a `<Directory>` section in the main configuration file. This is usually |
|||
the recommended way, as using .htaccess files slows down Apache! |
|||
|
|||
To enable Apache modules locally, please see [the Apache modules documentation](https://github.com/h5bp/server-configs-apache#enable-apache-httpd-modules) |
|||
|
|||
In the repo the `.htaccess` is used for: |
|||
|
|||
* Allowing cross-origin access to web fonts |
|||
* CORS header for images when browsers request it |
|||
* Enable `404.html` as 404 error document |
|||
* Making the website experience better for IE users better |
|||
* Media UTF-8 as character encoding for `text/html` and `text/plain` |
|||
* Enabling the rewrite URLs engine |
|||
* Forcing or removing the `www.` at the begin of a URL |
|||
* It blocks access to directories without a default document |
|||
* It blocks access to files that can expose sensitive information. |
|||
* It reduces MIME type security risks |
|||
* It forces compressing (gzipping) |
|||
* It tells the browser whether they should request a specific file from the |
|||
server or whether they should grab it from the browser's cache |
|||
|
|||
When using `.htaccess` we recommend reading all inline comments (the rules after |
|||
a `#`) in the file once. There is a bunch of optional stuff in it. |
|||
|
|||
If you want to know more about the `.htaccess` file check out the |
|||
[Apache HTTP server docs](https://httpd.apache.org/docs/) or more |
|||
specifically the [htaccess |
|||
section](https://httpd.apache.org/docs/current/howto/htaccess.html). |
|||
|
|||
Notice that the original repo for the `.htaccess` file is [this |
|||
one](https://github.com/h5bp/server-configs-apache). |
|||
|
|||
## robots.txt |
|||
|
|||
The `robots.txt` file is used to give instructions to web robots on what can |
|||
be crawled from the website. |
|||
|
|||
By default, the file provided by this project includes the next two lines: |
|||
|
|||
* `User-agent: *` - the following rules apply to all web robots |
|||
* `Disallow:` - everything on the website is allowed to be crawled |
|||
|
|||
If you want to disallow certain pages you will need to specify the path in a |
|||
`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow |
|||
crawling of all content, use `Disallow: /`. |
|||
|
|||
The `/robots.txt` file is not intended for access control, so don't try to |
|||
use it as such. Think of it as a "No Entry" sign, rather than a locked door. |
|||
URLs disallowed by the `robots.txt` file might still be indexed without being |
|||
crawled, and the content from within the `robots.txt` file can be viewed by |
|||
anyone, potentially disclosing the location of your private content! So, if |
|||
you want to block access to private content, use proper authentication instead. |
|||
|
|||
For more information about `robots.txt`, please see: |
|||
|
|||
* [robotstxt.org](https://www.robotstxt.org/) |
|||
* [How Google handles the `robots.txt` file](https://developers.google.com/search/reference/robots_txt) |
|||
|
|||
## humans.txt |
|||
|
|||
The `humans.txt` file is used to provide information about people involved with |
|||
the website. |
|||
|
|||
The provided file contains three sections: |
|||
|
|||
* `TEAM` - this is intended to list the group of people responsible for the website |
|||
* `THANKS` - this is intended to list the group of people that have contributed |
|||
to the website |
|||
* `TECHNOLOGY COLOPHON` - the section lists technologies used to make the website |
|||
|
|||
For more information about `humans.txt`, please see: http://humanstxt.org/ |
|||
|
|||
## browserconfig.xml |
|||
|
|||
The `browserconfig.xml` file is used to customize the tile displayed when users |
|||
pin your site to the Windows 8.1 start screen. In there you can define custom |
|||
tile colors, custom images or even [live tiles](https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn455106(v=vs.85)). |
|||
|
|||
By default, the file points to 2 placeholder tile images: |
|||
|
|||
* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles. |
|||
This image resizes automatically when necessary. |
|||
* `tile-wide.png` (558x270px): user for `Wide` tiles. |
|||
|
|||
Notice that IE11 uses the same images when adding a site to the `favorites`. |
|||
|
|||
For more in-depth information about the `browserconfig.xml` file, please |
|||
see [MSDN](https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)). |
|||
|
|||
## package.json |
|||
|
|||
`package.json` is used to define attributes of your site or application for |
|||
use in modern JavaScript development. [The full documentation is available](https://docs.npmjs.com/files/package.json) |
|||
if you're interested. The fields we provide are as follows: |
|||
|
|||
* `title` - the title of your project. If you expect to publish your application |
|||
to npm, then the name needs to follow [certain guidelines](https://docs.npmjs.com/files/package.json#name) |
|||
and be unique. |
|||
* `version` - indicates the version of your site application using semantic |
|||
versioning ([semver](https://docs.npmjs.com/misc/semver)) |
|||
* `description` - describes your site. |
|||
* `scripts` - is a JavaScript object containing commands that can be run in a |
|||
node environment. There are many [built-in keys](https://docs.npmjs.com/misc/scripts) |
|||
related to the package lifecycle that node understands automatically. You can |
|||
also define custom scripts for use with your application development. We |
|||
provide three custom scripts that work with Parcel to get you up and running |
|||
quickly with a bundler for your assets and a simple development server. |
|||
|
|||
* `start` builds your site and starts a server |
|||
* `build` builds your `index.html` using Parcel |
|||
* `dev` serves your `index.html` with a simple development server |
|||
|
|||
* `keywords` - an array of keywords used to discover your app in the npm |
|||
registry |
|||
* `author` - defines the author of a package. There is also an alternative |
|||
[contributors](https://docs.npmjs.com/files/package.json#people-fields-author-contributors) |
|||
field if there's more than one author. |
|||
* `license` - the license for your application. Must conform to |
|||
[specific rules](https://docs.npmjs.com/files/package.json#license) |
|||
* `devDependencies` - development dependencies for your package. In our case |
|||
it's a single dependency, Parcel, which we use to bundle files and run a |
|||
simple web server. |
|||
@ -0,0 +1,136 @@ |
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation |
|||
table of contents](TOC.md) |
|||
|
|||
# Usage |
|||
|
|||
The most basic usage of HTML5 Boilerplate is to create a static site or simple |
|||
app. Once you've downloaded or cloned the project, that process looks something |
|||
like this: |
|||
|
|||
1. Set up the basic structure of the site. |
|||
2. Add some content, style, and functionality. |
|||
3. Run your site locally to see how it looks. |
|||
4. Deploy your site. |
|||
|
|||
Cool, right? _It is_. That said, the smart defaults, baseline elements, default |
|||
attribute values and various other utilities that HTML5 Boilerplate offers can |
|||
serve as the foundation for whatever you're interested in building. |
|||
|
|||
Even the basic use-case of a simple static site can be enhanced by manipulating |
|||
the code through an automated build process. Moving up in complexity HTML5 |
|||
Boilerplate can be integrated with whatever front-end framework, CMS or |
|||
e-commerce platform you're working with. Mix-and-match to your heart's content. |
|||
Use what you need (toss it in a blender if you need to) and discard the rest. |
|||
HTML5 Boilerplate is a starting point, not a destination. |
|||
|
|||
## Basic structure |
|||
|
|||
A basic HTML5 Boilerplate site initially looks something like this: |
|||
|
|||
``` |
|||
. |
|||
├── css |
|||
│ ├── main.css |
|||
│ └── normalize.css |
|||
├── doc |
|||
├── img |
|||
├── js |
|||
│ ├── main.js |
|||
│ ├── plugins.js |
|||
│ └── vendor |
|||
│ └── modernizr.min.js |
|||
├── .editorconfig |
|||
├── .htaccess |
|||
├── 404.html |
|||
├── browserconfig.xml |
|||
├── favicon.ico |
|||
├── humans.txt |
|||
├── icon.png |
|||
├── index.html |
|||
├── package.json |
|||
├── robots.txt |
|||
├── site.webmanifest |
|||
├── tile.png |
|||
└── tile-wide.png |
|||
``` |
|||
|
|||
What follows is a general overview of each major part and how to use them. |
|||
|
|||
### css |
|||
|
|||
This directory should contain all your project's CSS files. It includes some |
|||
initial CSS to help get you started from a solid foundation. [About the |
|||
CSS](css.md). |
|||
|
|||
### doc |
|||
|
|||
This directory contains all the HTML5 Boilerplate documentation. You can use it |
|||
as the location and basis for your own project's documentation. |
|||
|
|||
### js |
|||
|
|||
This directory should contain all your project's JS files. Libraries, plugins, |
|||
and custom code can all be included here. It includes some initial JS to help |
|||
get you started. [About the JavaScript](js.md). |
|||
|
|||
### .htaccess |
|||
|
|||
The default web server configs are for Apache. For more information, please |
|||
refer to the [Apache Server Configs |
|||
repository](https://github.com/h5bp/server-configs-apache). |
|||
|
|||
Host your site on a server other than Apache? You're likely to find the |
|||
corresponding server configs project listed in our [Server |
|||
Configs](https://github.com/h5bp/server-configs/blob/master/README.md) |
|||
repository. |
|||
|
|||
### 404.html |
|||
|
|||
A helpful custom 404 to get you started. |
|||
|
|||
### browserconfig.xml |
|||
|
|||
This file contains all settings regarding custom tiles for IE11 and Edge. |
|||
|
|||
For more info on this topic, please refer to [Microsoft's |
|||
Docs](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)). |
|||
|
|||
### .editorconfig |
|||
|
|||
The `.editorconfig` file is provided in order to encourage and help you and your |
|||
team to maintain consistent coding styles between different editors and IDEs. |
|||
[Read more about the `.editorconfig` file](misc.md#editorconfig). |
|||
|
|||
### index.html |
|||
|
|||
This is the default HTML skeleton that should form the basis of all pages on |
|||
your site. If you are using a server-side templating framework, then you will |
|||
need to integrate this starting HTML with your setup. |
|||
|
|||
Make sure that you update the URLs for the referenced CSS and JavaScript if you |
|||
modify the directory structure at all. |
|||
|
|||
If you are using Google Universal Analytics, make sure that you edit the |
|||
corresponding snippet at the bottom to include your analytics ID. |
|||
|
|||
### humans.txt |
|||
|
|||
Edit this file to include the team that worked on your site/app, and the |
|||
technology powering it. |
|||
|
|||
### package.json |
|||
|
|||
Edit this file to describe your application, add dependencies, scripts and |
|||
other properties related to node based development and the npm registry |
|||
|
|||
### robots.txt |
|||
|
|||
Edit this file to include any pages you need hidden from search engines. |
|||
|
|||
### Icons |
|||
|
|||
Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple Touch |
|||
Icon with your own. |
|||
|
|||
If you want to use different Apple Touch Icons for different resolutions please |
|||
refer to the [according documentation](extend.md#apple-touch-icons). |
|||
@ -0,0 +1,23 @@ |
|||
const db = require("../data/database"); |
|||
|
|||
|
|||
|
|||
async function auth (req, res, next) { |
|||
const user = req.session.user; |
|||
const isAuth = req.session.isAuthenticated; |
|||
|
|||
if (!user || !isAuth) { |
|||
return next(); |
|||
} |
|||
|
|||
const userDoc = await db.getDb().collection('users').findOne({_id: user.id}) |
|||
const isAdmin = userDoc.isAdmin; |
|||
|
|||
res.locals.user = userDoc; |
|||
res.locals.isAuth = isAuth; |
|||
res.locals.isAdmin = isAdmin; |
|||
|
|||
next(); |
|||
} |
|||
|
|||
module.exports = auth |
|||
@ -0,0 +1,30 @@ |
|||
const db = require('../data/database') |
|||
const mongodb = require('mongodb') |
|||
|
|||
class Post { |
|||
constructor(title, content, id) { |
|||
this.title = title; |
|||
this.content = content; |
|||
if (id) { |
|||
this.id = new objectId |
|||
} |
|||
} |
|||
async insert() { |
|||
let result |
|||
if (this.id) { |
|||
result = await db.getDb().collection('posts').updateOne( |
|||
{_id: this.id}, |
|||
{$set: {title: this.title, content: this.content}} |
|||
) |
|||
} else { |
|||
result = await db.getDb().collection('posts').insertOne({ |
|||
title: this.title, |
|||
content: this.content, |
|||
}); |
|||
} |
|||
|
|||
return result |
|||
} |
|||
} |
|||
|
|||
module.exports = Post; |
|||
@ -0,0 +1,26 @@ |
|||
body { |
|||
background-image: url("/img/logo_dos.png"); |
|||
width: 100%; |
|||
flex-direction: column; |
|||
background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */ |
|||
background-repeat: no-repeat; /* Empêche la répétition de l'image */ |
|||
background-attachment: fixed; /* Fixe l'image en position de fond */ |
|||
position: absolute; |
|||
} |
|||
|
|||
#first_div { |
|||
margin: 10rem 3rem 12rem 3rem; |
|||
padding: 2rem 2rem 15rem 2rem; |
|||
background-color: white; |
|||
opacity: 80%; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
#first_div h1 { |
|||
text-align: center; |
|||
|
|||
} |
|||
@ -0,0 +1,114 @@ |
|||
body { |
|||
font-feature: Arial; |
|||
margin: 0; |
|||
padding: 0; |
|||
background-color: rgba(34,30,32,255); |
|||
background-image: url("/img/logo_dos.png"); |
|||
width: 100%; |
|||
flex-direction: column; |
|||
background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */ |
|||
background-repeat: no-repeat; /* Empêche la répétition de l'image */ |
|||
background-attachment: fixed; /* Fixe l'image en position de fond */ |
|||
position: fixed; |
|||
} |
|||
|
|||
#redhead { |
|||
background: linear-gradient(45deg, rgb(243, 62, 62), rgb(133, 20, 20)); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 4rem; |
|||
position: fixed; |
|||
width: 100%; |
|||
} |
|||
|
|||
#redhead ul { |
|||
list-style: none; |
|||
display: flex; |
|||
} |
|||
#redhead ul li a { |
|||
text-decoration: none; |
|||
color: black; |
|||
background: linear-gradient(315deg, rgb(243, 62, 62), rgb(133, 20, 20)); |
|||
padding: 0.5rem; |
|||
border-radius: 10px; |
|||
} |
|||
#redhead ul li { |
|||
margin: 0.4rem 2rem 1rem 0; |
|||
} |
|||
|
|||
|
|||
#redhead ul li a:hover { |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ; |
|||
} |
|||
|
|||
|
|||
#logo_noir_blanc { |
|||
margin: 0.5rem 0 0.5rem 1rem; |
|||
width: 5rem; |
|||
height: 3rem; |
|||
border-radius: 15px; |
|||
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
#logo_noir_blanc:hover { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.custom-cursor { |
|||
cursor: url('cursor/GTA5.cur'), auto; |
|||
} |
|||
|
|||
|
|||
#logo_noir_rouge { |
|||
width: 100%; |
|||
object-fit: cover; |
|||
margin-top: 4rem; |
|||
} |
|||
|
|||
|
|||
main ul { |
|||
margin-top: 10rem; |
|||
list-style: none; |
|||
display: grid; |
|||
gap: 1rem 1rem; |
|||
grid-template-columns: 1fr 1fr; |
|||
padding-left: 2rem; |
|||
padding-right: 2rem; |
|||
} |
|||
|
|||
main ul li { |
|||
background: linear-gradient(90deg, rgb(243, 62, 62), rgb(133, 20, 20)); |
|||
border: 0.05rem solid rgba(230,173,26,255); |
|||
padding: 0.8rem; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
main ul li:nth-of-type(3) { |
|||
grid-column: 1/3; |
|||
} |
|||
|
|||
main ul li:nth-of-type(8) { |
|||
grid-column: 1/3; |
|||
} |
|||
|
|||
footer { |
|||
background: linear-gradient(45deg, #341717, rgba(34,30,32,255)); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
footer a img { |
|||
margin-top: 2rem; |
|||
margin-left: 10rem; |
|||
height: 4rem; |
|||
width: 4rem; |
|||
} |
|||
|
|||
footer div h1 { |
|||
color: white; |
|||
} |
|||
|
|||
footer div p { |
|||
color: white; |
|||
} |
|||
|
|||
@ -0,0 +1,30 @@ |
|||
body { |
|||
position: absolute; |
|||
} |
|||
|
|||
#first_div { |
|||
margin: 10rem 3rem 12rem 3rem; |
|||
padding: 2rem 2rem 15rem 2rem; |
|||
background-color: white; |
|||
opacity: 80%; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
#first_div h1 { |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
#divPostComment { |
|||
margin-top: 1rem; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
#commentairePost { |
|||
width: 30rem; |
|||
height: 10rem; |
|||
} |
|||
@ -0,0 +1,187 @@ |
|||
body { |
|||
font-feature: Arial; |
|||
margin: 0; |
|||
padding: 0; |
|||
background-color: #0f056b; |
|||
} |
|||
|
|||
#background-video { |
|||
height: 100vh; |
|||
width: 100vw; |
|||
object-fit: cover; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
position: fixed; |
|||
z-index: 0; |
|||
} |
|||
|
|||
|
|||
#redhead { |
|||
background: linear-gradient(45deg, #0f056b, rgb(133, 20, 20)); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 4rem; |
|||
position: fixed; |
|||
width: 100%; |
|||
z-index: 2; |
|||
} |
|||
|
|||
#redhead ul { |
|||
list-style: none; |
|||
display: flex; |
|||
} |
|||
|
|||
#redhead ul li { |
|||
margin: 0.4rem 2rem 1rem 0; |
|||
} |
|||
|
|||
#redhead ul li a { |
|||
color: white; |
|||
} |
|||
|
|||
|
|||
#logo_noir_blanc { |
|||
margin: 0.5rem 0 0.5rem 1rem; |
|||
width: 3rem; |
|||
height: 3rem; |
|||
border-radius: 15px; |
|||
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
#logo_noir_blanc:hover { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.custom-cursor { |
|||
cursor: pointer; |
|||
text-decoration: none; |
|||
|
|||
} |
|||
|
|||
footer { |
|||
background: linear-gradient(315deg, #0f056b, rgb(133, 20, 20)); |
|||
display: flex; |
|||
justify-content: center; |
|||
position: absolute; |
|||
bottom: 0; |
|||
z-index: 4; |
|||
height: 5rem; |
|||
} |
|||
|
|||
|
|||
footer a img { |
|||
margin-top: 2rem; |
|||
margin-left: 10rem; |
|||
height: 4rem; |
|||
width: 4rem; |
|||
} |
|||
#nav_id { |
|||
padding: 0; |
|||
width: 100%; |
|||
position: fixed; |
|||
z-index: 2; |
|||
} |
|||
|
|||
|
|||
#nav_id ul { |
|||
right: 0; |
|||
list-style: none; |
|||
display: grid; |
|||
justify-content: end; |
|||
justify-items: end; |
|||
margin-top: 5rem; |
|||
position: fixed; |
|||
} |
|||
|
|||
#nav_id ul li a { |
|||
text-decoration: none; |
|||
color: white; |
|||
padding: 0.5rem; |
|||
border-radius: 10px; |
|||
|
|||
} |
|||
|
|||
#nav_id ul li { |
|||
margin-top: 0.4rem; |
|||
margin-bottom: 1rem; |
|||
margin-right: -20rem; |
|||
transition: margin-right 0.5s ease-in-out; |
|||
} |
|||
/* CSS */ |
|||
|
|||
footer div h1 { |
|||
color: white; |
|||
} |
|||
|
|||
footer div p { |
|||
color: white; |
|||
} |
|||
|
|||
.button-85 { |
|||
padding: 0.6em 2em; |
|||
border: none; |
|||
outline: none; |
|||
color: rgb(255, 255, 255); |
|||
background: #111; |
|||
cursor: pointer; |
|||
position: relative; |
|||
z-index: 0; |
|||
border-radius: 10px; |
|||
user-select: none; |
|||
-webkit-user-select: none; |
|||
touch-action: manipulation; |
|||
} |
|||
|
|||
.button-85:before { |
|||
content: ""; |
|||
background: linear-gradient( |
|||
45deg, |
|||
#ff0000, |
|||
#ff7300, |
|||
#fffb00, |
|||
#48ff00, |
|||
#00ffd5, |
|||
#002bff, |
|||
#7a00ff, |
|||
#ff00c8, |
|||
#ff0000 |
|||
); |
|||
position: absolute; |
|||
top: -2px; |
|||
left: -2px; |
|||
background-size: 400%; |
|||
z-index: -1; |
|||
filter: blur(5px); |
|||
-webkit-filter: blur(5px); |
|||
width: calc(100% + 4px); |
|||
height: calc(100% + 4px); |
|||
animation: glowing-button-85 20s linear infinite; |
|||
transition: opacity 0.3s ease-in-out; |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
@keyframes glowing-button-85 { |
|||
0% { |
|||
background-position: 0 0; |
|||
} |
|||
50% { |
|||
background-position: 400% 0; |
|||
} |
|||
100% { |
|||
background-position: 0 0; |
|||
} |
|||
} |
|||
|
|||
.button-85:after { |
|||
z-index: -1; |
|||
content: ""; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #222; |
|||
left: 0; |
|||
top: 0; |
|||
border-radius: 10px; |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
body { |
|||
|
|||
width: 100%; |
|||
flex-direction: column; |
|||
background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */ |
|||
background-repeat: no-repeat; /* Empêche la répétition de l'image */ |
|||
background-attachment: fixed; /* Fixe l'image en position de fond */ |
|||
position: absolute; |
|||
} |
|||
|
|||
#first_div { |
|||
margin: 10rem 3rem 12rem 3rem; |
|||
padding: 2rem 2rem 15rem 2rem; |
|||
background-color: white; |
|||
opacity: 80%; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
#first_div h1 { |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
#first_div a { |
|||
text-decoration: none; |
|||
font-size: 1.5rem; |
|||
color: black; |
|||
margin: 2rem 0 0 4rem; |
|||
} |
|||
|
|||
#input_connexion { |
|||
margin: 5rem 4rem 0 4rem; |
|||
padding: 1rem; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
display: grid; |
|||
} |
|||
|
|||
#input_connexion input { |
|||
width: 20rem; |
|||
margin-bottom: 1rem; |
|||
|
|||
} |
|||
|
|||
#logo_noir_rouge { |
|||
width: 100%; |
|||
object-fit: cover; |
|||
margin-top: 4rem; |
|||
} |
|||
|
|||
#input-error { |
|||
text-align: center; |
|||
margin: 0 5rem 0 5rem; |
|||
color: #ffffff; |
|||
background-color: #d58879; |
|||
border: 0.2rem solid #c23333; |
|||
} |
|||
|
|||
@ -0,0 +1,63 @@ |
|||
body { |
|||
background-image: url("/site-bds-metz/site/public/img/logo_dos.png"); |
|||
width: 100%; |
|||
flex-direction: column; |
|||
background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */ |
|||
background-repeat: no-repeat; /* Empêche la répétition de l'image */ |
|||
background-attachment: fixed; /* Fixe l'image en position de fond */ |
|||
position: fixed; |
|||
} |
|||
|
|||
main div { |
|||
margin: 10rem 3rem 12rem 3rem; |
|||
padding: 2rem 2rem 15rem 2rem; |
|||
background-color: white; |
|||
opacity: 60%; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
align-items: center; |
|||
|
|||
} |
|||
|
|||
main div h1 { |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
main div a { |
|||
text-decoration: none; |
|||
font-size: 1.5rem; |
|||
color: black; |
|||
margin: 2rem 0 0 4rem; |
|||
|
|||
|
|||
} |
|||
|
|||
#input-error { |
|||
margin: 1rem; |
|||
border: 0.2rem solid #d57778; |
|||
background-color: #d53636; |
|||
color: white; |
|||
border-radius: 10px; |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
#input_connexion { |
|||
margin: 5rem 4rem 0 4rem; |
|||
padding: 1rem; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
display: grid; |
|||
} |
|||
|
|||
#input_connexion input { |
|||
margin-bottom: 1rem; |
|||
|
|||
} |
|||
|
|||
#logo_noir_rouge { |
|||
width: 100%; |
|||
object-fit: cover; |
|||
margin-top: 4rem; |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
body { |
|||
position: absolute; |
|||
} |
|||
|
|||
#first_div { |
|||
margin: 10rem 3rem 12rem 3rem; |
|||
padding: 2rem 2rem 15rem 2rem; |
|||
background-color: white; |
|||
opacity: 80%; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
#first_div h1 { |
|||
text-align: center; |
|||
|
|||
} |
|||
@ -0,0 +1,263 @@ |
|||
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */ |
|||
|
|||
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */ |
|||
/* |
|||
* What follows is the result of much research on cross-browser styling. |
|||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
|||
* Kroc Camen, and the H5BP dev community and team. |
|||
*/ |
|||
|
|||
/* ========================================================================== |
|||
Base styles: opinionated defaults |
|||
========================================================================== */ |
|||
|
|||
html { |
|||
color: #222; |
|||
font-size: 1em; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
/* |
|||
* Remove text-shadow in selection highlight: |
|||
* https://twitter.com/miketaylr/status/12228805301 |
|||
* |
|||
* Vendor-prefixed and regular ::selection selectors cannot be combined: |
|||
* https://stackoverflow.com/a/16982510/7133471 |
|||
* |
|||
* Customize the background color to match your design. |
|||
*/ |
|||
|
|||
::-moz-selection { |
|||
background: #b3d4fc; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
::selection { |
|||
background: #b3d4fc; |
|||
text-shadow: none; |
|||
} |
|||
|
|||
/* |
|||
* A better looking default horizontal rule |
|||
*/ |
|||
|
|||
hr { |
|||
display: block; |
|||
height: 1px; |
|||
border: 0; |
|||
border-top: 1px solid #ccc; |
|||
margin: 1em 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/* |
|||
* Remove the gap between audio, canvas, iframes, |
|||
* images, videos and the bottom of their containers: |
|||
* https://github.com/h5bp/html5-boilerplate/issues/440 |
|||
*/ |
|||
|
|||
audio, |
|||
canvas, |
|||
iframe, |
|||
img, |
|||
svg, |
|||
video { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* |
|||
* Remove default fieldset styles. |
|||
*/ |
|||
|
|||
fieldset { |
|||
border: 0; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/* |
|||
* Allow only vertical resizing of textareas. |
|||
*/ |
|||
|
|||
textarea { |
|||
resize: vertical; |
|||
} |
|||
|
|||
/* ========================================================================== |
|||
Author's custom styles |
|||
========================================================================== */ |
|||
|
|||
/* ========================================================================== |
|||
Helper classes |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Hide visually and from screen readers |
|||
*/ |
|||
|
|||
.hidden, |
|||
[hidden] { |
|||
display: none !important; |
|||
} |
|||
|
|||
/* |
|||
* Hide only visually, but have it available for screen readers: |
|||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility |
|||
* |
|||
* 1. For long content, line feeds are not interpreted as spaces and small width |
|||
* causes content to wrap 1 word per line: |
|||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe |
|||
*/ |
|||
|
|||
.sr-only { |
|||
border: 0; |
|||
clip: rect(0, 0, 0, 0); |
|||
height: 1px; |
|||
margin: -1px; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
position: absolute; |
|||
white-space: nowrap; |
|||
width: 1px; |
|||
/* 1 */ |
|||
} |
|||
|
|||
/* |
|||
* Extends the .sr-only class to allow the element |
|||
* to be focusable when navigated to via the keyboard: |
|||
* https://www.drupal.org/node/897638 |
|||
*/ |
|||
|
|||
.sr-only.focusable:active, |
|||
.sr-only.focusable:focus { |
|||
clip: auto; |
|||
height: auto; |
|||
margin: 0; |
|||
overflow: visible; |
|||
position: static; |
|||
white-space: inherit; |
|||
width: auto; |
|||
} |
|||
|
|||
/* |
|||
* Hide visually and from screen readers, but maintain layout |
|||
*/ |
|||
|
|||
.invisible { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/* |
|||
* Clearfix: contain floats |
|||
* |
|||
* For modern browsers |
|||
* 1. The space content is one way to avoid an Opera bug when the |
|||
* `contenteditable` attribute is included anywhere else in the document. |
|||
* Otherwise it causes space to appear at the top and bottom of elements |
|||
* that receive the `clearfix` class. |
|||
* 2. The use of `table` rather than `block` is only necessary if using |
|||
* `:before` to contain the top-margins of child elements. |
|||
*/ |
|||
|
|||
.clearfix::before, |
|||
.clearfix::after { |
|||
content: " "; |
|||
display: table; |
|||
} |
|||
|
|||
.clearfix::after { |
|||
clear: both; |
|||
} |
|||
|
|||
/* ========================================================================== |
|||
EXAMPLE Media Queries for Responsive Design. |
|||
These examples override the primary ('mobile first') styles. |
|||
Modify as content requires. |
|||
========================================================================== */ |
|||
|
|||
@media only screen and (min-width: 35em) { |
|||
/* Style adjustments for viewports that meet the condition */ |
|||
} |
|||
|
|||
@media print, |
|||
(-webkit-min-device-pixel-ratio: 1.25), |
|||
(min-resolution: 1.25dppx), |
|||
(min-resolution: 120dpi) { |
|||
/* Style adjustments for high resolution devices */ |
|||
} |
|||
|
|||
/* ========================================================================== |
|||
Print styles. |
|||
Inlined to avoid the additional HTTP request: |
|||
https://www.phpied.com/delay-loading-your-print-css/ |
|||
========================================================================== */ |
|||
|
|||
@media print { |
|||
*, |
|||
*::before, |
|||
*::after { |
|||
background: #fff !important; |
|||
color: #000 !important; |
|||
/* Black prints faster */ |
|||
box-shadow: none !important; |
|||
text-shadow: none !important; |
|||
} |
|||
|
|||
a, |
|||
a:visited { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
a[href]::after { |
|||
content: " (" attr(href) ")"; |
|||
} |
|||
|
|||
abbr[title]::after { |
|||
content: " (" attr(title) ")"; |
|||
} |
|||
|
|||
/* |
|||
* Don't show links that are fragment identifiers, |
|||
* or use the `javascript:` pseudo protocol |
|||
*/ |
|||
a[href^="#"]::after, |
|||
a[href^="javascript:"]::after { |
|||
content: ""; |
|||
} |
|||
|
|||
pre { |
|||
white-space: pre-wrap !important; |
|||
} |
|||
|
|||
pre, |
|||
blockquote { |
|||
border: 1px solid #999; |
|||
page-break-inside: avoid; |
|||
} |
|||
|
|||
/* |
|||
* Printing Tables: |
|||
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables |
|||
*/ |
|||
thead { |
|||
display: table-header-group; |
|||
} |
|||
|
|||
tr, |
|||
img { |
|||
page-break-inside: avoid; |
|||
} |
|||
|
|||
p, |
|||
h2, |
|||
h3 { |
|||
orphans: 3; |
|||
widows: 3; |
|||
} |
|||
|
|||
h2, |
|||
h3 { |
|||
page-break-after: avoid; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,349 @@ |
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
|||
|
|||
/* Document |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Correct the line height in all browsers. |
|||
* 2. Prevent adjustments of font size after orientation changes in iOS. |
|||
*/ |
|||
|
|||
html { |
|||
line-height: 1.15; /* 1 */ |
|||
-webkit-text-size-adjust: 100%; /* 2 */ |
|||
} |
|||
|
|||
/* Sections |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the margin in all browsers. |
|||
*/ |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
/** |
|||
* Render the `main` element consistently in IE. |
|||
*/ |
|||
|
|||
main { |
|||
display: block; |
|||
} |
|||
|
|||
/** |
|||
* Correct the font size and margin on `h1` elements within `section` and |
|||
* `article` contexts in Chrome, Firefox, and Safari. |
|||
*/ |
|||
|
|||
h1 { |
|||
font-size: 2em; |
|||
margin: 0.67em 0; |
|||
} |
|||
|
|||
/* Grouping content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Add the correct box sizing in Firefox. |
|||
* 2. Show the overflow in Edge and IE. |
|||
*/ |
|||
|
|||
hr { |
|||
box-sizing: content-box; /* 1 */ |
|||
height: 0; /* 1 */ |
|||
overflow: visible; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
pre { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/* Text-level semantics |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the gray background on active links in IE 10. |
|||
*/ |
|||
|
|||
a { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/** |
|||
* 1. Remove the bottom border in Chrome 57- |
|||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
|||
*/ |
|||
|
|||
abbr[title] { |
|||
border-bottom: none; /* 1 */ |
|||
text-decoration: underline; /* 2 */ |
|||
text-decoration: underline dotted; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font weight in Chrome, Edge, and Safari. |
|||
*/ |
|||
|
|||
b, |
|||
strong { |
|||
font-weight: bolder; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
code, |
|||
kbd, |
|||
samp { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font size in all browsers. |
|||
*/ |
|||
|
|||
small { |
|||
font-size: 80%; |
|||
} |
|||
|
|||
/** |
|||
* Prevent `sub` and `sup` elements from affecting the line height in |
|||
* all browsers. |
|||
*/ |
|||
|
|||
sub, |
|||
sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
|
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
|
|||
/* Embedded content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the border on images inside links in IE 10. |
|||
*/ |
|||
|
|||
img { |
|||
border-style: none; |
|||
} |
|||
|
|||
/* Forms |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Change the font styles in all browsers. |
|||
* 2. Remove the margin in Firefox and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
input, |
|||
optgroup, |
|||
select, |
|||
textarea { |
|||
font-family: inherit; /* 1 */ |
|||
font-size: 100%; /* 1 */ |
|||
line-height: 1.15; /* 1 */ |
|||
margin: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Show the overflow in IE. |
|||
* 1. Show the overflow in Edge. |
|||
*/ |
|||
|
|||
button, |
|||
input { /* 1 */ |
|||
overflow: visible; |
|||
} |
|||
|
|||
/** |
|||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
|||
* 1. Remove the inheritance of text transform in Firefox. |
|||
*/ |
|||
|
|||
button, |
|||
select { /* 1 */ |
|||
text-transform: none; |
|||
} |
|||
|
|||
/** |
|||
* Correct the inability to style clickable types in iOS and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
[type="button"], |
|||
[type="reset"], |
|||
[type="submit"] { |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
/** |
|||
* Remove the inner border and padding in Firefox. |
|||
*/ |
|||
|
|||
button::-moz-focus-inner, |
|||
[type="button"]::-moz-focus-inner, |
|||
[type="reset"]::-moz-focus-inner, |
|||
[type="submit"]::-moz-focus-inner { |
|||
border-style: none; |
|||
padding: 0; |
|||
} |
|||
|
|||
/** |
|||
* Restore the focus styles unset by the previous rule. |
|||
*/ |
|||
|
|||
button:-moz-focusring, |
|||
[type="button"]:-moz-focusring, |
|||
[type="reset"]:-moz-focusring, |
|||
[type="submit"]:-moz-focusring { |
|||
outline: 1px dotted ButtonText; |
|||
} |
|||
|
|||
/** |
|||
* Correct the padding in Firefox. |
|||
*/ |
|||
|
|||
fieldset { |
|||
padding: 0.35em 0.75em 0.625em; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the text wrapping in Edge and IE. |
|||
* 2. Correct the color inheritance from `fieldset` elements in IE. |
|||
* 3. Remove the padding so developers are not caught out when they zero out |
|||
* `fieldset` elements in all browsers. |
|||
*/ |
|||
|
|||
legend { |
|||
box-sizing: border-box; /* 1 */ |
|||
color: inherit; /* 2 */ |
|||
display: table; /* 1 */ |
|||
max-width: 100%; /* 1 */ |
|||
padding: 0; /* 3 */ |
|||
white-space: normal; /* 1 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. |
|||
*/ |
|||
|
|||
progress { |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
/** |
|||
* Remove the default vertical scrollbar in IE 10+. |
|||
*/ |
|||
|
|||
textarea { |
|||
overflow: auto; |
|||
} |
|||
|
|||
/** |
|||
* 1. Add the correct box sizing in IE 10. |
|||
* 2. Remove the padding in IE 10. |
|||
*/ |
|||
|
|||
[type="checkbox"], |
|||
[type="radio"] { |
|||
box-sizing: border-box; /* 1 */ |
|||
padding: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Correct the cursor style of increment and decrement buttons in Chrome. |
|||
*/ |
|||
|
|||
[type="number"]::-webkit-inner-spin-button, |
|||
[type="number"]::-webkit-outer-spin-button { |
|||
height: auto; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the odd appearance in Chrome and Safari. |
|||
* 2. Correct the outline style in Safari. |
|||
*/ |
|||
|
|||
[type="search"] { |
|||
-webkit-appearance: textfield; /* 1 */ |
|||
outline-offset: -2px; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Remove the inner padding in Chrome and Safari on macOS. |
|||
*/ |
|||
|
|||
[type="search"]::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inability to style clickable types in iOS and Safari. |
|||
* 2. Change font properties to `inherit` in Safari. |
|||
*/ |
|||
|
|||
::-webkit-file-upload-button { |
|||
-webkit-appearance: button; /* 1 */ |
|||
font: inherit; /* 2 */ |
|||
} |
|||
|
|||
/* Interactive |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Add the correct display in Edge, IE 10+, and Firefox. |
|||
*/ |
|||
|
|||
details { |
|||
display: block; |
|||
} |
|||
|
|||
/* |
|||
* Add the correct display in all browsers. |
|||
*/ |
|||
|
|||
summary { |
|||
display: list-item; |
|||
} |
|||
|
|||
/* Misc |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Add the correct display in IE 10+. |
|||
*/ |
|||
|
|||
template { |
|||
display: none; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct display in IE 10. |
|||
*/ |
|||
|
|||
[hidden] { |
|||
display: none; |
|||
} |
|||
@ -0,0 +1,111 @@ |
|||
|
|||
main { |
|||
background: linear-gradient(45deg, #0f056b, rgb(133, 20, 20)); |
|||
} |
|||
|
|||
|
|||
.divLogoPerm { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
#logoPermBDE { |
|||
padding: 1rem; |
|||
background-color: white; |
|||
width: 10rem; |
|||
height: 10rem; |
|||
border-radius: 20px; |
|||
opacity: 80%; |
|||
position: relative; |
|||
z-index: 1; |
|||
margin: 0 1rem 3rem 0; |
|||
align-items: center; |
|||
} |
|||
|
|||
#logoliste { |
|||
padding: 1rem; |
|||
background-color: #000000; |
|||
width: 10rem; |
|||
height: 10rem; |
|||
border-radius: 20px; |
|||
opacity: 90%; |
|||
position: relative; |
|||
z-index: 1; |
|||
margin: 0 0 3rem 1rem; |
|||
align-items: center; |
|||
} |
|||
|
|||
#logoMetzPloreur { |
|||
padding: 1rem; |
|||
background-color: rgba(75,40,108,255); |
|||
width: 10rem; |
|||
height: 10rem; |
|||
border-radius: 20px; |
|||
opacity: 80%; |
|||
position: relative; |
|||
z-index: 1; |
|||
margin: 6rem 0 0 0; |
|||
align-items: center; |
|||
} |
|||
|
|||
#secondDiv { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100%; |
|||
margin: 3rem 0 3rem 0; |
|||
} |
|||
|
|||
.button-64 { |
|||
align-items: center; |
|||
background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); |
|||
border: 0; |
|||
border-radius: 8px; |
|||
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; |
|||
box-sizing: border-box; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
font-family: Phantomsans, sans-serif; |
|||
font-size: 20px; |
|||
justify-content: center; |
|||
line-height: 1em; |
|||
max-width: 100%; |
|||
min-width: 140px; |
|||
padding: 3px; |
|||
text-decoration: none; |
|||
user-select: none; |
|||
-webkit-user-select: none; |
|||
touch-action: manipulation; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
position: relative; |
|||
z-index: 2; |
|||
opacity: 80%; |
|||
} |
|||
|
|||
.button-64:active, |
|||
.button-64:hover { |
|||
outline: 0; |
|||
} |
|||
|
|||
.button-64 a { |
|||
background-color: rgb(5, 6, 45); |
|||
color: white; |
|||
padding: 16px 24px; |
|||
border-radius: 6px; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: 300ms; |
|||
} |
|||
|
|||
.button-64:hover a { |
|||
background: none; |
|||
} |
|||
|
|||
@media (min-width: 768px) { |
|||
.button-64 { |
|||
font-size: 24px; |
|||
min-width: 196px; |
|||
} |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
body { |
|||
background-image: url("/img/logo_dos.png"); |
|||
width: 100%; |
|||
flex-direction: column; |
|||
background-size: 100%; /* Ajuste la taille de l'image pour remplir complètement l'arrière-plan */ |
|||
background-repeat: no-repeat; /* Empêche la répétition de l'image */ |
|||
background-attachment: fixed; /* Fixe l'image en position de fond */ |
|||
position: absolute; |
|||
} |
|||
|
|||
#first_div { |
|||
margin: 10rem 3rem 12rem 3rem; |
|||
padding: 2rem 2rem 15rem 2rem; |
|||
background-color: white; |
|||
opacity: 80%; |
|||
border: 0.2rem solid rgba(230,173,26,255); |
|||
border-radius: 10px; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
#first_div h1 { |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
#first_div ul { |
|||
list-style: none; |
|||
} |
|||
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 186 KiB |
@ -0,0 +1,20 @@ |
|||
let button_element = document.querySelector("#menu_button"); |
|||
let navElement = document.querySelector("#nav_id"); |
|||
let listElements = document.querySelectorAll("#nav_id ul li"); |
|||
|
|||
let isNavVisible = false; |
|||
|
|||
function toggleNav() { |
|||
isNavVisible = !isNavVisible; |
|||
if (isNavVisible) { |
|||
for (let i = 0; i < listElements.length; i++) { |
|||
listElements[i].style.marginRight = "2rem"; |
|||
} |
|||
} else { |
|||
for (let i = 0; i < listElements.length; i++) { |
|||
listElements[i].style.marginRight = "-20rem"; |
|||
} |
|||
} |
|||
} |
|||
|
|||
button_element.addEventListener('click', toggleNav); |
|||
@ -0,0 +1,24 @@ |
|||
// Avoid `console` errors in browsers that lack a console.
|
|||
(function() { |
|||
var method; |
|||
var noop = function () {}; |
|||
var methods = [ |
|||
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', |
|||
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', |
|||
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', |
|||
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn' |
|||
]; |
|||
var length = methods.length; |
|||
var console = (window.console = window.console || {}); |
|||
|
|||
while (length--) { |
|||
method = methods[length]; |
|||
|
|||
// Only stub undefined methods.
|
|||
if (!console[method]) { |
|||
console[method] = noop; |
|||
} |
|||
} |
|||
}()); |
|||
|
|||
// Place any jQuery/helper plugins in here.
|
|||
Loading…
Reference in new issue