MySQL

Display records with CSS

Smiling Faces Sometimes

The Undisputed Truth (1971)

Achy Breaky Heart

Billy Ray Cyrus (1992)

PHP

<?php

$conn = new mysqli ("server", "username", "password", "database_name");
mysqli_set_charset ($conn, "utf8");

if ($conn -> connect_error) {
  die ("Error: " . $conn->connect_error);
}

$sql = "SELECT song_title, artist, year FROM top_5000_songs ORDER BY rand() LIMIT 0, 2";
$result = $conn -> query($sql);

if ($result -> num_rows > 0) {

while ($row = $result -> fetch_assoc()) { 
    echo "<div class='demo-results'>"; 
    echo "<h1>" . $row["song_title"] . "</h1>"; 
    echo "<h2>" . $row["artist"] . " (" . $row["year"] . ")" . "</h2>"; 
   echo "</div>"; 
} 
} 

else {
echo "No records found";
}

$conn -> close();
?>

CSS

.demo-container {
  margin: 4em auto;
  padding: 2em;
  max-width: 600px;
  background-color: rgba(241, 242, 242, 0.6);
  font-family: "Roboto", sans-serif;
}	

.demo-container h1 {
  font-size: 1.2em;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 1);
  margin: 0;
  padding: 4px 10px;
}
	
.demo-container h2 {
  font-size: 1em;
  font-weight: normal;
  background-color: rgba(129, 209, 180, 1);
  color: rgba(255, 255, 255, 1);
  margin: 0 0 20px 0;
  padding: 4px 10px;
  text-align: right;
}