Newer
Older
GestionHoteleria / src / app / components / blog / blog-details / blog-details.component.html
James Cuadrado on 23 May 2021 13 KB init

<div class="blog-details">
    <div class="header-title" style="background: url(assets/images/background/header.jpg);">
        <div class="container" id="mainDIV" >
        <div class="title">
            <h2>Blog details</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Aenean commodo ligula eget dolor</p>
          </div>
    </div>
    </div>
    <div class="blog-details-wrapper sec-padding" style="background: url(assets/images/background/download.svg);">
        <div class="container">
            <div class="blog-list-wrapper sec-padding" fxLayout="row" fxLayout.lt-md="column">
                <div fxFlex="100" fxFlex.gt-sm="70"  class="main-blog-panel">
                    <div class="single-blog-list" >
                        <div  class="image-box">
                          <img src="assets/images/blog/b1.jpg" alt="">
                        </div>
                        <div class="text-box">
                          <h4>Our Outstanding Services</h4>
                          <ul class="post-info" fxLayout="row">
                            <li><mat-icon color="primary" class="material-icons">access_time </mat-icon>Aug 21, 2015</li>
                            <li><mat-icon color="primary" class="mat-icon-lg mat-icon material-icons">person </mat-icon>Marc Kurcek</li>
                            <li><mat-icon color="primary" class="material-icons">sms</mat-icon>05 Comments</li>
                          </ul>
                          <p>Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque Benenatis mauris Vestibulum ante ipsum primis in industry, logistics, finance, business orci ultrices venenatis mauris. It is a long established fact that a reader will be distracted.</p>
                          <p>Nullam et lacus ultricies, egestas dolor vel, consequat magna. Curabitur tellus mauris, lacinia in dolor sit amet, sollicitudin efficitur quam. Praesent vel dolor non tortor blandit mollis et a lacus. Nulla id congue sem. Vestibulum orci ligula, sollicitudin nec dignissim a, porttitor ac elit. Nam consequat quam mauris, sit amet convallis sapien venenatis nec.</p>
                          <div class="share-box">
                            <ul class="tag-box pull-left">
                                <li>Tags: </li>
                                <li><a href="http://wp1.themexlab.com/newwp/experts/tag/business/" rel="tag">Business </a></li>
                                <li><a href="http://wp1.themexlab.com/newwp/experts/tag/consulting/" rel="tag">Consulting </a></li>
                                <li><a href="http://wp1.themexlab.com/newwp/experts/tag/seminar/" rel="tag">Seminar </a></li>
                            </ul>
                            <div class="social-box pull-right">
                                <ul class="list-inline social">
                                    <li><a href=""><i class="fa fa-facebook"></i></a></li>
                                    <li><a href=""><i class="fa fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                    <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                                </ul>
                            </div>
                        </div>
                       </div>
                       <div class="author-box">
                        <div class="post-author">
                          <div class="inner">
                              <div class="img-box">
                                  <img class="img-responsive" src="assets/images/about-us/t2.jpg">
                              </div>
                              <div class="text-box">
                                  <h5>Robert Davison</h5>
                                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim ornare nisi vitae.</p>
                              </div>
                          </div>
                      </div>
                       </div>
                       <div class="comments-area">
                        <div class="group-title">
                            <h3>Read Comments</h3>
                        </div>
                        <!--Comment Box-->
                        <div class="comment-box">
                            <div class="comment">
                                <div class="author-thumb"><img src="assets/images/about-us/t2.jpg" alt=""></div>
                                <div class="comment-inner">
                                    <div class="comment-info clearfix">Steven Rich – Sep 17, 2016:</div>
                                    <div class="rating">
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star light"></span>
                                    </div>
                                    <div class="text">How all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings.</div>
                                </div>
                            </div>
                        </div>

                        <div class="comment-box reply-comment">
                            <div class="comment">
                                <div class="author-thumb"><img src="assets/images/about-us/t3.jpg" alt=""></div>
                                <div class="comment-inner">
                                    <div class="comment-info clearfix">William Cobus – Aug 21, 2016:</div>
                                    <div class="rating">
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star-half-empty"></span>
                                    </div>
                                    <div class="text">There anyone who loves or pursues or desires to obtain pain itself, because it is pain sed, because occasionally circumstances occur some great pleasure.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="contact-form">
                        <div class="header-title">
                            <h3>Add Your Comments</h3>
                        </div>
                      <form fxLayout="row wrap">
                        <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="mt-20 pr-5" ngClass.sm="mt-10" ngClass.xs="mt-10">
                            <mat-form-field class="w-100">
                                <input matInput placeholder="First name (required)" #name="ngModel" ngModel name="name" required>
                                <mat-error *ngIf="name.invalid">Please enter a valid message</mat-error>
                              </mat-form-field>
                        </div>
                        <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="pl-5 mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                            <mat-form-field class="w-100">
                                <input matInput placeholder="Last name (required)" #email="ngModel" ngModel name="email" required>
                                <mat-error *ngIf="email.invalid">Please enter a valid message</mat-error>
                              </mat-form-field>
                        </div>

                        <div  fxFlex="100"  class="mt-20 pr-5" ngClass.sm="mt-10" ngClass.xs="mt-10">
                            <mat-form-field class="w-100">
                                <input matInput placeholder="Email Address (required)" #email="ngModel" ngModel name="email" required>
                                <mat-error *ngIf="email.invalid">Please enter a valid message</mat-error>
                              </mat-form-field>
                        </div>

                        <div  fxFlex="100" fxFlex.gt-sm="100" class="mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                            <mat-form-field class="w-100">
                                <textarea placeholder="Post content" matInput rows="4" ngModel name="content"></textarea>
                              </mat-form-field>
                        </div>
                        <div class="button-wrap" fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1">
                            <button class="btn-project" mat-raised-button color="accent" type="submit">Submit Review</button>
                          </div>
                        </form>
                    </div>
                    </div>
                 </div>
                 <div fxFlex="100" fxFlex.gt-sm="30" class="sidebar">
                    <div class="blog-sidebar">
                        <div class="search mb-30">
                            <input  class="form-control" placeholder="Search..." type="search">
                            <button mat-raised-button color="primary" type="submit"><i class="fa fa-search" aria-hidden="true"></i> </button>
                        </div>
                        <div class="single-sidebar-widget mb-30">
                            <div class="post-widget">
                                <div class="title">
                                    <h4>Latest News</h4>
                                    <div class="decor-line"></div>
                                </div>
                                <ul>
                                    <li fxLayout="row">
                                        <div fxFlex="100" fxFlex.gt-sm="30" class="icon-box"><img src="assets/images/blog/b1.jpg" alt="Awesome Image"></div>
                                        <div fxFlex="100" fxFlex.gt-sm="70" class="text-box">
                                            <h5><a href="#">How To Reduce Financial Stress </a></h5><span>02 Dec.</span>
                                        </div>
                                    </li>
                                    <li fxLayout="row">
                                        <div fxFlex="100" fxFlex.gt-sm="30" class="icon-box"><img src="assets/images/blog/b2.jpg" alt="Awesome Image"></div>
                                        <div fxFlex="100" fxFlex.gt-sm="70" class="text-box">
                                            <h5><a href="#">What Makes A Financial Website Successful? </a></h5><span>02 Dec.</span>
                                        </div>
                                    </li>
                                    <li fxLayout="row">
                                        <div fxFlex="100" fxFlex.gt-sm="30" class="icon-box"><img src="assets/images/blog/b3.jpg" alt="Awesome Image"></div>
                                        <div fxFlex="100" fxFlex.gt-sm="70" class="text-box">
                                            <h5><a href="#">What Makes A Financial Service’s Website Successful? </a></h5><span>02 Dec.</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="single-sidebar-widget mb-30">
                            <div class="post-widget">
                                <div class="title">
                                    <h4>Text widget</h4>
                                </div>
                              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore que laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arch itecto beatae vitae dict eaque ipsa quae.</p>
                            </div>
                        </div>
                        <div class="single-sidebar-widget mb-30">
                            <div class="tags-widget post-widget">
                                <div class="title">
                                    <h4>Tags widget</h4>
                                </div>
                                <ul class="list-inline">
                                    <li><a href="#">Insurance</a></li>
                                    <li><a href="#">Investments</a></li>
                                    <li><a href="#">tax plans</a></li>
                                    <li><a href="#">Mutual funds</a></li>
                                    <li><a href="#">Retirement plans</a></li>
                                    <li><a href="#">Busniess plans</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
          </div>
    </div>

</div>