## Ruizarch – Architecture HTML Template

by: bslthemes

Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com

## File structure

After unpacking archive, you'll see this structure:

    html/
    │
    ├──doc/
    ├──template/
    │──│──css/
    │──│──img/
    │──│──fonts/
    │──│──js/
    │──│──scss/
    │──│──mailer/
    │──│──404.html
    │──│──about.html
    │──│──blog.html
    │──│──coming-soon.html
    │──│──contact.html
    │──│──home-1.html
    │──│──home-2.html
    │──│──home-3.html
    │──│──portfolio.html
    │──│──project.html
    │──│──publication.html
    │──│──service.html
    │──│──services.html
    │──│──team-member.html
    │──│──team.html

- css/ - compiled css styles for template
- scss/ - main .scss styles for template
- js/ - all JS library for template
  - main.js - main JS for template
- mailer/ - PHP forms and mail settings for template
  - forms_settings.php - email settings for forms
  - feedback.php - contact form settings

## Settings

## Template Settings

For editing styling, colors, sizes, etc of the template you can use following settings, folder "/scss/_variables.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".

    /* ---
    	Settings Begin
    ---*/

    $font-1: 'Sora', sans-serif;
    $font-2: 'Caveat', cursive;

    $dark: rgba(0, 0, 0, 1);
    $light: rgba(255, 255, 255, 1);
    $accent: rgba(188, 255, 0, 1);

    $dt-5: rgba(0, 0, 0, .05);
    $dt-10: rgba(0, 0, 0, .1);
    $dt-20: rgba(0, 0, 0, .2);
    $dt-30: rgba(0, 0, 0, .3);
    $dt-40: rgba(0, 0, 0, .4);
    $dt-50: rgba(0, 0, 0, .5);
    $dt-60: rgba(0, 0, 0, .6);
    $dt-70: rgba(0, 0, 0, .7);
    $dt-80: rgba(0, 0, 0, .8);
    $dt-90: rgba(0, 0, 0, .9);
    $dt-95: rgba(0, 0, 0, .95);

    $lt-5: rgba(255, 255, 255, .05);
    $lt-10: rgba(255, 255, 255, .1);
    $lt-20: rgba(255, 255, 255, .2);
    $lt-30: rgba(255, 255, 255, .3);
    $lt-40: rgba(255, 255, 255, .4);
    $lt-50: rgba(255, 255, 255, .5);
    $lt-60: rgba(255, 255, 255, .6);
    $lt-70: rgba(255, 255, 255, .7);
    $lt-80: rgba(255, 255, 255, .8);
    $lt-90: rgba(255, 255, 255, .9);
    $lt-95: rgba(255, 255, 255, .95);

    $gs-5: rgba(242, 242, 242, 1);
    $gs-10: rgba(229, 229, 229, 1);
    $gs-20: rgba(204, 204, 204, 1);
    $gs-30: rgba(178, 178, 178, 1);
    $gs-40: rgba(153, 153, 153, 1);
    $gs-50: rgba(128, 128, 128, 1);
    $gs-60: rgba(102, 102, 102, 1);
    $gs-70: rgba(77, 77, 77, 1);
    $gs-80: rgba(51, 51, 51, 1);
    $gs-90: rgba(26, 26, 26, 1);
    $gs-95: rgba(13, 13, 13, 1);

    $h1: 60px;
    $h2: 46px;
    $h3: 26px;
    $h4: 22px;
    $h5: 18px;
    $h6: 15px;

    $text: 15px;

    $t-sm: .2s cubic-bezier(0, 0, 0.3642, 1);
    $t-md: .4s cubic-bezier(0, 0, 0.3642, 1);
    $t-lg: .6s cubic-bezier(0, 0, 0.3642, 1);

    /* ---
    	Settings End
    ---*/

## Include of fonts

To load/use fonts, you need edit @import in start "/scss/_variables.scss" file:

    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');

Next step is to replace "font-family: '...';" to your fonts names "$font-1", "$font-2".

## Edit Icons

This template use .svg icons and fontawesome icons - https://fontawesome.com/v5/search, use search and select icons.

Copy icon class (for example "fas fa-code") and add to tag in html file like this:

    <i class="fas fa-pencil-ruler"></i>

## Contact Form PHP

To modify the form is submitted, you can use the following settings, folders "/mailer/forms_settings.php" and "/mailer/feedback.php"

## HTML structure

    <!DOCTYPE html>
    <html lang="en-US">

    <head>

    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">

    	<!-- bootstrap grid css -->
    	<link rel="stylesheet" href="css/plugins/bootstrap-grid.css">
    	<!-- font awesome css -->
    	<link rel="stylesheet" href="css/plugins/font-awesome.min.css">
    	<!-- swiper css -->
    	<link rel="stylesheet" href="css/plugins/swiper.min.css">
    	<!-- magnific css -->
    	<link rel="stylesheet" href="css/plugins/magnific-popup.css">
    	<!-- ruizarch css -->
    	<link rel="stylesheet" href="css/style.css">
    	<!-- page name -->
    	<title>Ruizarch</title>

    </head>

    <body>

    	<!-- wrapper -->
    	<div class="mil-wrapper">

    		<div class="mil-progress-track">
    			<div class="mil-progress"></div>
    		</div>

    		<!-- top bar -->
    		<div class="mil-top-panel">
    			...
    		</div>
    		<!-- top bar end -->

    		<!-- content -->
    		<div id="content">

    			...

    			<!-- footer -->
    			<footer class="mil-relative">
    				...
    			</footer>
    			<!-- footer end -->

    		</div>
    		<!-- content -->
    	</div>
    	<!-- wrapper end -->

    	<!-- jQuery js -->
    	<script src="js/plugins/jquery.min.js"></script>
    	<!-- swiper js -->
    	<script src="js/plugins/swiper.min.js"></script>
    	<!-- gsap js -->
    	<script src="js/plugins/gsap.min.js"></script>
    	<!-- imagesloaded js -->
    	<script src="js/plugins/imagesloaded.pkgd.js"></script>
    	<!-- isotope js -->
    	<script src="js/plugins/isotope.min.js"></script>
    	<!-- scroll smoother -->
    	<script src="js/plugins/smooth-scroll.js"></script>
    	<!-- scroll trigger js -->
    	<script src="js/plugins/ScrollTrigger.min.js"></script>
    	<!-- magnific js -->
    	<script src="js/plugins/magnific-popup.js"></script>
    	<!-- ruizarch js -->
    	<script src="js/main.js"></script>

    </body>

    </html>

## HTML structure of "Header"

    <!-- top bar -->
    <div class="mil-top-panel">
    	<div class="container-fluid">
    		<div class="mil-top-panel-content">
    			<a href="home-1.html" class="mil-logo">
    				...
    			</a>

    			<div class="mil-navigation">
    				...
    			</div>

    			<!-- right buttons -->
    			<div class="mil-top-panel-buttons">
    				...
    			</div>
    			<!-- right buttons end -->

    		</div>

    	</div>
    </div>
    <!-- top bar end -->

## HTML structure of "Footer"

    <!-- footer -->
    <footer class="mil-relative">
    	<img src="img/photo/4.jpg" class="mil-bg-img mil-parallax" alt="image" style="object-position: top;" data-value-1="-25%" data-value-2="23%">
    	<div class="mil-overlay"></div>
    	<div class="container mil-p-120-90">
    		<div class="mil-background-grid"></div>
    		<div class="row align-items-end">
    			<div class="col-lg-8">
    				<div class="row">
    					<div class="col-12">

    						...

    					</div>
    					<div class="col-md-6 col-lg-6 col-xl-3">

    						...

    					</div>
    					<div class="col-md-6 col-lg-6 col-xl-3">

    						...

    					</div>
    					<div class="col-md-6 col-lg-6 col-xl-3">

    						...

    					</div>
    					<div class="col-md-6 col-lg-6 col-xl-3">

    						...

    					</div>
    				</div>
    			</div>
    			<div class="col-lg-4">

    				...

    			</div>

    		</div>
    	</div>
    	<div class="container-fluid">

    		...

    	</div>
    </footer>
    <!-- footer end -->

## HTML structure of "Wrapper"

    <!-- banner -->
    <section class="mil-banner">
    	...
    </section>
    <!-- banner end -->

    <!-- partners -->
    <div class="mil-partners">
    	...
    </div>
    <!-- partners end -->

    <!-- about -->
    <section>
    	...
    </section>
    <!-- about end -->

    <!-- ideas -->
    <section>
    	...
    </section>
    <!-- ideas end -->

    <!-- services -->
    <section class="mil-soft-bg mil-relative">
    	...
    </section>
    <!-- services end -->

    <!-- advantages -->
    <section>
    	...
    </section>
    <!-- advantages end -->

    <!-- portfolio -->
    <section>
    	...
    </section>
    <!-- portfolio end -->

    <!-- how we work -->
    <section>
    	...
    </section>
    <!-- how we work end -->

    <!-- blog -->
    <section>
    	...
    </section>
    <!-- blog end -->

    <!-- core -->
    <section class="mil-dark-bg mil-relative mil-o-hidden">
    	...
    </section>
    <!-- core end -->

## Icons

This template use .svg icons and fontawesome icons - https://fontawesome.com/v5/search, use search and select icons.

## Source & Credits

### Scripts

- jQuery https://jquery.com/
- Isotope https://isotope.metafizzy.co/
- imagesLoaded http://imagesloaded.desandro.com/
- jQuery Validation Plugin http://jqueryvalidation.org/
- Magnific Popup http://dimsemenov.com/plugins/magnific-popup/
- Swiper https://swiperjs.com/
- Bootstrap https://getbootstrap.com/

### Fonts

- Caveat, Sora
- FontAwesome

### Images

Any Images or logos used in previews are not included in this item or final purchase.

- Pexels, Unsplash, Pixabay