På alle sider skal nedestående CSS kode indsættes i Custom CSS menu.

/*Generel CSS*/
#main {
padding:0px 0px 0px 0px;
background-color:#F1F5FB;
}

#page > div.masthead.inline-header.center.full-height.shadow-decoration.shadow-mobile-header-decoration.small-mobile-menu-icon.dt-parent-menu-clickable.show-sub-menu-on-hover.show-device-logo.show-mobile-logo.sticky-off.fixed-masthead
{background:white; }

#page > div.masthead.inline-header.center.full-height.shadow-decoration.shadow-mobile-header-decoration.small-mobile-menu-icon.dt-parent-menu-clickable.show-sub-menu-on-hover.show-device-logo.show-mobile-logo.fixed-masthead.sticky-on
{
background:white !important;
}
.phantom-sticky .sticky-on.masthead:not(.masthead-mobile) {
background:white !important;
}

h1, p {
color:#003755;
}

Når du senere vil bruge designmanualet, og du bliver bedt om at indsætte et ID eller Class Name, skal du også sørge for, at dette ID eller Class Name svarer til dem, der står i CSS koden. Den kan ændres, dog skal de svare til hinanden for at virke.

OBS

I design manualen kan nogle elementer være misfarvet. Dette skyldes overlappende kode fra diverse elementer, som normalt ikke er på samme sider. Koden vil virke fejlfrit på andre sider.

#F1F5FB

Baggrunds farve

#003755

Aktiv fane i header

Baggrundsfarve i tabs

#F7931E

Aktiv fane i header

Baggrundsfarve i tabs

#98C7D9

Tabs farve, når på mørn baggrund

#003755

Ekstra baggrundsfarve – mørk

Roboto – Overskrift 1

Roboto – Overskrift 2

Roboto – Overskrift 3

Roboto – Overskrift 4

Roboto – Overskrift 5
Roboto – Overskrift 6

Roboto – Afsnit

For at lave en banner billede, der fylder hele siden og har en infoboks, skal du:

  1. Indsæt et row
    1. Row streatch: stretch row and content
    2. Column gap: 0px
    3. Content position: bottom
    4. Giv den et id.
  2. Indsæt et row i den første row og del den op to kolonner. Kolonnen på højere side skal forblive tom.
  3. Giv kolonnen til venstre et id
  4. Indsæt en tekst boks i kolonnen til venstre.
    1. Giv den overskrift 3 og skriv din tekst
  5. Indsæt en teksboks til
    1. Skriv din tekst.

Når du nu har lagt disse elementer ind, skal du gå ind i custom CSS panelet og indsætte dette kode for billedet:

#banner-row-1{
background-image: url(https://www.fjordensdag.dk/wp-content/uploads/2021/06/newpic28.png);
width:100%;
height:70vh;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 30%;
}

# skal efterfølges af det id du har givet dit row element.

background-image: url(x); – linket til billedet kan du finde i billede bibliotekket på domænet ved at trykke på det ønskede billede, more detail, kopiere url’en og sætte det ind i x’s plads.

 

Efterfølgende indsæt dette kode:

#toprowinnercoltext {
margin-bottom:40px;
background-color:rgba(0,55,85,0.9);
border-radius:0px 10px 10px 0px;
margin-left: -20px;
}
#toprowinnercoltext > div > div > div.wpb_text_column.wpb_content_element.vc_custom_1620373948958 > div > h3 {
color:white;
}
#toprowinnercoltext > div > div > div:nth-child(2) > div > p {
color:white;
}

# skal efterfølges af det id du har givet dit kolonne element.

Koden giver teksten hvide tekst, mørkeblå baggrund og rundede hjørner.

Fjordens dag

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et

Fjordens dag

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et

Fjordens dag

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et

Fjordens dag

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et

For at lave afdelingerne på fosiden skal du indsætte et row og dele den op i den mængde kolonner, du kræver. Her er der 4 kolonner.

I hver kolonne indsæt:

  1. Single image
    1. General
      1. Vælg billede
      2. Image size: medium
      3. Image alignment: center
      4. Image style: default
      5. Giv den et id
    2. Design options
      1. Margin: 0px
      2. Border: none
      3. Padding-top: 0px
      4. Padding-right: 20px
      5. Padding-bottom: 20px
      6. Padding-left: 20px
      7. Background: #083954
  2. Row i to kolonner delt op i 4/6 + 1/12
      1. Design options
        1. Margin: 0px
        2. Padding: 0px
        3. Background: #98c7d9
    1. 4/6 – Tekst box
      1. General
        1. Overskrift 4: navn på afdeling
    2. 1/12 – icon
      1. General
        1. Icon librart: font awesome 5
        2. Icon: chevron >
        3. Icon color: black
        4. Background shape: none
        5. Size: small
        6. Icon alignment: left
      2.  Design options
        1. Margin: 0px
        2. Padding: 0px
  3. Indsæt teksboks
    1. General
      1. Kort tekst beskrivende afdelinger
      2. Giv den et id
    2. Design options
      1. Padding: 0px
      2. Background: #98c7d9

Gå derefter i Custom CSS menuen og indsæt dette kode:

/*first afdeling*/
#afd_front_FD_top
{
position:relative;
max-width: 100%;
overflow:visible;
border-radius:20px 20px 0px 0px;
}
#afd_front_FD_top img {
margin-top: -20px;
height: 100%;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_front_FD_bot {
border-radius:0px 0px 20px 20px;
}/*2. afdeling*/
#afd_front_GB_top
{
position:relative;
max-width: 150%;
overflow:visible;
border-radius:20px 20px 0px 0px;
}
#afd_front_GB_top img {
margin-top: -20px;
height: 100%;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_front_GB_bot {
border-radius:0px 0px 20px 20px;
}
/*3. afdeling*/
#afd_front_NV_top
{
position:relative;
max-width: 100%;
overflow:visible;
border-radius:20px 20px 0px 0px;
}#afd_front_NV_top img {
margin-top: -20px;
height: 100%;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_front_NV_bot {
border-radius:0px 0px 20px 20px;
}
/*4. afdeling*/
#afd_front_VI_top
{
position:relative;
max-width: 100%;
overflow:visible;
border-radius:20px 20px 0px 0px;
}#afd_front_VI_top img {
margin-top: -20px;
height: 100%;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_front_VI_bot {
border-radius:0px 0px 20px 20px;
}

# passer til de afdelinger

For at lave et galleri skal du indsætte “media gallry masonry and grid”

  1. General
    1. Images – Indsæt de ønskede billeder.
    2. Layout, Columns & responsiveness
      1. Mode: masonry
      2. Responsiveness mode: Browser width based
      3. Numbers of colons:
        1. Desktop: 3
        2. Hor. Tablet: 4
        3. Vert. tablet: 3
        4. Mob. Phone: 2
      4. Gap between coluns: 35px
      5. loading effect: none
    3. Image Settings
      1. Image sizing: resize images
      2. Width: 500
      3. Height: 400
      4. Image border radius: 5px
      5. Image decoration: none
      6. Scale animation on hover: quick scale
      7. Hover background color: default
      8. Open in popup on click: yes
  2. Hover icon
    1. Defaut
  3. Pagination
    1. Disabled
  4. Design option
    1. Padding-bottom: 100px

Booking Grejbank Fyn
Bemærk at Grejbank Fyn ikke udlåner udstyr til kommercielle eller private formål!

Udstyret bookes via formularen i højre side.

Vigtigt!
Bemærk at din bookning først er gældende når du modtager en endelig bekræftelse pr mail.

Grejbank Fyn bestræber sig på, at udstyret altid er i sikkerhedsmæssig forsvarlig stand, men du er som låner også selv ansvarlig for at tjekke udstyret. Samtidig er du som låner ansvarlig for deltagernes sikkerhed i forbindelse med aktiviteter hvor udstyr fra Grejbank Fyn indgår. Vær opmærksom på om det kræver tilladelse at benytte området hvor aktiviteten foregår.

Formelle kompetencer ved risikofyldte aktiviteter
Vær opmærksom på at visse aktiviteter med grupper af børn og unge kræver formelle kompetencer. Det gælder fx klatring og sejlads med kano, kajak, SUP og jolle. Ved sejladsaktiviteter med elever er der bl.a. krav om, at der udarbejdes en sikkerhedsinstruks, samt at der er tegnet en passageransvarsforsikring.

Er du i tvivl så spørg os!

Aflevering af udstyr
Udstyret skal afleveres i samme stand som du modtager det. Det vil sige rengjort (undtagen MTB-cykler) og uden skader. Er udstyret bortkommet eller beskadiget ved aflevering, vil låneren blive opkrævet et beløb svarende til omkostningerne ved reparation eller nyanskaffelse. Ved manglende rengøring vil der blive opkrævet et gebyr som minimum er svarende til udlånsgebyret (fx 150 kr. pr kano). For bålgryder, Trangiasæt og andet båludstyr er gebyret dog minimum 100 kr. pr enhed.
Se desuden menupunktet til venstre: Sådan behandler du grejet

Afbestilling
Hvis du fortryder lånet, hører vi gerne fra dig senest 7 dage før dagen for udlånet. Ellers forbeholder vi os ret til et afbestillingsgebyr.

Åbningstider
Vi har normalt åbent i tidsrummet 8-14 på hverdage (fredag til 13). Har du brug for at hente eller aflevere udenfor dette tidsrum kan du kontakte os på tlf. eller mail.

Betaling
Betaling sker via EAN eller CVR nr. Har skolen eller foreningen ikke et af disse skal vi bruge CPR nr og adresse på den person der bestiller. Der er også mulighed for at betale med Mobile Pay (30601962 Grejbank Fyn).

Har du andre spørgsmål så kontakt os. Det gælder også hvis du har brug for inspiration til steder og ture eller en instruktør til dine aktiviteter.

Naturvejlederen tilbyder

27/08/15 Fjordens dag i Odense Stige ø.

Guidede ture.
Undervisning og kurser til børn og voksne.
Sparring med lærere omkring udeskole.
Sparring med pædagoger omkring udeaktiviteter med mindre børn.
Sparring og samarbejde med foreninger omkring formidling af natur.
Arrangementer med tema – fx GPS-løb, mad på bål, dissektion af dyr m.m.

Priser afhænger af indhold og omfang, kontakt naturvejlederen og hør nærmere.

Naturvejlederen tilbyder

27/08/15 Fjordens dag i Odense Stige ø.

Guidede ture.
Undervisning og kurser til børn og voksne.
Sparring med lærere omkring udeskole.
Sparring med pædagoger omkring udeaktiviteter med mindre børn.
Sparring og samarbejde med foreninger omkring formidling af natur.
Arrangementer med tema – fx GPS-løb, mad på bål, dissektion af dyr m.m.

Priser afhænger af indhold og omfang, kontakt naturvejlederen og hør nærmere.

Naturvejlederen tilbyder

27/08/15 Fjordens dag i Odense Stige ø.

Guidede ture.
Undervisning og kurser til børn og voksne.
Sparring med lærere omkring udeskole.
Sparring med pædagoger omkring udeaktiviteter med mindre børn.
Sparring og samarbejde med foreninger omkring formidling af natur.
Arrangementer med tema – fx GPS-løb, mad på bål, dissektion af dyr m.m.

Priser afhænger af indhold og omfang, kontakt naturvejlederen og hør nærmere.

Naturvejlederen tilbyder

27/08/15 Fjordens dag i Odense Stige ø.

Guidede ture.
Undervisning og kurser til børn og voksne.
Sparring med lærere omkring udeskole.
Sparring med pædagoger omkring udeaktiviteter med mindre børn.
Sparring og samarbejde med foreninger omkring formidling af natur.
Arrangementer med tema – fx GPS-løb, mad på bål, dissektion af dyr m.m.

Priser afhænger af indhold og omfang, kontakt naturvejlederen og hør nærmere.

For at lave tabs, skal du indsætte et row og give den en baggrundsfarve på enten #f1f5fb eller #003755 efter behov. Der skal også defineres padding-top og padding-bottom på 60px i dette row.

I row skal du indsætte tabs.

  1. General
    1. Style: modern
    2. Shape: rounded
    3. Color: lige gyligt
    4. Spacing: 10px
    5. Gap: none
    6. Position: top
    7. Autoplay: none
    8. Acive section: 1
    9. Pagination style: none
    10. CSS Animation: fadeinLeft
    11. Element ID: giv et elementet et ID. Eksempel: book_tabs
    12. Extra class name: giv ikke noget class
  2. Design options
    1. ingen ændrigner

Inde i tabs lav så mange sektioner, som der er behov for og giv dem den indhold, du har lyst til.

Gå ind i Custom CSS menu og indsæt dette kode:

/*TABS*/
/*each tab*/
#book_taps p {
color:#F1F5FB;
}
#book_taps > div > div.vc_tta-tabs-container > ul a {
border-radius:10px 10px 0px 0px;
}
/*when tab is active*/
.vc_tta-tabs:not([class*=vc_tta-gap]):not(.vc_tta-o-no-fill).vc_tta-tabs-position-top .vc_tta-tab.vc_active>a {
background-color:white !important;
color:#003755;
font-weight:700;
}
/*not active tabs*/
.vc_tta-color-turquoise.vc_tta-style-modern .vc_tta-tab > a {
background-color:#003755 !important;
border:none !important ;
}
/*Taps dropdown*/
#book_taps > div > div.vc_tta-panels-container > div {
background-color:white;
border-radius: 10px;
}
#book_taps > div > div.vc_tta-panels-container p {
color:#003755;
}

Undervandsbasen

Under vandoverfladen åbner der sig en verden af flora og fauna. Udstyret i Undervandsbasen giver mulighed for at komme helt tæt på livet i vandet og opleve og undersøge planter, dyr og fisk. Vandet rummer desuden masser af kultur- og naturhistoriske værdier.

Iført våddragt kan man svømme eller gå på opdagelse, lave undervandsorienteringsløb,fange fisk og skaldyr, samle spiselige planter, eller blot opleve den forunderlige verden, som findes under vand. Sat ind i en læringssammenhæng danner dette grundlag for spændende og virkelighedsnær undervisning knyttet til natur og kultur i søer og hav.

juli 2021
M Ti O To F L S
 1234
567891011
12131415161718
19202122232425
262728293031  

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

For at lave informations sektioner med tabs skal du indsætte et row.

Row settings

  1. General
    1. Row stretch: stretch row and content (no paddings)
    2. Column gap: 0px
  2. Design options
    1. Background: #003755 – kun hvis baggrunden skal være mørk

Del row i 2 lige kolonner.

Den ene kolonne skal være med et single image

  1. General
    1. Image: vælg ønskede billede
    2. Image sie: full
    3. Image alignment: left
    4. Imgae style: default
    5. On click action: none
    6. CSS Animation: none

Kolonnen kan også fuldes ud med tekst.

Den anden kolonne skal fuldes med:

  1. Text block
    1. Gemeral
      1. Overskrift 1: Overskrift af dit valg
  2. Text block
    1. General
      1. Afsnit: Dit beskrivelse
  3. Accordion
    1. General
      1. Style: modern
      2. Shape: rounded
      3. Color: White
      4. Spacing: none
      5. Gap: 35px
      6. Alignment: left
      7. Autoplay: none
      8. Allow collapse all: yes
      9. Icon Chevron
      10. Position: right
      11. Active section: 0
      12. CSS Animation: fadeIn
      13. Element ID: Giv elementet et id af eget valg f.eks. Lud3mid1_acc
    2. Design Options
      1. Padding-top: 10px
      2. Margin-right: 40%
  4. Section
    1. Giv den et titel
    2. Fyld den ud med ønskede indhold

 

Indsæt dernæst dette kode:

/*ACCORDIONS */

/*tabs farver*/
.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-title > a {
color: #F1F5FB !important;
}
.vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-heading{
border-color: #003755 !important;
background-color: #003755 !important;
}

#Lud3mid1_row h1, #Lud3mid3_row h1 {color: #F1F5FB;} /*rows with dark background*/

#Lud3mid2_row h1, #Lud3mid4_row h1 {color: #003755;} /*rows with light bagground*/

#Lud3mid1_row p, #Lud3mid3_row p{color: #F1F5FB;} /*rows with dark background*/
#Lud3mid2_row p, #Lud3mid4_row p {color: #003755;}/*rows with light bagground*/

/*slut tabs farver*/

#Lud3mid1_acc {
background:none;
}
#Lud3mid1_acc a
{
background-color:#F1F5FB;
border:none;
border-radius:10px;
color:#003755;
}
#Lud3mid2_acc {
background:none;
}
#Lud3mid2_acc a {
background-color:#003755;
border:none;
border-radius:10px;
color:#F1F5FB;
}
#Lud3mid3_acc {
background:none;
}
#Lud3mid3_acc a {
background-color:#F1F5FB;
border:none;
border-radius:10px;
color:#003755;
}
#Lud3mid4_acc {
background:none;
}
#Lud3mid4_acc a {
background-color:#003755;
border:none;
border-radius:10px;
color:#F1F5FB;
}

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Grej

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Tabs

  1. Style: Classic
  2. Shape: Rounded
  3. Color: Peacoc
  4. Do not fill content area: No
  5. Spacing: 35px
  6. Gap: None
  7. Position: Top
  8. Allignment: Left
  9. Autoplay: None
  10. Active section: 1

Sektionerne har identisk opsætning. Forskellene er titler på tabs og indholdstekst.

Indsæt en “row” i sektionen og opdel “row” i 1/4 + 1/4 + 1/4 + 1/4 kolonner.

Sæt “equal height: yes”

Kolonne

  1. Single image
    1. Margin-bottom: 0
  2. Tekst
    1. Navn på grej i “H5”
    2. Kort beskrivelse af grej i “afsnit”

 

Alternativ måde er at indsætte template: tabs_booking_grejbank_v.0.5

Og indsæt koden:

Indsæt dette kode for at give disse tabs en specifik farve:

/*Farven på inaktiv tabs*/
.vc_tta-color-peacoc.vc_tta-style-classic .vc_tta-tab > a{
border-color: #003755 !important;
background-color: #003755 !important;
}
/*Farven på aktiv tabs*/
.vc_tta-color-peacoc.vc_tta-style-classic .vc_tta-tab.vc_active > a{
border-color: #f1f5fb !important;
background-color: #f1f5fb !important;
}
/*Rundet kanter på billeder ved grej*/
.grej_billede img{
border-radius: 10px 10px 0px 0px;
}
/*Runder kanter ved tekst for grej ved booking*/
.grej_tekstboks{
border-radius: 0px 0px 10px 10px;
}
/*farve på tekten*/
.grej_tekstboks p {
color: #F1F5FB;
}
.grej_tekstboks h5 {
color: #F1F5FB;
}

/*For at fjerene baggrundfarven ombag tabs*/

.vc_tta-color-peacoc.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels, .vc_tta-color-peacoc.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels::after, .vc_tta-color-peacoc.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels::before {
border-color: transparent;

}

.vc_tta-color-peacoc.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels {
background-color: transparent;
}

INFO VED BOOKING AF UDSTYR

KAYAK

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

SUP-BOARD

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

KANO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

MOUNTAINBIKE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

Trangia

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HÆNGEKØJE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

KIKKERT

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

ØKSE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

Trangia2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HÆNGEKØJE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

KIKKERT

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

ØKSE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

Trangia

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HÆNGEKØJE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

KIKKERT

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

ØKSE

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

For at knapperne og laveudstyrkortene for booking skal du indsætte et row. I den indsæt et tekstboks med overskrift 1 og skriv din overskrift.

Indsæt derefter et row lige under teksboksen og del den op i 1/12 + 1/12 + 10/12.

I hver af 1/12 indsæt en knap og giv dem et navn hver.

  1. Knap 1
    1. Style: flat
    2. Shape: round
    3. Color: grey
    4. Size: normal
    5. Alignment: inline
    6. Add icon: no
    7. CSS Animation: none
    8. Element ID: Giv knappen et ID f.eks. grejpalandbot eller grejpavandbot
    9. Extra Class name: none
    10. Advanced on click action: yes
    11. On click code: se kode under.
  1. Knap 2
    1. Style: flat
    2. Shape: round
    3. Color: classic red
    4. Size: normal
    5. Alignment: inline
    6. Add icon: no
    7. CSS Animation: none
    8. Element ID: Giv knappen et ID f.eks. grejpalandbot eller grejpavandbot
    9. Extra Class name: none
    10. Advanced on click action: yes
    11. On click code: se kode under.

 

Kolonnen 10/12 skal forblive tom.

Under knapperne skal du indsætte et row og dele den op i 1/4 + 1/4 + 1/4 + 1/4.

Giv det row et ID (f.eks. grej_book_section_cards) og et class name (f.eks. grej_book_section_cards).

  1. General
    1. Row stretch: default
    2. Collumn gap: 35px
  2. Design options
    1. Background color: #f1f5fb

Hver udstyrkort bygges op på samme måde.

  1. Single image
    1. General
      1. Image: vælg et billede
      2. Image size: full
      3. Image Alignment: center
      4. Image style: default
      5. On lick action: none
      6. CSS Animation: none
      7. Element ID: giv elementet et ID
      8. Extra class name: giv et class name
      9. Image hovers: enabled
    2. Design options
      1. Margin-top, margin-bottom: 0px
      2. Padding-top, padding-bottom: 0px

Under billedet indsæt et row og den den op i 5/6 + 1/12.

Inner Row Settings

  1. General
    1. Columns gap: 0px
  2. Design options
    1. Margin-right, margin-bottom, margin-left: 0px
    2. Padding-top, padding-bottom: 0px
    3. Background: #003755

 

  1. 5/6
    1. Text block
      1. General
        1. Overskrift 4: Produktets navn
      2. Design options
        1. Margin-bottom: 0px
        2. Padding-top: 10px
        3. padding-bottom: 0px
        4. Background: #003755
  2. 1/12
    1. Icon
      1. Icon library: font awesome 5
      2. Icon: chevron
      3. Icon color: black
      4. Background shape: none
      5. Size: small
      6. Icon alignment: left
    2. Design options
      1. Margin-top, margin-bottom: 0px
      2. Margin-left: – 90px
      3. Padding-top: 8px
      4. Padding-bottom: 0px

Under denne row indsæt et text block

  1. General
    1. Afsnit: beskriv dit produkt
    2. Element ID: Giv elementet et ID
    3. Extra class name: giv elementet et class name
  2. Design options
    1. Padding-right, padding-bottom, padding-left: 0px
    2. Background: #003755

Indsæt CSS koden.

JavaScript kode for knapper.

Knap 1

var z = document.getElementById("grej_book_section_cards"); var k = document.getElementById("grej_book_section_cards2"); var x = document.getElementById("grej_book_section_cards3"); var y = document.getElementById("grej_book_section_cards4"); if (x.style.display === "none") { x.style.display = "block"; y.style.display = "block"; z.style.display = "none"; k.style.display = "none";} else { x.style.display = "none"; y.style.display = "none"; z.style.display = "block"; k.style.display = "block";}

Knap 2:

var x = document.getElementById("grej_book_section_cards"); var y = document.getElementById("grej_book_section_cards2"); var z = document.getElementById("grej_book_section_cards3"); var k = document.getElementById("grej_book_section_cards4"); if (x.style.display === "none") { x.style.display = "block"; y.style.display = "block"; z.style.display = "none"; k.style.display = "none";} else { x.style.display = "none"; y.style.display = "none"; z.style.display = "block"; k.style.display = "block";}

CSS kode for knappernes og udstyrers udseende

/*Grej-booking buttons*/
#grejpalandbot button /*grej på land*/
{
font-weight:400;
color:#003755;
border-color: white;
background-color: white;
filter: drop-shadow(0 0 0.5rem rgba(0,0,0, .3));
}
#grejpavandbot button /*grej på vand*/
{
font-weight:400;
color:#003755;
border-color: white;
background-color: white;
filter: drop-shadow(0 0 0.5rem rgba(0,0,0, .3));
}
#grejpalandbot button:hover /*grej på land hover*/
{
font-weight:600;
border-color: #003755;
background-color: #003755;
color:white;
}
#grejpavandbot button:hover /*grej på vand hover*/
{
font-weight:600;
border-color: #003755;
background-color: #003755;
color:white;
}
#grejpalandbot button:focus /*grej på land hover*/
{
font-weight:600;
border-color: #003755;
background-color: #003755;
color:white;
}
#grejpavandbot button:focus /*grej på vand hover*/
{
font-weight:600;
border-color: #003755;
background-color: #003755;
color:white;
}

/*BOOKING SECTION – Udstyr kort*/

.grej_book_section_cards p {
color:#f1f5fb;
}

.grej_book_section_cards h4 {
color:#f1f5fb;
}
/*first afdeling*/

#afd_grej_prod_top
{
position:relative;
max-width: 100%;
overflow:visible;
}
#afd_grej_prod_top img {
border-radius:20px 20px 0px 0px;
height: 100%;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_grej_prod_but {
border-radius:0px 0px 20px 20px;
}
/*2. afdeling*/
#afd_grej_prod2_top
{
position:relative;
max-width: 150%;
overflow:visible;
}
#afd_grej_prod2_top img {
height: 100%;
width: 100%;
border-radius:20px 20px 0px 0px;
}
/*fjordens dag p tekst*/
#afd_grej_prod2_but {
border-radius:0px 0px 20px 20px;
}
/*3. afdeling*/
#afd_grej_prod3_top
{
position:relative;
max-width: 100%;
overflow:visible;
}
#afd_grej_prod3_top img {
border-radius:20px 20px 0px 0px;
height: 100%;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_grej_prod3_but {
border-radius:0px 0px 20px 20px;
}
/*4. afdeling*/
#afd_grej_prod4_top
{
position:relative;
max-width: 100%;
overflow:visible;
}
/*AFDELINGER PRODUKTER*/
.produktpic{
position:relative;
max-width: 100%;
overflow:visible;
}
.produktpic img {
border-radius:20px 20px 0px 0px;
height: 100%;
width: 100%;
}
.produktbut {
border-radius:0px 0px 20px 20px;
}
#afd_grej_prod4_top img {
border-radius:20px 20px 0px 0px;
height: 100%;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_grej_prod4_but {
border-radius:0px 0px 20px 20px;
}
#book_book_sec img
{
height: 100%;
width: 100%;
}

For at lave accordion med specifik farve skal du i et row placere et accordion.

  1. General
    1. Style: modern
    2. Shape: rounded
    3. Color: green (vigtigt at farven er denne, da CSS koden vil reagere til denne specifikke farve)
    4. Spacing: none
    5. Gap: 35px
    6. Alignment: left
    7. Autoplay: none
    8. Allow collapse all: yes
    9. Icon: chevron
    10. Position: right
    11. Active section: 0
    12. CSS Animation: none
    13. Element ID: Giv elementet et ID element
  2. Design options
    1. Padding-bottom: 80px

Lav så mange sektioner, der behøves og fyld dem ud med ønskede indhold.

CSS til farvede accodrion, som skal inde i Custom CSS menu.

/*dropdowns*/

.vc_tta-color-green.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-heading {
background-color: #003755 !important;
}
#fjord_accordion a {
background-color:#003755;
border:none;
border-radius:10px;
color:#F1F5FB;
}
.vc_tta-color-green.vc_tta-style-modern .vc_tta-controls-icon::after, .vc_tta-color-green.vc_tta-style-modern .vc_tta-controls-icon::before {
color: #F1F5FB !important ;
border-color:#F1F5FB !important;
}
.vc_tta-color-green.vc_tta-style-modern .vc_tta-panel .vc_tta-panel-heading {
color: #F1F5FB !important ;
border-color:#F1F5FB !important;
}
.vc_tta-color-green.vc_tta-style-modern .vc_tta-panel .vc_tta-panel-heading {
background-color: transparent !important;
}

 

10:10 – 10:15

Velkomst ved Claus Brandstrup

 

10:15 – 11:00

Er klimaindsatsen er tilstrækkelig? Og kommer den i tide? Foredrag ved meteorolog og

forfatter Jesper Theilgaard

 

11:15 – 11:45

Fællessang

 

12:00 – 12:45

Odense som en bæredygtig storby. Hvordan sikrer vi bæredygtig kultur,
uddannelse og udvikling? Debat V/Rådmand Jane Jegind (V) og
Rådmand Susanne Crawley Larsen

13:00 – 13:45

Hvordan løfter vi i fællesskab ansvarligt forbrug og produktion? Debat V/Byrådsmedlem
Anne- Mette Ebensgaard (A), Byrådsmedlem Kristian Guldfeldt (C), Direktør (SPIS! Odense) Tine Gudrun Petersen, konsulent (Odense Renovation) Winie Evers.

14:00 – 14:45

Hvad er konsekvenserne af klimaforandringerne? Foredrag ved Professor Sebastian Mernild en af verdens førende klimaforskere og chef for Nansen Centret i Bergen

 

15:00 – 15:45

Hvilken rolle spiller uddannelse i bæredygtig udvikling? Og hvordan vil de fynske uddannelsesinstitutioner bidrage? Direktør (Tietgen), Annette Vilhelmsen,
Direktør (Kold College) Gitte Bargholt og Rektor (Syddansk Universitet) Henrik Dam.

 

15:45 – 15:55

Fællessang

 

15:45 – 15:55

Claus Brandstrup slutter dagen af

For at lave planen skal du indsætte et row, dele den op i “5/12 + 1/6 + 5/12” og give den ID “program_text”.

I begge 5/12 skal du indsætte et text block og fylde den ud med programmet.

  1. 1/6
    1. Column settings
      1. Responsive options
        1. PC Width: 2 columns – 1/6
        2. Tablet horizontal idth: 2 columns – 1/6
        3. Tablet vertical: hide on device: yes
        4. Phone: hide on device: yes
    2. skal du indsætte empty space
      1. Empty space
        1. General
          1. Height: tilpas efter behov
          2. Element ID: linedivider
        2. Design options
          1. Margin-left: 40%
          2. Background: #003755

CSS til linjen mellem planne

/*Linedivider*/
#linedivider {
width:3px !important;
margin-bottom:20px !important;
margin-left:10%;
}
/*tekst for programmet*/
#program_text {
width:100%;
}
#program_text p {
font-size:20px;
color:#093B56;
}

OM VIGELSØ

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

SEJLPLAN

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

BOOKING

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

For at lave cards i en afdelings side skal du indsætte et row og dele den op i så mange kolonner, som du har brug for. Giv den også et ID og baggrundsfarven: #f1f5fb.

Hver cards bygges op på samme måde:

  1. Single image
    1. General
      1. Image: vælg et billede
      2. Image size: full
      3. Image alignment: center
      4. Image style: default
      5. Element ID: Giv den et ID
    2. Design options
      1. Margin-top, margin-bottom: 0px
      2. padding-top: 0px
  2. Row (delt op i 5/6 + 1/12)
      1. General
        1. Column gap: 0pc
      2. Design options
        1. Margin-right, margin-bottom, margin-left: 0px
        2. Padding-top, padding-bottom: 0px
        3. Background #003755
    1. 5/6 – Text block
      1. General
        1. Overskrift 4: Giv et overskrift
      2. Design options
        1. Margin-bottom: 0px
        2. Padding-top: 10px
        3. Padding-bottom: 0px
    2. 1/12 – icon
      1. General
        1. Icon library: font awesome 5
        2. Icon: chevron
        3. Icon color: black
        4. Background shape: none
        5. Size: small
        6. Icon alignment: left
      2. Design options
        1. Maring-top, margin-bottom: 0px
        2. Margin-left: -90px
        3. Padding-top: 8px
        4. padding-bottom: 0px
    3. Text block
      1. General
        1. Afsnit: Beskriv card
        2. Element ID: Giv et ID
      2. Design options
        1. Padding-right, Padding-bottom, Padding-left: 10px
        2. Bakcground: #003555

Indsæt dette CSS kode i Custom CSS og sørg for, at ID’er i koden passer til ID’er på elementerne.

/*CSS for cards i afdelingen*/
#toprowinnercoltext_vigelso {
margin-bottom:40px;
background-color:rgba(0,55,85,0.9);
border-radius:0px 10px 10px 0px;
margin-left: -20px;
}
#toprowinnercoltext_vigelso h3 {
color:white;
}
#toprowinnercoltext_vigelso p {
color:white;
}

/*COLORS FOR TEKST IN CARDS*/
#udinat_opurt_section_cards h4, p {
color:#F1F5FB;
}

/*COLORS FOR CHEVRON IN CARDS*/
.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-color-black .vc_icon_element-icon {
color:#F1F5FB;
}

/*first afdeling*/
#afd_vigel_om_top {
position:relative;
max-width: 100%;
overflow:visible;
}
#afd_vigel_om_top img {
border-radius:10px 10px 0px 0px;
height: auto;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_vigel_om_bot {
border-radius:0px 0px 10px 10px;
}
/*2. afdeling*/

#afd_vigel_sejl_top
{
position:relative;
max-width: 150%;
overflow:visible;
}

#afd_vigel_sejl_top img {
height: auto;
width: 100%;
border-radius:10px 10px 0px 0px;
}
/*fjordens dag p tekst*/
#afd_vigel_sejl_bot {
border-radius:0px 0px 10px 10px;
}

/*3. afdeling*/
#afd_vigel_bok_top {
position:relative;
max-width: 100%;
overflow:visible;
}
#afd_vigel_bok_top img {
border-radius:10px 10px 0px 0px;
height: auto;
width: 100%;
}
/*fjordens dag p tekst*/
#afd_vigel_bok_bot {
border-radius:0px 0px 10px 10px;
}