feat: course details page structure

community/public/css/style.css

@@ -399,11 +399,6 @@ input[type=checkbox] {
   }
 }
 
-.is-primary {
-  background: var(--primary-color);
-  color: #FFFFFF;
-}
-
 .button-links:hover {
   text-decoration: none;
 }
@@ -548,14 +543,14 @@ div.custom-checkbox>label>input:checked+img {
 
 @media (max-width: 768px) {
   .course-home-page {
-  padding: 0px;
-  width: 688px;
+    padding: 0px;
+    width: 688px;
   }
 }
 
 @media (max-width: 375px) {
   .course-home-page {
-  width: 100%;
+    width: 100%;
   }
 }
 
@@ -598,7 +593,6 @@ div.custom-checkbox>label>input:checked+img {
   margin-bottom: 16px;
 }
 
-
 @media (max-width: 768px) {
   .course-card-wide-intro {
     width: 632px;
@@ -614,14 +608,14 @@ div.custom-checkbox>label>input:checked+img {
 .wide-button {
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
   border-radius: 6px;
-  padding: 12px;
+  padding: 12px 24px 12px;
   margin-right: 16px;
   height: 48px;
   cursor: pointer;
-  width: 190px;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: fit-content;
 }
 
 @media (max-width: 375px) {
@@ -630,6 +624,26 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
+.is-secondary {
+  background: #FFFFFF;
+}
+
+.is-secondary:hover {
+  text-decoration: none;
+  color: inherit;
+}
+
+@media (max-width: 375px) {
+  .is-secondary {
+    margin-top: 16px;
+  }
+}
+
+.is-primary {
+  background: var(--primary-color);
+  color: #FFFFFF;
+}
+
 .is-primary:hover {
   text-decoration: none;
   color: #FFFFFF;
@@ -714,18 +728,6 @@ div.custom-checkbox>label>input:checked+img {
   margin: 12px 0px 16px;
 }
 
-.video-preview {
-  background: #FFFFFF;
-  width: 234px;
-}
-
-@media (max-width: 375px) {
-  .video-preview {
-    width: 264px;
-    margin-top: 16px;
-  }
-}
-
 .course-buttons {
   display: flex;
 }
@@ -798,6 +800,10 @@ div.custom-checkbox>label>input:checked+img {
   margin: 48px 0px 16px;
 }
 
+.course-detail-headings {
+  margin: 0px;
+}
+
 .modal-headings {
   margin: 0;
 }
@@ -906,3 +912,27 @@ div.custom-checkbox>label>input:checked+img {
 .breadcrumb {
   margin: 16px 10px 16px;
 }
+
+.course-details-outline {
+  width: 352px;
+}
+
+.lesson-content-card {
+  padding: 24px;
+  flex-direction: column;
+}
+
+.lesson-content {
+  width: 736px;
+}
+
+.course-content-parent {
+  display: flex;
+  justify-content: space-between;
+}
+
+.lesson-pagination {
+  display: flex;
+  justify-content: space-between;
+  margin: 24px 0px 0px;
+}

community/public/css/style.less

@@ -272,10 +272,6 @@ section.lightgray {
   margin: 20px 0px;
 }
 
-.lesson-pagination {
-  clear: both;
-}
-
 .exercise-image svg {
   width: 200px;
   height: 200px;

community/public/icons/left-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33331 6.66663L0.666646 3.99996L3.33331 1.33329" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

community/public/icons/side-arrow-white.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666626 6.66675L3.33329 4.00008L0.666626 1.33341" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>