Academic, Coding, Computer

ChatGPT Work

by Seminari Poka

Here is a result of the chatgpt coding to form a card complete with its CSS.

HTML:

<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”styles.css”>
<title>Card Example</title>
</head>
<body>
<div class=”card”>
<img src=”https://via.placeholder.com/300″ alt=”Gambar Contoh” class=”card-image”>
<div class=”card-content”>
<h2 class=”card-title”>Judul Card</h2>
<p class=”card-description”>Ini adalah deskripsi singkat tentang card ini. Anda bisa menambahkan lebih banyak teks di sini.</p>
</div>
</div>
</body>
</html>

CSS:

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}

.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 300px;
}

.card-image {
width: 100%;
height: auto;
}

.card-content {
padding: 16px;
}

.card-title {
font-size: 1.5em;
margin: 0 0 10px;
}

.card-description {
font-size: 1em;
color: #555;
}

Explanation
HTML: We create the basic structure for the card with an image element (<img>) and content consisting of a title (<h2>) and description (<p>).
CSS: We style the card to make it look attractive with a white background, shadow, and rounded corners. The image will fill the width of the card.
How to Run
Copy the HTML code to the index.html file.
Copy the CSS code to the styles.css file in the same directory.
Open index.html in a browser to see the results.
Feel free to adjust the image and text to your needs! If you have any further questions, don’t hesitate to ask.