Ghid de stil servicii electronice guvernamentale

Forma de cautare globala


<div class="widget-top-search container bg-light-blue py-3 my-4">
  <div class="row">
    <div class="col-md-3">
      <label for="inputTopSearch" class="label-search">Doriti să cautati:</span>
    </div>
    <div class="col search-container d-flex">
      <input type="search" id="inputTopSearch" class="form-control search-control" placeholder="In intrebari frecvente" />
      <button type="button" class="btn-search"></button>
    </div>
  </div>
</div>

Forma de cautare locala cu filtre pe dreapta


<div class="widget-top-search container px-0">
  <div class="row">
      <div class="col flex-grow-1 search-container d-flex">
          <input type="search" id="inputTopSearch" class="form-control search-control" placeholder="Cuvant cheie" />
          <button type="button" class="btn-search"></button>
      </div>
      <div class="col">
        <form class="form-inline">
          <div class="form-group mb-2 ml-auto">
            <label class="mb-0 mx-2" for="staticSelect01">Afisare: </label>
            <select id="staticSelect01" class="form-control w-130-fixed">
              <option selected>10</option>
              <option>25</option>
              <option>50</option>
            </select>
          </div>
          <div class="form-group mb-2">
            <label class="mb-0 mx-2" for="staticSelect02">Sortare: </label>
            <select id="staticSelect02" class="form-control w-130-fixed">
              <option selected>A - Z</option>
              <option>Z - A</option>
            </select>
          </div>
        </form>
      </div>
  </div>
</div>

Carousel Slider


<div id="carousel-example-2" class="carousel bg-blue slide carousel-fade widget-carousel-with-side-image" data-ride="carousel">
  <ol class="carousel-indicators">
      <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-2" data-slide-to="1"></li>
      <li data-target="#carousel-example-2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner container py-5" role="listbox">
    <div class="carousel-item active">
      <div class="d-flex carousel-item-container">
        <div class="slide-text-col carousel-caption">
          <h2>Lorem Ipsum dolor sit amet conqiestitur</h2>
          <div class="abstract mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in libero eros. 
              Nullam tristique erat enim, et dignissim purus tristique in. Donec molestie 
              scelerisque vulputate.
          </div>
          <div class="buttons-group">
              <button class="btn btn-striped mr-2" type="button">Autentificare</button>
              <button class="btn btn-striped mr-2" type="button">Creaza Cont</button>
          </div>
        </div>
        <div class="slide-image-col">
            <img class="d-block w-100" src="images/Carousel/img-generic.png" alt="First slide"/>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="d-flex carousel-item-container">
        <div class="slide-text-col carousel-caption">
          <h2>Bebeto Ipsum dolor sit amet conqiestitur</h2>
          <div class="abstract mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in libero eros. 
              Nullam tristique erat enim, et dignissim purus tristique in. Donec molestie 
              scelerisque vulputate.
          </div>
          <div class="buttons-group">
              <button class="btn btn-striped mr-2" type="button">Mai mult</button>
          </div>
        </div>
        <div class="slide-image-col">
          <img class="d-block w-100" src="images/Carousel/img-generic-01.png" alt="First slide"/>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="d-flex carousel-item-container">
        <div class="slide-text-col carousel-caption">
          <h2>Schlang Ipsum dolor sit amet conqiestitur</h2>
          <div class="abstract mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in libero eros. 
              Nullam tristique erat enim, et dignissim purus tristique in. Donec molestie 
              scelerisque vulputate.
          </div>
          <div class="buttons-group">
              <button class="btn btn-striped mr-2" type="button">Vezi detalii</button>
          </div>
        </div>
        <div class="slide-image-col">
          <img class="d-block w-100" src="images/Carousel/img-generic-02.png" alt="First slide"/>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
</div>

Exista setari pentru tranzitia slide-urilor la acest carousel. Implicit, acestea au efectul de rotire, insa, se poate aplica tranzitia fade. Pentru aceasta in rândul codului de initializare a caruselului, indicati clasa aditionala carousel-fade


<div id="carousel-example-2" class="carousel bg-blue slide carousel-fade widget-carousel-with-side-image" data-ride="carousel">

Widget Text și Media

Text & Media este un bloc de text si imagine (sau video player) plasate in doua coloane de inaltime egala.

Blocul de text contine Titlul blocului, Text exlicativ si butoane de legatura cu pagina asticolului detaliat.

Directia afisarii coloanelor este variabila si se seteaza prin aplicarea clasei .ltr (Left to Right), sau clasa .rtl (Right to Left).

In cazul in care intr-o pagine avem doua sau mai multe asemenea blocuri consecutive, se recomanda de a altera directiile coloanelor.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nisl pretium, pulvinar nisi sed, placerat nibh. Nam egestas nisi quis ligula dapibus, a laoreet augue aliquam.

Quo usque tandem abutere patientia nostra?

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nisl pretium, pulvinar nisi sed, placerat nibh. Nam egestas nisi quis ligula dapibus, a laoreet augue aliquam.


<div class="container widget-text-and-media ltr py-5">
  <div class="row">
    <div class="col-lg-5 col-md-6 d-flex flex-column text-column">
      <h3 class="title mt-auto">Lorem ipsum dolor sit amet</h3>
      <p class="abstract">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Duis ut nisl pretium, pulvinar nisi sed, placerat nibh. 
          Nam egestas nisi quis ligula dapibus, a laoreet augue aliquam.
      </p>
      <div class="buttons mb-auto">
          <button type="button" class="btn btn-primary">Mai mult</button>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 offset-lg-1 image-column">
      <img src="images/Media/ph-570-320-2.png" alt="Image" title="Image Title" class="img-fluid" />
    </div>
  </div>

Carduri cu imagine rotunda

Aceste carduri se plaseaza in interiorul unei coloane din grila bootstrap sau a unui element copil a parintelui flex, cu directie flex-row


<div class="flex flex-row">
  <!-- A se plasa codul cardului aici  --> 
</div>


<div class="row">
  <div class="col-md-3">
    <!-- A se plasa codul cardului aici -->
  </div>
</div>


<a href="#" class="column-card p-4">
  <div class="icon-wrapper bg-ruby d-flex">
      <img src=" ... " width="60" height="60"  class="img-fluid"/> 
  </div>
  <div class="card-title">Sanatate</div>
</a>

Taburi

Collapsible Group Item A

[Tab content A]
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Collapsible Group Item B

[Tab content B]
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Collapsible Group Item C

[Tab content C]
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.


  <div class="widget-tabs">
    <div class="row">
      <div class="col-12 ">
        <ul id="tabs" class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
            </li>
            <li class="nav-item">
                <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
            </li>
            <li class="nav-item">
                <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
            </li>
        </ul>
    
    
        <div id="content" class="tab-content" role="tablist">
            <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
                <div class="card-header" role="tab" id="heading-A">
                    <h5 class="mb-0">
                        <!-- Note: `data-parent` removed from here -->
                        <a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
                            Collapsible Group Item A
                        </a>
                    </h5>
                </div>
    
                <!-- Note: New place of `data-parent` -->
                <div id="collapse-A" class="collapse show" data-parent="#content" role="tabpanel" aria-labelledby="heading-A">
                    <div class="card-body">
                        [Tab content A]<br>
                        Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                    </div>
                </div>
            </div>
    
            <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
                <div class="card-header" role="tab" id="heading-B">
                    <h5 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
                            Collapsible Group Item B
                        </a>
                    </h5>
                </div>
                <div id="collapse-B" class="collapse" data-parent="#content" role="tabpanel" aria-labelledby="heading-B">
                    <div class="card-body">
                        [Tab content B]<br>
                        Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                    </div>
                </div>
            </div>
    
            <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
                <div class="card-header" role="tab" id="heading-C">
                    <h5 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">
                            Collapsible Group Item C
                        </a>
                    </h5>
                </div>
                <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
                    <div class="card-body">
                        [Tab content C]<br>
                        Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                    </div>
                </div>
            </div>
        </div>
    </div>

Container gazda

Acest tip de containere are menirea de a gazdui in sine diverse componente de content, gen: forme, text, articole, etc.

Exemplu de asemnea container il puteti vedea pe pagina aceasta.

Continutul vine aici ...


<div class="content-holder bg-white mb-4">
  Continutul vine aici ...
</div>

Modal

Folosiți pluginul modal JavaScript de Bootstrap pentru a adăuga dialoguri pe site-ul dvs. pentru notificări pentru utilizatori sau conținut complet personalizat.


  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Împuternicire de reprezentare este valabilă</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body data-row p-3">
          <div class="col form-group striped-bottom pb-1 mb-1">
            <label>Cod împuternicire de reprezentare</label>
              <div class="label-value">0200728997304591</div>
            </div>
            <div class="col form-group striped-bottom pb-1 mb-1">
              <label>Reprezentat</label>
              <div class="label-value">1009600026622</div>
            </div>
            <div class="col form-group striped-bottom pb-1 mb-1">
              <label>Împuternicesc Reprezentantul</label>
                <div class="label-value">0990311086117</div>
              </div>
              <div class="col form-group striped-bottom pb-1 mb-1">
                <label>Să mă reprezinte în umătoarele subiecte: </label>
                <div class="label-value">Notari Example</div>
              </div> 
              <div class="col form-group striped-bottom pb-1 mb-1">
                <label>Valabil pînă la:</label>
                  <div class="label-value">21.07.2023</div>
                </div>
                <div class="col form-group striped-bottom pb-1 mb-1">
                  <label>Nr. Licenta:</label>
                  <div class="label-value">123</div>
                </div> 
                <div class="col form-group mb-0">
                  <label>Adresa:</label>
                    <div class="label-value">Stefan cel Mare 201 </div>
                  </div>
                     
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Container cu bara laterala

Acest tip de containere are menirea de a gazdui in sine diverse componente de content, gen: forme, text, articole, etc.

0992888182983

active

Depunere cerere comision PPP AT-2000001 Nullam diam felis maximus

Agentia de Guvernare electronica

01.01.2019

Alexandru Balcinschi

Igor Dobrovolschi


<div class="container-with-side-cap d-flex flex-column flex-md-row mb-4">
  <div class="side-cap bg-gold d-flex flex-md-column flex-sm-row justify-content-between">

    <!-- CAP ICON -->
    <dv class="cap-icon rounded-circle">
      <i class="fas fa-pencil-ruler"></i>
    </dv>

    <!-- CAP BUTTONS GROUP -->
    <ul class="action-buttons d-flex flex-md-column flex-sm-row">
      <li>
        <button type="button" class="btn btn-rounded-circle">
          <i class="fas fa-pen"></i>
        </button>
      </li>
      <li>
        <button type="button" class="btn btn-rounded-circle">
          <i class="fas fa-trash-alt"></i>
        </button>
      </li>
      <li>
        <button type="button" class="btn btn-rounded-circle">
          <i class="fas fa-power-off"></i>
        </button>
      </li>
    </ul>

  </div>
  <div class="content-body d-flex flex-column">

    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-3 col-md-4">
          <div class="mb-2">
            <div class="label-bottom">0992888182983</div>
          </div>
          <div class="mb-2">
            <div class="status active">
              <i class="fas fa-circle"></i> 
              <span>active</span>
            </div>
          </div>
        </div>
        <div class="col-lg-9 col-md-8 pb-3">
          <a href="javascript:void(0)" class="title-link">
            Depunere cerere comision PPP AT-2000001 Nullam diam felis maximus
          </a>
          <div class="">Agentia de Guvernare electronica</div>
        </div>
      </div>
    </div>

    <div class="container-fluid mt-auto striped-top">
      <div class="row">
        <div class="col-lg-3 col-md-4 pt-3">
          <div class="">
            <div class="label-bottom">
              <i class="fas fa-calendar-alt mr-2"></i>
              <span>01.01.2019</span></div>
          </div>
        </div>
        <div class="col-lg-9 col-md-8 pt-3">
          <div class=" d-flex justify-content-between">
            <div class="label-bottom d-flex flex-no-wrap">
              <i class="fas fa-suitcase text-primary mr-2"></i>
              <span>Alexandru Balcinschi</span>
            </div>
            <div class="">
              <i class="fas fa-chevron-right"></i>
            </div>
            <div class="label-bottom d-flex flex-no-wrap">
              <i class="fas fa-user mr-2 text-success"></i>
              <span>Igor Dobrovolschi</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>

Accordion

Accordion Item #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion Item #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion Item #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  
    <div class="widget-accordion py-3">
      <div id="accordion" class="accordion">
        <div class="card">
          <div class="card-header">
            <a class="card-link collapsed" data-toggle="collapse" href="#collapseOne" aria-expanded="false">
              Accordion Item #1
            </a>
          </div>
          <div id="collapseOne" class="collapse" data-parent="#accordion">
            <div class="card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
              Accordion Item #2
          </a>
          </div>
          <div id="collapseTwo" class="collapse" data-parent="#accordion">
            <div class="card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
              Accordion Item #3
            </a>
          </div>
          <div id="collapseThree" class="collapse" data-parent="#accordion">
            <div class="card-body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>
    </div>

Cards

Serviciul Guvernamental de notificare

MNotify reprezinta o aplicatie tehnica de transmitere a notoficarilor in cadrul sistemului....

Acceseaza

Serviciul Guvernamental schimb de date si interoperabilitate

MConnect lorem ipsum sit amet conquestitur mortis...

Acceseaza

Registrul imputernicirilor de reprezentare in baza semnaturii electronice

MPower reprezinta o aplicatie tehnica de dolor sit amet...

Acceseaza

Serviciul Guvernamental de semnatura electronica

MSign reprezinta o aplicatie tehnica de transmitere a notoficarilor in cadrul sistemului...

Acceseaza

Serviciul Guvernamental de plati electronice

MPay reprezinta o aplicatie tehnica de transmitere a notoficarilor in cadrul sistemului...

Acceseaza

Serviciul Guvernamental de livrare

MDelivery lorem ipsum sit amet conquestitur vitrandus nulla vechio santam dolor sit amet

Acceseaza

Serviciul de Autentificare si control al accesului

MPass reprezinta o aplicatie tehnica trilulilu samagon hai noroc si voie buna de loro

Acceseaza

Portalul Guvernamental al antreprenorului

Portalul Antreprenorului reprezinta o aplicatie tehnica de transmitere a notoficarilor in ...

Acceseaza

   
    <div class="widget-cards card-services">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
              <div class="card-header">
                <div class="img-container">
                  <img src="images/anrceti-logo.png" alt="name" class="img-fluid" />
                </div>
              </div>
              <div class="card-body">
                <div class="title">
                  Title Here
                </div>
                <div class="description">
                  <p>
                    Description...
                  </p>
                </div>
              </div>
              <div class="card-footer"> 
                <a href="#" class="btn btn-primary btn-block">Acceseaza <i class="fas fa-angle-right"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>