I don't even know if this is the place to put this... I've got a blog, or I did. I've got a domain and I pay for website hosting. It was wordpress but that got so bloated and awful that I sort of just nuked it.
I've been meaning to re-do the site into something I am excited to work on but the idea of trying to do a theme myself and/or build out everything in html seems overwhelming. I've mocked up some simple html, but I don't know what to do beyond that. Can I use this to make a style sheet? I don't know any CSS. Is there something out there that is much more simple than the bloated mess that is wordpress? That I can plug into my hosting service?
I remember when this all seemed so simple... Any help, guidance, miracles would be appreciated.
If you are curious this is what I have code wise:
I've been meaning to re-do the site into something I am excited to work on but the idea of trying to do a theme myself and/or build out everything in html seems overwhelming. I've mocked up some simple html, but I don't know what to do beyond that. Can I use this to make a style sheet? I don't know any CSS. Is there something out there that is much more simple than the bloated mess that is wordpress? That I can plug into my hosting service?
I remember when this all seemed so simple... Any help, guidance, miracles would be appreciated.
If you are curious this is what I have code wise:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mörk Borg Inspo Blah Blah</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Zilla+Slab:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
background-color: #000000; /* Black */
color: #FFFFFF; /* White */
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #FF00FF; /* Magenta */
text-align: center;
padding: 20px;
font-size: 2em;
font-weight: bold;
position: relative;
font-family: 'Zilla Slab', serif;
}
header::after {
content: 'ブログ';
font-family: 'Brush Script MT', cursive;
font-size: 3em;
color: #FFFFFF; /* White */
position: absolute;
top: 10px;
right: 20px;
transform: rotate(-10deg);
}
nav {
background-color: #00FFFF; /* Cyan */
padding: 10px;
text-align: center;
}
nav a {
color: #FFFFFF; /* White */
margin: 0 15px;
text-decoration: none;
font-size: 1.2em;
transition: color 0.3s;
}
nav a:hover {
color: #FF00FF; /* Magenta */
}
.content {
padding: 20px;
}
.post {
margin-bottom: 40px;
border-bottom: 2px solid #FFFF00; /* Yellow */
}
.post h2 {
font-size: 1.8em;
color: #FFFF00; /* Yellow */
position: relative;
font-family: 'Zilla Slab', serif;
}
.post h2::after {
content: '記事';
font-family: 'Brush Script MT', cursive;
font-size: 2em;
color: #FF00FF; /* Magenta */
position: absolute;
top: -10px;
right: -20px;
transform: rotate(-15deg);
}
.post p {
font-size: 1.2em;
line-height: 1.5;
}
footer {
background-color: #00FFFF; /* Cyan */
text-align: center;
padding: 10px;
font-size: 0.8em;
}
</style>
</head>
<body>
<header>
Blah Blah
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="content">
<div class="post">
<h2>Post Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="post">
<h2>Post Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<footer>
© 2024 Mörk Borg Inspo blah blah. All rights reserved.
</footer>
</body>
</html>
