codeup-web-exercises/profileCard.html at main · DracosEye/codeup-web-exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Attributes and CSS Exercise</title>
    <link rel="stylesheet" type="text/css" href="css/attributes-style.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=Abel&family=Anton&family=Bebas+Neue&family=Libre+Baskerville&family=Montserrat:ital,wght@0,300;1,100&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto+Slab&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,700&family=Work+Sans:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<div id="profile-card">
    <img id="profile-pic" src="https://via.placeholder.com/150" alt="Profile Picture">
    <h2 id="profile-name">John Doe</h2>
    <p id="profile-desc">This is a sample description text for a profile card. JavaScript will be used to manipulate this card.</p>
</div>
<button id="toggle-btn">Toggle Background</button>
<script src="js/attributes-script.js"></script>
</body>
</html>