Arcas education HTML template

Is flat designed, well organized template for education. Responsive layouts are available for mobile and tablet devices.

education template preview

Folder structure

  • project
    • assets
      • Contains all assets used by the template
      • css
        • Contains CSS file/s
      • fonts
        • Contains fonts used by the template
      • img
        • Contains all images used by the template
      • js
        • Contains JS file/s
      • vendor
        • Contains all vendor files (ie. bootstrap, jquery, etc.)

Icons

We use icons from flaticon.com in the template.

Fonts

We use fonts from fonts.google.com in the template.

Poppins

https://fonts.google.com/specimen/Poppins?query=poppins

Kaushan script

https://fonts.google.com/specimen/Kaushan+Script?query=kausha

Heading 1

Heading 2

Heading 3

Heading 4

External sources

We used external sources listed below in the template.

Fonts

https://fonts.google.com/

Icons

https://www.flaticon.com/

Images

https://unsplash.com/

Elements


Heading 1

Heading 2

Heading 3

Heading 4

<h1 class="title">Heading 1</h1>
<h2 class="title">Heading 2</h2>
<h3 class="title">Heading 3</h3>
<h4 class="title">Heading 4</h4>

<button type="button" class="arcas-btn arcas-btn-stylized-green arcas-btn-rounded">Button</button>

1 2 3 ... >
<div class="element-container">
 <div class="pagination-container">
  <a href="#" class="pagination-circle active">1</a>
  <a href="#" class="pagination-circle">2</a>
  <a href="#" class="pagination-circle">3</a>
  <a href="#" class="pagination-circle">...</a>
  <a href="#" class="pagination-circle">></a>
 </div>
</div>

<label class="arcas-checkbox">Unchecked
 <input type="checkbox">
 <span class="checkmark"></span>
</label>

<label class="arcas-radio">Unchecked
 <input type="radio" name="radio">
 <span class="checkmark"></span>
</label>

<label class="arcas-switch">
 <input type="checkbox">
 <span class="slider"></span>
</label>

<div class="arcas-select">
 <select>
  <option value="one">Option one</option>
  <option value="two">Option two</option>
  <option value="three">Option three</option>
  <option value="four">Option four</option>
 </select>
</div>

<div class="input-light">
 <div class="form-group">
  <input type="text" class="form-control" placeholder="Your name">
 </div>
</div>

Alert 1 - success
Alert 2 - warning
Alert 3 - danger
Alert 4 - info
<div class="alert alert-success">Alert 1 - success</div>
<div class="alert alert-warning">Alert 2 - warning</div>
<div class="alert alert-danger">Alert 3 - danger</div>
<div class="alert alert-info">Alert 4 - info</div>

<div class="element-container">
 <div class="news-detail-other-content">
  <a href="#" class="card">
    <div class="card-img-top">
     <img src="/doc/assets/img/components/photos/photo10.png" alt="news image">
     <p class="news-detail-other-image-short">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    </div>
    <div class="card-body">
     <div class="date">10/06/2021</div>
     <div class="title">New lorem ipsum dolor</div>
     <div class="divider divider-centered"></div>
    </div>
  </a>
 </div>
</div>

<div class="element-container">
 <div class="gallery-container">
  <div class="gallery-image-item">
    <div class="view-image">
     <img src="/doc/assets/img/components/photos/photo12.png" alt="gallery image">
    </div>
  </div>
 </div>
</div>
<div class="image-modal">
 <button type="button" class="close" data-dismiss="modal"><span class="close-icon"></span></button>
 <img id="image-preview">
</div>