Global Styling:

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Swatch colors
Blacks & Whites
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.p-lrg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.p-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

link
Text Link
Buttons
.btn
.btn .btn2

Pre-Styled Classes

Use these classes for styling commonly used elements.

Window Size reference
lg - md - sm - xs

Important:

  • Start by styling the body(all pages) without adding a class.
  • Use .ctr to center align anything!
  • Give columns class '.col' to remove 10px left/right padding on SM & XS.
  • Make sure to give form states classes of .success and .error
  • Push margins from bottom of elements, not the top unless needed. Use .bot classes.
  • DO NOT style any images using the settings tab. Give them a class to control styles.
  • when creating new classes...SIMPLIFY. h=heading, p=paragraph, col=column, sect=section, msg=input

    ex.) .h-large, .p-thin, .col-about, .sect-blog, .msg-left, etc...

Class Settings ( do not edit )

Main Classes
.bot0
.bot10
.bot10
.bot25
.bot50
.bot75
.bot100
.float-l
.float-r
Text Classes
.ctr
.ctr-sm
.ctr-xs
.align-l
.align-r
.caps
.fff
.dark
.fa
.ctr
Display Classes
.inline
.block-sm
.block-xs
.hide-sm
.hide-xs
Responsive Margins
.bot25-sm
.bot25-xs
.bot50-sm
.bot50-xs
Main Classes
  • .sect = full width section (contains padding)
  • .row = 100% width section
  • .btn = button
  • .btn-sp = space between two buttons
  • .col = column (apply to every column!)
  • .p-sm = small paragraph
  • .p-lrg = large paragraph
  • .img = 100% width image
Text Classes
  • .ctr = text-align: center
  • .ctr-sm = text-align: center - SM
  • .ctr-xs = text-align: center - XS
  • .align-l = text-align: left
  • .align-r = text-align: right
  • .caps = uppercase
  • .fff = white text
  • .dark = dark text
  • .fa = fontawesome
Display Classes
  • .inline = display: inline
  • .block-sm = display: block - SM
  • .block-xs = display: block - XS
  • .hide = display: none
  • .hide-sm = display: none - SM
  • .hide-xs = display: none - XS
  • .rel = position: relative; z-index: 1
Margins & Spacing
  • .bot10 = margin-bottom: 10px
  • .bot25 = margin-bottom: 25px
  • .bot25-sm = margin-bottom: 25px - SM
  • .bot25-xs = margin-bottom: 25px - XS
  • .bot50 = margin-bottom: 50px
  • .bot50 = margin-bottom: 50px - SM
  • .bot50xs = margin-bottom: 50px - XS
  • .bot75 = margin-bottom: 75px
  • .bot75sm = margin-bottom: 75px - SM
  • .bot75xs = margin-bottom: 75px - XS
  • .bot100 = margin-bottom: 100px
  • .bot100sm = margin-bottom: 100px - SM
  • .bot100xs = margin-bottom: 100px - XS
  • .bot0 = margin-bottom: 0px;
  • .bot0sm = margin-bottom: 0px - SM
  • .bot0xs = margin-bottom: 0px - XS
  • .float-l = float left
  • .float-r = float right
Ul/Li Classes
  • .flex-list = ul with flex & wrap
Form Classes
  • .msg = form input
  • .msg.msg-area = form textarea
  • .success
  • .error
Column Classes
  • .col = display:none
  • .col-left = hidden on sm and xs
  • .col-right = hidden on xs
  • .flex-ctr = vertically center columns
  • .flip-md = flip on md
  • .flip-xs = flip on sm
Container Classes
  • .container = use if applying universal styles to containers
  • .contain-sm = small container
More classes
  • .overlay = absolute to corners div
  • .tri = corner div triangle
  • .img-sp = opacity:0; width:100%; (keeps ratios)
  • .dim = reduce opacity
Manual css Styles (in header code)
  • .pe-none = no pointer events on load
  • .hide-load = show in webflow, hide on load
Use for common elements!
  • .navlink = nav link
  • .ftlink = footer link
  • .soci = social icon
  • .inline = display: inline

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

The Form Title

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ratios

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim mas.
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim mas.
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Sliders

Value Props

Call to Action Section
Goes Right Here

Learn More

Blogs

Previous 1 2 3 4
...
79 Next

Pray with us on Sunday,
October 2, 2022

Millions around the world have already taken the step to make Jerusalem a part of their congregational and personal prayers on the first Sunday of October and also throughout the year.  

Take this simple but powerful action today and pledge to join us in prayer this October!

Pledge to pray

©2022-23 Day of Prayer for the Peace of Jerusalem. All rights reserved.

Powered by Enrich & Williams Media

Pray with us on Sunday, October 1, 2023

21
days
08
Hours
52
minutes
02
seconds