save
This commit is contained in:
commit
3ded29e8f6
91
index.html
Normal file
91
index.html
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>cephii.com</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
#grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2vw auto 2vw;
|
||||||
|
}
|
||||||
|
#services {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
ul li a img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#grid {
|
||||||
|
grid-template-columns: auto;
|
||||||
|
}
|
||||||
|
#services {
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
a img {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
flex-flow: column-reverse;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body style="margin: 0;">
|
||||||
|
<header>
|
||||||
|
<h1>cephii.com</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section style="display: flex; background-color: lightblue;">
|
||||||
|
<nav style="flex: 1; padding: 0 2vw; display: flex; flex-flow: row wrap;">
|
||||||
|
<a style="padding: 0.2rem 1rem;" href="#">Home</a>
|
||||||
|
<a style="padding: 0.2rem 1rem;" href="#">Blog</a>
|
||||||
|
<a style="padding: 0.2rem 1rem;" href="#">About Me</a>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="grid">
|
||||||
|
<div></div>
|
||||||
|
<section style="display: inline;">
|
||||||
|
<section style="display: flex;">
|
||||||
|
<article style="flex: 3;">
|
||||||
|
<h1>London</h1>
|
||||||
|
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
|
||||||
|
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
|
||||||
|
</article>
|
||||||
|
<nav id="services" style="flex: 1;">
|
||||||
|
<ul style="list-style-type: none; padding: 0 0 0 0;">
|
||||||
|
<li style="padding: 0 0 0 0; background-size: 40px; background-repeat: no-repeat; background-position: left center;"><a href="https://sso.cephii.com" style="text-align: center"><img class="services" src="https://repository-images.githubusercontent.com/230885748/19f01d00-8e26-11eb-9a14-cf0d28a1b68d"></img></a></li>
|
||||||
|
<li><a href="https://stream.cephii.com" style="text-align: center"><img class="services" src="https://sinajahangiri.com/wp-content/uploads/2020/04/51KORkIMXqL.png"></img></a></li>
|
||||||
|
<li><a style="text-align: center">Jellyseerr</a></li>
|
||||||
|
<li><a style="text-align: center">Nextcloud</a></li>
|
||||||
|
<li><a style="text-align: center">Gitea</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Footer</p>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<div></div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
271
index.html.bak
Normal file
271
index.html.bak
Normal file
@ -0,0 +1,271 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
<title>Cephi's Studio</title>
|
||||||
|
<!-- <link rel="stylesheet" href="cephi.studio.css"> -->
|
||||||
|
<!--
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
color-scheme: light dark;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
width: 35em;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: Tahoma, Verdana, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #F7F5EB;
|
||||||
|
--accent: #A0C3D2;
|
||||||
|
--accent-bg: #EAE0DA;
|
||||||
|
--border: #4d4d4d;
|
||||||
|
/*--border: #EAC7C7;*/
|
||||||
|
--text: #212427;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--text);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr min(70rem, 95%) 1fr;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: -apple-system, "Segoe UI", Verdana, Arial, sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > * {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea, button {
|
||||||
|
color: var(--text);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-bottom: 1px solid var(--accent);
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 5rem;
|
||||||
|
margin: 1rem 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 1rem 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; }
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
line-height: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
'top'
|
||||||
|
'about-arrow'
|
||||||
|
'body';
|
||||||
|
grid-template-rows: max(45rem, 85vh) 15vh 1fr;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
grid-area: top;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
/*height: 100%;*/
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
|
||||||
|
background-color: var(--bg);
|
||||||
|
|
||||||
|
border: 5px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
padding: 4%;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
'info buttons'
|
||||||
|
'contact buttons';
|
||||||
|
grid-template-columns: 3fr 1fr;
|
||||||
|
grid-column-gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
grid-area: info;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.buttons {
|
||||||
|
grid-area: buttons;
|
||||||
|
|
||||||
|
min-width: 8rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 3% 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons a {
|
||||||
|
height: min(5rem, 30%);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin-bottom: 2%;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons button {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background-color: var(--accent);
|
||||||
|
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
transition-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons button:hover {
|
||||||
|
filter: brightness(110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.contact {
|
||||||
|
grid-area: contact;
|
||||||
|
|
||||||
|
margin: 20px 0 0 0;
|
||||||
|
padding: 0px 8%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact a, button {
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact a {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact button {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
border: 1px solid black;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact img {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body { grid-area: body; }
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1080px) {
|
||||||
|
.grid-container {
|
||||||
|
grid-template-rows: auto 15vh 1fr;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
height: fit-content;
|
||||||
|
|
||||||
|
margin: 0.5rem 0 0 0;
|
||||||
|
padding: 1.2rem;
|
||||||
|
grid-template-areas:
|
||||||
|
'info'
|
||||||
|
'buttons'
|
||||||
|
'contact';
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr 30.3rem 0.6fr;
|
||||||
|
}
|
||||||
|
/* .info, .buttons { flex: 100%; } */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="grid-container">
|
||||||
|
<section class="top">
|
||||||
|
<div class="menu">
|
||||||
|
<div class="info">
|
||||||
|
<h1 style="text-align: center;">Cephi's Studio</h1>
|
||||||
|
<p>Welcome to my studio! Home of my experiments!</p>
|
||||||
|
<p>On the right, you can find the services I host.</p>
|
||||||
|
<p>Some of them require registration, which you can do by contacting me.</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact">
|
||||||
|
<h3 style="text-align: center; font-size: 2rem; margin-bottom: 1rem; width: 100%">Contact</h3>
|
||||||
|
<a href="https://github.com/Cephi-sui" target="_blank" rel="noopener noreferrer"><button><img src="images/github_logo.png"/></button></a>
|
||||||
|
<a href="/"><button><img src="images/email_logo.png"/></button></a>
|
||||||
|
<a href="/"><button><img src="images/pleroma_logo.png"/></button></a>
|
||||||
|
<a href="https://matrix.to/#/@cephi:bunbi.net"><button><img src="images/matrix_logo.png"/></button></a>
|
||||||
|
<a href="https://discord.com/users/830154514208129055"><button><img src="images/discord_logo.png"/></button></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="buttons">
|
||||||
|
<a href="https://stream.cephi.studio/"><button>Stream</button></a>
|
||||||
|
<a href="https://cloud.cephi.studio/"><button>Cloud</button></a>
|
||||||
|
<a href="https://cloud.cephi.studio/"><button>IN<br/>PROGRESS</button></a>
|
||||||
|
<a href="https://cloud.cephi.studio/"><button>IN<br/>PROGRESS</button></a>
|
||||||
|
<a href="https://cloud.cephi.studio/"><button>IN<br/>PRGORESS</button></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="about-arrow">
|
||||||
|
<p style="margin: -0.2em; text-align: center; font-size: 5rem;">⬇</p>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<p>This is the soon-to-be homebase for my projects and information.</p>
|
||||||
|
<p>Unfortunately, this is still under some serious progress!</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user