THIS IS HOW THE PHP LOOK LIKE:
https://ibb.co/NFxMSdY
THIS IS HOW THE HTML LOOK LIKE:
https://ibb.co/Y8z4dYv
THIS IS THE PHP CODE WITH CSS
<!doctype html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
.column {
float: left;
width: 50%;
margin: 0;
padding: 1%;
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
background-color: rgba(29, 53, 87, 1);
width: 80%;
}
.container {
padding: 20px 16px;
}
.container:after, .row:after {
content: "";
clear: both;
display: table;
}
.title {
color: #d9d9d9;
font-size: larger;
}
</style>
</head>
<body>
<?php
<br />
<br /> $tjener = "localhost";
<br /> $brukernavn = "root";
<br /> $passord = "root";
<br /> $database = "jobb";
<br />
<br /> $kobling = new mysqli($tjener, $brukernavn, $passord, $database);
<br />
<br /> if ($kobling->connect_error) {
die("Noe Gikk Galt: " . $kobling->connect_error);
}
$kobling->set_charset("utf8");
$sql = "SELECT * FROM jobber ORDER BY jobber_id ASC";
$resultat = $kobling->query($sql);
while ($rad = $resultat->fetch_assoc()) {
$jobb_id = $rad["jobb_id"];
$jobbnavn = $rad["jobbnavn"];
$fulltnavn = $rad["fulltnavn"];
$epost = $rad["epost"];
$telefon = $rad["telefon"];
$stilling = $rad["stilling"];
$arbeidere = $rad["arbeidere"];
$når = $rad["når"];
$melding = $rad["melding"];
echo "<div class='row'>";
echo "<div class='column'>";
echo "<div class='card'>";
echo "<div class='container'>";
echo "<h2>$jobbnavn</h2>";
echo "
$stilling
";
echo "
$melding
";
echo "<h4>Søk her:</h4>";
echo "
<button class='button'>Kontakt</button>
";
echo " </div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
</body>
</html>
THIS IS THE HTML CODE WITH CSS
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
.column {
float: left;
width: 50%;
margin: 0;
padding: 1%;
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
background-color: rgba(29, 53, 87, 1);
}
.container {
padding: 20px 16px;
}
.container:after, .row:after {
content: "";
clear: both;
display: table;
}
.title {
color: #d9d9d9;
font-size: larger;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="card">
<div class="container">
<h2>
test</h2>
test
test
test
<h4>test</h4>
<button class="button">test</button>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="container">
<h2>test</h2>
test
test
test
<h4>test</h4>
<button class="button">test</button>
</div>
</div>
</div>
</div>
</body>
</html>