commit a8e523ba9e3a2a92f33c14ca71058ff338355117 Author: sundowndev Date: Tue Dec 18 17:36:32 2018 +0100 Init diff --git a/README.md b/README.md new file mode 100644 index 0000000..2847b45 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# devbreak.fr diff --git a/css/common.css b/css/common.css new file mode 100644 index 0000000..17fdd4e --- /dev/null +++ b/css/common.css @@ -0,0 +1,221 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after { + content: ''; + content: none; +} + +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +html { + font-size: 10px; +} + +body { + font-size: 1.6rem; + color: #373737; + background: #F5F6F8; + margin: 0; + font-family: "Roboto", Arial; +} + +h1, h2, h3, h4, h5 { + font-family: "Raleway", Arial; + margin: 0; +} + +.container { + max-width: 800px; + margin: auto; + width: -webkit-fill-available; + width: -moz-available; + width: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 50px 15px; +} + +a { + color: #373737; + text-decoration: none; + font-weight: 700; +} + +a:hover { + color: #3a7adb; +} + +.color-red { + color: #de3d3d; +} + +.header { + text-align: center; + margin-bottom: 50px; +} + +.header img { + margin-right: 5px; + vertical-align: text-bottom; +} + +.header h1 { + font-size: 36px; + font-weight: 700; + text-transform: uppercase; + margin-bottom: 10px; + display: inline-block; +} + +.header p { + font-size: 14px; + font-weight: 300; + color: #999; +} + +.panel { + border: 1px solid #f1f1f1; + margin-bottom: 25px; +} + +.panel .panel-header { + background: #fff; + padding: 10px; + border-bottom: 1px solid #f1f1f1; + cursor: pointer; +} + +.panel .panel-header p { + display: inline-block; +} + +.panel .panel-header .panel-header-right { + float: right; +} + +.panel .panel-content { + padding: 20px; + background: #fff; + -webkit-transition: 0.3s ease-out; + transition: 0.3s ease-out; +} + +.panel .panel-content h3 { + font-size: 18px; + font-weight: 700; + border-bottom: 1px solid #f1f1f1; + padding-bottom: 10px; + margin-bottom: 10px; +} + +.panel i { + margin-right: 5px; +} + +.panel i.arrow::before { + -webkit-transition: 0.3s ease-out; + transition: 0.3s ease-out; + -webkit-transition-property: -webkit-transform; + transition-property: -webkit-transform; + transition-property: transform; + transition-property: transform, -webkit-transform; +} + +.panel .panel-content .panel-content-category { + margin-bottom: 20px; +} + +.panel .panel-content .panel-content-category ul li { + line-height: 22px; +} + +.panel .panel-content .panel-content-category ul li a { + font-weight: 400; + margin-bottom: 5px; +} + +.panel .panel-content .panel-content-category ul li span { + color: #999; + font-size: 15px; + margin-left: 5px; +} + +.panel.collapse .panel-header { + border-bottom-width: 0px; +} + +.panel.collapse i.arrow::before { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.panel.collapse .panel-content { + height: 0; + padding-top: 0; + padding-bottom: 0; + overflow: hidden; +} + +footer { + border-top: 1px solid #f1f1f1; + margin-top: 25px; + padding-top: 50px; + text-align: center; +} + +footer p.footer-report { + margin-top: 10px; +} + +footer p.footer-report a { + font-size: 13px; + font-weight: 300; +} diff --git a/css/scss/_conf.scss b/css/scss/_conf.scss new file mode 100644 index 0000000..bb6fe43 --- /dev/null +++ b/css/scss/_conf.scss @@ -0,0 +1,26 @@ +$containerWidth: 800px; + +// Colors + +$color1: #999; // subtitles +$color2: #fff; // ... +$color3: #f1f1f1; // shadows and headers + +$textColor: #373737; +$textRed: #de3d3d; + +$BodyBgColor: #F5F6F8; + +// links + +$linkColor: #373737; +$linkColorHover: #3a7adb; + +// Fonts + +$fontFamilyTitle: "Raleway", Arial; +$fontFamilyText: "Roboto", Arial; + +// Conf vars + +$transition: .3s ease-out; \ No newline at end of file diff --git a/css/scss/_footer.scss b/css/scss/_footer.scss new file mode 100644 index 0000000..cf4bea1 --- /dev/null +++ b/css/scss/_footer.scss @@ -0,0 +1,15 @@ +footer { + border-top: 1px solid $color3; + margin-top: 25px; + padding-top: 50px; + text-align: center; + + p.footer-report { + margin-top: 10px; + + a { + font-size: 13px; + font-weight: 300; + } + } +} \ No newline at end of file diff --git a/css/scss/_global.scss b/css/scss/_global.scss new file mode 100644 index 0000000..50b9f6e --- /dev/null +++ b/css/scss/_global.scss @@ -0,0 +1,40 @@ +html { + font-size: 10px; +} + +body { + font-size: 1.6rem; + color: $textColor; + background: $BodyBgColor; + margin: 0; + font-family: $fontFamilyText; +} + +h1, h2, h3, h4, h5 { + font-family: $fontFamilyTitle; + margin: 0; +} + +.container { + max-width: $containerWidth; + margin: auto; + width: stretch; + display: flex; + justify-content: center; + flex-direction: column; + padding: 50px 15px; +} + +a { + color: $linkColor; + text-decoration: none; + font-weight: 700; + + &:hover { + color: $linkColorHover; + } +} + +.color-red { + color: $textRed; +} \ No newline at end of file diff --git a/css/scss/_header.scss b/css/scss/_header.scss new file mode 100644 index 0000000..9ee20f1 --- /dev/null +++ b/css/scss/_header.scss @@ -0,0 +1,23 @@ +.header { + text-align: center; + margin-bottom: 50px; + + img { + margin-right: 5px; + vertical-align: text-bottom; + } + + h1 { + font-size: 36px; + font-weight: 700; + text-transform: uppercase; + margin-bottom: 10px; + display: inline-block; + } + + p { + font-size: 14px; + font-weight: 300; + color: $color1; + } +} \ No newline at end of file diff --git a/css/scss/_panel.scss b/css/scss/_panel.scss new file mode 100644 index 0000000..b55212c --- /dev/null +++ b/css/scss/_panel.scss @@ -0,0 +1,76 @@ +.panel { + border: 1px solid $color3; + margin-bottom: 25px; + + .panel-header { + background: $color2; + padding: 10px; + border-bottom: 1px solid $color3; + cursor: pointer; + + p { + display: inline-block; + } + + .panel-header-right { + float: right; + } + } + + .panel-content { + padding: 20px; + background: $color2; + transition: $transition; + + h3 { + font-size: 18px; + font-weight: 700; + border-bottom: 1px solid $color3; + padding-bottom: 10px; + margin-bottom: 10px; + } + } + + i { + margin-right: 5px; + } + + i.arrow::before { + transition: $transition; + transition-property: transform; + } + + .panel-content .panel-content-category { + margin-bottom: 20px; + + ul li { + line-height: 22px; + } + + ul li a { + font-weight: 400; + margin-bottom: 5px; + } + + ul li span { + color: $color1; + font-size: 15px; + margin-left: 5px; + } + } +} + +.panel.collapse .panel-header { + border-bottom-width: 0px; +} + +.panel.collapse i.arrow::before { + transform: rotate(90deg); +} + +.panel.collapse .panel-content { + height: 0; + padding-top: 0; + padding-bottom: 0; + overflow: hidden; +} \ No newline at end of file diff --git a/css/scss/_reset.scss b/css/scss/_reset.scss new file mode 100644 index 0000000..2064fba --- /dev/null +++ b/css/scss/_reset.scss @@ -0,0 +1,40 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote { + &:before, &:after { + content: ''; + content: none; } } + +q { + &:before, &:after { + content: ''; + content: none; } } + +table { + border-collapse: collapse; + border-spacing: 0; } \ No newline at end of file diff --git a/css/scss/common.scss b/css/scss/common.scss new file mode 100644 index 0000000..65d4ff2 --- /dev/null +++ b/css/scss/common.scss @@ -0,0 +1,6 @@ +@import '_reset'; +@import '_conf'; +@import '_global'; +@import '_header'; +@import '_panel'; +@import '_footer'; \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..87c9c8f Binary files /dev/null and b/favicon.ico differ diff --git a/images/dist/empty b/images/dist/empty new file mode 100644 index 0000000..e69de29 diff --git a/images/src/logo.svg b/images/src/logo.svg new file mode 100644 index 0000000..4756e50 --- /dev/null +++ b/images/src/logo.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..4b1b862 --- /dev/null +++ b/index.html @@ -0,0 +1,327 @@ + + + + + + + DEVBREAK - All you need, at the same place + + + + + + + + + + + + + + + + + + +
+
+ +

Devbreak

+

All you need, at the same place.

+
+ +
+
+

Web design

+
+ +
+
+ +
+
+

Tools

+ +
    +
  • + coolors.co + The super fast color schemes generator +
    • +
  • + flatuicolors.com + Copy Paste Color Pallette from Flat UI Theme +
    • +
  • + materialui.co + Material Color Palette, Flat UI Color Palette, Icons & more. +
    • +
  • + color.adobe.com + Create color schemes with the color wheel or browse thousands of color combinations from the Color community. +
    • +
+
+ +
+

Mockup

+ + +
+ +
+

Extensions

+ +
    +
  • + csspeeper.com + Inspect styles in a simple, well-organized & beautiful way with our Chrome extension. +
    • +
  • + fontface.ninja + Inspect, try, buy and bookmark any fonts on any website +
    • +
  • + wappalyzer.com + Identify technology on websites +
    • +
  • + producthunt.com + Discover your next favorite thing +
    • +
+
+
+
+ +
+
+

Ressources

+
+ +
+
+ +
+
+

Videos

+ +
    +
  • + videos.pexels.com + Completely free stock videos +
    • +
  • + coverr.co + Beautiful, free videos for your homepage +
    • +
  • + videvo.net + Free stock HD video footage +
    • +
  • + allthefreestock.com + One place to find all the free stock images, videos, sound and icons +
    • +
  • + stampede.it + Audio and video stock library. Free for personal and commercial purposes +
    • +
  • + stockio.com + Free Photos, Vectors, Icons, Fonts and Videos +
    • +
+
+ +
+

Images

+ +
    +
  • + freephotos.cc + Free beautiful stock photos with Creative Commons (CC) licensing +
    • +
  • + everypixel.com + Stock image search engine powered by AI. +
    • +
  • + visualhunt.com + We hunt free high quality stock photos. +
    • +
  • + allthefreestock.com + One place to find all the free stock images, videos, sound and icons +
    • +
  • + unsplash.com + Beautiful, free photos gifted by the world’s most generous community of photographers. +
    • +
  • + thestocks.im + Hand-picked free photos for your inspiration +
    • +
  • + stockio.com + Free Photos, Vectors, Icons, Fonts and Videos +
    • +
  • + stampede.it + Audio and video stock library. Free for personal and commercial purposes +
    • +
  • + stocksnap.io + Hundreds of high resolution images added weekly +
    • +
  • + gettyimages.fr + Find high resolution royalty-free images, editorial stock photos, vector art and more. +
    • +
+
+ +
+

Music & sounds

+ +
    +
  • + stampede.itAudio and video stock library. Free for personal and commercial purposes +
    • +
+
+
+
+ +
+
+

Icons

+
+ +
+
+ +
+
+

Templates & vector icons

+ +
    +
  • + flaticon.com + The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats +
    • +
  • + iconfinder.com + The market place for vector icons in SVG, PNG, CSH and AI format +
    • +
  • + material.io + Access over 900 material system icons, available in a variety of sizes and densities, and as a web font. +
    • +
  • + thenounproject.com + Over a million curated icons, created by a global community +
    • +
+
+ +
+

CSS icons

+ +
    +
  • + ionicons.com + MIT Licensed css icons font for Ionic Framework. 100% free and open source. +
    • +
  • + fontawesome.io + The iconic font and CSS toolkit +
    • +
  • + icomoon.io + Pixel perfect icon solutions. Free custom css icon font generator. +
    • +
  • + fontello.com + Tool to build custom fonts with icons. +
    • +
+
+
+
+ +
+
+

Fonts

+
+ +
+
+ +
+
+

Font libraries

+ + +
+ +
+

Web fonts

+ +
    +
  • + fonts.google.com + Making the web more beautiful, fast, and open through great typography. +
    • +
  • + omnibus-type.com + Provides webfonts at the highest aesthetic and technical level +
    • +
  • + fontsquirrel.com + Handpicked free fonts for graphic designers with commercial-use licenses. +
    • +
+
+
+
+ + +
+ + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..c06600d --- /dev/null +++ b/js/script.js @@ -0,0 +1,33 @@ +/*var collapseButtons = document.querySelectorAll('.panel-header-right a'); + +collapseButtons.forEach(function(btn){ + btn.addEventListener('click', function(e){ + e.preventDefault(); + + var panel = btn.parentElement.parentElement.parentElement; + var icon = btn.childNodes[0]; + + if(panel.className == 'panel collapse'){ + panel.classList.remove('collapse'); + }else{ + panel.classList.add('collapse'); + } + }); +});*/ + +var panels = document.querySelectorAll('.panel-header'); + +panels.forEach(function(panel){ + panel.addEventListener('click', function(e){ + e.preventDefault(); + + var panelParent = panel.parentElement; + var icon = panel.childNodes[0].childNodes[0]; + + if(panelParent.className == 'panel collapse'){ + panelParent.classList.remove('collapse'); + }else{ + panelParent.classList.add('collapse'); + } + }); +}); \ No newline at end of file