thiscodeWorks - Organizing the best of code online

Details - BEE Pro | No-code email & page design suite

<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta content="summary_large_image" name="twitter:card" />
	<meta content="website" property="og:type" />
	<meta content="" property="og:description" />
	<meta content="https://64za6iez1y.preview-postedstuff.com/V2-pdD1-AXRH-512I-pSfu/" property="og:url" />
	<meta content="https://pro-bee-beepro-thumbnail.getbee.io/messages/779850/763585/1648734/9309834_large.jpg" property="og:image" />
	<meta content="" property="og:title" />
	<meta content="" name="description" />
	<meta charset="utf-8" />
	<meta content="width=device-width" name="viewport" />
	<link href="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/favicon_images/DateBook_Icon-ab410a-16-icon.png" rel="icon" sizes="16x16" />
	<link href="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/favicon_images/DateBook_Icon-ab410a-32-icon.png" rel="icon" sizes="32x32" />
	<link href="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/favicon_images/DateBook_Icon-ab410a-apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />
	<style>
		.bee-row,
		.bee-row-content {
			position: relative
		}

		.bee-row-1 .bee-col-1 .bee-block-1,
		.bee-row-2 .bee-col-1 .bee-block-1 {
			font-family: Montserrat, 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
			font-weight: 700
		}

		body {
			background-color: transparent;
			color: #000;
			font-family: Montserrat, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif
		}

		a {
			color: #10a2f7
		}

		* {
			box-sizing: border-box
		}

		body,
		h2 {
			margin: 0
		}

		.bee-row-content {
			max-width: 1305px;
			margin: 0 auto;
			display: flex
		}

		.bee-row-content.reverse,
		.bee-row-content.reverse .bee-col {
			-moz-transform: scale(1, -1);
			-webkit-transform: scale(1, -1);
			-o-transform: scale(1, -1);
			-ms-transform: scale(1, -1);
			transform: scale(1, -1)
		}

		.bee-row-content .bee-col-w1 {
			flex-basis: 8%
		}

		.bee-row-content .bee-col-w2 {
			flex-basis: 17%
		}

		.bee-row-content .bee-col-w4 {
			flex-basis: 33%
		}

		.bee-row-content .bee-col-w7 {
			flex-basis: 58%
		}

		.bee-row-content .bee-col-w8 {
			flex-basis: 67%
		}

		.bee-row-content .bee-col-w12 {
			flex-basis: 100%
		}

		.bee-icon .bee-icon-label-right a,
		.bee-menu ul li a {
			text-decoration: none
		}

		.bee-image {
			overflow: auto
		}

		.bee-image .bee-center {
			margin: 0 auto
		}

		.bee-row-3 .bee-col-1 .bee-block-3,
		.bee-row-5 .bee-col-1 .bee-block-1,
		.bee-row-5 .bee-col-1 .bee-block-2,
		.bee-row-5 .bee-col-1 .bee-block-3 {
			width: 100%
		}

		.bee-menu ul {
			margin: 0;
			padding: 0
		}

		.bee-icon {
			display: inline-block;
			vertical-align: middle
		}

		.bee-icon .bee-content {
			display: flex;
			align-items: center
		}

		.bee-image img {
			display: block;
			width: 100%
		}

		.bee-menu ul {
			list-style-type: none
		}

		.bee-menu ul.bee-horizontal li {
			display: inline-block
		}

		.bee-row-1 {
			background-color: #b41cd9;
			background-repeat: no-repeat;
			background-size: auto
		}

		.bee-row-1 .bee-row-content,
		.bee-row-2 .bee-row-content,
		.bee-row-3 .bee-row-content {
			background-repeat: no-repeat;
			background-size: auto;
			color: #000
		}

		.bee-row-1 .bee-col-1,
		.bee-row-1 .bee-col-2,
		.bee-row-1 .bee-col-3 {
			padding-bottom: 5px;
			padding-top: 5px;
			display: flex;
			flex-direction: column;
			justify-content: center
		}

		.bee-row-1 .bee-col-1 .bee-block-1 {
			color: #ffbdd8;
			font-size: 32px;
			letter-spacing: 1px;
			text-align: center
		}

		.bee-row-2 {
			background-color: #13a7de;
			background-repeat: no-repeat;
			background-size: auto
		}

		.bee-row-3,
		.bee-row-4,
		.bee-row-5 {
			background-color: #efddff;
			background-repeat: no-repeat
		}

		.bee-row-2 .bee-col-1 {
			padding-bottom: 15px;
			padding-top: 15px
		}

		.bee-row-2 .bee-col-1 .bee-block-1 {
			color: #fff;
			font-size: 16px;
			text-align: right
		}

		.bee-row-3 {
			background-image: url('https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6826/MainHeader_Fondo_04.png');
			background-size: cover
		}

		.bee-row-3 .bee-col-1 {
			padding: 5px 10px
		}

		.bee-row-3 .bee-col-1 .bee-block-2 {
			padding-bottom: 5px;
			text-align: center;
			width: 100%
		}

		.bee-row-3 .bee-col-2 {
			padding: 5px 15px
		}

		.bee-row-3 .bee-col-3,
		.bee-row-6 .bee-col-1,
		.bee-row-7 .bee-col-1,
		.bee-row-7 .bee-col-1 .bee-block-1 {
			padding-bottom: 5px;
			padding-top: 5px
		}

		.bee-row-4 .bee-row-content,
		.bee-row-5 .bee-row-content,
		.bee-row-6 .bee-row-content,
		.bee-row-7 .bee-row-content {
			background-repeat: no-repeat;
			color: #000
		}

		.bee-row-6,
		.bee-row-7 {
			background-repeat: no-repeat
		}

		.bee-row-6 .bee-col-1 .bee-block-1 {
			color: #000;
			font-family: inherit;
			font-size: 14px;
			font-weight: 400;
			text-align: center
		}

		.bee-row-7 .bee-col-1 .bee-block-1 {
			color: #9d9d9d;
			font-family: inherit;
			font-size: 15px;
			text-align: center
		}

		.bee-row-2 .bee-col-1 .bee-block-1 li {
			padding-left: 10px;
			padding-right: 10px
		}

		.bee-row-2 .bee-col-1 .bee-block-1 li a {
			color: #fff
		}

		@media (max-width:768px) {
			.bee-row-content:not(.no_stack) {
				display: block
			}
		}

		.bee-row-1 .bee-col-1 .bee-block-1 .bee-icon-image {
			padding: 10px
		}

		.bee-row-1 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content,
		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content,
		.bee-row-7 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content {
			margin-left: 0
		}

		.bee-row-1 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
			margin-right: 0
		}

		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon-image {
			padding: 5px
		}

		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
			margin-right: 0
		}

		.bee-row-7 .bee-col-1 .bee-block-1 .bee-icon-image {
			padding: 5px 6px 5px 5px
		}

		.bee-row-7 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
			margin-right: 0
		}
	</style>
</head>

<body>
	<div class="bee-page-container">
		<div class="bee-row bee-row-1">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w2">
					<div class="bee-block bee-block-1 bee-icons">
						<div class="bee-icon bee-icon-last">
							<div class="bee-content">
								<div class="bee-icon-image"><a href="https://creatorapp.zoho.com/sapphireelitetech/environment/development/datebook/#New_Section1" target="_self" title="DateBook"><img height="64px" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/DateBook%20Icon.png" width="auto" /></a></div>
								<div class="bee-icon-label bee-icon-label-right"><a href="https://creatorapp.zoho.com/sapphireelitetech/environment/development/datebook/#New_Section1" target="_self" title="DateBook">DateBook</a></div>
							</div>
						</div>
					</div>
				</div>
				<div class="bee-col bee-col-2 bee-col-w8">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
				<div class="bee-col bee-col-3 bee-col-w2">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-2">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-menu">
						<nav class="bee-menu">
							<ul class="bee-horizontal">
								<li><a href="https://www.example.com" target="_self" title="">INTRODUCTION</a></li>
								<li><a href="https://www.example.com" target="_self" title="">HIGHLIGHTS</a></li>
								<li><a href="https://www.example.com" target="_self" title="">NEWS</a></li>
								<li><a href="https://www.example.com" target="_self" title="">EVENTS</a></li>
								<li><a href="https://www.example.com" target="_self" title="">YOUR DASHBOARD</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-3">
			<div class="bee-row-content reverse">
				<div class="bee-col bee-col-1 bee-col-w4">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:15px;"></div>
					</div>
					<div class="bee-block bee-block-2 bee-heading">
						<h2 style="color:#5d85a9;direction:ltr;font-family:'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;font-size:32px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0;"><span class="tinyMce-placeholder">Fermentum Ipsum</span> </h2>
					</div>
					<div class="bee-block bee-block-3 bee-image"><img alt="" class="bee-center bee-autowidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6826/Sombra_inferior.png" style="max-width:415px;" /></div>
				</div>
				<div class="bee-col bee-col-2 bee-col-w1">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:15px;"></div>
					</div>
					<div class="bee-block bee-block-2 bee-spacer">
						<div class="spacer" style="height:25px;"></div>
					</div>
				</div>
				<div class="bee-col bee-col-3 bee-col-w7">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:10px;"></div>
					</div>
					<div class="bee-block bee-block-2 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-4">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-5">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-image"><img alt="Your Logo" class="bee-center bee-fixedwidth" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/DateBook%20Icon.png" style="max-width:326px;" /></div>
					<div class="bee-block bee-block-2 bee-image"><img alt="" class="bee-center bee-fixedwidth" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/C5496230-8A5C-4503-870B-F0C4D3C7BC07.PNG" style="max-width:391px;" /></div>
					<div class="bee-block bee-block-3 bee-image"><img alt="" class="bee-center bee-autowidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6826/Sombra_inferior.png" style="max-width:650px;" /></div>
					<div class="bee-block bee-block-4 bee-spacer">
						<div class="spacer" style="height:25px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-6">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-icons">
						<div class="bee-icon bee-icon-last">
							<div class="bee-content">
								<div class="bee-icon-image"><img height="128px" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/DateBook%20Icon.png" width="auto" /></div>
							</div>
						</div>
					</div>
					<div class="bee-block bee-block-2 bee-spacer">
						<div class="spacer" style="height:25px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-7">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-icons" id="beepro-locked-footer">
						<div class="bee-icon bee-icon-last">
							<div class="bee-content">
								<div class="bee-icon-image"><a href="https://www.designedwithbee.com/?utm_source=editor&amp;utm_medium=bee_pro&amp;utm_campaign=free_footer_link" target="_blank" title="Designed with BEE"><img alt="Designed with BEE" height="32px" src="https://d1oco4z2z1fhwp.cloudfront.net/assets/bee.png" width="auto" /></a></div>
								<div class="bee-icon-label bee-icon-label-right"><a href="https://www.designedwithbee.com/?utm_source=editor&amp;utm_medium=bee_pro&amp;utm_campaign=free_footer_link" target="_blank" title="Designed with BEE">Designed with BEE</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

#webdev

URL & Title to Share - AddToAny

<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="http://www.example.com/page.html" data-a2a-title="Example Page Title">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

#bootstrap #js #html #webdev

Bootstrap · The most popular HTML, CSS, and JS library in the world.

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

#bootstrap #css #html #webdev

bootstrap css code

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

#css #design #gradient #webdev

Radial Gradient in CSS

.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}

#css #webdev #design #gradients

CSS Repeating Gradients to Create Stripes or Radial patterns

/* Linear gradient pattern */

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

/* Radial gradient pattern */

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}

#html #htmltags #webdev #basics #html5

Image tag <img> to insert images

<img 
	src="example.com/cat.png" 
    alt="Photo of a cat" 
    height="50" 
    width="100"
    longdesc="#catDetails"
 >

#javascript #webdev #arrays #math

Get average value of items in a javascript array

const arrAvg = arr => arr.reduce((a,b) => a + b, 0) / arr.length
// arrAvg([20, 10, 5, 10]) -> 11.25

#javascript #webdev #arrays #math

Get sum of all values in javascript array

const arrSum = arr => arr.reduce((a,b) => a + b, 0)
// arrSum([20, 10, 5, 10]) -> 45

#javascript #webdev #javascript #arrays #math

Function to find maximum value in javascript array

const arrMax = arr => Math.max(...arr);
// arrMax([20, 10, 5, 10]) -> 20

#javascript #webdev #arrays #math

Function to find the minimum value in Javascript Arrays

const arrMin = arr => Math.min(...arr);
// arrMin([20, 10, 5, 10]) -> 5

#css #webdev #text

How to "truncate" long strings with an ellipsis (...) for text that overflows its container

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#php #webdev #howto

Convert one date format into another in PHP

$myDateTime = DateTime::createFromFormat('Y-m-d', $dateString);
$newDateString = $myDateTime->format('m/d/Y');

#howto #rubyonrails #webdev #interviewquestions

How to get current absolute URL in Ruby on Rails

# get "/articles?page=2"
request.original_url # => "http://www.example.com/articles?page=2"

Details - BEE Pro | No-code email & page design suite

URL & Title to Share - AddToAny

Bootstrap · The most popular HTML, CSS, and JS library in the world.

bootstrap css code

Radial Gradient in CSS

CSS Repeating Gradients to Create Stripes or Radial patterns

Image tag <img> to insert images

Get average value of items in a javascript array

Get sum of all values in javascript array

Function to find maximum value in javascript array

Function to find the minimum value in Javascript Arrays

How to "truncate" long strings with an ellipsis (...) for text that overflows its container

Convert one date format into another in PHP

How to get current absolute URL in Ruby on Rails

Save snippets that work with our extensions