Process boxes

Usefull elements to build website

Process diagram

small, letters
>#bruno-custom-5f6e3a4b22aca.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b22aca.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }
A

Step A

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#bruno-custom-5f6e3a4b22bd1.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b22bd1.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }
B

Step B

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#bruno-custom-5f6e3a4b22cab.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b22cab.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }
C

Step C

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#bruno-custom-5f6e3a4b22d95.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b22d95.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }
D

Step D

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Process diagram

diamond style , icons
>#bruno-custom-5f6e3a4b23075.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b23075.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }

Step 1

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#bruno-custom-5f6e3a4b23151.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b23151.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }

Step 2

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#bruno-custom-5f6e3a4b2321e.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b2321e.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }

Step 3

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#bruno-custom-5f6e3a4b232f5.process-box:hover .front { background-color: #6B5073; -webkit-box-shadow:0 0 0 15px rgba(107,80,115,0.5); -moz-box-shadow:0 0 0 15px rgba(107,80,115,0.5); box-shadow:0 0 0 15px rgba(107,80,115,0.5); } #bruno-custom-5f6e3a4b232f5.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 2px #6B5073; -moz-box-shadow:0 0 0 2px #6B5073; box-shadow:0 0 0 2px #6B5073; }

Step 4

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam