KaraHowes
diff --git a/‎.DS_Store‎
6 KB b/‎.DS_Store‎
6 KB
diff --git a/‎code/assets/GitHub_Logo_White.png‎
2.47 KB b/‎code/assets/GitHub_Logo_White.png‎
2.47 KB
diff --git a/‎code/index.html‎
Lines changed: 17 additions & 3 deletions b/‎code/index.html‎
Lines changed: 17 additions & 3 deletions
diff --git a/‎code/script.js‎
Lines changed: 2 additions & 1 deletion b/‎code/script.js‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎code/style.css‎
Lines changed: 46 additions & 9 deletions b/‎code/style.css‎
Lines changed: 46 additions & 9 deletions
@@ -11,9 +11,23 @@
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects">
+  <header>
+    <section class="header">
+      <div class="hamburger">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+      <img src="./assets/GitHub_Logo_White.png" alt="">
+
+    </section>
+
+  </header>
+  <section class="profile-container">
+
+  </section>
+
+  <main id="projects" class="projects-container">
 
   </main>
   <section class="cards-container" id="cards-container">
 
@@ -15,8 +15,9 @@ const getRepos = ()=>{
       //Here, I filter only the projects forked from Technigo, starting from 2021 (since I have earlier projects also forked from Technigo)  
         const forkedProjects = data.filter(repo => repo.fork && repo.name.startsWith('project-') && repo.created_at.startsWith('2021-'))
       // Here I update the projectsContainer.innerHTML to show a list of all forked repos  
-        forkedProjects.forEach(repo => projectsContainer.innerHTML += `<h3>${repo.name}</h3>`)
+        forkedProjects.forEach(repo => projectsContainer.innerHTML += `<p>${repo.name}</p>`)
         // Here I update the cards.Container to show cards with data extracted from the GitHUb API
+        
         forkedProjects.forEach(repo => cardsContainer.innerHTML += `
         <section class="js-card">
       <div class="card-projectname" id="cardProjectName">   
 
@@ -1,27 +1,58 @@
 body {
-  background-color: aquamarine;
+  background-color: white;
   font-family: 'Special Elite', cursive;
+  margin: 0;
 }
 
-.canvas-chart{
-  max-width: 500px;
- 
+/* Header*/
+.header {
+  width: 100%;
+  background-color: black;
+}
+/* hamburger */
+.hamburger {
+  display: flex;
+  height: 25px;
+  width: 30px;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px 0 0 20px; 
+}
+  
+.hamburger div {
+  width: 30px; 
+  height: 5px;
+  background: white;
+}
+
+.header img {
+  width: 250px;
+  margin: 0 0 5px 50px;
+}
+/* Profile styling and image*/
+
+
+/* Cards styling*/
+.projects-container{
+width: 90%;
+margin: 20px, auto;
 }
 
 .cards-container {
   width: 90%;
+  margin: 20px auto;
 }
-.html-card {
-  width: 80%;
+/*.html-card {
+  width: 90%;
   background-color: white;
   border: 1px solid #DADBDB;
   box-shadow: 1px 1px 3px rgba(0,0,0,.25);
   margin: 50px;
   
 }
-
+*/
 .js-card {
-  width: 80%;
+  width: 90%;
   background-color: white;
   border: 1px solid #DADBDB;
   box-shadow: 1px 1px 3px rgba(0,0,0,.25);
@@ -41,6 +72,12 @@ body {
   border-bottom: 1px solid #B2B3B4; 
 }
 
-.space{
+.space {
   margin-left: 5px;
+} 
+
+/* Chart styling*/
+.canvas-chart{
+  max-width: 500px;
+ 
 }