Question:
I need help to format the website better. I am asking for the things to be separated the What I have made has the bitcoin miner, password saver, and extrapy package underneath without a background, and the What I am working on with the Pokemon Adventures under without a background, and Contact me via pm on ask via pm underneath all of that.
Repl link:
https://replit.com/@SalladShooter/SalladShooter#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home - SalladShooter</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body style="background-color:#000033;">
<a class="title" href="https://replit.com/@SalladShooter">@SalladShooter</a>
<a class="title" href="https://ask.replit.com/invites/8dejgGVmnS">Replit Ask</a>
<p>Hi I am SalladShooter! I am a fullstack developer, who mainly codes in Python 3 and dables in a few other languages like C#, C++, and JavaScript. I love to help people on Replit Ask.</p>
<h1 class="title">Here Are Some Of My Projects</h1>
<div class="card" style="width: 18rem;">
<img src="images/Pick.png" class="card-img-top" alt="images/Pick.png">
<div class="card-body">
<h5 class="card-title">BitCoin Miner V1</h5>
<card class="card-text">Mine BitCoin Sell Upgrade Repeat. Collect BitCoin to sell and upgrade your mining powers. Can you get enough money to rebirth and become more powerful?</card>
<a href="https://replit.com/@SalladShooter/BitCoin-Miner-V1?v=1" class="btn btn-primary">Go To BitCoin Miner V1</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="images/Python.png" class="card-img-top" alt="images/Python.png">
<div class="card-body">
<h5 class="card-title">Password Saver V 1.0.1</h5>
<card class="card-text">It save passwords for separate people. You can also get the password back!</card>
<a href="https://replit.com/@SalladShooter/Password-Saver-V-101?v=1" class="btn btn-primary">Go To Password Saver V 1.0.1</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="images/icon.png" class="card-img-top" alt="images/icon.png">
<div class="card-body">
<h5 class="card-title">extrapy Package</h5>
<card class="card-text">Have you ever wanted functions in that took time and you didn’t want to code it? Well I made a package for it! Now you can unlock easiness.</card>
<a href="https://replit.com/@SalladShooter/extrapy-Package?v=1" class="btn btn-primary">Go To extrapy Package</a>
</div>
</div>
<h1 class="title">Here Is What I Am Working On</h1>
<div class="card" style="width: 18rem;">
<img src="images/PA.png" class="card-img-top" alt="images/PA.png">
<div class="card-body">
<h5 class="card-title">Pokémon Adventures</h5>
<card class="card-text">Welcome to Pokémon Adventures! This is a text-based game where you can battle with other Pokémon and Pokémon Trainers along the way! I hope you will enjoy the game!</card>
<a href="https://replit.com/@Idkwhttph/Pokemon-adventures-A-textbased-game?v=1" class="btn btn-primary">Go To Pokémon Adventures</a>
</div>
</div>
<h1 class="title">Contact Me On Replit Ask Via PM</h1>
<script src="script.js"></script>
<!--
This script places a badge on your repl's full-browser view back to your repl's cover
page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
teal, blue, blurple, magenta, pink!
-->
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>
</html>
html {
height: 100%;
width: 100%;
background-color: #000033;
}
body {
background-color: #000033;
}
.title {
margin: 10px;
font-family: Arial Rounded MT Bold;
font-size: 50px;
text-align: center;
background-color: green;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
padding: 25px;
border-radius: 15px;
border-color: darkgreen;
border-style: solid;
border-width: 5px;
}
p {
padding-top: 25px;
margin-top: 25px;
font-family: Arial Rounded MT Bold;
font-size: 25px;
text-align: center;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
h1 {
padding: 25px;
margin-top: 25px;
font-family: Arial Rounded MT Bold;
font-size: 50px;
text-align: center;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
border-radius: 15px;
border-color: darkgreen;
border-style: solid;
border-width: 5px;
background-color: green;
}
h5 {
font-size: 25px;
font-family: Arial Rounded MT Bold;
}
card {
font-size: 15px;
font-family: Arial Rounded MT Bold;
}
.card {
margin-left: 50px;
float: left;
}