Fixed all know bugs before creating stats block

hrekov · Jul 8, 2018 · 1c08164 · 1c08164
1 parent 89bcfd2
commit 1c08164
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 8 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -78,7 +78,7 @@ button {
  outline: none;
 }
 
-.inner, .header-line .line-content, .header-cont-wrapper, .promo-content, .prop, .order, .last-info .info-blocks {
+.inner, .header-line .line-content, .header-cont-wrapper, .promo-content, .prop, .order, .stats, .last-info .info-blocks {
  max-width: 1140px;
  margin: 0 auto;
 }
@@ -415,6 +415,18 @@ button {
  font-weight: bold;
 }
 
+.stats {
+ margin-bottom: 79px;
+ width: 100%;
+ min-height: 168px;
+ background-color: #ff635c;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+
 .last-info {
  width: 100%;
  margin-bottom: 79px;
@@ -468,6 +480,7 @@ button {
  height: 200px;
  position: relative;
  width: 100%;
+ display: block;
  /*
  &:hover .moreinfo-btn {
  visibility: visible;
@@ -558,7 +571,6 @@ button {
  font-size: 12px;
  margin-right: 55px;
  color: #959595;
- cursor: pointer;
 }
 
 .calendar-icon {
@@ -567,6 +579,11 @@ button {
 
 .comments-icon {
  background: url("../img/comments.svg") no-repeat 0 -1px;
+ cursor: pointer;
+}
+
+.comments-icon:hover {
+ text-decoration: underline;
 }
 
 .page-footer {
@@ -605,7 +622,7 @@ button {
 }
 
 @media (max-width: 1139px) {
- .inner, .header-line .line-content, .header-cont-wrapper, .promo-content, .prop, .order, .last-info .info-blocks {
+ .inner, .header-line .line-content, .header-cont-wrapper, .promo-content, .prop, .order, .stats, .last-info .info-blocks {
  padding: 0 10px;
  }
 }

diff --git a/src/index.html b/src/index.html
@@ -123,6 +123,25 @@ <h2 class="order-heading">Ищешь курс?</h2>
  </ol>
  </section>
 
+ <!-- <section class="stats">
+ <div class="stats-elem">
+ <h4 class="stats-heading">Всего курсов</h4>
+ <p class="stats-val">136</p>
+ </div>
+ <div class="stats-elem">
+ <h4 class="stats-heading">мероприятий в следующем месяце</h4>
+ <p class="stats-val">0</p>
+ </div>
+ <div class="stats-elem">
+ <h4 class="stats-heading">Специализаций</h4>
+ <p class="stats-val">38</p>
+ </div>
+ <div class="stats-elem">
+ <h4 class="stats-heading">Типов курсов</h4>
+ <p class="stats-val">13</p>
+ </div>
+ </section> -->
+
  <section class="last-info">
  <h2 class="info-heading">Рекомендованные статьи</h2>
  <ul class="info-blocks left-line">
@@ -131,7 +150,7 @@ <h2 class="info-heading">Рекомендованные статьи</h2>
  <img src="img/bg1.jpg" alt="Отзыв о курсе">
  <!-- <a href="#" class="moreinfo-btn">Подробнее</a> -->
  <div class="shr-icons">
- <a href="#" class="shr-ha"></a>
+ <span class="shr-ha"></span>
  </div>
  </div>
  <a href="#">
@@ -148,8 +167,8 @@ <h4 class="info-block-heading">Отзыв о курсе</h4>
  <img src="img/bg2.jpg" alt="Новий майданчик у Харкові">
  <!-- <a href="#" class="moreinfo-btn">Подробнее</a> -->
  <div class="shr-icons">
- <a href="#" class="shr-ri"></a>
- <a href="#" class="shr-su"></a>
+ <span class="shr-ri"></span>
+ <span class="shr-su"></span>
  </div>
  </div>
  <a href="#">
@@ -166,7 +185,7 @@ <h4 class="info-block-heading">Новий майданчик у Харкові:
  <img src="img/bg1.jpg" alt="">
  <!-- <a href="#" class="moreinfo-btn">Подробнее</a> -->
  <div class="shr-icons">
- <a href="#" class="shr-ri"></a>
+ <span class="shr-ri"></span>
  </div>
  </div>
  <a href="#">

diff --git a/src/scss/_lastinfo.scss b/src/scss/_lastinfo.scss
@@ -48,6 +48,7 @@
  height: 200px;
  position: relative;
  width: 100%;
+ display: block;
 
  /*
  &:hover .moreinfo-btn {
@@ -132,7 +133,6 @@
  font-size: 12px;
  margin-right: 55px;
  color: #959595;
- cursor: pointer; // Remove if it is a link
 }
 
 
@@ -144,4 +144,9 @@
 .comments-icon {
  @extend %info-icons;
  background: url('../img/comments.svg') no-repeat 0 -1px;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ }
 }
diff --git a/src/scss/_stats.scss b/src/scss/_stats.scss
@@ -0,0 +1,14 @@
+// Stats section styles
+.stats {
+ @extend .inner;
+ margin-bottom: 79px;
+ width: 100%;
+ min-height: 168px;
+ background-color: $second-accent-color;
+ display: flex;
+ flex-wrap: wrap;
+
+ & div {
+
+ }
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -8,6 +8,7 @@
 @import 'promo';
 @import 'prop';
 @import 'order';
+@import '_stats';
 @import 'lastinfo';
 @import 'footer';
 @import 'media';