Split navigation
module SplitNavigation exposing (..)

import Element exposing (..)
import Element.Border as Border
import Element.Font as Font
import Html exposing (Html)


main : Html msg
main =
    layout [ width <| minimum 600 fill, height fill, padding 20 ] <|
        row
            [ width fill
            , centerX
            , centerY
            , padding 10
            , spacing 30
            , Border.rounded 6
            , Border.width 2
            , Border.color color.blue
            ]
            [ el [ alignLeft ] <| text "Choose"
            , el [ alignLeft ] <| text "Your"
            , el [ alignLeft ] <| text "Future"
            , el [ alignRight ] <| text "Choose"
            , el [ alignRight ] <| text "Something"
            ]


color =
    { blue = rgb255 0x72 0x9F 0xCF
    , darkCharcoal = rgb255 0x2E 0x34 0x36
    , lightBlue = rgb255 0xC5 0xE8 0xF7
    , lightGrey = rgb255 0xE0 0xE0 0xE0
    , white = rgb255 0xFF 0xFF 0xFF
    }
Would you like to forget CSS and have fun building UIs with elm-ui instead?
📢 My in-depth guide
elm-ui: The CSS Escape Plan
is now available in early access.
🎁 Get a walkthrough of all elm-ui features and an expanded set of examples.
🛠 I'm still adding content but you can start learning right now 👇
elm-ui: The CSS Escape Plan