User:Ccsmith/sandbox/wiki

 

visual editor tool bar
  Paragraph   A   Cite  Insert  Ω  ? <div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Options <div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"> <div style="flex:2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue; color:white; background-color:lightgray">Save page

<div style="width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray">

<div style="display:flex; align-items:center; width: 5vw; height: 5vw; background: blue; border-radius: 2.5vw"> <div style="display:flex; order:2; align-items:center; width: 0; height: 0; border-top: 2vw solid transparent; border-left: 2vw solid white; border-bottom: 2vw solid transparent">

<div style="display:flex; align-items:center; width: 70px; height: 70px; background: red; border-radius: 70px"> <div style="display:flex; order:2; align-items:center; width: 0; height: 0; border-top: 30px solid transparent; border-left: 30px solid white; border-bottom: 30px solid transparent">

<div style="display:flex; align-items:center; width: 40px; height: 40px; background: red; border-radius: 40px"> <div style="display:flex; order:2; align-items:center; width: 0; height: 0; border-top: 15px solid transparent; border-left: 15px solid white; border-bottom: 15px solid transparent">

<div style="display:flex; align-items:center; width: 1.3vw; height: 1.3vw; background: green; border-radius: 1.3vw"> <div style="display:flex; order:2; align-items:center; width: 0; height: 0; border-top: 0.5vw solid transparent; border-left: 0.5vw solid white; border-bottom: 0.5vw solid transparent">

Flexbox table w/variable widths
<div style="display:flex; border-top:1px solid black; border-left:1px solid black; border-right:1px solid black; padding:1px"> Beginning Dates for Major County Records Birth* Marriage Death* Court Land Probate Census 1882 1882  1880 <div style="display:flex; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; padding:1px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mollis turpis in aliquam. Vivamus semper nibh quis dui dapibus pellentesque. Vivamus ultrices enim vitae pretium lacinia. Quisque vestibulum euismod est, a congue velit placerat ut. Aenean blandit feugiat odio, nec sagittis tellus convallis non.

Flexbox table w/fixed widths
Beginning Dates for Major County Records Birth* Marriage Death* Court Land Probate Census 1882 1882  1880 <div style="display:flex; max-width:996px; border-top:1px solid black; border-left:1px solid black; border-right:1px solid black; padding:1px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mollis turpis in aliquam. Vivamus semper nibh quis dui dapibus pellentesque. Vivamus ultrices enim vitae pretium lacinia. Quisque vestibulum euismod est, a congue velit placerat ut. Aenean blandit feugiat odio, nec sagittis tellus convallis non.

<div style="display:flex; border:1px solid red; padding-top:5px; padding-bottom:5px; margin-top:10px; margin-bottom:10px"> Birth* Marriage Death* Court Land Probate Census

#|<< Previous Chapter Next Chapter >>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed elementum urna. Ut mollis, justo eget ornare finibus, lorem leo tempus orci, nec tincidunt est sem nec velit. Sed in ligula erat. Sed imperdiet leo vitae neque imperdiet, eu accumsan enim tempor. Nulla lacinia, ex sed placerat rutrum, ligula dui posuere massa, et consectetur dui est ultricies ipsum. Pellentesque turpis ipsum, ultrices et arcu eget, bibendum pretium ante. Etiam fringilla, risus faucibus fringilla ullamcorper, augue lectus cursus metus, nec efficitur ipsum neque ut lectus.

<h2 style="font-size:1.5vw; background-color:#fcefcf; padding:0.2vw">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> Exercises

Enter exercise questions here

<div style="width:11.5vw; height:30px; padding-top:3px; padding-left:1vw; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<div style="border-top:1vw solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz

Enter quiz questions here

<div style="width:11.5vw; height:30px; padding-top:3px; padding-left:1vw; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

#|<< Previous Chapter Next Chapter >>

<div style="flex:0; order:2; display:flex; align-items:center; justify-content:center; background: linear-gradient(lightgray, white); min-width:200px; height:30px; border:1px solid black; margin-left:-12px">Get Involved in Wiki <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)"> <div style="flex:0; order:4; display:flex; align-items:center; justify-content:center; background: linear-gradient(lightgray, white); margin-left:-10px; min-width:200px; height:30px; border:1px solid black">Help:Wiki Help <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)">

Main Page Research Help Wiki Help Get Involved

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED

<div style="width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 20:06 Gardendale Alabama Family History Center ( diff | hist ).. (+87) .. Rickgwilliams ( talk | contribs | block )  ( Opening Hours and Charges for copying )  [ rollback 1 edit ] ( Tag Visual edit )

<div style="width:0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 19:20 Artical title (dif | hist) . . (+272)  . .  ccsmith (talk | contribs | block) (summary) [rollback 2 edits] ( Tag Visual edit)

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED