Init
sundowndev
commit
a8e523ba9e
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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; }
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import '_reset';
|
||||||
|
@import '_conf';
|
||||||
|
@import '_global';
|
||||||
|
@import '_header';
|
||||||
|
@import '_panel';
|
||||||
|
@import '_footer';
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
|
|
@ -0,0 +1,40 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 51 51" style="enable-background:new 0 0 51 51;" xml:space="preserve">
|
||||||
|
<polygon style="fill:#EFCE4A;" points="50.956,14.456 25.5,29 0.044,14.456 25.5,0 "/>
|
||||||
|
<polygon style="fill:#ED8A19;" points="25.5,29 9.7,19.973 0.044,25.456 25.5,40 50.956,25.456 41.3,19.973 "/>
|
||||||
|
<g>
|
||||||
|
<polygon style="fill:#EA6248;" points="25.5,40 9.7,30.973 0.044,36.456 25.5,51 50.956,36.456 41.3,30.973 "/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 845 B |
|
|
@ -0,0 +1,327 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>DEVBREAK - All you need, at the same place</title>
|
||||||
|
<meta property="og:title" content="DEVBREAK - All you need, at the same place">
|
||||||
|
<meta name="description" content="Devbreak is a simple way to start your projects. Find ressources about web design such as icons, extensions, mockup tools, free images stock and more.">
|
||||||
|
<meta property="og:description" content="Devbreak is a simple way to start your projects. Find ressources about web design such as icons, extensions, mockup tools, free images stock and more.">
|
||||||
|
<meta name="keywords" content="devbreak, web, design, ressource, css, icons, free, project, front-end, extension">
|
||||||
|
<meta property="og:image" content="">
|
||||||
|
<meta name="referrer" content="origin">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto:300,700" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/common.css">
|
||||||
|
|
||||||
|
<link rel="shortcut icon" type="image/ico" href="./favicon.ico"/>
|
||||||
|
<link rel="shortcut icon" type="image/ico" href="./favicon.ico"/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<img src="images/src/logo.svg" width="32px" height="32px" alt="">
|
||||||
|
<h1>Devbreak</h1>
|
||||||
|
<p>All you need, at the same place.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel collapse" id="images">
|
||||||
|
<div class="panel-header">
|
||||||
|
<p><i class="ion-paintbrush"></i> Web design</p>
|
||||||
|
<div class="panel-header-right">
|
||||||
|
<i class="arrow ion-arrow-down-b"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content">
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Tools</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://coolors.co/" target="_blank">coolors.co</a>
|
||||||
|
<span>The super fast color schemes generator</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://flatuicolors.com/" target="_blank">flatuicolors.com</a>
|
||||||
|
<span>Copy Paste Color Pallette from Flat UI Theme</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.materialui.co/" target="_blank">materialui.co</a>
|
||||||
|
<span>Material Color Palette, Flat UI Color Palette, Icons & more.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://color.adobe.com/fr/create/color-wheel/" target="_blank">color.adobe.com</a>
|
||||||
|
<span>Create color schemes with the color wheel or browse thousands of color combinations from the Color community.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Mockup</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="http://threed.io/" target="_blank">threed.io</a>
|
||||||
|
<span>Generate 3D mockups right in your browser</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.pixeden.com/free-web-design-templates" target="_blank">pixeden.com</a>
|
||||||
|
<span>Free web design templates</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.graphberry.com/" target="_blank">graphberry.com</a>
|
||||||
|
<span>Free pixel perfect resources, made with love</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://mockflow.com/" target="_blank">mockflow.com</a>
|
||||||
|
<span>Your collaborative whiteboard for brainstorming UI</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://wireframe.cc/" target="_blank">wireframe.cc</a>
|
||||||
|
<span>A better wireframing experience</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://framebox.org" target="_blank">framebox.org</a>
|
||||||
|
<span>Easy frame sharing</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Extensions</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://csspeeper.com/" target="_blank">csspeeper.com</a>
|
||||||
|
<span>Inspect styles in a simple, well-organized & beautiful way with our Chrome extension.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://fontface.ninja/" target="_blank">fontface.ninja</a>
|
||||||
|
<span>Inspect, try, buy and bookmark any fonts on any website</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.wappalyzer.com/" target="_blank">wappalyzer.com</a>
|
||||||
|
<span>Identify technology on websites</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.producthunt.com/" target="_blank">producthunt.com</a>
|
||||||
|
<span>Discover your next favorite thing</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel collapse" id="videos">
|
||||||
|
<div class="panel-header">
|
||||||
|
<p><i class="ion-ios-folder"></i> Ressources</p>
|
||||||
|
<div class="panel-header-right">
|
||||||
|
<i class="arrow ion-arrow-down-b"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content">
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Videos</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://videos.pexels.com/" target="_blank">videos.pexels.com</a>
|
||||||
|
<span>Completely free stock videos</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://www.coverr.co/" target="_blank">coverr.co</a>
|
||||||
|
<span>Beautiful, free videos for your homepage</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.videvo.net/" target="_blank">videvo.net</a>
|
||||||
|
<span>Free stock HD video footage</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://allthefreestock.com/" target="_blank">allthefreestock.com</a>
|
||||||
|
<span>One place to find all the free stock images, videos, sound and icons</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://stampede.it/" target="_blank">stampede.it</a>
|
||||||
|
<span>Audio and video stock library. Free for personal and commercial purposes</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.stockio.com/" target="_blank">stockio.com</a>
|
||||||
|
<span>Free Photos, Vectors, Icons, Fonts and Videos</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Images</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://freephotos.cc/" target="_blank">freephotos.cc</a>
|
||||||
|
<span>Free beautiful stock photos with Creative Commons (CC) licensing</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://everypixel.com/" target="_blank">everypixel.com</a>
|
||||||
|
<span>Stock image search engine powered by AI.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://visualhunt.com/" target="_blank">visualhunt.com</a>
|
||||||
|
<span>We hunt free high quality stock photos.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://allthefreestock.com/" target="_blank">allthefreestock.com</a>
|
||||||
|
<span>One place to find all the free stock images, videos, sound and icons</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://unsplash.com/" target="_blank">unsplash.com</a>
|
||||||
|
<span>Beautiful, free photos gifted by the world’s most generous community of photographers.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://thestocks.im/" target="_blank">thestocks.im</a>
|
||||||
|
<span>Hand-picked free photos for your inspiration</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.stockio.com/" target="_blank">stockio.com</a>
|
||||||
|
<span>Free Photos, Vectors, Icons, Fonts and Videos</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://stampede.it/" target="_blank">stampede.it</a>
|
||||||
|
<span>Audio and video stock library. Free for personal and commercial purposes</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://stocksnap.io/" target="_blank">stocksnap.io</a>
|
||||||
|
<span>Hundreds of high resolution images added weekly</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://www.gettyimages.fr/" target="_blank">gettyimages.fr</a>
|
||||||
|
<span>Find high resolution royalty-free images, editorial stock photos, vector art and more.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Music & sounds</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="http://stampede.it/" target="_blank">stampede.it</a><span>Audio and video stock library. Free for personal and commercial purposes</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel collapse" id="icons">
|
||||||
|
<div class="panel-header">
|
||||||
|
<p><i class="ion-heart"></i> Icons</p>
|
||||||
|
<div class="panel-header-right">
|
||||||
|
<i class="arrow ion-arrow-down-b"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content">
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Templates & vector icons</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.flaticon.com/" target="_blank">flaticon.com</a>
|
||||||
|
<span>The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.iconfinder.com/" target="_blank">iconfinder.com</a>
|
||||||
|
<span>The market place for vector icons in SVG, PNG, CSH and AI format</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://material.io/icons/" target="_blank">material.io</a>
|
||||||
|
<span>Access over 900 material system icons, available in a variety of sizes and densities, and as a web font.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://thenounproject.com/" target="_blank">thenounproject.com</a>
|
||||||
|
<span>Over a million curated icons, created by a global community</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>CSS icons</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="http://ionicons.com/" target="_blank">ionicons.com</a>
|
||||||
|
<span>MIT Licensed css icons font for Ionic Framework. 100% free and open source.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://fontawesome.io/" target="_blank">fontawesome.io</a>
|
||||||
|
<span>The iconic font and CSS toolkit</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://icomoon.io/" target="_blank">icomoon.io</a>
|
||||||
|
<span>Pixel perfect icon solutions. Free custom css icon font generator.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://fontello.com/" target="_blank">fontello.com</a>
|
||||||
|
<span>Tool to build custom fonts with icons.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel collapse" id="fonts">
|
||||||
|
<div class="panel-header">
|
||||||
|
<p><i class="ion-edit"></i> Fonts</p>
|
||||||
|
<div class="panel-header-right">
|
||||||
|
<i class="arrow ion-arrow-down-b"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content">
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Font libraries</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://fontsinuse.com/" target="_blank">fontsinuse.com</a>
|
||||||
|
<span>An independent archive of typography.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-content-category">
|
||||||
|
<h3>Web fonts</h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://fonts.google.com/" target="_blank">fonts.google.com</a>
|
||||||
|
<span>Making the web more beautiful, fast, and open through great typography.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://www.omnibus-type.com/" target="_blank">omnibus-type.com</a>
|
||||||
|
<span>Provides webfonts at the highest aesthetic and technical level</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.fontsquirrel.com/" target="_blank">fontsquirrel.com</a>
|
||||||
|
<span>Handpicked free fonts for graphic designers with commercial-use licenses.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Created with <i class="ion-heart color-red"></i> by <a href="https://crvx.fr/" target="_blank">SundownDEV</a></p>
|
||||||
|
|
||||||
|
<p class="footer-report"><a href="https://twitter.com/SundownDEV">Report abuse</a></p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue