Beaver Junction Designs http://designbj2.local Starter Site Thu, 18 Nov 2021 20:53:16 +0000 en-GB hourly 1 https://wordpress.org/?v=6.6 http://designbj2.local/wp-content/uploads/cropped-Bj-Favicon1-32x32.png Beaver Junction Designs http://designbj2.local 32 32 Copy of Team Gallery http://designbj2.local/team-gallery-copy/ Thu, 18 Nov 2021 20:28:53 +0000 https://designs.beaverjunction.com/?p=24886

Team Gallery

The Team

Lorem ipsum dolor sit amet, per nibh postulant eu, vim propriae adolescens no. Vide habemus ius eu, vix mentitum consectetuer at, usu consul vulputate et. Vide vitae ad vix. At qui integre interpretaris, reque gloriatur cum ut, eu mei dico hinc audire.

Dolorem detraxit atomorum ex mea, duo forensibus comprehensam an, no nam prima ridens vituperatoribus. Vis probo scripta ex. Primis appetere maluisset an sea.

A Woman

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu.

This Chap

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu. Ea mei malorum corrumpit definiebas, vel homero commune maiestatis id.

Another Chap

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu. Ea mei malorum corrumpit definiebas, vel homero commune maiestatis id.

Mrs. Smith

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu. Ea mei malorum corrumpit definiebas, vel homero commune maiestatis id.

Mr. Jones

Meliore signiferumque sea ad, eos et postea inermis. Vis te mutat malis, quem denique principes ad sea. Sanctus laboramus definiebas an his. Sea quem convenire ea. Dicat graeci tibique id his, ferri impetus mentitum ius in. Et vis utinam deseruisse, est dolore moderatius ad.

Dicat graeci tibique id his, ferri impetus mentitum ius in. Et vis utinam deseruisse, est dolore moderatius ad.

Every Man

Meliore signiferumque sea ad, eos et postea inermis. Vis te mutat malis, quem denique principes ad sea. Sanctus laboramus definiebas an his. Sea quem convenire ea. Dicat graeci tibique id his, ferri impetus mentitum ius in. Et vis utinam deseruisse, est dolore moderatius ad. Sea quem convenire ea. Dicat graeci tibique id his, ferri impetus mentitum ius in. Et vis utinam deseruisse, est dolore moderatius ad.

A Fellow

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu. Ea mei malorum corrumpit definiebas, vel homero commune maiestatis id.

A Fellow

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu. Ea mei malorum corrumpit definiebas, vel homero commune maiestatis id.

Mrs Woman

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu. Ea mei malorum corrumpit definiebas, vel homero commune maiestatis id.

]]>
Contact Forms http://designbj2.local/contact-forms/ Thu, 01 Jul 2021 09:10:12 +0000 https://designs.beaverjunction.com/?p=24583

Contact Forms

Check across multiple browsers the added their own styles to checkboxes and input fields

The anatomy of the Beaver Builder contact form. IDs and Class selectors.

Please enter your name.
Please enter a subject.
Please enter a valid phone number.
Please enter a message.

This custom text. ( .fl-terms-checkbox-text)

You must accept the Terms and Conditions.
/*Background for the module and/or the form */
.fl-module-content { background-color:gainsboro; padding: 2%;}
.fl-contact-form{ background-color: ghostWhite; padding: 5%;}
/*Main form sections*/
.fl-input-group {border:4px solid magenta; }
.fl-input-group INPUT {border:5px solid white; border-radius:0; } /*excludes text areas*/
TEXTAREA {border:5px solid white; border-radius:0; }
/*covers input and title areas - see IDs below*/
.fl-name {background-color: chocolate;} 
.fl-subject {background-color: coral;} 
.fl-email {background-color: crimson;}
.fl-phone {background-color: darkcyan;}
.fl-message {background-color: plum;}
.fl-terms-checkbox{background-color: slateblue;}
.fl-terms-checkbox-text {color:peachpuff;}

/* There are ID's as well as classes that single out the input areas
Here I have used background-color to make the default transparent */

#fl-name {background-color: rgba(0,0,0,0.0);}
#fl-subject {background-color: rgba(0,0,0,0.0);}
#fl-email {background-color: rgba(0,0,0,0.0);}
#fl-phone {background-color: rgba(0,0,0,0.0);}
#fl-message {background-color: rgba(0,0,0,0.0);}

/*Use this below when changing to one shared color
#fl-name, #fl-subject, #fl-email, #fl-phone, #fl-message {} */
LABEL {color: white;}

/* Placeholder styling for Chrome and Edge*/
.fl-input-group INPUT::placeholder {color: #000; background-color: pink;} /*BB defaults to a readable grey on black or white */
TEXTAREA::placeholder {color: #000; background-color: pink; }
/* Custom Success message and errors */
.fl-module-content SPAN.fl-success-msg P {background-color: tomato; color: #FFFFFF; padding: 30%; }
.fl-contact-form .fl-contact-error{color: thistle; font-weight: bold;}
.fl-contact-form .fl-success-none { color: green;} /* When "none" is selected for success action*/

/* Remember the focus state. Below the inputs have a grey background we need to specify also on focus */

.fl-input-group INPUT, .fl-contact-form TEXTAREA {padding: 2%; background-color: #444; color: #fff; border-radius:0;}
.fl-input-group INPUT:focus, .fl-contact-form TEXTAREA:focus{ background-color: #444; color: white;}
.fl-contact-form TEXTAREA {height: 260px;}
Please enter your name.
Please enter a valid phone number.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a valid phone number.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a valid phone number.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a valid phone number.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a valid phone number.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a message.

Custom text about the thing I am agreeing to.

You must accept the Terms and Conditions.
Please enter your name.
Please enter a message.
Please enter your name.
Please enter a message.
]]>
Computers http://designbj2.local/computers/ Mon, 03 May 2021 07:21:55 +0000 https://designs.beaverjunction.com/?p=24577

I repair computers, laptops and phones

I'm Dan, I've been fixing and upgrading computers in the North London area since 2010.

Sadly,  I can't help with rotary dial phones, but I know my grandmother would dearly love to chat to you.

T15 Man Laptop

Why me?

Trust is my business

Benefit One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Benefit Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Benefit Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Benefit Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Benefit Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Benefit Six

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

T15 Office

Visit US

At our freindly shop

Monday: 9:00 - 19:00
Tuesday: 9:00 - 19:00
Wednesday: 9:00 - 19:00
Thursday: 9:00 - 17:00
Friday: 9:00 - 17:00
Saturday: 9:00 - 19:00
Sunday:  Closed

T15 Windows Bk
T15dellk
T15 Appleb
T15 Android
T15 Hpb

More Details

Some interesting facts

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.

computer repairs
Laptop repairs
phone repairs
computer builds

Get in touch

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

50 Riverway, London, NW2 1QQ

T: 012345 -1234-01234

E: info@mywebsite.com

Contact form not available on this demo.

© 2010 - 2024

]]>
Responsive Grids with Columns http://designbj2.local/responsive-grids-with-columns/ Sun, 21 Feb 2021 18:12:11 +0000 https://designs.beaverjunction.com/?p=24492

Responsive Grids with Columns

Here is a column group of 6.  With custom CSS (under Row settings) the width of each is set to 33.33% on desktops and has created a grid of 2 x 3.

Without custom CSS we could have created 2 column groups of 3, but if we change the responsive settings we can end up with empty areas.

For example if we set to 50% we would get 2 on top and one below twice creating two empty spaces.

column-one

?text=1

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-two

?text=2

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-three

?text=3

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-four

?text=4

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-five

?text=5

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-six

?text=6

Column Settings   Advanced Tab HTML Element Class contains a selector.

This is using .fl-col to set the widths of all columns in this row including this one.

?text=1
?text=2
?text=3
?text=4
?text=5
?text=6
?text=7
?text=8
?text=9
?text=10

column-one

?text=1

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-two

?text=2

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-three

?text=3

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-four

?text=4

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-five

?text=5

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-six

?text=6

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-seven

?text=7

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-eight

?text=8

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-nine

?text=9

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-ten

?text=10

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-eleven

?text=11

Column Settings   Advanced Tab HTML Element Class contains a selector.

column-twelve

?text=12

Column Settings   Advanced Tab HTML Element Class contains a selector.

?text=1
?text=2
?text=3
?text=4
?text=5
?text=6
]]>
Scrolling Effects http://designbj2.local/scrolling-effects/ Sun, 07 Feb 2021 12:01:18 +0000 https://designs.beaverjunction.com/?p=24463
]]>
Image swap on hover http://designbj2.local/image-swap-on-hover/ Thu, 04 Feb 2021 08:59:47 +0000 https://designs.beaverjunction.com/?p=24399

Image Swap on hover

This shows a column (or child column) background image until a mouse hover show the Beaver Builder photo module image.

Cat1
Bot2
Much1

Column within a column

Aw2

For when you need a background too.

]]>
Background blend modes http://designbj2.local/background-blend-modes/ Sun, 03 Jan 2021 09:16:19 +0000 https://designs.beaverjunction.com/?p=24302

Background blend modes

Blends
]]>
Row Separators http://designbj2.local/row-separators/ Fri, 04 Dec 2020 15:32:04 +0000 https://designs.beaverjunction.com/?p=23841 MY BIG HEADING snowflakes-top Christmas MY BIG HEADING Rough Edges "> MY BIG HEADING MY BIG HEADING MY BIG HEADING MY BIG HEADING]]>

Row Separators

Twats!

Swoop 1

Every Cloud...

mountains

In the distance...

Vibrant

">

MY BIG HEADING

snowflakes-top

Christmas

MY BIG HEADING

Rough Edges

">

MY BIG HEADING

MY BIG HEADING

MY BIG HEADING

MY BIG HEADING

]]>
CSS Keyframes http://designbj2.local/css-keyframes/ Sun, 18 Oct 2020 16:43:35 +0000 https://designs.beaverjunction.com/?p=22856
Fp 1

Keyframe Magic

Keyframe Magic

]]>
Image Scroll on Hover http://designbj2.local/scroll-on-hover/ Fri, 02 Oct 2020 08:48:36 +0000 https://designs.beaverjunction.com/?p=22612

Image scroll on hover

CSS only version Does not work on mobile/touch devices where hover does not work.
The CSS is in the Row Settings the the class selector of "scrolling-image" is added to each Photo Module under the advance tab.

]]>