Comments - Snippets | Front - 基于Boostrap5的多用途响应式模板库

Component #1

预览
HTML

3 comments

戴夫·奥斯汀
1 day ago

As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.
Reply
- 法外狂徒-张三
  1 day ago
  
  Love it 戴夫! We're all about keeping it up.
  Reply
Hanna Wolfe
2 days ago

Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.
Reply

              
                <!-- Comment -->
                <div class="container content-space-1 content-space-lg-3">
                  <!-- Heading -->
                  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                    <h2>3 comments</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="row justify-content-lg-center">
                    <div class="col-lg-8">
                      <!-- Comment -->
                      <ul class="list-comment">
                        <!-- Item -->
                        <li class="list-comment-item">
                          <!-- Media -->
                          <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="图片描述内容">
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <div class="d-flex justify-content-between align-items-center">
                                <h6>戴夫·奥斯汀</h6>
                                <span class="d-block small text-muted">1 day ago</span>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->

                          <p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>

                          <a class="link" href="#">Reply</a>

                          <!-- Comment -->
                          <ul class="list-comment">
                            <!-- Item -->
                            <li class="list-comment-item">
                              <!-- Media -->
                              <div class="d-flex align-items-center mb-3">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <div class="d-flex justify-content-between align-items-center">
                                    <h6>法外狂徒-张三</h6>
                                    <span class="d-block small text-muted">1 day ago</span>
                                  </div>
                                </div>
                              </div>
                              <!-- End Media -->

                              <p>Love it 戴夫! We're all about keeping it up.</p>

                              <a class="link" href="#">Reply</a>
                            </li>
                            <!-- End Item -->
                          </ul>
                          <!-- End Comment -->
                        </li>
                        <!-- End Item -->

                        <!-- Item -->
                        <li class="list-comment-item">
                          <!-- Media -->
                          <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="图片描述内容">
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <div class="d-flex justify-content-between align-items-center">
                                <h6>Hanna Wolfe</h6>
                                <span class="d-block small text-muted">2 days ago</span>
                              </div>
                            </div>
                          </div>
                          <!-- End Media -->

                          <p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>

                          <a class="link" href="#">Reply</a>
                        </li>
                        <!-- End Item -->
                      </ul>
                      <!-- End Comment -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Comment -->

Component #2

4.5

2,391评论

90%

of customers
recommend this company

戴夫·奥斯汀

5.0 on November 12, 2020

Fun place to work at

You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.
Brian Ortega

3.0 on October 25, 2020

胶囊 is for contracted freelance writers

It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.
马克·威廉姆斯

5.0 on October 19, 2020

Excellent Company

They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.
Alex Walters

4.0 on July 04, 2020

Productive and fun Workplace

I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.
Kurtis Blade

5.0 on March 01, 2020

Nice place

I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.

View all评论

What would you say about your employer?

Help fellow job seekers by sharing your unique experience.

Select a subscription

              
                <!-- Reviews -->
                <div id="reviews-section" class="container">
                  <div class="mb-4">
                    <h3>Reviews</h3>
                  </div>

                  <div class="row">
                    <div class="col-md-8 mb-7 mb-md-0">
                      <div class="row mb-6">
                        <div class="col-sm-6 mb-3 mb-sm-0">
                          <!-- Media -->
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <span class="display-4 text-dark">4.5</span>
                            </div>
                          
                            <div class="flex-grow-1 ms-4">
                              <!-- Rating -->
                              <div class="d-flex gap-1 mb-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14">
                              </div>
                              <!-- End Rating -->
                              
                              <span class="d-block">2,391评论</span>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <span class="display-4 text-dark">90%</span>
                            </div>
                          
                            <div class="flex-grow-1 ms-4">
                              <span class="font-size-1">of customers<br>recommend this company</span>
                            </div>
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <!-- Comment -->
                      <ul class="list-comment mb-7">
                        <!-- Item -->
                        <li class="list-comment-item">
                          <!-- Media -->
                          <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="图片描述内容">
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <h5>戴夫·奥斯汀</h5>

                              <div class="d-flex align-items-center mb-3">
                                <span class="fw-semi-bold text-dark me-1">5.0</span>
                                <img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <small class="d-block">on November 12, 2020</small>
                              </div>

                              <h5>Fun place to work at</h5>
                              <p>You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </li>
                        <!-- End Item -->

                        <!-- Item -->
                        <li class="list-comment-item">
                          <!-- Media -->
                          <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img1.jpg" alt="图片描述内容">
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <h5>Brian Ortega</h5>

                              <div class="d-flex align-items-center mb-3">
                                <span class="fw-semi-bold text-dark me-1">3.0</span>
                                <img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <small class="d-block">on October 25, 2020</small>
                              </div>

                              <h5>胶囊 is for contracted freelance writers</h5>
                              <p>It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </li>
                        <!-- End Item -->

                        <!-- Item -->
                        <li class="list-comment-item">
                          <!-- Media -->
                          <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img7.jpg" alt="图片描述内容">
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <h5>马克·威廉姆斯</h5>

                              <div class="d-flex align-items-center mb-3">
                                <span class="fw-semi-bold text-dark me-1">5.0</span>
                                <img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <small class="d-block">on October 19, 2020</small>
                              </div>

                              <h5>Excellent Company</h5>
                              <p>They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </li>
                        <!-- End Item -->

                        <!-- Item -->
                        <li class="list-comment-item">
                          <!-- Media -->
                          <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img6.jpg" alt="图片描述内容">
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <h5>Alex Walters</h5>

                              <div class="d-flex align-items-center mb-3">
                                <span class="fw-semi-bold text-dark me-1">4.0</span>
                                <img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <small class="d-block">on July 04, 2020</small>
                              </div>

                              <h5>Productive and fun Workplace</h5>
                              <p>I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </li>
                        <!-- End Item -->

                        <!-- Item -->
                        <li class="list-comment-item">
                          <!-- Media -->
                          <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img5.jpg" alt="图片描述内容">
                            </div>

                            <div class="flex-grow-1 ms-3">
                              <h5>Kurtis Blade</h5>

                              <div class="d-flex align-items-center mb-3">
                                <span class="fw-semi-bold text-dark me-1">5.0</span>
                                <img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <small class="d-block">on March 01, 2020</small>
                              </div>

                              <h5>Nice place</h5>
                              <p>I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </li>
                        <!-- End Item -->
                      </ul>
                      <!-- End Comment -->

                      <a class="btn btn-outline-primary" href="#">View all评论 <i class="bi-chevron-right small ms-1"></i></a>

                      <!-- Sticky Block End Point -->
                      <div id="stickyBlockEndPoint"></div>
                    </div>
                    <!-- End Col -->

                    <div class="col-md-4">
                      <div class="ps-md-4">
                        <!-- Sticky Block -->
                        <div id="stickyBlockStartPoint">
                          <div class="js-sticky-block"
                               data-hs-sticky-block-options='{
                                 "parentSelector": "#stickyBlockStartPoint",
                                 "breakpoint": "md",
                                 "startPoint": "#stickyBlockStartPoint",
                                 "endPoint": "#stickyBlockEndPoint",
                                 "stickyOffsetTop": 20,
                                 "stickyOffsetBottom": 20
                               }'>
                            <!-- Card -->
                            <div class="card card-bordered">
                              <div class="card-body">
                                <div class="mb-5">
                                  <h3 class="card-title">What would you say about your employer?</h3>
                                  <p class="card-text">Help fellow job seekers by sharing your unique experience.</p>
                                </div>

                                <div class="d-grid mb-5">
                                  <a class="btn btn-primary btn-sm" href="#">Select a subscription</a>
                                </div>
                                
                                <img class="card-img-bottom" src="../assets/svg/illustrations/oc-chatting.svg" alt="图片描述内容">
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                        </div>
                        <!-- End Sticky Block -->
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- Reviews -->

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF STICKY BLOCKS
                    // =======================================================
                    new HSStickyBlock('.js-sticky-block', {
                      targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
                    })
                  })()
                </script>