hard-coded index card, in HTML and CSS

Author: Kara Howes

code/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker- Kara Howes</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="./style.css" />
 </head>
@@ -15,6 +16,32 @@ <h2>Projects:</h2>
   <main id="projects">
 
   </main>
+  <section class="cards-container">
+    <section class="card">
+      <div class="card-projectname" id="cardProjectName">   
+      Project Name</div>
+      <div class="updated" id="cardUpdated">
+    Most recent update:   
+      </div>
+      <div class= "branch" id="cardBranch">
+    Name of default branch:    
+      </div>
+       <div class= "URL" id="cardURL">
+    URL:    
+      </div>
+      <div class= "number-commits" id="cardCommits">
+    Number of commit Messages:   
+      </div>
+       <div class= "blank-line" id="cardBlank">
+    blank   
+      </div>
+      <div class= "blank-line" id="cardBlank">
+    blank   
+      </div>
+    
+     
+    </section>
+  </section>
 
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart" class="canvas-chart"></canvas>

code/style.css

@@ -1,8 +1,33 @@
 body {
   background-color: aquamarine;
+  font-family: 'Special Elite', cursive;
 }
 
 .canvas-chart{
   max-width: 500px;
 
 }
+
+.cards-container {
+  width: 90%;
+}
+.card {
+  width: 80%;
+  /*width: 500px;
+  height: 300px;*/
+  background-color: white;
+  border: 1px solid #DADBDB;
+  box-shadow: 1px 1px 3px rgba(0,0,0,.25);
+  margin: 50px;
+  
+}
+.card-projectname {
+  margin: 20px 0 0 0;
+  padding: 20px 0 0 0;
+  border-bottom: 3px solid pink
+}
+.updated, .branch, .URL, .number-commits, .blank-line {
+  margin: 6px 0 0 0;
+  padding: 6px 0 0 0;
+  border-bottom: 1px solid #B2B3B4; 
+}