The UF Intersections website uses a unique layout to display featured information on their home page.
To add this to your website, create a new page or edit the home page and add the following code in the Text tab and plug in the text, links and images you’d like to display:
Click the red Update or Publish button.
Click View Page.
Click “Customize” in the top black tool bar.
Click the last tab, “Additional CSS”
Add this CSS code:
body.home {
background: #00285e;
}
.blue-box {
background: url(https://sites.clas.ufl.edu/intersections/wp-content/uploads/sites/3/footerBG-1.png) no-repeat #0946a1;
padding: 10%;
background-position: bottom right;
background-size: 70%;
}
.home .row {
margin: 0;
}
.home .col-sm-6 {
padding: 0;
}
.blue-box h3,
.blue-box h4,
.blue-box p,
.blue-box a {
color: white !important;
}
.home .col-sm-6 img {
width: 100%;
object-fit: cover;
}
.home .container {
margin: 0;
padding: 0;
width: 100%;
}
.image-text {
position: relative;
display: contents;
}
.text-container:before {
position: absolute;
width: 15px;
height: 15px;
background: #75cf5a;
content: ”;
top: 120px;
}
.text-container {
position: absolute;
top: 0;
height: 100%;
min-height: 100%;
overflow: hidden;
padding: 140px 0 0 25px;
}
a .text-container {
transition: .3s;
}
a:hover .text-container {
margin-top: -10px;
transition: .3s;
}
a.image-text img {
transition: .3s;
}
a:hover .image-text img {
filter: saturate(.1);
transition: .3s;
}
.home #page .row .row .col-sm-6 a {
text-transform: uppercase !important;
color: white !important;
font-size: 1.5rem;
}
span.light-blue {
color: #99d0df;
}
.logos {
display: flex;
flex-wrap: wrap;
}
.home .logos img {
object-fit: contain !important;
max-width: 225px;
}
.contact-information {
font-family: “Gentona_Bold”;
color: #99d0df;
font-size: 1rem;
}
#page .blue-box p {
font-family: “Gentona_Book” !important;
}
#page p.light-blue {
font-family: “Gentona_Bold” !important;
font-size: 1rem;
}
.video {
margin-top: 4rem;
}
.video iframe {
max-width: 550px;
width: 100%;
}
.home h3 {
font-size: 2.15rem;
line-height: 125%;
}