css responsive

This commit is contained in:
Tim Wijma
2022-11-02 11:38:04 +01:00
parent 3ee60ecb3c
commit 713c401ee6
4 changed files with 144 additions and 72 deletions

View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter sports dashboard</title>
<link rel="stylesheet" href="./style/style.css">
<link rel="stylesheet" href="./style/responsive.css">
<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,300;0,400;0,500;1,400&display=swap" rel="stylesheet">
@@ -13,10 +14,9 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="./media/logo.png">
</head>
<body>
<div id="tweet" style="height: 200px;"></div>
<!-- <div id="tweet" style="height: 200px;"></div> -->
<div class="container">
<div class="header">
<div class="logo">
@@ -61,7 +61,7 @@
<div class="main">
<div class="maintable">
<div class="leftcol column">
<h1 class="colheader">LATEST CLUCCS</h1>
<span class="colheader">Latest Cluccs</span>
<div class="tweetcontainer">
<div class="tweet">
<img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
@@ -90,11 +90,13 @@
</div>
</div>
<div class="centercol column">
<h1 class="colheader">FILTERED CLUCCS</h1>
<span class="colheader">Filtered Cluccs</span>
</div>
<div class="searchbar column"></div>
<div class="popchart column">
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
<div class="rightcol column">
<div class="searchbar column"></div>
<div class="popchart column">
<span class="colheader chartheader">Sports Popularity Chart</span>
</div>
</div>
</div>
</div>