This is a simple sample website (1 page for now) to help people learn CSS and let them play around with it themselves. I 3D printed a fictional ghost motherboard to go along with the overall theme and this ghost motherboard is to be used for something else on the site if they / when they create their sub here. So I figured I could just use it for this for now anyways to say the least.
I didn't want to make anyone download files so I'm going to post these in code blocks.
Here is what the website should look like when you are done.
https://pic8.co/sh/5OIDad.png
Create a new folder on your desktop and rename it to "site". - No capitals
- HTML - Index File - Save this as "index.html"
`
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="overallcontent">
<div class="content1">
<img src="Images/Untraceable-Ghost-Technology-Motherboard-Concept-Design-Unsanded.png" alt="Untraceable-ghost-technology-motherboard-concept-design-unsanded" width="400" height="500">
</div>
<div class="content2">
Welcome to Untracable Ghost Technology (UTG). Find 100s of customizable 3D printable parts. All
3D printed parts are free to download.
</div>
<div class="content3">
Search Now
</div>
</div>
<div class="footer">
Reminder: Follow all applicable laws. - This website is for entertainment purposes only.
</div>
</div>
</body>
</html>`
- CSS - Index CSS File - Save this as "index.css"
`
html, body {
min-height: 100vh;
margin: 0;
}
.wrapper {
min-height: 100vh;
width: 100%;
background-color: #1e1e29;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
.header {
height: 70px;
width: 100%;
border-bottom: 3px solid #fff;
background-image: url("Images/background.png");
}
.overallcontent {
height: 100%;
width: 100%;
margin: auto auto;
color: #ffffff;
padding-bottom: 100px;
padding-top: 70px;
}
.content1 {
height: 500px;
width: 400px;
margin: 0 auto 20px auto;
border-radius: 15px;
border: 3px solid #fff;
overflow: hidden;
}
.content2 {
height: 100px;
width: 400px;
padding: 20px;
margin: 0 auto 20px auto;
border-radius: 15px;
border: 3px solid #fff;
font-size: 17px;
text-align: center;
background-image: url("Images/background.png");
}
.content3 {
height: 30px;
width: 100px;
margin: 0 auto;
border-radius: 15px;
border: 3px solid #fff;
font-size: 17px;
padding: 20px;
text-align: center;
background-image: url("Images/background.png");
}
.footer {
width: 100%;
color: #ffffff;
height: 70px;
bottom: 0;
left: 0;
position: absolute;
background-image: url("Images/background.png");
border-top: 3px #fff solid;
font-size: 17px;
text-align: center;
}`
- In the site folder create an "Images" folder (Capital i)
Put these two images in the in the "Images" folder or else use your own as they may not work properly.
Save and rename to "background.png"
https://pic8.co/sh/rC1CF2GC3x.png
Save and rename to "Untraceable-Ghost-Technology-Motherboard-Concept-Design-Unsanded"
https://pic8.co/sh/qzKlyq.png
Code blocks aren't working for now. I need to figure this out for now.
(post is archived)