First commit \o/

This commit is contained in:
Tito Sacchi 2021-10-15 14:33:59 +02:00
commit 3870510776
2 changed files with 214 additions and 0 deletions

69
index.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>~tito</title>
<meta name="description" content="tito's tilde page">
</head>
<body>
<div class="sidecolors">
<div class="sidecolor1"></div>
<div class="sidecolor2"></div>
<div class="sidecolor3"></div>
</div>
<div class="container">
<header class="row">
<div class="title">
<!-- <span class="title">~tito</span> -->
<h1><a href=".">/home/tito</a></h1>
<!-- <a href=".">/home/tito</a> -->
</div>
</header>
<nav class="row">
<ul>
<li><a href="about_me.html">/about_me</a></li>
<li><a href="contacts.html">/contacts</a></li>
<li><a href="cv.html">/cv</a></li>
</ul>
</nav>
<main class="row">
<h2>Hi! I'm tito.</h2>
<p>
I'm Tito Sacchi, an Italian guy trying to have fun while deciding
which of my interests I'm willing to spend more time on in the
forecoming years. I like maths, computers, classical piano, swimming,
electric guitars, hiking, and a lot of other things that I'd be glad
to share with someone else.
<a href="about_me.html">More about me and my interests.</a>
</p>
<p>
Write me at <a href="mailto:tito@tilde.team">tito@tilde.team</a>.
You can find more accurate contact information on the <a href="contacts.html">contact page</a>.
</p>
</main>
<footer class="row">
<p class="text-muted">
Hosted on <a href="https://tilde.team">~team</a>
<br/>
<!-- tilde.team ring fragment-->
[<a href="https://tilde.team/ring/?action=prev&me=tito">previous</a>]
[<a href="https://tilde.team/ring/?action=random&me=tito">random</a>]
[<a href="https://tilde.team/ring/?action=next&me=tito">next</a>]
<br/>
<a href="https://tilde.team/ring/">How to join this webring</a>
</p>
</footer>
</div>
</body>
</html>
<!--
vim: ts=2:sts=2:sw=2:et
-->

145
style.css Normal file
View File

@ -0,0 +1,145 @@
html {
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
body {
font-family: "Montserrat", sans-serif;
font-size: 14pt;
}
.container {
padding: 30px 60px 30px 60px;
max-width: 800px;
}
.container .row {
justify-content: center !important;
margin-bottom: 20px;
}
pre {
font-family: "Source Code Pro", monospace;
}
div.title {
display: flex;
justify-content: center;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
background-color: #001f6e;
color: #ffffff;
border-bottom: 5px solid #0086ed;
font-family: "Source Code Pro", monospace;
padding: 10px 20px 10px 20px;
width: initial !important;
}
div.title h1 {
margin: 0;
}
div.title a {
color: #ffffff !important;
text-decoration: none;
}
nav ul {
display: flex;
justify-content: center;
}
nav li {
display: flex;
justify-content: center;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
background-color: #034a9c;
color: #ffffff;
border-bottom: 5px solid #0086ed;
font-family: "Source Code Pro", monospace;
padding: 10px;
margin: 0px 5px 0px 5px;
width: 130px !important;
}
nav li:hover {
background-color: #001f6e;
transition: background-color 0.2s linear;
}
nav li h1 {
margin: 0;
}
nav li a {
color: #ffffff !important;
text-decoration: none;
}
main h1 {
border-left: 5px solid #0086ed;
}
main h2 {
border-left: 3px solid #0086ed;
}
footer p {
display: block;
text-align: center;
margin-bottom: 0;
}
.sidecolor1 {
position: fixed;
top: 0px;
left: 0px;
width: 15px;
height: 100%;
background-color: #001f6e;
}
@media (max-width: 900px) {
.sidecolor1 {
visibility: hidden;
}
}
@media print {
.sidecolor1 {
visibility: hidden;
}
}
.sidecolor2 {
position: fixed;
top: 0px;
left: 15px;
width: 15px;
height: 100%;
background-color: #034a9c;
}
@media (max-width: 900px) {
.sidecolor2 {
visibility: hidden;
}
}
@media print {
.sidecolor2 {
visibility: hidden;
}
}
.sidecolor3 {
position: fixed;
top: 0px;
left: 30px;
width: 15px;
height: 100%;
background-color: #0086ed;
}
@media (max-width: 900px) {
.sidecolor3 {
visibility: hidden;
}
}
@media print {
.sidecolor3 {
visibility: hidden;
}
}
/*
* vim: ts=2:sts=2:sw=2:et
*/
/*# sourceMappingURL=style.css.map */