Arcas education HTML template
Is flat designed, well organized template for education. Responsive layouts are available for mobile and tablet devices.
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.)
- assets
Fonts
We use fonts from fonts.google.com in the template.
Poppins
https://fonts.google.com/specimen/Poppins?query=poppinsKaushan script
https://fonts.google.com/specimen/Kaushan+Script?query=kaushaHeading 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>
<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>
<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>
<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>
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="arcas-radio">Unchecked
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="arcas-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<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>
<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>
<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="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="arcas-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="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="arcas-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="btn-close" aria-label="close"><span class="close-icon"></span></button>
<img id="image-preview" src="#" alt="image preview">
</div>
<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="btn-close" aria-label="close"><span class="close-icon"></span></button>
<img id="image-preview" src="#" alt="image preview">
</div>
