matthew/matthews-totw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated styles sheet to support bootstrap

Browse Source 
Updated index.html with bootstrap
This commit is contained in:
Matthew Fisher 2024-09-12 18:20:30 -05:00
parent 6d2f6b4e9d
commit b97074c913
2 changed files with 21 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
static/css/style.css
View File

@ -1,40 +1,7 @@
html {
background-color: #344E5C;
}
header {
border-radius: 25px;
border: 10px #EF3D59 solid;
color: #4AB19D;
text-align: center;
padding: 10px;
}
body {
color: #EFC958;
text-align: center;
padding: 10px;
}
.button {
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#headerpad {
padding: 10px;
}
#imagebox {
border-radius: 25px;
img {
padding: 10px;
margin: auto;
min-height: 150px;
width: 50%;
text-align: center;
width: 200px;

25
templates/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
@ -7,24 +7,35 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<header>
<h1 class=roboto-bold>Matthew's Tool of the Week</h1>
<div class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<div class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none roboto-bold">
<span class="fs-4"> Matthew's Tool of the Week</span>
</div>
<div>
<h2 class=roboto-regular> Week: {{ tool.Week_to_post }} </h2>
</div>
</div>
</header>
<body>
<div id=headerpad />
<div class="px-4 pt-5 my-5 text-center border-bottom roboto-regular">
<h1 class="display-4 fw-bold text-body-emphasis"> {{ tool.Name }} </h1>
<a href='http://{{ tool["Url"] }}'>
<div id=imagebox>
<i></i>
<div class="container px-5">
<img class="img-fluid border rounded-3 shadow-lg mb-4"></img>
</div>
<button>{{ tool.Name }}</button>
</a>
<div id=descriptionbox>
<p class=roboto-regular> {{ tool.Description }} </p>
<div>
<p class="roboto-regular col-lg-6 mx-auto"> {{ tool.Description }} </p>
</div>
</body>
<footer>
</footer>
</html>