Change index style
This commit is contained in:
parent
c6804949c5
commit
340ea19834
GPG Key ID:
534845FADDF0C329
|
|
@ -5,11 +5,15 @@ body {
|
|||
background: #0A3D62;
|
||||
font-family: sans-serif;
|
||||
font-size: 21px;
|
||||
color: white;
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
#codeContainer {
|
||||
display: block;
|
||||
width: 80%;
|
||||
|
|
@ -45,3 +49,78 @@ footer {
|
|||
color: white;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: 15px;
|
||||
background-color: #C0C0C0;
|
||||
width: 150px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.bg-img {
|
||||
height: 120px;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
margin: 5px;
|
||||
}
|
||||
.card p {
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
.card:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
#js-card {
|
||||
background-image: url("../img/js.svg");
|
||||
}
|
||||
#py-card {
|
||||
background-image: url("../img/py.svg");
|
||||
}
|
||||
#lua-card {
|
||||
background-image: url("../img/lua.svg");
|
||||
}
|
||||
#sqlite-card {
|
||||
background-image: url("../img/sqlite.svg");
|
||||
}
|
||||
#html-card {
|
||||
background-image: url("../img/html.svg");
|
||||
}
|
||||
#html-card:hover::before {
|
||||
display: inline-block;
|
||||
content: "Bientôt";
|
||||
color: white;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
opacity: 0.7;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
#sqlite-card:hover::before {
|
||||
display: inline-block;
|
||||
content: "Bientôt";
|
||||
color: white;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
opacity: 0.7;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
#lua-card:hover::before {
|
||||
display: inline-block;
|
||||
content: "Bientôt";
|
||||
color: white;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
opacity: 0.7;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<title>HTML5 Logo</title>
|
||||
<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
|
||||
<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
|
||||
<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
|
||||
<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
|
||||
<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 674 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
|
||||
<rect width="630" height="630" fill="#f7df1e"/>
|
||||
<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 687 B |
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="947px" height="947px" viewBox="0 0 947 947" enable-background="new 0 0 947 947" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#000080" d="M835.5,473.6c0-199.8-162.2-362-362-362s-362,162.2-362,362c0,199.8,162.2,362,362,362 S835.5,673.4,835.5,473.6"/>
|
||||
<path fill="#FFFFFF" d="M729.5,323.6c0-58.5-47.5-106-106-106s-106,47.5-106,106c0,58.5,47.5,106,106,106S729.5,382.1,729.5,323.6"/>
|
||||
<path fill="#000080" d="M941.5,111.5c0-58.5-47.5-106-106-106s-106,47.5-106,106c0,58.5,47.5,106,106,106S941.5,170.1,941.5,111.5"/>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M258.1,627.8h117.3v26.7H227.8V417h30.3V627.8z"/>
|
||||
<path fill="#FFFFFF" d="M515.5,654.5v-23.8c-16,22.5-31.9,31.3-57,31.3c-33.2,0-54.4-18.2-54.4-46.6V483.8h27v120.9 c0,20.5,13.7,33.6,35.2,33.6c28.3,0,46.6-22.8,46.6-57.7v-96.8h27v170.7H515.5z"/>
|
||||
<path fill="#FFFFFF" d="M738.4,659.1c-8.8,2.3-13,2.9-18.6,2.9c-17.6,0-26.1-7.8-28-25.1c-19.2,17.6-36.5,25.1-58,25.1 c-34.5,0-56-19.5-56-50.5c0-22.2,10.1-37.5,30-45.6c10.4-4.2,16.3-5.5,54.7-10.4c21.5-2.6,28.3-7.5,28.3-18.9v-7.2 c0-16.3-13.7-25.4-38.1-25.4c-25.4,0-37.8,9.4-40.1,30.3h-27.4c0.7-16.9,3.9-26.7,11.7-35.5c11.4-12.7,31.9-19.9,56.7-19.9 c42,0,64.2,16.3,64.2,46.6v100.4c0,8.5,5.2,13.4,14.7,13.4c1.6,0,2.9,0,5.9-0.7V659.1z M690.8,570.1c-9.1,4.2-15,5.5-43.7,9.4 c-29,4.2-41.1,13.4-41.1,31.3c0,17.3,12.4,27.4,33.6,27.4c16,0,29.3-5.2,40.4-15.3c8.1-7.5,10.8-13,10.8-22.2V570.1z"/>
|
||||
</g>
|
||||
<path fill="none" stroke="#808080" stroke-width="10.8612" stroke-miterlimit="10" stroke-dasharray="40.8475" d="M890.6,261 c33.5,65.8,51,138.6,51,212.5c0,258.4-209.7,468.1-468.1,468.1S5.4,731.9,5.4,473.5C5.4,215.1,215.1,5.4,473.5,5.4 c83.1,0,164.6,22.1,236.2,63.9"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="110.4211" height="109.8461" id="svg2169" sodipodi:version="0.32" inkscape:version="0.45.1" version="1.0" sodipodi:docbase="/home/bene/Desktop" sodipodi:docname="dessin-1.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape">
|
||||
<defs id="defs2171">
|
||||
<linearGradient id="linearGradient11301" inkscape:collect="always">
|
||||
<stop id="stop11303" offset="0" style="stop-color:#ffe052;stop-opacity:1"/>
|
||||
<stop id="stop11305" offset="1" style="stop-color:#ffc331;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" y2="168.1012" x2="147.77737" y1="111.92053" x1="89.136749" id="linearGradient11307" xlink:href="#linearGradient11301" inkscape:collect="always"/>
|
||||
<linearGradient id="linearGradient9515" inkscape:collect="always">
|
||||
<stop id="stop9517" offset="0" style="stop-color:#387eb8;stop-opacity:1"/>
|
||||
<stop id="stop9519" offset="1" style="stop-color:#366994;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" y2="131.85291" x2="110.14919" y1="77.070274" x1="55.549179" id="linearGradient9521" xlink:href="#linearGradient9515" inkscape:collect="always"/>
|
||||
</defs>
|
||||
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.24748737" inkscape:cx="-260.46312" inkscape:cy="316.02744" inkscape:document-units="px" inkscape:current-layer="layer1" width="131.10236px" height="184.25197px" inkscape:window-width="872" inkscape:window-height="624" inkscape:window-x="5" inkscape:window-y="48"/>
|
||||
<metadata id="metadata2174">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g inkscape:label="Calque 1" inkscape:groupmode="layer" id="layer1" transform="translate(-473.36088,-251.72485)">
|
||||
<g id="g1894" transform="translate(428.42338,184.2561)">
|
||||
<path style="opacity:1;color:#000000;fill:url(#linearGradient9521);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" d="M 99.75,67.46875 C 71.718268,67.468752 73.46875,79.625 73.46875,79.625 L 73.5,92.21875 L 100.25,92.21875 L 100.25,96 L 62.875,96 C 62.875,96 44.9375,93.965724 44.9375,122.25 C 44.937498,150.53427 60.59375,149.53125 60.59375,149.53125 L 69.9375,149.53125 L 69.9375,136.40625 C 69.9375,136.40625 69.433848,120.75 85.34375,120.75 C 101.25365,120.75 111.875,120.75 111.875,120.75 C 111.875,120.75 126.78125,120.99096 126.78125,106.34375 C 126.78125,91.696544 126.78125,82.125 126.78125,82.125 C 126.78125,82.124998 129.04443,67.46875 99.75,67.46875 z M 85,75.9375 C 87.661429,75.937498 89.8125,78.088571 89.8125,80.75 C 89.812502,83.411429 87.661429,85.5625 85,85.5625 C 82.338571,85.562502 80.1875,83.411429 80.1875,80.75 C 80.187498,78.088571 82.338571,75.9375 85,75.9375 z " id="path8615"/>
|
||||
<path id="path8620" d="M 100.5461,177.31485 C 128.57784,177.31485 126.82735,165.1586 126.82735,165.1586 L 126.7961,152.56485 L 100.0461,152.56485 L 100.0461,148.7836 L 137.4211,148.7836 C 137.4211,148.7836 155.3586,150.81787 155.3586,122.53359 C 155.35861,94.249323 139.70235,95.252343 139.70235,95.252343 L 130.3586,95.252343 L 130.3586,108.37734 C 130.3586,108.37734 130.86226,124.03359 114.95235,124.03359 C 99.042448,124.03359 88.421098,124.03359 88.421098,124.03359 C 88.421098,124.03359 73.514848,123.79263 73.514848,138.43985 C 73.514848,153.08705 73.514848,162.6586 73.514848,162.6586 C 73.514848,162.6586 71.251668,177.31485 100.5461,177.31485 z M 115.2961,168.8461 C 112.63467,168.8461 110.4836,166.69503 110.4836,164.0336 C 110.4836,161.37217 112.63467,159.2211 115.2961,159.2211 C 117.95753,159.2211 120.1086,161.37217 120.1086,164.0336 C 120.10861,166.69503 117.95753,168.8461 115.2961,168.8461 z " style="opacity:1;color:#000000;fill:url(#linearGradient11307);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.5 KiB |
10
index.html
10
index.html
|
|
@ -9,9 +9,13 @@
|
|||
<header>
|
||||
<h1>Code Playground</h1>
|
||||
</header>
|
||||
<ul>
|
||||
<li><a href="js.html">Javascript</a></li>
|
||||
</ul>
|
||||
<div class="cards">
|
||||
<a class="card" href="js.html"><div class="bg-img" id="js-card"></div><p>Javascript</p></a>
|
||||
<a class="card" href="python.html"><div class="bg-img" id="py-card"></div><p>Python</p></a>
|
||||
<a class="card"><div class="bg-img" id="html-card"></div><p>HTML</p></a>
|
||||
<a class="card"><div class="bg-img" id="sqlite-card"></div><p>SQLite</p></a>
|
||||
<a class="card"><div class="bg-img" id="lua-card"></div><p>Lua</p></a>
|
||||
</div>
|
||||
<p>
|
||||
Ce projet vous permet de tester rapidement des codes Javascript depuis le navigateur en profitant de la coloration syntaxique, il n'envoie aucune autre donnée au serveur que celles requises pour télécharger les pages, les scripts et les styles, tout le reste se passe sur votre ordinateur.<br />
|
||||
Ce projet est publié sous licence libre, licence <a href="https://creativecommons.org/publicdomain/zero/1.0/legalcode" target="_blank">CC0</a>.
|
||||
|
|
|
|||
Loading…
Reference in New Issue