Start Here
3 lessons

Module 7 - Lesson 5

Home Page

Lesson Overview

In this video, I’ll share a few tips which I think are worth consideration when planning the structure of the home page. Then I’ll take you through that process step by step and we’ll create the home page for our freelance web designer.

Video Chapters

00:00 Introduction

00:39 Planning the Home Page Structure

01:04 Reversing Columns for Mobile

02:46 Maya Homepage Wireframe

04:19 Building the First Section

05:10 Animated Background Image

09:45 Adding ZigZag next to the heading with jQuery

15:34 Optimizing first section for large displays

17:36 Non-breaking space

19:02 Optimizing first section for mobile

22:04 Building the "Problem" Section

26:45 Building the Services Section

33:11 Building Blurbs Grid

38:01 Blurbs Spacing and Alignment

42:58 Blurbs Mobile Adjustments

59:35 Building the "Success" Section

64:46 Reversing Columns for Mobile

68:02 Final Touches

style.css

/*
______________________
   
   Page Content
______________________

*/
  
/* Decorative elements */

.maya-zigzag-before svg {
	width: 150px;
	margin-left: -170px;
	margin-right: 20px;
}

.maya-zigzag-before svg path {
	fill: var(--gray9);
} 

.dark-zigzag svg path {
	fill: var(--gray6);
} 

@media (max-width:980px) {
	.maya-zigzag-before svg {
		width:100px;
		margin-left: -120px;
	}
}

@media (max-width:767px) {
	.maya-zigzag-before svg {
		width:70px;
		margin-left: -80px;
		margin-right: 10px;
	}
}

.et_pb_text_align_center .maya-zigzag-before svg {
	margin:0 auto 30px;
	display:block;
}


/* Blurbs in a grid */
.maya-blurb-grid:not(.maya-last) .et_pb_column {
	margin-bottom:3%;
}

@media (max-width:980px) {
	.maya-blurb-grid {
		display:flex;
	}
	
	.maya-blurb-grid .et_pb_column:not(:last-of-type) {
		margin-right:3%;
	}
	.maya-blurb-grid.maya-last .et_pb_column {
		margin-bottom:0;
	}
}


@media (min-width:601px) and (max-width:767px) {
	
	.maya-blurb-grid .et_pb_column:last-of-type {
		display:none;
	}
}

@media (max-width:600px) {
	.maya-blurb-grid {
		display:block;
	}
	.maya-blurb-grid .et_pb_blurb_content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	
	.maya-blurb-grid.et_pb_row .et_pb_main_blurb_image {
		margin: 0 20px 0 0;
		width: 50px;
	}
	.maya-blurb-grid.et_pb_row .et_pb_column {
		margin-bottom:3%;
		margin-right:0;
	}
	.maya-blurb-grid.maya-last .et_pb_column:last-of-type {
		margin-bottom:0;
	}
	.maya-blurb-grid.et_pb_row .et_pb_blurb .et_pb_blurb_container * {
		text-align: left;
	}
	
}
  
 /* Custom Column Structure */

@media (max-width:980px) { 
	.maya-reverse-columns {
		display:flex;
		flex-direction: column-reverse;
	}
}

scripts.js

jQuery(document).ready(function($){
	
	$('.maya-zigzag-before').prepend('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M38.708 28.602a2 2 0 002.817 0l15.772-15.651a2 2 0 012.817 0l15.772 15.651a2 2 0 002.817 0l15.772-15.651a2 2 0 012.817 0l15.772 15.651a2 2 0 002.817 0l18.674-18.532a2 2 0 00-.013-2.853l-3.011-2.93a2 2 0 00-2.804.014l-12.846 12.748a2 2 0 01-2.817 0L97.292 1.398a2 2 0 00-2.817 0L78.703 17.049a2 2 0 01-2.817 0L60.114 1.398a2 2 0 00-2.817 0L41.525 17.049a2 2 0 01-2.817 0L22.937 1.398a2 2 0 00-2.818 0L1.445 19.93a2 2 0 00.013 2.853l3.01 2.93a2 2 0 002.805-.014l12.846-12.748a2 2 0 012.817 0l15.772 15.651z"/></svg>');
	
});