olinpin/twitter-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS Grid Headings

Browse Source
This commit is contained in:
Drew
2022-11-01 16:59:48 +01:00
parent 470e85bd91
commit 4acd8acc8f
2 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dashboard_static/index.html
View File

@@ -66,7 +66,12 @@
<div class="centercol column"> <div class="centercol column">
<h1 class="colheader">FILTERED CLUCCS</h1> <h1 class="colheader">FILTERED CLUCCS</h1>
</div> </div>
<div class="searchbar column"></div> <div class="searchcontainer column">
<input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
<button class = "button">SORT BY</button>
<button class = "button">BLOCKED WORDS</button>
<button class = "button">POPULARITY FILTER</button>
</div>
<div class="popchart column"> <div class="popchart column">
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1> <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
</div> </div>

22
dashboard_static/style/style.css
View File

@@ -150,7 +150,7 @@ body {
grid-row: 1/ -1; grid-row: 1/ -1;
} }
.searchbar { .searchcontainer {
background-color: blue; background-color: blue;
height: 400px; height: 400px;
} }
@@ -164,3 +164,23 @@ body {
font-size: 38px; font-size: 38px;
padding-left: 30px; padding-left: 30px;
} }
.searchbar {
width: 500px;
}
.searchbar, .button {
font-weight: bold;
font-size: 32px;
border-radius: 50px;
padding: 10px;
margin: 16px;
}
.button {
border-radius: 50px;
border: none;
}
.button:hover {
background-color: ;
}