Dethfest

Website for Dethfest concert

This project is a responsive mobile-first website built as my HTML/CSS + JS capstone project at Microverse. It showcases a fictitious Metal concert called Dethfest.

It is built with HTML5, Sass, JS, and Jekyll.

Project Highlights: view video presentation

- Modularises HTML into partials using Jekyll, and uses a base HTML layout to build the final page

dethfest/_layouts/default.html

Lines 1 to 32 in a0e4cce

    
           <!DOCTYPE html> 
        
             <html lang="en"> 
        
             {%- include head.html -%} 
        
               <body> 
        
                 {%- include header.html -%} 
        
                 <main> 
        
                   {% if page.branch == "home" %} 
        
                     {%- include home.html -%} 
        
                   {% else if page.branch == "about" %} 
        
                     {%- include about.html -%} 
        
                   {% endif %} 
        
                   {%- include partners.html -%} 
        
                 </main> 
        
                 {%- include footer.html -%} 
        
                 <script src="js/library.js"></script> 
        
                 {% if page.branch == "home" %} 
        
                   <script src="js/dynamic-population.js"></script> 
        
                 {% endif %} 
        
                 <script src="js/menu.js"></script> 
        
               </body> 
        
           </html>

- Reusable SCSS via libraries I custom-built over multiple projects

Custom functionalities

dethfest/css/imports/_custom.scss

Lines 5 to 31 in a0e4cce

    
           //Reusable class to place a coloured filter over a background image 
        
           //Background colour and opacity must be specified on element's after 
        
           //Element should be relative 
        
           //Z-index from bottom to top: element -> element::after -> element's children to display 
        
           .bg-filter { 
        
             &::after { 
        
               content: ''; 
        
               width: 100%; 
        
               height: 100%; 
        
               position: absolute; 
        
               top: 0; 
        
               left: 0; 
        
             } 
        
           } 
        
           //Reusable class to set bottom border 
        
           //Bottom border colour and width must be specified on element's after 
        
           .border-bottom { 
        
             &::after { 
        
               content: ''; 
        
               height: 1px; 
        
               border-bottom-width: 1px; 
        
               border-bottom-style: solid; 
        
               display: block; 
        
               padding-top: 15px; 
        
             } 
        
           }

dethfest/css/imports/_custom.scss

Lines 52 to 67 in a0e4cce

    
           //Apply to desktop-view elements that shouldn't be displayed in mobile view 
        
           //To show elements in desktop view, use desktop display unset 
        
           .desktop { 
        
             display: none; 
        
           } 
        
           @media (min-width: 768px) { 
        
             .desktop { 
        
               display: unset; 
        
             } 
        
             //Apply to mobile-view elements that shouldn't be displayed in desktop view 
        
             .mobile { 
        
               display: none; 
        
             } 
        
           }

Custom responsive Flex CSS library

dethfest/css/imports/_flex.scss

Lines 7 to 57 in a0e4cce

    
           .flex-row { 
        
             display: flex; 
        
             flex-direction: row; 
        
           } 
        
           .flex-col { 
        
             display: flex; 
        
             flex-direction: column; 
        
           } 
        
           .justify-center { 
        
             justify-content: center; 
        
           } 
        
           .justify-between { 
        
             justify-content: space-between; 
        
           } 
        
           .justify-around { 
        
             justify-content: space-around; 
        
           } 
        
           .align-center { 
        
             align-items: center; 
        
           } 
        
           .wrap { 
        
             flex-wrap: wrap; 
        
           } 
        
           .grow { 
        
             flex-grow: 1; 
        
           } 
        
           @media (min-width: 768px) { 
        
             .d-flex-row { 
        
               flex-direction: row; 
        
             } 
        
             .d-flex-col { 
        
               flex-direction: column; 
        
             } 
        
             .d-wrap { 
        
               flex-wrap: wrap; 
        
             } 
        
             .d-justify-unset { 
        
               justify-content: unset; 
        
             } 
        
           }

Experimented with Sass mixins to create reusable and dynamic responsive styles

dethfest/css/style.scss

Lines 14 to 73 in a0e4cce

    
           $p-x-default: 15px; 
        
           $p-y-menu: 15px; 
        
           $m-l-menu: 1vw; 
        
           $p-r-headline: 0; 
        
           $size-subheading: 30px; 
        
           $menu-height: 60px; 
        
           //Horizontal menu padding 
        
           @mixin p-y-menu($p-y-menu) { 
        
             .p-y-menu { 
        
               padding-top: $p-y-menu; 
        
               padding-bottom: $p-y-menu; 
        
             } 
        
           } 
        
           @include p-y-menu($p-y-menu: 15px); 
        
           //Margin to the left of each menu item 
        
           @mixin m-l-menu($m-l-menu) { 
        
             .m-l-menu { 
        
               margin-left: $m-l-menu; 
        
             } 
        
           } 
        
           //Default horizontal padding used throughout page 
        
           @mixin p-x-default($p-x-default) { 
        
             .p-x-default { 
        
               padding-left: $p-x-default; 
        
               padding-right: $p-x-default; 
        
             } 
        
           } 
        
           @include p-x-default($p-x-default: 15px); 
        
           //Default vertical padding used throughout page 
        
           @mixin p-y-default($p-y-default) { 
        
             .p-y-default { 
        
               padding-top: $p-y-default; 
        
               padding-bottom: $p-y-default; 
        
             } 
        
           } 
        
           @include p-y-default($p-y-default: 30px); 
        
           //Font size for text above h1 
        
           @mixin size-subheading($size-subheading) { 
        
             .size-subheading { 
        
               font-size: $size-subheading; 
        
             } 
        
           } 
        
           @include size-subheading($size-subheading: 30px); 
        
           //Padding to the right of headline 
        
           //(overrides padding-right in p-x-default) 
        
           @mixin p-r-headline($p-r-headline) { 
        
             .p-r-headline { 
        
               padding-right: $p-r-headline; 
        
             } 
        
           }

dethfest/css/style.scss

Lines 293 to 319 in a0e4cce

    
           @media (min-width: 768px) { 
        
             @include p-x-default($p-x-default: 10vw); 
        
             @include p-y-default($p-y-default: 45px); 
        
             @include m-l-menu($m-l-menu: 1vw); 
        
             @include size-subheading($size-subheading: 40px); 
        
             @include p-r-headline($p-r-headline: 40vw); 
        
             /* 
        
             ======================================== 
        
             Desktop header 
        
             ======================================== 
        
             */ 
        
             h1 { 
        
               font-size: 60px; 
        
             } 
        
           } 
        
           @media (min-width: 768px) and (max-width: 910px) { 
        
             @include p-r-headline($p-r-headline: 30vw); 
        
           } 
        
           @media (min-width: 850px) { 
        
             //Increase margin between menu links even more when going up desktop sizes 
        
             @include m-l-menu($m-l-menu: 2vw); 
        
           }

- Repeating elements are dynamically populated using a structure I custom-built

dethfest/js/dynamic-population.js

Lines 67 to 82 in 5ddd289

    
           return { 
        
             'program-card': 
        
               createElement('div', 'program-card justify-between d-justify-unset flex-row d-flex-col d-wrap d-w-24 p-20 m-b-15'), 
        
             'program-image': 
        
               createElement('div', 'program-image flex-col d-flex-row justify-center w-30 d-w-100'), 
        
             image: 
        
               createElement('img', 'h-100 d-w-100 fit-cover', 
        
                 { 
        
                   src: `./images/program/${object.image}.webp`, 
        
                   alt: `Photo of ${object.title}`, 
        
                 }), 
        
             'program-title': 
        
               createElement('span', 'program-title flex-col d-flex-row justify-center center-text w-25 d-w-100 color-orange font-big weight-bold vertical-center d-m-t-15', {}, `${object.title}`), 
        
             'program-description': 
        
               createElement('p', 'program-description flex-col d-flex-row justify-center w-40 d-w-100 font-small d-m-t-15 d-center-text', {}, `${object.description}`), 
        
           };

dethfest/js/dynamic-population.js

Lines 86 to 99 in 5ddd289

    
           return { 
        
             band: 
        
               createElement('div', `band flex-col${index === 5 ? '' : ' m-b-60'}`), 
        
             'band-image': 
        
               createElement('img', 'band-image flex-row m-b-10', 
        
                 { 
        
                   src: `./images/bands/${object.image}.webp`, 
        
                   alt: `Logo of ${object.name}`, 
        
                 }), 
        
             'band-country': 
        
               createElement('span', 'band-country border-bottom flex-col italic color-orange m-b-15', {}, `${object.country}`), 
        
             'band-description': 
        
               createElement('p', 'band-description flex-row font-smallest', {}, `${object.description}`), 
        
           };

- Created my own library functions

dethfest/js/library.js

Lines 3 to 19 in 5ddd289

    
           // Add event listener of given type of an array of elements and set callback function 
        
           function addEventListeners(elementsArray, eventType, eventListenerFunction) { 
        
             elementsArray.forEach((element) => { 
        
               element.addEventListener(eventType, eventListenerFunction); 
        
             }); 
        
           } 
        
           // Create HTML element of given type and add classes, attributes and textContent (where applicable) 
        
           function createElement(elementType, classNames = '', attributes = {}, innerHTML = '') { 
        
             const elementObject = document.createElement(elementType); 
        
             if (classNames) elementObject.classList.add(...(classNames.split(' '))); 
        
             Object.keys(attributes).forEach((attribute) => { 
        
               elementObject.setAttribute(attribute, attributes[attribute]); 
        
             }); 
        
             elementObject.innerHTML = innerHTML; 
        
             return elementObject; 
        
           }

Built With

Major languages: HTML, CSS, JS
Others: SCSS, YAML, Liquid
Frameworks: Jekyll
Technologies used: Lighthouse, Webhint, Stylelint, ESLint

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Jekyll - view the Jekyll docs for the installation guide

Usage

The HTML used throughout the website is broken down into partials stored in the _includes folder.

The base HTML layout for pages on the website is stored in the _layouts folder.

For more information, view the Jekyll docs about the directory structure.

Deployment

To build the website, run the following command in the root of the repo:

bundle exec jekyll serve

This creates a _site folder where the generated site will be placed.

To view the website, open the link of the server address displayed in the terminal

Alternatively, to view the website automatically after building, run the the following command:

bundle exec jekyll serve --open-url

Note

_site is currently not included in .gitignore to allow linters in GitHub Actions workflows to run on the Jekyll-generated website instead of the partials.

Author

👤 Akasha Rojee

GitHub: @AkashaRojee
Twitter: @AkashaRojee
LinkedIn: Akasha Rojee

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgements

Cindy Shin

📝 License

This project is MIT licensed.

Name		Name	Last commit message	Last commit date
Latest commit History 74 Commits
.github/workflows		.github/workflows
_includes		_includes
_layouts		_layouts
_site		_site
css		css
images		images
js		js
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.hintrc		.hintrc
.stylelintrc.json		.stylelintrc.json
Gemfile		Gemfile
Gemfile.lock		Gemfile.lock
MIT.md		MIT.md
README.md		README.md
about.html		about.html
index.html		index.html

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

	{%- include head.html -%}

	<body>

	{%- include header.html -%}

	<main>

	{% if page.branch == "home" %}
	{%- include home.html -%}
	{% else if page.branch == "about" %}
	{%- include about.html -%}
	{% endif %}

	{%- include partners.html -%}

	</main>

	{%- include footer.html -%}

	<script src="js/library.js"></script>

	{% if page.branch == "home" %}
	<script src="js/dynamic-population.js"></script>
	{% endif %}

	<script src="js/menu.js"></script>
	</body>
	</html>

	//Reusable class to place a coloured filter over a background image
	//Background colour and opacity must be specified on element's after
	//Element should be relative
	//Z-index from bottom to top: element -> element::after -> element's children to display
	.bg-filter {
	&::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	}
	}

	//Reusable class to set bottom border
	//Bottom border colour and width must be specified on element's after
	.border-bottom {
	&::after {
	content: '';
	height: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	display: block;
	padding-top: 15px;
	}
	}

	//Apply to desktop-view elements that shouldn't be displayed in mobile view
	//To show elements in desktop view, use desktop display unset
	.desktop {
	display: none;
	}

	@media (min-width: 768px) {
	.desktop {
	display: unset;
	}

	//Apply to mobile-view elements that shouldn't be displayed in desktop view
	.mobile {
	display: none;
	}
	}

	.flex-row {
	display: flex;
	flex-direction: row;
	}

	.flex-col {
	display: flex;
	flex-direction: column;
	}

	.justify-center {
	justify-content: center;
	}

	.justify-between {
	justify-content: space-between;
	}

	.justify-around {
	justify-content: space-around;
	}

	.align-center {
	align-items: center;
	}

	.wrap {
	flex-wrap: wrap;
	}

	.grow {
	flex-grow: 1;
	}

	@media (min-width: 768px) {
	.d-flex-row {
	flex-direction: row;
	}

	.d-flex-col {
	flex-direction: column;
	}

	.d-wrap {
	flex-wrap: wrap;
	}

	.d-justify-unset {
	justify-content: unset;
	}
	}

	$p-x-default: 15px;
	$p-y-menu: 15px;
	$m-l-menu: 1vw;
	$p-r-headline: 0;
	$size-subheading: 30px;
	$menu-height: 60px;

	//Horizontal menu padding
	@mixin p-y-menu($p-y-menu) {
	.p-y-menu {
	padding-top: $p-y-menu;
	padding-bottom: $p-y-menu;
	}
	}

	@include p-y-menu($p-y-menu: 15px);

	//Margin to the left of each menu item
	@mixin m-l-menu($m-l-menu) {
	.m-l-menu {
	margin-left: $m-l-menu;
	}
	}

	//Default horizontal padding used throughout page
	@mixin p-x-default($p-x-default) {
	.p-x-default {
	padding-left: $p-x-default;
	padding-right: $p-x-default;
	}
	}

	@include p-x-default($p-x-default: 15px);

	//Default vertical padding used throughout page
	@mixin p-y-default($p-y-default) {
	.p-y-default {
	padding-top: $p-y-default;
	padding-bottom: $p-y-default;
	}
	}

	@include p-y-default($p-y-default: 30px);

	//Font size for text above h1
	@mixin size-subheading($size-subheading) {
	.size-subheading {
	font-size: $size-subheading;
	}
	}

	@include size-subheading($size-subheading: 30px);

	//Padding to the right of headline
	//(overrides padding-right in p-x-default)
	@mixin p-r-headline($p-r-headline) {
	.p-r-headline {
	padding-right: $p-r-headline;
	}
	}

	@media (min-width: 768px) {
	@include p-x-default($p-x-default: 10vw);
	@include p-y-default($p-y-default: 45px);
	@include m-l-menu($m-l-menu: 1vw);
	@include size-subheading($size-subheading: 40px);
	@include p-r-headline($p-r-headline: 40vw);

	/*
	========================================
	Desktop header
	========================================
	*/

	h1 {
	font-size: 60px;
	}
	}

	@media (min-width: 768px) and (max-width: 910px) {
	@include p-r-headline($p-r-headline: 30vw);
	}

	@media (min-width: 850px) {

	//Increase margin between menu links even more when going up desktop sizes
	@include m-l-menu($m-l-menu: 2vw);
	}

	return {
	'program-card':
	createElement('div', 'program-card justify-between d-justify-unset flex-row d-flex-col d-wrap d-w-24 p-20 m-b-15'),
	'program-image':
	createElement('div', 'program-image flex-col d-flex-row justify-center w-30 d-w-100'),
	image:
	createElement('img', 'h-100 d-w-100 fit-cover',
	{
	src: `./images/program/${object.image}.webp`,
	alt: `Photo of ${object.title}`,
	}),
	'program-title':
	createElement('span', 'program-title flex-col d-flex-row justify-center center-text w-25 d-w-100 color-orange font-big weight-bold vertical-center d-m-t-15', {}, `${object.title}`),
	'program-description':
	createElement('p', 'program-description flex-col d-flex-row justify-center w-40 d-w-100 font-small d-m-t-15 d-center-text', {}, `${object.description}`),
	};

	return {
	band:
	createElement('div', `band flex-col${index === 5 ? '' : ' m-b-60'}`),
	'band-image':
	createElement('img', 'band-image flex-row m-b-10',
	{
	src: `./images/bands/${object.image}.webp`,
	alt: `Logo of ${object.name}`,
	}),
	'band-country':
	createElement('span', 'band-country border-bottom flex-col italic color-orange m-b-15', {}, `${object.country}`),
	'band-description':
	createElement('p', 'band-description flex-row font-smallest', {}, `${object.description}`),
	};

	// Add event listener of given type of an array of elements and set callback function
	function addEventListeners(elementsArray, eventType, eventListenerFunction) {
	elementsArray.forEach((element) => {
	element.addEventListener(eventType, eventListenerFunction);
	});
	}

	// Create HTML element of given type and add classes, attributes and textContent (where applicable)
	function createElement(elementType, classNames = '', attributes = {}, innerHTML = '') {
	const elementObject = document.createElement(elementType);
	if (classNames) elementObject.classList.add(...(classNames.split(' ')));
	Object.keys(attributes).forEach((attribute) => {
	elementObject.setAttribute(attribute, attributes[attribute]);
	});
	elementObject.innerHTML = innerHTML;
	return elementObject;
	}

AkashaRojee/dethfest

Folders and files

Latest commit

History

Repository files navigation