applied same margins and borders to all containers

Kara Howes · Kara Howes · commit 48cc152f3dfe · 2021-09-30T21:49:58.000+02:00
diff --git a/code/assets/KH_profile.jpeg b/code/assets/KH_profile.jpeg
diff --git a/code/index.html b/code/index.html
@@ -7,7 +7,7 @@
   <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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
@@ -24,6 +24,18 @@
 
   </header>
   <section class="profile-container">
+    <div class="profile-wrapper">
+      <div class="profile-photo">
+        <img src="./assets/KH_profile.jpeg" alt="Profile Picture of User">
+      </div>
+      <div class="profile-username">
+        <h1>Kara</h1>
+        <h2>KaraHowes</h1>
+      </div>
+    </div>
+    <div class="profile-text">
+      <p> New to coding, a little more experienced at life. PhD in Chemistry (UK), Post-doc at ETH Zürich. Always looking for new opportunities to learn and grow</p>
+    </div>
 
   </section>
 
diff --git a/code/script.js b/code/script.js
@@ -15,34 +15,35 @@ 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 += `<p>${repo.name}</p>`)
+        //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">   
-        Project Name: <span class="space">${repo.name}</span></div>
+        <span class="field">Project Name:</span> <span class="space">${repo.name}</span></div>
         <div class="updated" id="cardUpdated">
-      Most recent update: <span class="space"> ${new Date(repo.pushed_at).toDateString()}</span>   
+        Most recent update:<span class="space"> ${new Date(repo.pushed_at).toDateString()}</span>   
         </div>
         <div class= "branch" id="cardBranch">
-      Name of default branch:<span class="space">${repo.default_branch}</span>    
+        Name of default branch:<span class="space">${repo.default_branch}</span>    
         </div>
          <div class= "URL" id="cardURL">
-      URL: <span class="space"><a href="${repo.html_url} ">Clicky</a></span> 
+         URL: <span class="space"><a href="${repo.html_url} ">Clicky</span></a> 
         </div>
         <div class= "number-commits" id="commit-${repo.name}">
-      Number of commit Messages:   
+        Number of commit Messages:  
         </div>
          <div class= "times-forked" id="cardForked">
-      Number of times forked: <span class="space">${repo.forks}</span>  
-        </div>
-        <div class= "blank-line" id="cardBlank">
-      blank   
+         Number of times forked:<span class="space">${repo.forks}</span>  
         </div>
+        
     
      
-    </section>`)
+    </section>`
+   
+    )
+    
         // Here we store the forkedProjects.length and console.log to make sure it is correct.
         drawChart(forkedProjects.length)
         //console.log('hello', forkedProjects.length)
diff --git a/code/style.css b/code/style.css
@@ -1,9 +1,32 @@
+html {
+  font-size: 16px;
+}
 body {
   background-color: white;
   font-family: 'Special Elite', cursive;
   margin: 0;
 }
 
+h1 {
+  font-weight: 400;
+  font-size: 2rem;
+  padding: 0 5px;
+  margin:0;
+
+}
+h2 {
+  font-weight: 300;
+  font-size: 1.5 rem;
+  padding: 0 5px;
+  margin:0;
+
+}
+
+
+p {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+}
 /* Header*/
 .header {
   width: 100%;
@@ -27,37 +50,59 @@ body {
 
 .header img {
   width: 250px;
-  margin: 0 0 5px 50px;
+  margin: 0 auto 5px auto;
+  display: block;
+
 }
 /* Profile styling and image*/
+.profile-container{
+  width:90%;
+  margin: 0 auto;
+  
+}
+.profile-wrapper{
+  display: flex;
+  flex-direction: row;
+}
+.profile-photo {
+  width:30%;
+}
+.profile-photo img{
+  width: 100%;
+  border-radius: 50%;
+  filter: grayscale(100%);
+  
+}
 
+.profile-username{
+  font-family: 'Roboto', sans-serif;
+  padding: 0 5px;
+  margin:0;
+  align-items: center;
+}
+
+.profile-text {
+  /*margin: 5px;
+  padding: 5px;*/
+  text-align: justify;
+}
 
 /* Cards styling*/
 .projects-container{
 width: 90%;
-margin: 20px, auto;
+margin: 0 auto;
 }
 
 .cards-container {
-  width: 90%;
-  margin: 20px auto;
-}
-/*.html-card {
-  width: 90%;
-  background-color: white;
-  border: 1px solid #DADBDB;
-  box-shadow: 1px 1px 3px rgba(0,0,0,.25);
-  margin: 50px;
+  width: 100%;
   
 }
-*/
 .js-card {
   width: 90%;
   background-color: white;
   border: 1px solid #DADBDB;
   box-shadow: 1px 1px 3px rgba(0,0,0,.25);
-  margin: 50px;
-  
+  margin: 20px auto;
 }
 
 .card-projectname {
@@ -71,11 +116,26 @@ margin: 20px, auto;
   padding: 6px 0 0 0;
   border-bottom: 1px solid #B2B3B4; 
 }
+.URL a {
+  text-decoration: none;
 
+}
+.URL a:hover{
+  cursor: pointer;
+  color: #87bee7;
+}
+.URL a:visited{
+  color:#87bee7;
+}
 .space {
-  margin-left: 5px;
+  margin-left: 8px;
+  color: #87bee7;
 } 
 
+.field {
+  color:#87bee7;
+}
+
 /* Chart styling*/
 .canvas-chart{
   max-width: 500px;
