diff --git a/src/assets/main.css b/src/assets/main.css
index 2a043c9e..5436198a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,15 +4,20 @@ body {
font-size: 18px;
}
+#badges {
+ text-align: center;
+}
+
.course {
background: #F5F5F5;
- border: 1px solid #ccc;
border-radius: 5px;
+ border: 1px solid #ccc;
box-shadow: 1px 1px 5px #EAEAEA;
+ display: inline-block;
height: 350px;
margin: 20px 10px;
padding: 15px 10px;
- text-align: center;
+ width: 200px;
}
.course h3 {
@@ -28,3 +33,7 @@ body {
width: 150px;
margin-bottom: 20px;
}
+
+.course a {
+ display: block;
+}
diff --git a/src/index.html b/src/index.html
index af7c7edc..a1951a6a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,7 @@
diff --git a/test/portfolio.spec.js b/test/badges.spec.js
similarity index 88%
rename from test/portfolio.spec.js
rename to test/badges.spec.js
index fd792ea2..25821d9d 100644
--- a/test/portfolio.spec.js
+++ b/test/badges.spec.js
@@ -107,10 +107,10 @@ describe('The webpage', () => {
assert(!!firstCourse);
});
- it('should have elements with the correct class name', () => {
- let firstCourse = badges.firstChild;
- let classes = Array.from(firstCourse.classList);
- assert(!!classes.find((className) => className === 'col-md-3'));
+ it('should have child with the course class name', () => {
+ const firstCourse = badges.firstChild;
+ const classes = Array.from(firstCourse.classList);
+ assert(!!classes.find((className) => className === 'course'));
});
it('should have x elements within the #badges', () => {
@@ -118,18 +118,6 @@ describe('The webpage', () => {
assert(courses.length === mockData.courses.completed.length)
});
- it('should have a div as a child', () => {
- const firstCourseDiv = badges.firstChild.firstChild;
- assert(!!firstCourseDiv);
- assert(firstCourseDiv.nodeName.toLowerCase() === 'div')
- });
-
- it('should have child with the course class name', () => {
- const firstCourseDiv = badges.firstChild.firstChild;
- const classes = Array.from(firstCourseDiv.classList);
- assert(!!classes.find((className) => className === 'course'));
- });
-
it('should have h3 tags with the course titles', () => {
const courses = Array.from(badges.querySelectorAll('.course'));
courses.forEach((course, i) => {