* {
box-sizing: border-box;
}
/* Apply a card effect for ticker(s) */
.card {
background-color: rgb(24, 28, 41);
padding: 5px;
border-style: solid;
border-width: 2px;
border-color: rgb(5, 105, 256);
/*rgb(196, 95, 0)*/
border-radius: 3px;
margin: 1%;
}
body {
margin: 0;
}
/* Customize the header */
.header {
background-color: rgb(5, 105, 256)/*rgb(196, 95, 0)*/
padding: 15px;
text-align: center;
}
/* Personalize the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Adjust color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Establish three equal columns that float beside each other */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 1%;
margin: 0 1% 0 1%;
}
.column {
padding: 15px;
border-style: solid;
border-width: 2px;
border-color: rgb(5, 105, 256);
/*rgb(196, 95, 0)*/
border-radius: 3px;
}
/* Responsive design - causes the three columns to stack vertically instead of horizontally */
@media screen and (max-width:600px) {
body {
background-color: rgb(24, 28, 41);
color: rgb(255, 255, 255);
font-family: "Helvetica", "Arial", sans-serif;
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: auto;
grid-gap:
</head>
<body>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="card">
<label for="ticker">Ticker(s):</label>
<input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br>
</div>
<div class="grid">
<div class="column">
<h2>Column</h2>
<p>INPUT INFO LATER INPUT INFO LATER</p>
</div>
<div class="column">
<h2>Column</h2>
<p>INPUT INFO LATER</p>
</div>
<div class="column">
<h2>Column</h2>
<p>INPUT INFO LATER</p>
</div>
</div>
</body>
</html>