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 "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 -->