site revamp with pure html and css, fixing missing links for bsky and twitch
This commit is contained in:
parent
a77f19ee3a
commit
201618e8f3
6 changed files with 317 additions and 451 deletions
370
main/index.css
370
main/index.css
|
|
@ -1,345 +1,93 @@
|
|||
@import url(https://fonts.bunny.net/css?family=poppins);
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
max-width:100vw;
|
||||
overflow-x:hidden;
|
||||
scroll-behavior: smooth;
|
||||
@import url(https://fonts.bunny.net/css?family=azeret-mono);
|
||||
*{
|
||||
font-family: 'Azeret Mono', monospace;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
header {
|
||||
width:92vw;
|
||||
body{
|
||||
padding:6vh 4vw;
|
||||
position:fixed;
|
||||
}
|
||||
/* The side navigation menu */
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
background-color: #5e344a
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
/* Sidebar links */
|
||||
.sidebar a {
|
||||
display: block;
|
||||
color: black;
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Active/current link */
|
||||
.sidebar a.active {
|
||||
background-color: #04AA6D;
|
||||
color: #5e344a;
|
||||
}
|
||||
/* Links on mouse-over */
|
||||
.sidebar a:hover:not(.active) {
|
||||
background-color: #555;
|
||||
color: #5e344a;
|
||||
}
|
||||
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
|
||||
div.content {
|
||||
margin-left: 200px;
|
||||
padding: 16px 16px;
|
||||
}
|
||||
/* On screens that are less than 700px wide, make the sidebar into a topbar */
|
||||
@media screen and (max-width: 700px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar a {float: left;}
|
||||
div.content {margin-left: 0;}
|
||||
}
|
||||
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
|
||||
@media screen and (max-width: 400px) {
|
||||
.sidebar a {
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
#home {
|
||||
font-weight:bold;
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
transition:0.4s ease-in-out;
|
||||
z-index:2;
|
||||
}
|
||||
header table {
|
||||
width:100%;
|
||||
}
|
||||
#logo {
|
||||
width:20%;
|
||||
}
|
||||
#navigation {
|
||||
width:80%;
|
||||
}
|
||||
#img_here {
|
||||
width:60%;
|
||||
height:90%;
|
||||
background-size:contain !important;
|
||||
background-repeat:no-repeat !important;
|
||||
margin:0px auto;
|
||||
}
|
||||
#logo {
|
||||
font-size:24px;
|
||||
color:rgb(255, 44, 90);
|
||||
}
|
||||
#navigation {
|
||||
text-align:right;
|
||||
}
|
||||
#navigation a {
|
||||
color:inherit;
|
||||
text-decoration:none;
|
||||
padding:5px 10px;
|
||||
border-bottom:2px solid transparent;
|
||||
margin-left:2vw;
|
||||
margin-right:2vw;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
#navigation a:hover{
|
||||
border-bottom:2px solid #fff;
|
||||
}
|
||||
#top_part {
|
||||
width:100%;
|
||||
/* border:2vh solid #fff; */
|
||||
}
|
||||
#top_part tr td{
|
||||
width:50%;
|
||||
}
|
||||
#about {
|
||||
width:84% !important;
|
||||
height:95vh;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
text-align:left;
|
||||
padding:0px 8%;
|
||||
}
|
||||
#about h1 {
|
||||
font-size:45px;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
#about table {
|
||||
width:70%;
|
||||
margin-top:4vh;
|
||||
}
|
||||
#about table tr td {
|
||||
width:20% !important;
|
||||
text-align:left;
|
||||
}
|
||||
.social {
|
||||
color:rgb(255, 44, 90);
|
||||
font-size:23px;
|
||||
padding:12px 17px;
|
||||
border-radius:50%;
|
||||
background:transparent;
|
||||
transition:0.4s ease-in-out;
|
||||
font-weight:bold;
|
||||
margin:0px 8px;
|
||||
}
|
||||
.social:hover {
|
||||
cursor: pointer;
|
||||
color:#fff;
|
||||
background:rgb(255, 44, 90);
|
||||
box-shadow:0px 10px 30px rgba(255, 66, 107,0.8);
|
||||
}
|
||||
.btn_one {
|
||||
font-size:18px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
color:rgb(255, 44, 90);
|
||||
background:#fff;
|
||||
border:3px solid rgb(255, 44, 90);
|
||||
padding:8px 40px;
|
||||
width:35%;
|
||||
border-radius:80px;
|
||||
font-weight:bold;
|
||||
margin:2vh 0px;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
.btn_one:hover {
|
||||
box-shadow:0px 10px 30px rgba(255, 44, 90, 0.8);
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
background:rgb(255, 44, 90);
|
||||
}
|
||||
#rightImage {
|
||||
width:100%;
|
||||
height:100vh;
|
||||
background:linear-gradient(0deg,rgba(255, 44, 90, 0.8),rgba(255, 44, 90, 0.8)), url("images/xeniakiki.png") center center;
|
||||
background-size:cover;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
#gallery {
|
||||
width:92vw;
|
||||
padding:6vh 4vw;
|
||||
font-weight:bold;
|
||||
}
|
||||
#gallery h1 {
|
||||
padding:5px 0px;
|
||||
border-bottom:4px solid rgb(255, 44, 90);
|
||||
width:6%;
|
||||
}
|
||||
#photos {
|
||||
width:100%;
|
||||
columns:3;
|
||||
width:50%;
|
||||
column-gap:4%;
|
||||
z-index:1;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
#photos img {
|
||||
width:100%;
|
||||
width:20%;
|
||||
height:auto;
|
||||
margin:4.5% 0px;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
#photos img:hover {
|
||||
transform: scale(1.1);
|
||||
transform: scale(2);
|
||||
cursor: pointer;
|
||||
}
|
||||
#comms {
|
||||
width:92vw;
|
||||
padding:6vh 4vw;
|
||||
font-weight:bold;
|
||||
}
|
||||
#comms h1 {
|
||||
padding:5px 0px;
|
||||
border-bottom:4px solid rgb(255, 44, 90);
|
||||
width:25%;
|
||||
}
|
||||
#contact {
|
||||
width:92vw;
|
||||
padding:6vh 4vw;
|
||||
width:auto;
|
||||
}
|
||||
#contact h1 {
|
||||
padding:5px 0px;
|
||||
border-bottom:4px solid rgb(255, 44, 90);
|
||||
width:10%;
|
||||
}
|
||||
#contact table {
|
||||
width:100%;
|
||||
}
|
||||
#contact table tr td {
|
||||
width:50%;
|
||||
}
|
||||
#inner_div table{
|
||||
width:100%;
|
||||
}
|
||||
#inner_div table tr td{
|
||||
font-weight:bold;
|
||||
}
|
||||
#inner_table tr td{
|
||||
padding:10px 20px !important;
|
||||
}
|
||||
#footer {
|
||||
width:100%;
|
||||
padding:10vh 0px;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
}
|
||||
#footer a {
|
||||
color:rgb(255, 44, 90);
|
||||
text-decoration:none;
|
||||
}
|
||||
::placeholder {
|
||||
color:#000;
|
||||
}
|
||||
button:focus {
|
||||
outline:none;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width:5px;
|
||||
height:5px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0,0.8);
|
||||
}
|
||||
|
||||
@media (max-width: 1000px){
|
||||
#photos {
|
||||
columns:1;
|
||||
column-gap:0%;
|
||||
}
|
||||
#photos img {
|
||||
margin:2% 0px;
|
||||
}
|
||||
#photos img:hover {
|
||||
transform: scale(1);
|
||||
cursor: pointer;
|
||||
}
|
||||
#rightImage {
|
||||
display:none;
|
||||
}
|
||||
#top_part {
|
||||
border:0px;
|
||||
}
|
||||
#top_part tr td{
|
||||
width:100%;
|
||||
text-align:center;
|
||||
}
|
||||
#about {
|
||||
width:92% !important;
|
||||
height:75vh;
|
||||
padding-top:20vh !important;
|
||||
text-align:center;
|
||||
padding:0px 4%;
|
||||
}
|
||||
#about table {
|
||||
width:100%;
|
||||
margin-top:6vh;
|
||||
}
|
||||
#about table tr td {
|
||||
text-align:center;
|
||||
}
|
||||
.btn_one {
|
||||
padding:6px 30px;
|
||||
width:60%;
|
||||
margin:4vh auto;
|
||||
box-shadow:0px 10px 20px rgba(255, 44, 90, 0.8);
|
||||
background:rgb(255, 44, 90);
|
||||
color:#fff;
|
||||
}
|
||||
.btn_one:hover {
|
||||
box-shadow:0px 10px 40px rgba(255, 44, 90, 0.8);
|
||||
cursor:pointer;
|
||||
}
|
||||
#contact table tr td {
|
||||
width:100%;
|
||||
display:block;
|
||||
}
|
||||
#inner_table tr td{
|
||||
padding:10px 0px !important;
|
||||
}
|
||||
#contact form input {
|
||||
width:90%;
|
||||
}
|
||||
#contact form textarea {
|
||||
width:90%;
|
||||
}
|
||||
#gallery h1 {
|
||||
width:19%;
|
||||
}
|
||||
#comms h1 {
|
||||
width:25%;
|
||||
}
|
||||
#contact h1 {
|
||||
width:33%;
|
||||
}
|
||||
header {
|
||||
width:96vw;
|
||||
background:#fff;
|
||||
padding:4vh 2vw;
|
||||
position:absolute;
|
||||
}
|
||||
#header table tr td {
|
||||
width:100%;
|
||||
display:block;
|
||||
text-align:center;
|
||||
padding:15px 0px;
|
||||
}
|
||||
#navigation a {
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
/* Dropdown Button */
|
||||
.dropbtn {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
.dropdown {
|
||||
position: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: purple;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Links inside the dropdown */
|
||||
.dropdown-content a {
|
||||
color:inherit;
|
||||
text-decoration:none;
|
||||
padding:5px 10px;
|
||||
border-bottom:2px solid transparent;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Change color of dropdown links on hover */
|
||||
#dropdown-content a:hover {background-color: #grey;}
|
||||
|
||||
/* Show the dropdown menu on hover */
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
/* Change the background color of the dropdown button when the dropdown content is shown
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
*/
|
||||
|
|
|
|||
145
main/index.html
145
main/index.html
|
|
@ -1,77 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Alison Kit</title>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="logo">Alison Kit</td>
|
||||
<td id="navigation">
|
||||
<a href="#gallery">Gallery</a>
|
||||
<a href="#comms">Commission</a>
|
||||
<a href="https://nuzzle.thecomicseries.com">Nuzzle</a>
|
||||
<div class="dropdown">
|
||||
<a class="dropbtn">Contact</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://ko-fi.com/alisonkit">Ko-Fi</a>
|
||||
<a href="https://cohost.org.alisonkit">Cohost</a>
|
||||
<a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a>
|
||||
<a href="https://bsky.app/alisonkit.com">Bluesky</a>
|
||||
<a href="https://twitch.tv/alisonkit">Twitch</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
<table id="top_part">
|
||||
<tr>
|
||||
<td id="about">
|
||||
<h1>Artist, Writer, Red Panda.</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td><a class="social" href="https://mastodon.art/@alisonkit"><i class="fab fa-mastodon"></i></a></td>
|
||||
<td><a class="social" href="https://tumblr.com/alisonkit"><i class="fab fa-tumblr"></i></a></td>
|
||||
<td><a class="social" href="https://cohost.org/alisonkit">Cohost</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td id="rightImage"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="gallery">
|
||||
<h1>Gallery</h1>
|
||||
<div id="photos">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/xenia.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/niko.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/nona.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/alisonterra.jpg">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/sybil.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/pueblomagico.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/mystfawf.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/akautomata.png">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alison Kit</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- The sidebar -->
|
||||
<div class="sidenav">
|
||||
<a href="#home">Home</a>
|
||||
<a href="#gallery">Gallery</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comms">
|
||||
<h1>Commissions</h1>
|
||||
<h2>Commissions are open.</h2>
|
||||
<button>Commission Info</button>
|
||||
<button>Commission Queue</button>
|
||||
<p>For current commission slot availability, check social media for any annoucements.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
Alison Kit 2023 <br> website based on template by <a href="https://imfunniee.github.io">imfunniee</a>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<a href="https://cd5k.net/tau/">τ</a>
|
||||
<script src="index.js" type="text/javascript"></script>
|
||||
</body>
|
||||
<div class="main"><!-- container to push stuff aside from nav bar -->
|
||||
<!-- home -->
|
||||
<div id="home">
|
||||
<br>
|
||||
<h1>Alison Kit</h1>
|
||||
<h2>My WAH-bsite!</h2>
|
||||
<p>I'm an illustrator, animator, and comic artist. I draw furry art and anything cringe.</p>
|
||||
</div>
|
||||
<!-- gallery -->
|
||||
<div id="gallery">
|
||||
<h2>Gallery</h2>
|
||||
<div id="photos">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/xenia.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/niko.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/nona.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/alisonterra.jpg">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/sybil.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/pueblomagico.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/mystfawf.png">
|
||||
<img onclick="magnify($(this).attr('src'))" src="images/akautomata.png">
|
||||
</div>
|
||||
</div>
|
||||
<!-- about-->
|
||||
<div id="about">
|
||||
<h2>About</h2>
|
||||
<ul>
|
||||
<li><p>25, she/they</p></li>
|
||||
<li><p>EN/ES</p></li>
|
||||
<li><p>Red Panda fursona</p></li>
|
||||
<li><p>Latine</p></li>
|
||||
<li><p>Very queer and autistic</p></li>
|
||||
</ul>
|
||||
<br>
|
||||
</div>
|
||||
<!-- Contact -->
|
||||
<div id="contact">
|
||||
<h2>Contact</h2>
|
||||
<p><a href="mailto:alisonkit@tuta.io">Mail</a> >>> for commission contact</p>
|
||||
<p><a href="https://ko-fi.com/alisonkit">Ko-Fi</a> >>> tip me!!!</p>
|
||||
<p><a href="https://cohost.org.alisonkit">Cohost</a> >>> for thoughts</p>
|
||||
<p><a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a> >>> fedi!!!</p>
|
||||
<p><a href="https://bsky.app/alisonkit.net">Bluesky</a> >>> better twitter</p>
|
||||
<p><a href="https://twitch.tv/alison_kit">Twitch</a> >>> Art Streams!</p>
|
||||
<p><a href="https://twitter.com/kittwah">Twitter</a> ...sigh</p>
|
||||
<p><a href="https:/https://discord.gg/t7X5uUEC/">Discord</a> >>> let's hang out!</p>
|
||||
<br>
|
||||
<h3>Commissions are open.</h3>
|
||||
<p>For current commission slot availability, check social media for any annoucements.</p>
|
||||
<h3>About my streams</h3>
|
||||
<p><a href="live/">Visit this link to see more information about my streams.</a></p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Alison Kit 2024</p>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<a href="https://cd5k.net/tau/">τ</a>
|
||||
</div>
|
||||
</div> <!-- main -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
var width = $(window).width();
|
||||
window.onscroll = function(){
|
||||
if ((width >= 1000)){
|
||||
if(document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
|
||||
$("#header").css("background","#fff");
|
||||
$("#header").css("color","#000");
|
||||
$("#header").css("box-shadow","0px 0px 20px rgba(0,0,0,0.09)");
|
||||
$("#header").css("padding","4vh 4vw");
|
||||
$("#navigation a").hover(function(){
|
||||
$(this).css("border-bottom","2px solid rgb(255, 44, 90)");
|
||||
},function(){
|
||||
$(this).css("border-bottom","2px solid transparent");
|
||||
});
|
||||
}else{
|
||||
$("#header").css("background","transparent");
|
||||
$("#header").css("color","#fff");
|
||||
$("#header").css("box-shadow","0px 0px 0px rgba(0,0,0,0)");
|
||||
$("#header").css("padding","6vh 4vw");
|
||||
$("#navigation a").hover(function(){
|
||||
$(this).css("border-bottom","2px solid #fff");
|
||||
},function(){
|
||||
$(this).css("border-bottom","2px solid transparent");
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function magnify(imglink){
|
||||
$("#img_here").css("background",`url('${imglink}') center center`);
|
||||
$("#magnify").css("display","flex");
|
||||
$("#magnify").addClass("animated fadeIn");
|
||||
setTimeout(function(){
|
||||
$("#magnify").removeClass("animated fadeIn");
|
||||
},800);
|
||||
}
|
||||
|
||||
function closemagnify(){
|
||||
$("#magnify").addClass("animated fadeOut");
|
||||
setTimeout(function(){
|
||||
$("#magnify").css("display","none");
|
||||
$("#magnify").removeClass("animated fadeOut");
|
||||
$("#img_here").css("background",`url('') center center`);
|
||||
},800);
|
||||
}
|
||||
|
||||
setTimeout(function(){
|
||||
$("#loading").addClass("animated fadeOut");
|
||||
setTimeout(function(){
|
||||
$("#loading").removeClass("animated fadeOut");
|
||||
$("#loading").css("display","none");
|
||||
},800);
|
||||
},1650);
|
||||
|
||||
$(document).ready(function(){
|
||||
$("a").on('click', function(event) {
|
||||
if (this.hash !== "") {
|
||||
event.preventDefault();
|
||||
var hash = this.hash;
|
||||
$('body,html').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 1800, function(){
|
||||
window.location.hash = hash;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
92
main/live/style.css
Normal file
92
main/live/style.css
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
@import url(https://fonts.bunny.net/css?family=azeret-mono);
|
||||
*{
|
||||
font-family: 'Azeret Mono', monospace;
|
||||
background-color:#2b1d22;
|
||||
color:#edd0db;
|
||||
}
|
||||
body {
|
||||
padding:6vh 4vw;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6,p,a{
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
h2{
|
||||
color: #f98498;
|
||||
border-bottom:4px solid #af3d56;
|
||||
width:10%;
|
||||
}
|
||||
h3{
|
||||
color: #f98498;
|
||||
}
|
||||
p{
|
||||
|
||||
}
|
||||
a{
|
||||
color: #ef679b;
|
||||
}
|
||||
.sidenav {
|
||||
width: 150px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background: #6b3b46;
|
||||
overflow-x: hidden;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
padding: 6px 8px 6px 16px;
|
||||
text-decoration: none;
|
||||
color: #edd0db;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
color: #af3d56;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 140px; /* Same width as the sidebar + left position in px */
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {padding-top: 15px;}
|
||||
.sidenav a {font-size: 18px;}
|
||||
}
|
||||
#home {
|
||||
font-weight:bold;
|
||||
}
|
||||
#home h2{
|
||||
width:25%;
|
||||
}
|
||||
#gallery {
|
||||
width:auto;
|
||||
}
|
||||
#photos {
|
||||
width:100%;
|
||||
columns:3;
|
||||
column-gap:4%;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
#photos img {
|
||||
width:100%;
|
||||
height:auto;
|
||||
margin:4.5% 0px;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
#photos img:hover {
|
||||
transform: scale(1.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
#contact {
|
||||
width:auto;
|
||||
}
|
||||
#footer {
|
||||
width:100%;
|
||||
padding:10vh 0px;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
}
|
||||
2
main/robots.txt
Normal file
2
main/robots.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
User-agent: *
|
||||
Disallow: /
|
||||
92
main/style.css
Normal file
92
main/style.css
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
@import url(https://fonts.bunny.net/css?family=azeret-mono);
|
||||
*{
|
||||
font-family: 'Azeret Mono', monospace;
|
||||
background-color:#2b1d22;
|
||||
color:#edd0db;
|
||||
}
|
||||
body {
|
||||
padding:6vh 4vw;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6,p,a{
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
h2{
|
||||
color: #f98498;
|
||||
border-bottom:4px solid #af3d56;
|
||||
width:10%;
|
||||
}
|
||||
h3{
|
||||
color: #f98498;
|
||||
}
|
||||
p{
|
||||
|
||||
}
|
||||
a{
|
||||
color: #ef679b;
|
||||
}
|
||||
.sidenav {
|
||||
width: 150px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background: #6b3b46;
|
||||
overflow-x: hidden;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
padding: 6px 8px 6px 16px;
|
||||
text-decoration: none;
|
||||
color: #edd0db;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
color: #af3d56;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 140px; /* Same width as the sidebar + left position in px */
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {padding-top: 15px;}
|
||||
.sidenav a {font-size: 18px;}
|
||||
}
|
||||
#home {
|
||||
font-weight:bold;
|
||||
}
|
||||
#home h2{
|
||||
width:25%;
|
||||
}
|
||||
#gallery {
|
||||
width:auto;
|
||||
}
|
||||
#photos {
|
||||
width:100%;
|
||||
columns:3;
|
||||
column-gap:4%;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
#photos img {
|
||||
width:100%;
|
||||
height:auto;
|
||||
margin:4.5% 0px;
|
||||
transition:0.4s ease-in-out;
|
||||
}
|
||||
#photos img:hover {
|
||||
transform: scale(1.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
#contact {
|
||||
width:auto;
|
||||
}
|
||||
#footer {
|
||||
width:100%;
|
||||
padding:10vh 0px;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
}
|
||||
Loading…
Reference in a new issue