#05 Building a Home Page in Divi

by Ania

March 16, 2021

This is the CSS code we used for the home page:

/* Reverse columns on mobile */
@media (max-width:980px) {
	
	.dl-reverse-column {
		display:flex;
		flex-direction:column-reverse;
	}
	.dl-reverse-column .et_pb_column:first-of-type {
		margin-bottom:0;
	}
	
}

/* Homepage */
.dl-line-left:before {
	content:'';
	display: inline-block;
	width:50px;
	height:1px;
	background: #19252b;
	margin-bottom: 5px;
	margin-right: 10px;
}
.dl-line-right:after {
	content:'';
	display: inline-block;
	width:50px;
	height:1px;
	background: #19252b;
	margin-bottom: 5px;
	margin-left: 10px;
}

.dl-links a {
	position: relative;
	z-index: 2;
}
.dl-links a:before {
	position: absolute;
	bottom: 0px;
	left: -2px;
	right: -2px;
	content: '';
	display: block;
	background: #b1e5e0;
	height: 8px;
	border-radius: 2px;
	z-index: -1;
 	transition:all .3s ease-in-out;
}
.dl-links a:hover:before {
	height:18px;
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *