Details

In this screencast I’ll be rebuilding Uber’s homepage from scratch in WordPress with the Flatsome theme. I’ll be using the UX Builder an a little bit of CSS.

Full preview YouTube channel

UX Shortcode

[section label="CSS* Home: Hero" bg="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/uber-home-hero.jpg" bg_pos="51% 21%" padding="90px" class="squeeze"]

[row col_bg="rgb(255,255,255)" padding="50px 50px 50px 50px" padding__sm="30px 30px 30px 30px" padding__md="40px 40px 40px 40px"]

[col span="6" span__sm="12"]

Get in the driver's seat and get paid

Drive on the largest network of active riders.

[button text="Sign up to drive" color="secondary" icon="icon-angle-right"] [button text="Learn more about driving" color="secondary" style="link" icon="icon-angle-right"] [/col] [/row] [/section] [section label="Home: Motion" bg="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/uber-home-motion-banner.jpg" bg_color="rgb(246, 246, 246)" height="500px" class="squeeze"] [row] [col span="5" span__sm="9" span__md="8" margin="-100px 0px 0px 0px"]

Setting 700+ cities in motion

[button text="View all cities" color="secondary" style="link" icon="icon-angle-right"] [/col] [/row] [/section] [gap height="50px"] [section label="Home: Video" bg_color="rgb(0,0,0)" bg_overlay="rgba(0, 0, 0, 0.2)" dark="true" padding="0px" height="800px" height__sm="350px" height__md="600px" video_mp4="https://www.uber-assets.com/video/upload/vc_auto,q_auto,w_1920,h_1080/v1557268063/videos/webloops/1920x1080/H264/Ellis_ANTHEM_WebLoop_1920x1080_h264.mp4" class="squeeze"] [gap height="200px" visibility="show-for-small"] [gap height="400px" visibility="hide-for-small"] [row] [col span__sm="12"]

You move the world

[button text="Play the video" color="white" style="link" icon="icon-youtube" icon_pos="left"] [gap height="20px"] [button text="See the stories" color="white" style="link" icon="icon-angle-right"] [/col] [/row] [/section] [section label="Home: Bottom Info"] [gap height="140px"] [row label="Commitment" h_align="center"] [col span="6" span__sm="12" span__md="10"]

Our commitment to your safety

With every safety feature we add and every standard in our Community Guidelines we uphold, we’re committed to protecting you on the road ahead. Learn more about our Community Guidelines here.

[button text="See all safety features" color="secondary" style="link" icon="icon-angle-right"] [/col] [col span="6" span__sm="12" span__md="10"] [ux_banner bg="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/Safety_ilo.svg" bg_color="rgb(255,255,255)"] [/ux_banner] [/col] [/row] [gap height="60px"] [row label="3 Boxes"] [col span="4" span__sm="12"] [featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/person-multiple-outlined.svg" img_width="30" margin="0 0px 0px 0px"]
About us

Find out how we started, what drives us, and how we’re igniting opportunity.

[/featured_box] [button text="Learn more" color="secondary" style="link" icon="icon-angle-right"] [/col] [col span="4" span__sm="12"] [featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/document-outlined.svg" img_width="30" margin="0 0px 0px 0px"]
News room

See announcements about our latest releases, initiatives, and partnerships.

[/featured_box] [button text="Learn more" color="secondary" style="link" icon="icon-angle-right"] [/col] [col span="4" span__sm="12"] [featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/home-outlined.svg" img_width="30" margin="0 0px 0px 0px"]
Global citizenship

Read about our commitment to making a positive impact in the cities we serve.

[/featured_box] [button text="Learn more" color="secondary" style="link" icon="icon-angle-right"] [/col] [/row] [gap height="60px"] [row label="CSS* Arrow Buttons" style="large" class="home-arrow-buttons"] [col span="6" span__sm="12"] [featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/right-arrow-forward.svg" pos="right" link="#"]

Sign up to drive

[/featured_box] [/col] [col span="6" span__sm="12"] [featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/right-arrow-forward.svg" pos="right" link="#"]

Sign up to drive

[/featured_box] [/col] [/row] [/section] [section label="CSS* Footer" bg_color="#000000" dark="true" padding="100px" class="custom-footer"] [row] [col span="6" span__sm="12"]

[featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/uber-question.svg" img_width="20" pos="left" margin="20px 0px 20px 0px"]

Help Center

[/featured_box] [featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/uber-world.svg" img_width="20" pos="left" margin="0px 0px 20px 0px"]

English

[/featured_box] [featured_box img="https://uber.sebdelaweb.com/wp-content/uploads/2019/09/uber-location.svg" img_width="20" pos="left" margin="0px 0px 20px 0px"]

Amsterdam

[/featured_box]

 

[/col] [col span="6" span__sm="12"] [row_inner] [col_inner span="6" span__sm="12"] [ux_sidebar id="sidebar-footer-1"] [/col_inner] [col_inner span="6" span__sm="12"] [ux_sidebar id="sidebar-footer-2"] [/col_inner] [/row_inner] [/col] [/row] [row] [col span__sm="12"] [divider width="100%" height="1px"] [/col] [/row] [row v_align="middle"] [col span="4" span__sm="12"]

© [ux_current_year] Uber Technologies Inc.

[/col] [col span="4" span__sm="12" align="center"] [button text="Privacy" color="white" style="link"] [button text="Accessibility" color="white" style="link"] [button text="Terms" color="white" style="link"] [/col] [col span="4" span__sm="12"] [follow style="small" align="right" facebook="#" instagram="#" twitter="#" linkedin="#" youtube="#"] [/col] [/row] [/section]

CSS

/*************** REBUILD: UBER / CSS ***************/

.section.squeeze {
  max-width: 1280px;
  margin: auto;
}

.home-arrow-buttons .icon-box-right .icon-box-img+.icon-box-text {
    text-align: left;
}

.home-arrow-buttons h2:hover {
  color: #276ef1;
  transition: color .3s, opacity .3s, transform .3s;
}

/*************** FOOTER ***************/

.custom-footer ul.menu>li+li {
    border-top: 0px;
}

.custom-footer .col.widget {
  padding:0px;
}

.absolute-footer {
    display: none !important;
    visibility: hidden !important;
}