new stuff
This commit is contained in:
parent
3105e1801e
commit
d4b42df707
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
30
index.html
30
index.html
|
|
@ -8,12 +8,12 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<video autoplay muted loop class="bgvideo" id="bgvideo">
|
||||
<source src="Untitled.mp4" type="video/mp4">
|
||||
<video autoplay muted loop class="bgvideo" id="bgvideo">
|
||||
<source src="Untitled.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<div class="middlething">
|
||||
<div class="navbar"> <a id="active" href="index.html">Main Page </a> <a href="projects.html">Projects </a></div>
|
||||
<div class="navbar"> <a id="active" href="index.html">Main Page </a> <a href="projects.html">Projects </a></div>
|
||||
<h3 class="paragraph invert">Hello hi, I'm Gnawmon</h3>
|
||||
<p class="paragraph">
|
||||
I'm a programmer and an artist <br> <br>
|
||||
|
|
@ -22,26 +22,20 @@
|
|||
unity and never posted them online. <br> <br>
|
||||
I've made <tot class="tooltip">a few scenery<span class="tooltiptext">You're watching them right now!
|
||||
Although it's blurred</span> </tot> in blender and posted a few on <a style="color: #1DA1F2;"
|
||||
target=”_blank” href="https://www.twitter.com/gnawmon">twitter</a> but stopped posting a while back. I
|
||||
target=”_blank” href="https://nitter.net/Gnawmon">twitter</a> but stopped posting a while back. I
|
||||
also made prodecural textures with substance 3d in the past.<br><br>
|
||||
I use an arch based os btw<br><br>
|
||||
<button onclick="pauseVideo()">Pause the video</button>
|
||||
|
||||
|
||||
</p>
|
||||
<h2 onclick="showThing('gallery')" class="paragraph dropdown">More</h2>
|
||||
<div id="gallery">
|
||||
<p class="paragraph">
|
||||
i speak <s>3</s> 2 languages
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
i speak <s>3</s> 2 languages
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<div class="contact">
|
||||
<img src="svg/matrix.svg" height="40" width="40" />
|
||||
<p>@gnawmon@matrix.org</p>
|
||||
|
|
@ -51,8 +45,8 @@
|
|||
<p>@gnawmon</p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<a href="https://github.com/Gnawmon" class="fill-div">
|
||||
<img src="svg/github.svg" height="40" width="40" />
|
||||
<a href="https://git.vern.cc/gnawmon" class="fill-div">
|
||||
<img src="svg/forgejo.svg" height="40" width="40" />
|
||||
<p>/gnawmon</p>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -60,8 +54,12 @@
|
|||
<a href="https://endeavouros.com/"> <img src="88x31/endeavour.png"></img> </a>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/new"> <img src="88x31/firefox.gif"></img></a>
|
||||
<img src="88x31/ie_exploder.gif"></img>
|
||||
<a href="https://vern.cc"> <img src="88x31/vern.png"></img></a>
|
||||
<!-- <button id="rotate_button" onclick="rotate()">rotate</button> -->
|
||||
</div>
|
||||
|
||||
<p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website"
|
||||
class="link">source code</a></p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
|
||||
</p>
|
||||
|
||||
<p class="paragraph bottomtext" ><a class="link">source code</a></p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
76
style.css
76
style.css
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
--accent-color: rgb(227, 154, 228);
|
||||
--white: rgb(255, 255, 252);
|
||||
--overlay: #00000069;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -11,7 +12,7 @@ body {
|
|||
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background: rgb(37, 40, 61);
|
||||
background: var(--overlay);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -28,8 +29,9 @@ li {
|
|||
font-variant: normal;
|
||||
color: var(--white);
|
||||
}
|
||||
button{
|
||||
background: linear-gradient(1800deg,var(--accent-color),rgba(0, 0, 0, 0.355) 70%);
|
||||
|
||||
button {
|
||||
background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
border: none;
|
||||
|
|
@ -38,16 +40,19 @@ button{
|
|||
border-bottom: 5px solid var(--accent-color);
|
||||
border-radius: 2px;
|
||||
transition: 0.3s;
|
||||
|
||||
|
||||
}
|
||||
button:hover{
|
||||
|
||||
button:hover {
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
}
|
||||
button:active{
|
||||
|
||||
button:active {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
align-self: center;
|
||||
position: relative;
|
||||
|
|
@ -58,8 +63,8 @@ button:active{
|
|||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height:30px;
|
||||
background: #00000069;
|
||||
height: 30px;
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
|
|
@ -118,7 +123,7 @@ button:active{
|
|||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
|
@ -126,7 +131,7 @@ button:active{
|
|||
border-bottom: 3px solid var(--accent-color);
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -269,40 +274,59 @@ input:focus {
|
|||
color: var(--white);
|
||||
backdrop-filter: blur(100px);
|
||||
}
|
||||
.contact{
|
||||
|
||||
.contact {
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
backdrop-filter: blur(100px);
|
||||
|
||||
backdrop-filter: blur(100px);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.contact image{
|
||||
|
||||
.contact image {
|
||||
display: inline-block;
|
||||
}
|
||||
.contact p{
|
||||
padding-left: 10px;
|
||||
|
||||
.contact p {
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 10px; /* <-- adjust this */
|
||||
line-height: 10px;
|
||||
/* <-- adjust this */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.contact a{
|
||||
|
||||
.contact a {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
.smalimages{
|
||||
|
||||
.smalimages {
|
||||
align-self: center;
|
||||
position: relative;
|
||||
}
|
||||
.smalimages img{
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
margin-top: 100px;
|
||||
|
||||
.smalimages img {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.bottomtext {
|
||||
backdrop-filter: blur(100px);
|
||||
text-align: center;
|
||||
margin-top: 4%;
|
||||
bottom: 0;
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
|
||||
<dc:title>Forgejo logo</dc:title>
|
||||
<cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
|
||||
<cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<style type="text/css">
|
||||
circle {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 15;
|
||||
}
|
||||
path {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 25;
|
||||
}
|
||||
.orange {
|
||||
stroke:#ffffff;
|
||||
}
|
||||
.red {
|
||||
stroke:#ffffff;
|
||||
}
|
||||
</style>
|
||||
<g transform="translate(6,6)">
|
||||
<path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange"/>
|
||||
<path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red"/>
|
||||
<circle cx="142" cy="20" r="18" class="orange"/>
|
||||
<circle cx="142" cy="88" r="18" class="red"/>
|
||||
<circle cx="58" cy="180" r="18" class="red"/>
|
||||
</g>
|
||||
<script xmlns=""/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue