html image and index
This commit is contained in:
Dario48true
parent
af5ccc8220
commit
fcd31e9f15
2 changed files with 195 additions and 0 deletions
70
home/Dario48/Pictures/html.svg
Normal file
70
home/Dario48/Pictures/html.svg
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="48"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 0 12.7 12.7"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
sodipodi:docname="html.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="9.2218057"
|
||||||
|
inkscape:cx="14.3139"
|
||||||
|
inkscape:cy="22.067262"
|
||||||
|
inkscape:window-width="1536"
|
||||||
|
inkscape:window-height="808"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient2"
|
||||||
|
inkscape:collect="always">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#0357d1;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop2" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#27cdfc;stop-opacity:1;"
|
||||||
|
offset="1"
|
||||||
|
id="stop3" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient2"
|
||||||
|
id="linearGradient3"
|
||||||
|
x1="6.768087e-06"
|
||||||
|
y1="6.3637207"
|
||||||
|
x2="12.694992"
|
||||||
|
y2="6.3637207"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0.98607749,0,0,0.9816203,0.08843632,0.08851652)" />
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
id="path2-2-6"
|
||||||
|
style="fill:none;stroke:url(#linearGradient3);stroke-width:0.26458333;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 11.729038,3.2476678 6.416327,3.2284637 0.97437682,3.2087923 M 11.729014,9.4301585 0.97404408,9.3888281 M 12.606596,6.3387384 0.08852914,6.2999638 M 6.4168354,0.08860892 6.3778847,12.550093 M 9.4824611,6.3584687 A 3.0949619,6.1959967 0 0 1 6.3874993,12.554465 3.0949619,6.1959967 0 0 1 3.2925374,6.3584687 3.0949619,6.1959967 0 0 1 6.3874993,0.16247206 3.0949619,6.1959967 0 0 1 9.4824611,6.3584687 Z M 12.561709,6.3238028 A 6.2096745,6.1816062 0 0 1 6.3520346,12.505408 6.2096745,6.1816062 0 0 1 0.14236009,6.3238028 6.2096745,6.1816062 0 0 1 6.3520346,0.14219655 6.2096745,6.1816062 0 0 1 12.561709,6.3238028 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
125
home/Dario48/index.html
Normal file
125
home/Dario48/index.html
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>/</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #161925;
|
||||||
|
}
|
||||||
|
::selection{
|
||||||
|
background-color: #00D3A7;
|
||||||
|
color: #fefefe;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stretch {
|
||||||
|
width: calc(50vw - 4px);
|
||||||
|
color: #C3C7D1;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 50vw; /* 50% of the viewport's width */
|
||||||
|
height: 50vh; /* 50% of the viewport's height */
|
||||||
|
border: 2px solid white;
|
||||||
|
flex-direction: row; /* Stack children horizontaly */
|
||||||
|
justify-content: center; /* Align children to the top */
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #c6262e;
|
||||||
|
color=black;
|
||||||
|
border: 1px solid white;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #ed5353;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #C3C7D1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: max(min(90%, 100px), 50px);
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body id="body">
|
||||||
|
<div class="border">
|
||||||
|
<div class="column">
|
||||||
|
<div class="stretch row">
|
||||||
|
Dario48's website
|
||||||
|
<div style="aspect-ratio: 1 / 1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick="document.getElementById('body').remove();"
|
||||||
|
>
|
||||||
|
X
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form>
|
||||||
|
<input type="text" value="/home/Dario48/" class="stretch" />
|
||||||
|
</form>
|
||||||
|
<nav class="row">
|
||||||
|
<div class="column folder">
|
||||||
|
<a href="Pictures/">
|
||||||
|
<img
|
||||||
|
src="/home/Dario48/Pictures/folder.svg"
|
||||||
|
style="
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<p style="text-align: center">Pictures</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="column folder">
|
||||||
|
<a href="compito_online-ricerca_Dario-Spinnato-4Q-RSA-13022025.html">
|
||||||
|
<img
|
||||||
|
src="/home/Dario48/Pictures/html.svg"
|
||||||
|
style="
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<p style="text-align: center">compito_online-ricerca_Dario-Spinnato-4Q-RSA-13022025.html</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue