Finishing Touches

In the final lesson inside the Full Website Creation module, I will be editing a few additional elements, fixing a few issues – just putting finishing touches on this website to make sure the final result meets my client’s expectations.

Video Chapters

style.css

/*
______________________
   
   Final Touches
______________________

*/

/* Remove Columns Margin */
.no-column-margin.et_pb_row .et_pb_column {
	margin-bottom:0!important;
}


/* Add Line Breat on Mobile */
.mobile-break {
	display: none;
}

@media (max-width: 980px) {
	.mobile-break {
		display: block;
	}
}


/* Back to top Button */
.et_pb_scroll_top.et-pb-icon {
    right: 10px;
    border-radius: 50%;
    padding: 10px;
    background: var(--gray3);
}

.et_pb_scroll_top.et-pb-icon:before {
    content: '\21';
}


/* Mini Blog Hover Effect */
.maya-mini-blog .entry-title:after {
	content:'';
    display:block;
    position:absolute;
    bottom:-10px;
	left:-120px;
	right:auto;
	height:15px;
	width:200px;
	background:url(img/zigzag.svg) repeat-x;
	animation: zigzagPlay 2s infinite linear;
	opacity:0;
	transition:all .3s ease-in-out;	
}

.maya-mini-blog article:hover .entry-title:after {
	opacity: 1;
    left: -100px;
}
@media (max-width:980px) {
	.maya-mini-blog .entry-title:after {
		width:120px;
		height:10px;
		bottom:0;
	}
}