Home
HTML Tags
Text Animations
Tables
Borders
Categories
Category
- Fixed Border
- Auto Fit Border

☰

Borders In HTML CSS And JavaScript 100+

WcCoder

Borders In HTML CSS And JavaScript

WcCoder.com is a source code provider website. Which provides HTML, CSS and JavaScript codes. 100+ Border.

Here many types of borders are created in HTML CSS JavaScript.

You can use all these borders anywhere.

Auto fit borders are also present here.

Border : -- 1 - 51 NEXT >

The border-style property specifies the type of border that will be displayed. Valid options for the the border-style are none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit. Most of the styles alter the border appearance, but none and inherit are special. Setting the border-style to none disables borders, and inherit uses the border-style inherited from a less-specific selector.

The border-width property specifies how wide the border around a box should be. Borders are usually specified in pixels, but any CSS unit of measurement can be used. To create a 1-pixel, dashed border around all the anchors On a page, you use the following CSS:
a { border-width: 1px; border-style: solid;}

You can also use them to give a better look to text and paragraphs in your website.

Currently there are 103 borders available on our website, these border styles may also increase in future.

WcCoder.com also runs new border projects built from HTML CSS JavaScript.

Input

Output

HTML 1

<div class="ab1">
	<h1>Lorem ipsum</h1>
	<br>

	Lorem ipsum dolor sit ......

	<div class="ab11" id="as"></div>
	<div class="ab12" id="as"></div>
	<div class="ab13" id="as"></div>
	<div class="ab14" id="as"></div>
	<div class="ab15" id="as"></div>
	<div class="ab16" id="as"></div>
	<div class="ab17" id="as"></div>
	<div class="ab18" id="as"></div>

</div>

CSS 1

  .ab1{
  	height: 300px;
  	width: 250px;
  	background:yellow;
  	padding: 35px;
  	color: black;
  	position: relative;
  	overflow: hidden;
  	text-align: justify;
  }
  #as{
  	border: 3px red solid;
  	position: absolute;
  }
  .ab11{
  	height: 8px;
  	width: 305px;
  	top: 5px;
  	left: 5px;
  }
  .ab12{
    	height: 355px;
    	width: 8px;
    	right: 5px;
    	top: 5px;
  }
  .ab13{
    	height: 8px;
  	width: 305px;
    	bottom: 5px;
    	left: 5px;
  }
  .ab14{
    	height: 355px;
    	width: 8px;
    	left: 5px;
    	bottom: 5px;
  }
  .ab15{
  	height: 8px;
  	width: 305px;
  	top: 10px;
  	left: 5px;
  }
  .ab16{
    	height: 355px;
    	width: 8px;
    	right: 10px;
    	top: 5px;
  }
   .ab17{
    	height: 8px;
  	width: 305px;
    	bottom: 10px;
    	left: 5px;
  }
  .ab18{
    	height: 355px;
    	width: 8px;
    	left: 10px;
    	bottom: 5px;
  }

Lorem ipsum

Lorem ipsum dolor sit ......

HTML 2

<div class="ab2">
	<h1>Lorem ipsum</h1>
	<br>

	Lorem ipsum dolor sit ......

	<div class="ab21" id="as2"></div>
	<div class="ab22" id="as2"></div>
	<div class="ab23" id="as2"></div>
	<div class="ab24" id="as2"></div>
	<div class="ab25" id="as2"></div>
	<div class="ab26" id="as2"></div>
	<div class="ab27" id="as2"></div>
	<div class="ab28" id="as2"></div>

</div>

CSS 2

  .ab2{
  	height: 300px;
  	width: 250px;
  	background:yellow;
  	padding: 40px;
  	color: black;
  	position: relative;
  	overflow: hidden;
  	text-align: justify;
  }
  #as2{
  	border: 3px red solid;
  	position: absolute;
  }
  .ab21{
  	height: 8px;
  	width: 290px;
  	top: 5px;
  	left: 30px;
  }
  .ab22{
    	height: 340px;
    	width: 8px;
    	right: 5px;
    	top: 30px;
  }
  .ab23{
    	height: 8px;
  	width: 290px;
    	bottom: 5px;
    	right: 30px;
  }
  .ab24{
    	height: 340px;
    	width: 8px;
    	left: 5px;
    	bottom: 30px;
  }
  .ab25{
  	height: 8px;
  	width: 290px;
  	top: 10px;
  	left: 30px;
  }
  .ab26{
    	height: 340px;
    	width: 8px;
    	right: 10px;
    	top: 30px;
  }
  .ab27{
    	height: 8px;
  	width: 290px;
    	bottom: 10px;
    	right: 30px;
  }
  .ab28{
    	height: 340px;
    	width: 8px;
    	left: 10px;
    	bottom: 30px;
  }

Lorem ipsum

Lorem ipsum dolor sit ......

HTML 3

<div class="ab3">
	<h1>Lorem ipsum</h1>
	<br>
    <br>
    
	Lorem ipsum dolor sit ......

	<div class="ab31" id="as"></div>
	<div class="ab32" id="as"></div>
	<div class="ab33" id="as"></div>
	<div class="ab34" id="as"></div>
	<div class="ab35" id="as"></div>
	<div class="ab36" id="as"></div>
	<div class="ab37" id="as"></div>
	<div class="ab38" id="as"></div>
	<div class="cu31" id="ascu3"></div>
	<div class="cu32" id="ascu3"></div>
	<div class="cu33" id="ascu3"></div>
	<div class="cu34" id="ascu3"></div>

</div>

CSS 3

  .ab3{
	height: 300px;
	width: 250px;
	background:yellow;
	padding: 50px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  h1{
	position: absolute;
	top: 40px;
	}
  #ascu3{
	position: absolute;
	height: 45px;
	width: 45px;
	background: yellow;
	border-radius: 50%;
	position: absolute;
  }
  .cu31{
	top: 0;
	left: 0;
  }
  .cu32{
	top: 0;
	right: 0;
  }
  .cu33{
	bottom: 0;
	right: 0;
  }
  .cu34{
	bottom: 0;
	left: 0;
  }
  #as{
	border: 3px red solid;
	position: absolute;
	}
  .ab31{
	height: 10px;
	width: 305px;
	top: 7px;
	left: 7px;
  }
  .ab32{
  	height: 355px;
  	width: 10px;
  	right: 7px;
  	top: 7px;
  }
  .ab33{
  	height: 10px;
	width: 305px;
  	bottom: 7px;
  	left: 10px;
  }
  .ab34{
  	height: 355px;
  	width: 10px;
  	left: 7px;
  	bottom: 7px;
  }
  .ab35{
	height: 10px;
	width: 305px;
	top: 10px;
	left: 7px;
  }
  .ab36{
  	height: 355px;
  	width: 10px;
  	right: 10px;
  	top: 7px;
  }
  .ab37{
  	height: 10px;
	width: 305px;
  	bottom: 10px;
  	left: 7px;
  }
  .ab38{
  	height: 355px;
  	width: 10px;
  	left: 10px;
  	bottom: 7px;
  }

Lorem ipsum

Lorem ipsum dolor sit ......

HTML 4


<div style="position:relative;height:406px;width: 356px;background: white;">
	<div class="ab4">
		<h1 style="text-align:center;">Lorem ipsum</h1>
		<br>

		Lorem ipsum dolor sit ......

	</div>

	<div class="wfm1" style="height: 20px;width: 163px;position: absolute;">
		<div class="w8" id="wfa1"></div>
		<div class="w12" id="wfa1"></div>
		<div class="w16" id="wfa1"></div>
	</div>
	<div class="wfm2" style="height: 163px;width: 20px;position: absolute;">
		<div class="w88" id="wfa1"></div>
		<div class="w122" id="wfa1"></div>
		<div class="w166" id="wfa1"></div>
	</div>
	<div class="wfm3" style="height: 20px;width: 163px;position: absolute;">
		<div class="w8" id="wfa1"></div>
		<div class="w12" id="wfa1"></div>
		<div class="w16" id="wfa1"></div>
	</div>
	<div class="wfm4" style="height: 163px;width: 20px;position: absolute;">
		<div class="w88" id="wfa1"></div>
		<div class="w122" id="wfa1"></div>
		<div class="w166" id="wfa1"></div>
	</div>
	<div class="wfm5" style="height: 20px;width: 163px;position: absolute;">
		<div class="w8" id="wfa1"></div>
		<div class="w12" id="wfa1"></div>
		<div class="w16" id="wfa1"></div>
	</div>
	<div class="wfm6" style="height: 163px;width: 20px;position: absolute;">
		<div class="w88" id="wfa1"></div>
		<div class="w122" id="wfa1"></div>
		<div class="w166" id="wfa1"></div>
	</div>
	<div class="wfm7" style="height: 20px;width: 163px;position: absolute;">
		<div class="w8" id="wfa1"></div>
		<div class="w12" id="wfa1"></div>
		<div class="w16" id="wfa1"></div>
	</div>
	<div class="wfm8" style="height: 163px;width: 20px;position: absolute;">
		<div class="w88" id="wfa1"></div>
		<div class="w122" id="wfa1"></div>
		<div class="w166" id="wfa1"></div>
	</div>
</div>

CSS 4

  .ab4{
  	height:300px;
  	width:250px;
  	background:yellow;
  	padding: 30px;
  	color: black;
  	position: absolute;
  	overflow: hidden;
  	margin: 23px
  }
  #wfa1{
  	margin: 3px;
  	background: red;
  }
  .w8{
  	height: 3px;
  	width: 80px;
  }
  .w12{
  	height: 3px;
  	width: 120px;
  }
  .w16{
  	height: 3px;
  	width: 160px;
  }
  .w88{
  	width: 3px;
  	height: 80px;
  }
  .w122{
  	position: absolute;
  	top: 0px;
  	left: 6px;
  	width: 3px;
  	height: 120px;
  }
  .w166{
  	position: absolute;
  	top: 0px;
  	left: 12px;
  	width: 3px;
  	height: 160px;
  }
  .wfm1{
    	top: 0;
    	left: 0;
    	transform: rotatex(360deg);
  }
  .wfm2{
  	top: 0;
  	left: 0;
  	transform: rotatex(0deg);
  }
  .wfm3{
  	top: 0;
  	right: 0;
  	transform: rotatey(180deg);
  }
  .wfm4{
  	top: 0;
  	right: 0;
  	transform: rotatey(180deg);
  }
  .wfm5{
  	bottom: 0;
  	right: 0;
  	transform: rotate(-180deg);
  }
  .wfm6{
  	bottom: 0;
  	right: 0;
  	transform: rotate(180deg);
  }
  .wfm7{
  	bottom: 0;
  	left: 0;
  	transform: rotatex(180deg);
  }
  .wfm8{
  	bottom: 0;
  	left: 0;
  	transform: rotatex(180deg);
  }

Lorem ipsum

Lorem ipsum dolor sit ......

HTML 5

<div class="ab5">
	<h1 style="font-size:80px;">CODE</h1><br>
	<div class="ab51" id="as5"></div>
	<div class="ab52" id="as5"></div>
	<div class="ab53" id="as5"></div>
	<div class="ab54" id="as5"></div>
</div>

CSS 5

  .ab5{
  	height: 300px;
  	width: 300px;
  	background:yellow;
  	padding: 30px;
  	color: blue;
  	position: relative;
  	text-align: center;
  }
  #as5{
  	border: 4px black solid;
  	border-top: none;
  	border-bottom: none;
  	position: absolute;
  }
  .ab51{
  	height: 110px;
  	width: 9px;
	top: 40px;
	left: 42px;
  }
  .ab52{
  	height: 110px;
	width: 9px;
	top: 15px;
	right: 42px;
  }
  .ab53{
  	height: 100px;
	width: 9px;
	top: 80px;
	left: 70px;
	transform: rotate(270deg);
  }
  .ab54{
  	height: 100px;
	width: 9px;
	top: -15px;
	right: 70px;
	transform: rotate(90deg);
  }

CODE

HTML 6

<div class="ab6">
	<h1>Lorem ipsum</h1>
	<br>

	Lorem ipsum dolor ......

	<div class="ab61" id="as6"></div>
	<div class="ab62" id="as6"></div>
	<div class="ab63" id="as6"></div>
	<div class="ab64" id="as6"></div>
	<div class="ab65" id="as6"></div>
	<div class="ab66" id="as6"></div>	
</div>

CSS 6

  .ab6{
  	height: 350px;
  	width: 250px;
  	background:yellow;
  	padding: 35px;
  	color: black;
  	position: relative;
  	overflow: hidden;
  	text-align: justify;
  }
  #as6{
  	border: 4px red solid;
  	border-right: none;
  	border-bottom: none;
  	border-radius: 3px;
  	position: absolute;
  }
  .ab61{
  	height: 193px;
	width: 100px;
	top: 5px;
	left: 5px;
  }
  .ab62{
  	height: 146px;
	width: 146px;
	top: 13px;
	left: 13px;
  }
  .ab63{
  	height: 100px;
	width: 180px;
	top: 21px;
	left: 21px;
  }
  .ab64{
	height: 100px;
	width: 193px;
	bottom: 5px;
	right: 5px;
	transform: rotate(180deg);
  }
  .ab65{
  	height: 146px;
	width: 146px;
	bottom: 13px;
	right: 13px;
	transform: rotate(180deg);
  }
  .ab66{
  	height: 180px;
	width: 100px;
	bottom: 22px;
	right: 22px;
	transform: rotate(180deg);
  }

Lorem ipsum

Lorem ipsum dolor sit ......

HTML 7

<div style="position:relative;height:456px;width: 356px;background: yellow;">
	<div class="ab7" style="height:300px;width:250px;background:yellow;
	padding: 30px;color: black;position: absolute;overflow: hidden;margin: 23px;">
	<h1 style="text-align:center;">Lorem ipsum</h1>
	<br>
	Lorem ipsum dolor...
	</div>
	<div class="wfm71" style="height: 20px;width: 163px;position: absolute;">
		<div class="w78" id="wfa7"></div>
		<div class="w712" id="wfa7"></div>
		<div class="w716" id="wfa7"></div>
	</div>
	<div class="wfm72" style="height: 163px;width: 20px;position: absolute;">
		<div class="w788" id="wfa7">	</div>
		<div class="w7122" id="wfa7">	</div>
		<div class="w7166" id="wfa7">	</div>
	</div>
	<div class="wfm73" style="height: 20px;width: 163px;position: absolute;">
		<div class="w78" id="wfa7">	</div>
		<div class="w712" id="wfa7">	</div>
		<div class="w716" id="wfa7">	</div>
	</div>
	<div class="wfm74" style="height: 163px;width: 20px;position: absolute;">
		<div class="w788" id="wfa7">	</div>
		<div class="w7122" id="wfa7">	</div>
		<div class="w7166" id="wfa7">	</div>
	</div>
	<div class="wfm75" style="height: 20px;width: 163px;position: absolute;">
		<div class="w78" id="wfa7">	</div>
		<div class="w712" id="wfa7">	</div>
		<div class="w716" id="wfa7">	</div>
	</div>
	<div class="wfm76" style="height: 163px;width: 20px;position: absolute;">
		<div class="w788" id="wfa7">	</div>
		<div class="w7122" id="wfa7" class="w1222">	</div>
		<div class="w7166" id="wfa7">	</div>
	</div>
	<div class="wfm77" style="height: 20px;width: 163px;position: absolute;">
		<div class="w78" id="wfa7">	</div>
		<div class="w712" id="wfa7">	</div>
		<div class="w716" id="wfa7">	</div>
	</div>
	<div class="wfm78" style="height: 163px;width: 20px;position: absolute;">
		<div class="w788" id="wfa7">	</div>
		<div class="w7122" id="wfa7" class="w1222">	</div>
		<div class="w7166" id="wfa7">	</div>
	</div>
</div>

CSS 7

	
    #wfa7{
        margin: 3px;
        background: red;
    }
    .w78{
        height: 5px;
        width: 160px;
    }
    .w712{
        height: 5px;
        width: 120px;
    }
    .w716{
        height: 5px;
        width: 80px;
    }
    .w788{
        width: 5px;
        height: 160px;
    }
    .w7122{
        position: absolute;
        top: 0px;
        left: 6px;
        width: 5px;
        height: 120px;
    }
    .w7166{
        position: absolute;
        top: 0px;
        left: 12px;
        width: 5px;
        height: 80px;
    }
    .wfm71{
        top: 10px;
        left: 10px;
        transform: rotatex(360deg);
    }
    .wfm72{
        top: 10px;
        left: 10px;
        transform: rotatex(0deg);
    }
    .wfm73{
        top: 10px;
        right: 10px;
        transform: rotatey(180deg);
    }
    .wfm74{
        top: 10px;
        right: 10px;
        transform: rotatey(180deg);
    }
    .wfm75{
        bottom: 8px;
        right: 10px;
        transform: rotate(-180deg);
    }
    .wfm76{
        bottom: 8px;
        right: 10px;
        transform: rotate(180deg);
    }
    .wfm77{
        bottom: 8px;
        left: 10px;
        transform: rotatex(180deg);
    }
    .wfm78{
        bottom: 8px;
        left: 10px;
        transform: rotatex(180deg);
    }

Lorem ipsum

Lorem ipsum dolor...

HTML 8

<div onmouseenter="modify_m1h8()" id="mod_mab81" class="mab81" onmouseleave="unmodify_m1h8()">
	<div id="m1h8" class="m1h8">
		<div style="">
			<h1>Heding</h1>
		</div>
	</div>
	<div style="position: absolute;top: 120px;width: 230px;padding: 0px 10px;">
		Lorem ipsum dolor...
		</div>
			<div class="ab81" id="as8"></div>
			<div class="ab82" id="as8"></div>
			<div class="ab83" id="as8"></div>
			<div class="ab84" id="as8"></div>
			<div class="ab85" id="as8"></div>
			<div class="ab86" id="as8"></div>
			<div class="ab87" id="as8"></div>
			<div class="ab88" id="as8"></div>
			<div class="ab89" id="as8"></div>
		</div>
<div onmouseenter="modify_m1h8()" id="mod_mab81" onmouseleave="unmodify_m1h8()" class="mab82">	
	<div class="ab81" id="as8"></div>
	<div class="ab82" id="as8"></div>
	<div class="ab83" id="as8"></div>
	<div class="ab84" id="as8"></div>
	<div class="ab85" id="as8"></div>
	<div class="ab86" id="as8"></div>
	<div class="ab87" id="as8"></div>
</div>

CSS 8


  	
  	.mab81{
            height: 450px;
            width: 250px;
            background:white;
            padding: 35px;
            color: black;
            position: relative;
            overflow: hidden;
            text-align: justify;
        }
        .mab82{
            height: 250px;
            width: 250px;
            background:none;
            padding: 35px;
            color: black;
            position: relative;
            overflow: hidden;
            text-align: justify;
            transform: rotate(180deg);
            margin-top: -320px;
        }
        #as8{
            position: absolute;
            border-color: rgb(200, 150, 10);

        }
        .ab81{
            height: 26px;
            width: 26px;
            top: 5px;
            left: 5px;
            border: 3.5px solid;
        }
        .ab82{
            height: 12px;
            width: 12px;
            left: 34px;
            top: 34px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab83{
            height: 10px;
            width: 10px;
            left: 43px;
            top: 42px;
            border: 3.5px solid;
        }
        .ab84{
            height: 200px;
            width: 26px;
            top: 46px;
            left: 5px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab85{
            height: 230px;
            width: 19px;
            top: 55px;
            left: 14.5px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab86{
            height: 26px;
            width: 200px;
            top: 5px;
            left: 46px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .ab87{
            height: 17px;
            width: 230px;
            top: 15px;
            left: 55px;
            border: 3.5px solid;
            border-right: none;
            border-bottom: none;
        }
        .m1h8{
            padding: 5px 5px 0px 0px;
            border: 3px yellowgreen solid;
            text-align: center;
            height: auto;
            width: 150px;
            margin-left: 40px;
            border-bottom-right-radius: 40px;
            border-top-left-radius: 40px;
        }
        .m1h8>div{
            border: 3px yellowgreen solid;
            border-bottom-right-radius: 30px;
            border-top-left-radius: 30px;
            padding-bottom: 5px;
            background: white;
        }

JavaScript 8


  function modify_m1h8() {	
		document.getElementById('m1h8').style.background="yellowgreen";
  }
  function unmodify_m2h8() {
		document.getElementById('modb').style.background = "white";
  }
  function unmodify_m1h8() {
		document.getElementById('m1h8').style.background="white";
  }

Heding

Lorem ipsum dolor...

HTML 9

<div class="mab91" style="">
	<div class="mab911">
		<div class="ab91"></div>
		<div class="ab92"></div>
		<div class="ab93"></div>
		<div class="ab94"></div>
		<div class="ab95"></div>
		<div class="ab96"></div>
		<div class="ab97"></div>
		<div class="ab98"></div>
		<div class="ab99"></div>
		<div class="ab910"></div>
	</div>
	<div class="mab912">
		<div class="ab91"></div>
		<div class="ab92"></div>
		<div class="ab93"></div>
		<div class="ab94"></div>
		<div class="ab95"></div>
		<div class="ab96"></div>
		<div class="ab97"></div>
		<div class="ab98"></div>
		<div class="ab99"></div>
		<div class="ab910"></div>
	</div>
	<div class="mab913">
		<div class="ab91"></div>
		<div class="ab92"></div>
		<div class="ab93"></div>
		<div class="ab94"></div>
		<div class="ab95"></div>
		<div class="ab96"></div>
		<div class="ab97"></div>
		<div class="ab98"></div>
		<div class="ab99"></div>
		<div class="ab910"></div>
	</div>
		<div class="mab914">
		<div class="ab91"></div>
		<div class="ab92"></div>
		<div class="ab93"></div>
		<div class="ab94"></div>
		<div class="ab95"></div>
		<div class="ab96"></div>
		<div class="ab97"></div>
		<div class="ab98"></div>
		<div class="ab99"></div>
		<div class="ab910"></div>
	</div>
</div>

CSS 9


  *{
	margin: 0px;
	padding: 0px;
  }
  .mab91{
  		position:relative;
     	height: 400px;
     	width: 340px;
     	border: 3px pink solid
  }
  .ab91{
     	 position: absolute;
     	 border: 3px white solid;
     	 border-top: none;
     	 border-left: none;
     	 height: 50px;
     	 width: 50px;
     	 border-bottom-right-radius: 50px;
     	 margin: 10px 0px 0px 10px;
  }
  .ab92{
  		height:70px;
    	width: 0px;
    	border: 3px white solid;
    	border-top: 0px;
    	border-left: 0px;
    	border-bottom: 0px;
    	margin: 60px 0px 0px 9px;
    	position: absolute;
  }
  .ab93{
    	height:0px;
    	width: 70px;
    	border: 3px white solid;
    	border-right: 0px;
    	border-left: 0px;
    	border-bottom: 0px;
    	margin: 9px 0px 0px 60px;position: absolute;
  }
  .ab94{
  	height:75px;
  	width: 0px;
  	border: 3px white solid;
  	border-top: 0px;
  	border-left: 0px;
  	border-bottom: 0px;
  	margin: 40px 0px 0px 17px;position: absolute;
  }
  .ab95{
  	height:0px;
  	width: 75px;
  	border: 3px white solid;
  	border-right: 0px;
  	border-left: 0px;
  	border-bottom: 0px;
  	margin: 17px 0px 0px 40px;position: absolute
  }
  .ab96{
  	height:6px;
  	width: 5px;
  	border: 3px white solid;
  	border-bottom: none;
  	margin: 33px 0px 0px 17px;
  	position: absolute
  }
  .ab97{
  	height:5px;width: 5px;
  	border: 3px white solid;
  	margin: 33px 0px 0px 24.5px;
  	position: absolute
  }
  .ab98{
  	height:5px;
  	width: 5px;
  	border: 3px white solid;
  	margin: 25px 0px 0px 24.5px;
  	position: absolute
  }
  .ab99{
  	height:5px;
  	width: 5px;
  	border: 3px white solid;
  	margin: 25px 0px 0px 32px;
  	position: absolute
  }
  .ab910{
  	height:5px;
  	width: 6px;
  	border: 3px white solid;
  	margin: 17px 0px 0px 32px;
  	position: absolute;
  	border-right: none
  }
  .mab912{
  	height: 150px;
  	width: 150px;
  	position:absolute;
  	right: 0;
  	transform: rotate(90deg);
  }
  .mab913{
  	height: 150px;
  	width: 150px;
  	position:absolute;
  	bottom: 0;
  	right: 0;
  	transform: rotate(180deg);
  }
  .mab914{
  	height: 150px;
  	width: 150px;
  	position:absolute;
  	bottom: 0;
  	left: 0;
  	transform: rotate(270deg);
  }

HTML 10

<div class="ab10">
	<h1>Lorem ipsum</h1>
	<br>
	Lorem ipsum dolor...
	<div class="ab101" id="as10"></div>
	<div class="ab102" id="as10"></div>
	<div class="ab103" id="as10"></div>	
</div>

CSS 10


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab10{
	height: 250px;
	width: 250px;
	background:yellow;
	padding: 45px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
}
#as10{			
	border-radius: 3px;
	position: absolute;
}
.ab101{
	height: 200px;
	width: 200px;
	top: 10px;
	left: 10px;
	border: 4px red solid;
	border-right: none;
	border-bottom: none;
  }
  .ab102{
  	height: 200px;
	width: 200px;
	bottom: 10px;
	right: 10px;
	border: 4px red solid;
	border-top: none;
	border-left: none;
  }
  .ab103{
  	height: 270px;
	width: 270px;
	top: 30px;
	left: 30px;
	border: 4px red solid;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 11

<div class="ab_11">
	<div class="ab_11p">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
	<div class="ab111" id="as11"></div>
	<div class="ab112" id="as11"></div>
	<div class="ab113" id="as11"></div>
	<div class="ab114" id="as11"></div>
	<div class="ab115" id="as11"></div>
	<div class="ab116" id="as11"></div>
	<div class="ab117" id="as11"></div>
	<div class="ab118" id="as11"></div>
	<div class="ab119" id="as11"></div>
	<div class="ab1110" id="as11"></div>
	<div class="ab1111" id="as11"></div>
	<div class="ab1112" id="as11"></div>
	<div class="ab1113" id="as11"></div>
	<div class="ab1114" id="as11"></div>
	<div class="ab1115" id="as11"></div>
	<div class="ab1116" id="as11"></div>
	<div class="ab1117" id="as11"></div>
</div>

CSS 11


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_11{
	height: 285px;
	width: 285px;
	background:yellow;
	padding: 30px 30px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as11{
  	position: absolute;
  	border-color: black;
  }
  .ab_11p{
  	position: absolute;
  	margin: 30px 70px 30px 40px;
  }
  .ab111{
  	height: 300px;
  	width: 300px;
	border: 4px solid;  			
	top: 20px;
	left: 20px;
  }
  .ab112{
  	height: 100px;
  	border: 3px solid;
  	top: 5px;
  	left: 30px;
  }
  .ab113{
  	width: 100px;
  	border: 3px solid;
  	top: 30px;
  	left: 5px;
  }
  .ab114{
  	height: 100px;
  	border: 3px solid;
  	top: 20px;
  	left: 40px;
  }
  .ab115{
  	width: 100px;
  	border: 3px solid;
  	top: 40px;
  	left: 20px;
  }
  .ab116{
  	height: 100px;
  	border: 3px solid;
  	top: 5px;
  	right: 30px;
  }
  .ab117{
  	width: 100px;
  	border: 3px solid;
  	top: 30px;
  	right: 5px;
  }
  .ab118{
  	height: 100px;
  	border: 3px solid;
  	top: 20px;
  	right: 40px;
  }
  .ab119{
  	width: 100px;
  	border: 3px solid;
  	top: 40px;
  	right: 20px;
  }
  .ab1110{
  	height: 100px;
  	border: 3px solid;
  	bottom: 5px;
  	right: 30px;
  }
  .ab1111{
  	width: 100px;
  	border: 3px solid;
  	bottom: 30px;
  	right: 5px;
  }
  .ab1112{
  	height: 100px;
  	border: 3px solid;
  	bottom: 20px;
  	right: 40px;
  }
  .ab1113{
  	width: 100px;
  	border: 3px solid;
  	bottom: 40px;
  	right: 20px;
  }
  .ab1114{
  	height: 100px;
  	border: 3px solid;
  	bottom: 5px;
  	left: 30px;
  }
  .ab1115{
  	width: 100px;
  	border: 3px solid;
  	bottom: 30px;
  	left: 5px;
  }
  .ab1116{
  	height: 100px;
  	border: 3px solid;
  	bottom: 20px;
  	left: 40px;
  }
  .ab1117{
  	width: 100px;
  	border: 3px solid;
  	bottom: 40px;
  	left: 20px;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 12

<div class="ab_12">
	<h1>Lorem ipsum</h1><br>
	Lorem ipsum dolor...
	<div class="ab12_1">	
		<div class="ab121" id="as12"></div>
		<div class="ab122" id="as12"></div>
		<div class="ab123" id="as12"></div>
		<div class="ab124" id="as12"></div>
		<div class="ab125" id="as12"></div>
		<div class="ab126" id="as12"></div>
	</div>
	<div class="ab12_2">	
		<div class="ab121" id="as12"></div>
		<div class="ab122" id="as12"></div>
		<div class="ab123" id="as12"></div>
		<div class="ab124" id="as12"></div>
		<div class="ab125" id="as12"></div>
		<div class="ab126" id="as12"></div>
	</div>		
</div>

CSS 12


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_12{
	height: 350px;
	width: 250px;
	background:yellow;
	padding: 55px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as12{
	border-color: black;
	border-right: none;
	border-bottom: none;
	border-radius: 3px;
	position: absolute;
  }
  .ab121{
	height: 50px;
	width: 200px;
	top: 20px;
	left: 20px;
	border: 3.5px solid;
  }
  .ab122{
  	height: 200px;
	width: 60px;
	top: 40px;
	left: 40px;
	border: 3.5px solid;
  }
  .ab123{
  	height: 100px;
	width: 130px;
	top: 30px;
	left: 30px;
	border: 3.5px solid;
  }
  .ab124{
	height: 30px;
	width: 30px;
	top: 10px;
	left: 10px;
	border-top: 3.5px solid;
	border-left: 3.5px solid;
	transform: rotate(180deg);
  }
  .ab12_2{
  	position: absolute;
  	right: 0px;
  	bottom: 0px;
	transform: rotate(180deg);
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 13

<div class="ab_13">
	<h1>Lorem ipsum</h1><br>
	Lorem ipsum dolor...
	<div class="ab13_1">
		<div class="ab131" id="as13"></div>
		<div class="ab132" id="as13"></div>
		<div class="ab133" id="as13"></div>
		<div class="ab134" id="as13"></div>
		<div class="ab135" id="as13"></div>
		<div class="ab136" id="as13"></div>
		<div class="ab137" id="as13"></div>
		<div class="ab138" id="as13"></div>
		<div class="ab139" id="as13"></div>
		<div class="ab1310" id="as13"></div>
		<div class="ab1311" id="as13"></div>
		<div class="ab1312" id="as13"></div>
		<div class="ab1313" id="as13"></div>
	</div>
	<div class="ab13_2">
		<div class="ab131" id="as13"> </div>
		<div class="ab132" id="as13"> </div>
		<div class="ab133" id="as13"> </div>
		<div class="ab134" id="as13"> </div>
		<div class="ab135" id="as13"> </div>
		<div class="ab136" id="as13"> </div>
		<div class="ab137" id="as13"> </div>
		<div class="ab138" id="as13"> </div>
		<div class="ab139" id="as13"> </div>
		<div class="ab1310" id="as13"> </div>
		<div class="ab1311" id="as13"> </div>
		<div class="ab1312" id="as13"> </div>
		<div class="ab1313" id="as13"> </div>
	</div>	
</div>

CSS 13


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_13{
	height: 270px;
	width: 210px;
	background:yellow;
	padding: 100px 75px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as13{
	border-color: black;
	position: absolute;
  }
  .ab131{
	height: 20px;
	width: 20px;
	border: 3.5px solid;
	bottom: 10px;
	right: 10px;
  }
  .ab132{
  	height: 50px;
	width: 50px;
	border: 3.5px solid;
	bottom: 33.5px;
	right: 33px;
  }
  .ab133{
  	height: 50px;
	width: 50px;
	border: 3.5px solid;
	bottom: 10px;
	right: 10px;
	border-bottom: none;
	border-right: none;
  }
  .ab134{
	height: 21.5px;
	width: 70px;
	border: 3.5px solid;
	bottom: 10px;
	right: 60px;
	border-top: none;
	border-right: none;
  }
  .ab135{
  	height: 11.5px;
	width: 65px;
	border: 3.5px solid;
	bottom: 10px;
	right: 75px;
	border-bottom: none;
	border-left: none;
  }
  .ab136{
  	height: 21.5px;
	width: 150px;
	border: 3.5px solid;
	bottom: 10px;
	right: 130px;
	border-bottom: none;
	border-left: none;
	border-right: none;
  }
  .ab137{
  	height: 27px;
	width: 27px;
	border: 3.5px solid;
	border-bottom: none;
	bottom: 21.5px;
	right: 142px;
  }
  .ab138{
  	height: 18px;
	width: 25px;
	border: 3.5px solid;
	border-top: none;
	bottom: 13px;
	right: 172px;
  }
  .ab139{
	height: 70px;
	width: 21.5px;
	border: 3.5px solid;
	right: 10px;
	bottom: 60px;
	border-left: none;
	border-bottom: none;
  }
  .ab1310{
  	height: 65px;
	width: 11.5px;
	border: 3.5px solid;
	right: 10px;
	bottom: 75px;
	border-right: none;
	border-top: none;
  }
  .ab1311{
  	height: 150px;
	width: 21.5px;
	border: 3.5px solid;
	right: 10px;
	bottom: 130px;
	border-right: none;
	border-top: none;
	border-bottom: none;
  }
  .ab1312{
  	height: 27px;
	width: 27px;
	border: 3.5px solid;
	border-right: none;
	right: 21.5px;
	bottom: 142px;
  }
  .ab1313{
  	height: 25px;
	width: 18px;
	border: 3.5px solid;
	border-left: none;
	right: 13px;
	bottom: 172px;
  }
  .ab13_2{
  	top: 0;
  	left: 0;
  	position: absolute;
  	transform: rotate(180deg);
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 14

<div class="ab_14">
	<div class="par">
		<h1>Lorem ipsum</h1><br>
		Lorem ipsum dolor...
	</div>				
	<div class="ab14_1">
		<div class="ab141" id="as14"></div>
		<div class="ab142" id="as14"></div>
		<div class="ab143" id="as14"></div>
		<div class="ab144" id="as14"></div>
		<div class="ab145" id="as14"></div>
		<div class="ab146" id="as14"></div>
		<div class="ab147" id="as14"></div>
		<div class="ab148" id="as14"></div>
		<div class="ab149" id="as14"></div>
		<div class="ab1410" id="as14"></div>
		<div class="ab1411" id="as14"></div>
		<div class="ab1412" id="as14"></div>
		<div class="ab1413" id="as14"></div>
		<div class="ab1414" id="as14"></div>
		<div class="ab1415" id="as14"></div>
		<div class="ab1416" id="as14"></div>
		<div class="ab1417" id="as14"></div>
		<div class="ab1418" id="as14"></div>
		<div class="ab1419" id="as14"></div>
		<div class="ab1420" id="as14"></div>
		<div class="ab1421" id="as14"></div>
		<div class="ab1422" id="as14"></div>
	</div>
	<div class="ab14_2">
		<div class="ab141" id="as14"></div>
		<div class="ab142" id="as14"></div>
		<div class="ab143" id="as14"></div>
		<div class="ab144" id="as14"></div>
		<div class="ab145" id="as14"></div>
		<div class="ab146" id="as14"></div>
		<div class="ab147" id="as14"></div>
		<div class="ab148" id="as14"></div>
		<div class="ab149" id="as14"></div>
		<div class="ab1410" id="as14"></div>
		<div class="ab1411" id="as14"></div>
		<div class="ab1412" id="as14"></div>
		<div class="ab1413" id="as14"></div>
		<div class="ab1414" id="as14"></div>
		<div class="ab1415" id="as14"></div>
		<div class="ab1416" id="as14"></div>
		<div class="ab1417" id="as14"></div>
		<div class="ab1418" id="as14"></div>
		<div class="ab1419" id="as14"></div>
		<div class="ab1420" id="as14"></div>
		<div class="ab1421" id="as14"></div>
		<div class="ab1422" id="as14"></div>
	</div>			
</div>

CSS 14


  	*{
  		margin: 0px;
  		padding: 0px;
  	}
  	.ab_14{
		height: 400px;/* < height: and >height:*/
		width: 300px;/* < width: and > width:*/
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as14{
		border-color: black;
		position: absolute;
	}
	.ab141{
		height: 20px;
		width: 20px;
		border: 6.5px solid;
		bottom: 10px;
		left: 10px;
  	}
  	.ab142{
  		height: 20px;
		width: 20px;
		border: 6.5px solid;
		bottom: 36.5px;
		left: 36.5px;
  	}
  	.ab143{
  		height: 60px;
		width: 15px;
		border: 6.5px solid;
		border-left: none;
		bottom: 36.5px;
		left: 48px;
  	}
  	.ab144{
		height: 80px;
		width: 20px;
		border: 6.5px solid;
		border-top: none;
		bottom: 36.5px;
		left: 10px;
  	}
  	.ab145{
  		height: 17px;
		width: 17px;
		border: 6.5px solid;
		border-top: none;
		border-right: none;
		bottom: 111px;
		left: 14.75px;
		transform: rotate(135deg);
  	}
  	.ab146{
  		height: 15px;
		width: 15px;
		border: 6.5px solid;
		bottom: 136px;
		left: 13px;
		transform: rotate(135deg);
  	}
  	.ab147{
  		height: 82px;
		width: 0px;
		border-left: 4px solid;
		border-radius: 20px;
		bottom: 36.5px;
		left: 24.6px;
  	}
  	.ab148{
  		height: 17px;
		width: 17px;
		border: 6.5px solid;
		border-top: none;
		border-right: none;
		bottom: 165px;
		left: 14.75px;
		transform: rotate(315deg);
  	}
  	.ab149{
		height: 110px;
		width: 20px;
		border: 6.5px solid;
		border-bottom: none;
		bottom: 176px;
		left: 9.5px;
  	}
  	.ab1410{
		height: 40px;
		width: 40px;
		background: yellow;
		border-left: 7px solid;
		transform: rotate(315deg);
		bottom: 270px;
		left: 17px;
  	}
  	.ab1411{
  		height: 82px;
		width: 0px;
		border-left: 4px solid;
		border-radius: 20px;
		bottom: 192px;
		left: 24px;
  	}
  	.ab1412{
  		height: 20px;
		width: 26.5px;
		background: yellow;
		border: 6.5px solid;
		border-left: none;
		bottom: 36.5px;
		left: 10px;
  	}
  	.ab1413{
  		height: 15px;
		width: 60px;
		border: 6.5px solid;
		border-bottom: none;
		left: 36.5px;
		bottom: 48px;
  	}
  	.ab1414{
		height: 20px;
		width: 80px;
		border: 6.5px solid;
		border-right: none;
		left: 36.5px;
		bottom: 10px;
  	}
  	.ab1415{
  		height: 17px;
		width: 17px;
		border: 6.5px solid;
		border-top: none;
		border-right: none;
		left: 111px;
		bottom: 14.75px;
		transform: rotate(225deg);
  	}
  	.ab1416{
  		height: 15px;
		width: 15px;
		border: 6.5px solid;
		left: 136px;
		bottom: 13px;
		transform: rotate(135deg);
  	}
  	.ab1417{
  		height: 0px;
		width: 82px;
		border-bottom: 4px solid;
		border-radius: 20px;
		left: 36.5px;
		bottom: 24.6px;
  	}
  	.ab1418{
  		height: 17px;
		width: 17px;
		border: 6.5px solid;
		border-top: none;
		border-right: none;
		left: 165px;
		bottom: 14.75px;
		transform: rotate(45deg);
  	}
  	.ab1419{
		height: 20px;
		width: 110px;
		border: 6.5px solid;
		border-left: none;
		left: 176px;
		bottom: 9.5px;
  	}
  	.ab1420{
		height: 40px;
		width: 40px;
		background: yellow;
		border-bottom: 7px solid;
		transform: rotate(-315deg);
		left: 270px;
		bottom: 17px;
  	}
  	.ab1421{
  		height: 0px;
		width: 82px;
		border-bottom: 4px solid;
		border-radius: 20px;
		left: 192px;
		bottom: 24px;
  	}
  	.ab1422{
  		height: 26.5px;
		width: 20px;
		background: yellow;
		border: 6.5px solid;
		border-bottom: none;
		left: 36.5px;
		bottom: 10px;
  	}
  	.ab14_1{
  		position: absolute;
  		top: 0;
  		right: 0;
  		transform: rotate(180deg);
  	}
  	.ab14_2{
  		position: absolute;
  		bottom: 0;
  		left: 0;
  	}
	.par{
		position: absolute;
		height: 150px;
		width: 200px;
		left: 85px;
		top: 100px;
	}

Lorem ipsum

Lorem ipsum dolor...

HTML 15

<div class="ab_15">
	<div class="par_15">
		<h1>Lorem ipsum</h1><br>
		Lorem ipsum dolor...
	</div>
	<div class="ab15_1">
		<div class="ab151" id="as15"></div>
		<div class="ab152" id="as15"></div>
		<div class="ab153" id="as15"></div>
		<div class="ab154" id="as15"></div>
		<div class="ab155" id="as15"></div>
		<div class="ab156" id="as15"></div>
		<div class="ab157" id="as15"></div>
	</div>
	<div class="ab15_2">
		<div class="ab151" id="as15"></div>
		<div class="ab152" id="as15"></div>
		<div class="ab153" id="as15"></div>
		<div class="ab154" id="as15"></div>
		<div class="ab155" id="as15"></div>
		<div class="ab156" id="as15"></div>
		<div class="ab157" id="as15"></div>
	</div>
</div>

CSS 15


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_15{
	height: 350px;
	width: 280px;
	background:yellow;
	padding: 30px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as15{
	border-color: red;
	position: absolute;
  }
  .ab151{
	height: 200px;
	width: 40px;
	border: 3.5px solid;
	border-right: none;
	border-bottom: none;
	top: 50px;
	left: 10px;
  }
  .ab152{
  	height: 180px;
	width: 1px;
	border-left: 3.5px solid;
	top: 63px;
	left: 22px;
  }
  .ab153{
  	height: 40px;
	width: 200px;
	border: 3.5px solid;
	border-right: none;
	border-bottom: none;
	left: 50px;
	top: 10px;
  }
  .ab154{
	height: 1px;
	width: 180px;
	border-bottom: 3.5px solid;
	left: 63px;
	top: 20px;
  }
  .ab155{
  	height: 25px;
	width: 25px;
	border: 3.5px solid;
	left: 10px;
	top: 10px;			
  }
  .ab156{
  	height: 28px;
	width: 20px;
	background: yellow;
	transform: rotate(55deg);
	left: 238px;
	top: 12px;			
  }
  .ab157{
  	height: 28px;
	width: 20px;
	background: yellow;
	transform: rotate(55deg);
	left: 12px;
	top: 238px;
  }
  .ab15_2{
  	position: absolute;
  	transform: rotate(180deg);
	bottom: 0px;
	right: 0px;			
  }
  .par_15{
	position: absolute;
	height: 150px;
	width: 220px;
	margin: 15px 30px;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 16

<div class="ab_16">
	<div class="par_16">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...			
	</div>
	<div class="ab16_1">
		<div class="ab161" id="as16"></div>
		<div class="ab162" id="as16"></div>
		<div class="ab163" id="as16"></div>
		<div class="ab164" id="as16"></div>
		<div class="ab165" id="as16"></div>
		<div class="ab166" id="as16r"></div>
		<div class="ab167" id="as16r"></div>
		<div class="ab168" id="as16r"></div>
		<div class="ab169" id="as16r"></div>
		<div class="ab1610" id="as16r"></div>
	</div>
	<div class="ab16_2">
		<div class="ab161" id="as16"></div>
		<div class="ab162" id="as16"></div>
		<div class="ab163" id="as16"></div>
		<div class="ab164" id="as16"></div>
		<div class="ab165" id="as16"></div>
		<div class="ab166" id="as16r"></div>
		<div class="ab167" id="as16r"></div>
		<div class="ab168" id="as16r"></div>
		<div class="ab169" id="as16r"></div>
		<div class="ab1610" id="as16r"></div>
	</div>		
</div>

CSS 16


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_16{
	height: 350px;
	width: 250px;
	background:yellow;
	padding: 35px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as16{
	border-color: black;
	position: absolute;
  }
  .ab161{
	height: 20px;
	width: 20px;
	border: 5px solid;
	top: 10px;
	left: 10px;
  }
  .ab162{
  	height: 280px;
	width: 280px;
	border: 5px solid;
	border-right: none;
	border-bottom: none;			
	top: 22.5px;
	left: 22.5px;
  }
  .ab163{
  	height: 120px;
	width: 120px;
	border: 5px solid;
	border-bottom: none;
	border-right: none;
	top: 35px;
	left: 35px;
  }
  .ab164{
	height: 150px;
	width: 60px;
	border: 5px solid;
	border-bottom: none;
	border-right: none;
	top: 50px;
	left: 10px;
  }
  .ab165{
  	height: 60px;
	width: 150px;
	border: 5px solid;
	border-bottom: none;
	border-right: none;
	left: 50px;
	top: 10px;
  }
  #as16r{
  	position: absolute;
  	height: 10px;
	width: 7px;
	background: yellow;
  }
  .ab166{  			
	top: 10px;
	left: 200px;
	transform: rotate(45deg);
  }
  .ab167{  			
	top: 22.5px;
	left: 302.5px;
	transform: rotate(45deg);
  }
  .ab168{			
	top: 35px;
	left: 155px;
	transform: rotate(45deg);
  }
  .ab169{  			
	top: 70px;
	left: 50px;
	transform: rotate(45deg);
  }
  .ab1610{  			
	top: 50px;
	left: 70px;
	transform: rotate(45deg);
  }
  .ab16_2{
  	position: absolute;
  	bottom: 0;
  	right: 0;
  	transform: rotate(180deg);
  }
  .par_16{
	position: absolute;
	height: 150px;
	width: 200px;
	margin: 30px 25px;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 17

<div class="ab_17">
	<div class="par_17">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
		<div class="ab171" id="as17"></div>
		<div class="ab172" id="as17"></div>
		<div class="ab173" id="as17"></div>
		<div class="ab174" id="as17"></div>
		<div class="ab175" id="as17"></div>
		<div class="ab176" id="as17"></div>
		<div class="ab177" id="as17"></div>				
</div>

CSS 17


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_17{
	height: 350px;
	width: 350px;
	background:yellow;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as17{
	position: absolute;
  }
  .ab171{
	height: 240px;
	width: 240px;
	border: 3.5px blue solid;
	top: 51.5px;
	left: 51.5px;
  }
  .ab172{
	height: 230px;
	width: 230px;
	border: 3.5px blue solid;
	top: 56.5px;
	left: 56.5px;
  }
  .ab173{
	height: 220px;
	width: 220px;
	border: 3.5px blue solid;
	top: 61.5px;
	left: 61.5px;
  }
  .ab174{
	height: 240px;
	width: 240px;
	border: 3.5px blue solid;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(45deg);
  }
  .ab175{
	height: 230px;
	width: 230px;
	border: 3.5px blue solid;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(45deg);
  }
  .ab176{
	height: 220px;
	width: 220px;
	border: 3.5px blue solid;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(45deg);
  }
  .par_17{
  	position: absolute;
  	height: 150px;
  	width: 150px;
  	font-size: 13.5px;
  	margin: 85px 80px 80px 110px;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 18

<div class="ab_18">
	<div class="par_18">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
		<div class="ab181" id="as18"></div>
		<div class="ab182" id="as18"></div>
		<div class="ab183" id="as18"></div>
		<div class="ab184" id="as18"></div>
		<div class="ab185" id="as18"></div>
		<div class="ab186" id="as18"></div>
		<div class="ab187" id="as18"></div>
		<div class="ab188" id="as18"></div>
		<div class="ab189" id="as18"></div>
		<div class="ab1810" id="as18"></div>
		<div class="ab1811" id="as18"></div>
		<div class="ab1812" id="as18"></div>
		<div class="ab1813" id="as18"></div>
		<div class="ab1814" id="as18"></div>				
</div>

CSS 18


  *{
  	margin: 0px;
  	padding: 0px;
  }	
  .ab_18{
	height: 350px;
	width: 350px;
	background:yellow;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as18{
	position: absolute;
	border: 3.5px blue solid;
	border-top: none;
	border-bottom: none;
	border-radius: 50px;
  }
  .ab181{
	height: 240px;
	width: 240px;			
	top: 51.5px;
	left: 51.5px;
  }
  .ab182{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(15deg);
  }
  .ab183{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(25deg);
  }
  .ab184{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(35deg);
  }
  .ab185{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(45deg);
  }
  .ab186{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(55deg);
  }
  .ab187{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(65deg);
  }
  .ab188{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(75deg);
  }
  .ab189{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(85deg);
  }
  .ab1810{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(95deg);
  }
  .ab1811{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(105deg);
  }
  .ab1812{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(115deg);
  }
  .ab1813{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(125deg);
  }
  .ab1814{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(135deg);
  }
  .par_18{
  	position: absolute;
  	height: 150px;
  	width: 150px;
  	font-size: 13.5px;
  	margin: 85px 80px 80px 110px;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 19

<div class="ab_19">
	<div class="par19">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
	<div class="ab19_1">
		<div class="ab191" id="as19"></div>
		<div class="ab192" id="as19"></div>
		<div class="ab193" id="as19"></div>
		<div class="ab194" id="as19"></div>					
	</div>
	<div class="ab19_2">
		<div class="ab191" id="as19"></div>
		<div class="ab192" id="as19"></div>
		<div class="ab193" id="as19"></div>
		<div class="ab194" id="as19"></div>					
	</div>		
</div>

CSS 19


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_19{
	height: 350px;
	width: 250px;
	background:yellow;
	padding: 35px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as19{
	border-left: 4px red solid;
	border-radius: 3px;
	position: absolute;
  }
  .ab191{
	height: 200px;
	width: 200px;
	top: 30px;
	left: 10px;
  }
  .ab192{
  	height: 200px;
	width: 200px;
	top: 40px;
	left: 20px;
  }
  .ab193{
  	height: 200px;
	width: 200px;
	top: 10px;
	left: 30px;
	transform: rotate(90deg);
  }
  .ab194{
	height: 200px;
	width: 200px;
	top: 20px;
	left: 40px;
	transform: rotate(90deg);
  }
  .ab195{
  	height: 146px;
	width: 146px;
	bottom: 13px;
	right: 13px;
	transform: rotate(180deg);
  }
  .ab196{
  	height: 180px;
	width: 100px;
	bottom: 22px;
	right: 22px;
	transform: rotate(180deg);
  }
  .ab19_2{
  	position: absolute;
  	bottom: 0;
  	right: 0;
  	transform: rotate(180deg);
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 20

<div class="ab_20">
	<div class="par_20">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
	<div class="ab20_1">
		<div class="ab201" id="as20"></div>
		<div class="ab202" id="as20"></div>
		<div class="ab203" id="as20"></div>
		<div class="ab204" id="as20"></div>
		<div class="ab205" id="as20"></div>
		<div class="ab206" id="as20"></div>
		<div class="ab207" id="as20"></div>
		<div class="ab208" id="as20"></div>
		<div class="ab209" id="as20"></div>
		<div class="ab2010" id="as20"></div>
	</div>
	<div class="ab20_2">
		<div class="ab201" id="as20"></div>
		<div class="ab202" id="as20"></div>
		<div class="ab203" id="as20"></div>
		<div class="ab204" id="as20"></div>
		<div class="ab205" id="as20"></div>
		<div class="ab206" id="as20"></div>
		<div class="ab207" id="as20"></div>
		<div class="ab208" id="as20"></div>
	</div>		
</div>

CSS 20


  *{
  	margin: 0px;
  	padding: 0px;
  }		
  .ab_20{
	height: 350px;
	width: 250px;
	background:yellow;
	padding: 35px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as20{
	border-color: black;
	border-radius: 3px;
	position: absolute;
  }
  .ab201{
	height: 24px;
	width: 190px;
	border-top: 4px solid;
	border-left: 4px solid;
	top: 10px;
	left: 60px;
  }
  .ab202{
  	height: 24px;
	width: 180px;
	border-top: 4px solid;
	border-left: 4px solid;
	top: 20px;
	left: 70px;
  }
  .ab203{
  	height: 20px;
	width: 20px;
	border: 4px solid;
	top: 10px;
	left: 10px;
  }
  .ab204{
	height: 20px;
	width: 20px;
	border: 4px solid;
	top: 20px;
	left: 20px;
  }
  .ab205{
  	height: 24px;
	width: 24px;
	border-top: 4px solid;
	border-left: 4px solid;
	top: 34px;
	left: 34px;
  }
  .ab206{
	height: 24px;
	width: 24px;
	border-top: 4px solid;
	border-left: 4px solid;
	top: 44px;
	left: 44px;
  }
  .ab207{
	height: 190px;
	width: 24px;
	border-top: 4px solid;
	border-left: 4px solid;
	top: 60px;
	left: 10px;
  }
  .ab208{
  	height: 180px;
	width: 24px;
	border-top: 4px solid;
	border-left: 4px solid;
	top: 70px;
	left: 20px;
  }
  .ab20_2{
  	transform: rotate(180deg);
  	position: absolute;
  	bottom: 0;
  	right: 0;
  }
  .par_20{
  	position: absolute;
  	height: 250px;
  	width: 200px;
  	margin: 20px;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 21

<div class="ab_21">
	<div class="par_21">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
	<div class="ab21_1">
		<div class="ab211" id="as21"></div>
		<div class="ab212" id="as21"></div>
		<div class="ab213" id="as21"></div>
		<div class="ab214" id="as21"></div>
		<div class="ab215" id="as21"></div>
	</div>
	<div class="ab21_2">
		<div class="ab211" id="as21"></div>
		<div class="ab212" id="as21"></div>
		<div class="ab213" id="as21"></div>
		<div class="ab214" id="as21"></div>
		<div class="ab215" id="as21"></div>
	</div>
</div>

CSS 21


  *{
  	margin: 0px;
  	padding: 0px;
  }  		
  .ab_21{
	height: 350px;
	width: 250px;
	background:yellow;
	padding: 35px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as21{
	border-color: darkgoldenrod;
	position: absolute;
  }
  .ab211{
	height: 200px;
	width: 200px;
	border-top: 7px solid;
	border-left: 7px solid;
	top: 27px;
	left: 27px;
  }
  .ab212{
  	height: 30px;
	width: 30px;
	border: 7px solid;
	top: 10px;
	left: 10px;
  }
  .ab213{
  	height: 20px;
	width: 20px;
	border-top: 7px solid;
	border-left: 7px solid;
	top: 46px;
	left: 46px;
  }
  .ab214{
	height: 30px;
	width: 80px;
	border-top: 7px solid;
	border-left: 7px solid;
	top: 10px;
	left: 66px;
  }
  .ab215{
  	height: 80px;
	width: 30px;
	border-top: 7px solid;
	border-left: 7px solid;
	top: 66px;
	left: 10px;
  }
  .ab21_2{
  	transform: rotate(180deg);
  	position: absolute;
  	bottom: 0;
  	right: 0;
  }
  .par_21{
  	width: 200px;
  	position: absolute;
  	margin: 22px 25px;
  }

Lorem ipsum

Lorem ipsum dolor...

HTML 22


<div class="ab_22">
	<div class="par_22">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
		<div class="ab221" id="as22"></div>
		<div class="ab222" id="as22"></div>
		<div class="ab223" id="as22"></div>
		<div class="ab224" id="as22"></div>
		<div class="ab225" id="as22"></div>
		<div class="ab226" id="as22"></div>
		<div class="ab227" id="as22"></div>
		<div class="ab228" id="as22"></div>
		<div class="ab229" id="as22"></div>
		<div class="ab2210" id="as22"></div>
		<div class="ab2211" id="as22"></div>
		<div class="ab2212" id="as22"></div>
		<div class="ab2213" id="as22"></div>
		<div class="ab2214" id="as22"></div>
		<div class="ab2215" id="as22"></div>
		<div class="ab2216" id="as22"></div>
		<div class="ab2217" id="as22"></div>
		<div class="ab2218" id="as22"></div>
		<div class="ab2219" id="as22"></div>
		<div class="ab2220" id="as22"></div>
		<div class="ab2221" id="as22"></div>
		<div class="ab2222" id="as22"></div>
		<div class="ab2223" id="as22"></div>
		<div class="ab2224" id="as22"></div>		
</div>

CSS 22


    	
  	.ab_22{
		height: 350px;
		width: 350px;
		background:yellow;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as22{
		position: absolute;
		border: 3.5px blue solid;
		border-top: none;
		border-bottom: none;
		border-radius: 80px;	/*	< 	and 	>border-radius 	*/
	}
	.ab221{
		height: 240px;
		width: 240px;			
		top: 51.5px;
		left: 51.5px;
  	}
  	.ab222{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(15deg);
  	}
  	.ab223{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(25deg);
  	}
  	.ab224{
		height: 240px;
		width: 240px;
		top: 51.5px;
		left: 51.5px;
		transform: rotate(35deg);
  	}
  	.ab225{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(45deg);
  	}
  	.ab226{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(55deg);
  	}
  	.ab227{
		height: 240px;
		width: 240px;
		top: 51.5px;
		left: 51.5px;
		transform: rotate(65deg);
  	}
  	.ab228{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(75deg);
  	}
  	.ab229{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(85deg);
  	}
  	.ab2210{
		height: 240px;
		width: 240px;
		top: 51.5px;
		left: 51.5px;
		transform: rotate(95deg);
  	}
  	.ab2211{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(105deg);
  	}
  	.ab2212{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(115deg);
  	}
  	.ab2213{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(125deg);
  	}
  	.ab2214{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(135deg);
  	}
  	.ab2215{
		height: 240px;
		width: 240px;			
		top: 51.5px;
		left: 51.5px;
		transform: rotate(145deg);
  	}
  	.ab2216{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(155deg);
  	}
  	.ab2217{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(165deg);
  	}
  	.ab2218{
		height: 240px;
		width: 240px;
		top: 51.5px;
		left: 51.5px;
		transform: rotate(175deg);
  	}
  	.ab2219{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(185deg);
  	}
  	.ab2220{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(195deg);
  	}
  	.ab2221{
		height: 240px;
		width: 240px;
		top: 51.5px;
		left: 51.5px;
		transform: rotate(205deg);
  	}
  	.ab2222{
		height: 230px;
		width: 230px;
		top: 56.5px;
		left: 56.5px;
		transform: rotate(215deg);
  	}
  	.ab2223{
		height: 220px;
		width: 220px;
		top: 61.5px;
		left: 61.5px;
		transform: rotate(225deg);
  	}
  	.ab2224{
		height: 240px;
		width: 240px;
		top: 51.5px;
		left: 51.5px;
		transform: rotate(235deg);
  	}
  	.par_22{
  		position: absolute;
  		height: 150px;
  		width: 150px;
  		font-size: 13.5px;
  		margin: 85px 80px 80px 110px;
  	}

Lorem ipsum

Lorem ipsum dolor...

HTML 23

				
<div class="ab_23">				
	<div class="ab23_1">
		<div class="ab231" id="as23"></div>
		<div class="ab232" id="as23"></div>
		<div class="ab233" id="as23">
			<div class="par_23">
				<h1>Happy Journey</h1>
			</div>
		</div>
		<div class="ab234" id="as23"></div>
		<div class="ab235" id="as23"></div>
		<div class="ab236" id="as23"></div>
		<div class="ab237" id="as23"></div>
	</div>		
</div>

CSS 23


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_23{
  	height: 300px;
  	width: 300px;
  	background:none;
  	padding: 30px;
  	color: black;
  	position: relative;
  	overflow: hidden;
  	text-align: justify;
  }
  #as23{
  	background: yellow;
  	position: absolute;
  }
  .ab231{
  	border: 7px red double;
  	height: 300px;
  	width: 175px;
  	margin: -5.5px 57.5px;
  	border-radius: 70px;
    }
    .ab232{
    	border: 7px red double;
    	height: 175px;
  	width: 300px;
  	margin: 57.5px -5.5px;
  	border-radius: 70px;
    }
    .ab233{
    	border: 7px red double;
    	height: 250px;
  	width: 250px;
  	margin: 19px;
  	transform: rotate(90deg);
  	border-radius: 70px;
    }
    .ab234{
    	border-top: 7px red double;
    	border-left: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 24px;
   }
   .ab235{
    	border-top: 7px red double;
    	border-right: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 24px 0px 0px 200px;
   }
   .ab236{
    	border-bottom: 7px red double;
    	border-left: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 200px 0px 0px 24px;
   }
   .ab237{
    	border-bottom: 7px red double;
    	border-right: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 200px 0px 0px 200px;
   } 		
    .par_23{
    	width: 200px;
    	height: 70px;
    	position: absolute;
    	margin: 40px 20px;
    	transform: rotate(-90deg);
    }

Happy Journey

HTML 24

<div class="ab_24">	
	<div class="ab24_1">
		<div class="ab241" id="as24"></div>
		<div class="ab242" id="as24"></div>
		<div class="ab243" id="as24">
			<div class="par_24">
				<h1>New Learning Projects</h1>
			</div>
		</div>
		<div class="ab244" id="as24"></div>
		<div class="ab245" id="as24"></div>
	</div>		
</div>

CSS 24


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_24{
  	height: 300px;
  	width: 300px;
  	background:none;
  	padding: 30px;
  	color: black;
  	position: relative;
  	overflow: hidden;
  	text-align: justify;
  }
  #as24{
  	background: yellow;
  	position: absolute;
  }		
    .ab241{
    	border: 7px red double;
    	height: 260px;
  	width: 260px;
  	margin: 14px;
  	transform: rotate(90deg);
  	
    }
    .ab242{
    	border-top: 7px red double;
    	border-left: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 24px;
   }
   .ab243{
    	border-top: 7px red double;
    	border-right: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 24px 0px 0px 200px;
   }
   .ab244{
    	border-bottom: 7px red double;
    	border-left: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 200px 0px 0px 24px;
   }
   .ab245{
    	border-bottom: 7px red double;
    	border-right: 7px red double;
    	height: 70px;
  	width: 70px;
  	margin: 200px 0px 0px 200px;
   } 		
    .par_24{
    	width: 200px;
    	height: 70px;
    	position: absolute;
    	margin: 80px -150px;  			
    }

New Learning Projects

HTML 25

<div class="ab_25">				
	<div class="ab25_1">
		<div class="ab251" id="as25">
			<div class="par_25">
				<h1 style="margin-top:80px">
					Insert Picture
					<br>
				</h1>
			</div>
		</div>
		<div class="ab252" id="as25"></div>
		<div class="ab253" id="as25"></div>
		<div class="ab254" id="as25"></div>
		<div class="ab255" id="as25"></div>
	</div>		
</div>

CSS 25


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_25{
	height: 300px;
	width: 300px;
	padding: 30px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as25{
	position: absolute;
  }		
  .ab251{
  	border: 7px red double;
  	background: yellow;
  	height: 260px;
	width: 260px;
	margin: 14px;
	border-radius: 20px;						
  }
  .ab252{
  	border-top: 7px red double;
  	border-left: 7px red double;
  	height: 70px;
	width: 70px;
	border-radius: 20px;
	margin: 24px;
 }
 .ab253{
  	border-top: 7px red double;
  	border-right: 7px red double;
  	height: 70px;
	width: 70px;
	border-radius: 20px;
	margin: 24px 0px 0px 200px;
 }
 .ab254{
  	border-bottom: 7px red double;
  	border-left: 7px red double;
  	height: 70px;
	width: 70px;
	border-radius: 20px;
	margin: 200px 0px 0px 24px;
 }
 .ab255{
  	border-bottom: 7px red double;
  	border-right: 7px red double;
  	height: 70px;
	width: 70px;
	border-radius: 20px;
	margin: 200px 0px 0px 200px;
 } 		
  .par_25{
  	width: 200px;
  	height: 200px;
  	border: 2px red solid;
  	position: absolute;
  	margin: 30px 40px;
  	transform: translate(-10px);		
  }

Insert Picture

HTML 26

<div class="ab_26">				
	<div class="ab26_1">
		<div class="ab261" id="as26">
			<div class="par_26">
				<h1>Happy Journey</h1>
			</div>
		</div>
		<div class="ab262" id="as26"></div>
		<div class="ab263" id="as26"></div>
		<div class="ab264" id="as26"></div>
		<div class="ab265" id="as26"></div>
	</div>		
</div>

CSS 26


  *{
  	margin: 0px;
  	padding: 0px;
  }
  .ab_26{
	height: 300px;
	width: 300px;
	padding: 30px;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as26{
	background: yellow;
	position: absolute;
  }		
  .ab261{
  	border: 7px red double;
  	height: 260px;
	width: 260px;
	margin: 14px;
	border-radius: 50px;
  }
  .ab262{
  	border-top: 7px red double;
  	border-left: 7px red double;
  	height: 70px;
	width: 70px;
	margin: 0px;
	border-radius: 20px;
 }
 .ab263{
  	border-top: 7px red double;
  	border-right: 7px red double;
  	height: 70px;
	width: 70px;
	margin: 0px 0px 0px 224px;
	border-radius: 20px;
 }
 .ab264{
  	border-bottom: 7px red double;
  	border-left: 7px red double;
  	height: 70px;
	width: 70px;
	margin: 224px 0px 0px 0px;
	border-radius: 20px;
  }
  .ab265{
  	border-bottom: 7px red double;
  	border-right: 7px red double;
  	height: 70px;
	width: 70px;
	margin: 224px 0px 0px 224px;
	border-radius: 20px;
  }		
  .par_26{
  	width: 150px;
  	height: 150px;
  	border: 2px red solid;
  	position: absolute;
  	margin: 55px 65px;
  	transform: translate(-10px);
  }

Happy Journey

HTML 27

<div class="ab_27">
	<div class="par_27">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...				
	</div>
	<div class="ab27_1">
		<div class="ab271" id="as27"></div>
		<div class="ab272" id="as27"></div>
		<div class="ab273" id="as27"></div>
		<div class="ab274" id="as27"></div>
	</div>
	<div class="ab27_2">
		<div class="ab271" id="as27"></div>
		<div class="ab272" id="as27"></div>
		<div class="ab273" id="as27"></div>
		<div class="ab274" id="as27"></div>
	</div>		
</div>

CSS 27


  
  	.ab_27{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as27{
		border-color: red ;
		position: absolute;
	}
	.ab271{
		height: 170px;
		width: 170px;
		border-top: 7px solid;
		border-left: 7px solid;
		border-top-left-radius: 40px;
		top: 20px;
		left: 20px;
  	}
  	.ab272{
  		height: 220px;
		width: 220px;
		border-top: 7px solid;
		border-left: 7px solid;
		border-top-left-radius: 40px;
		top: 30px;
		left: 30px;
  	}
  	.ab273{
  		height: 40px;
		width: 40px;
		background: yellow;
		border: 7px solid;
		transform: rotate(45deg);
		top: 20px;
		left: 20px;
  	}
  	.ab274{
		height: 20px;
		width: 20px;
		background: red;
		transform: rotate(45deg);
		top: 37px;
		left: 37px;
  	}
  	.ab27_2{
  		position: absolute;
  		transform: rotate(180deg);
  		bottom: 0;
  		right: 0;
  	}
  	.par_27{
  		width: 170px; 			
  		position: absolute;
  		margin: 20px 40px;
  	}

Lorem ipsum

Lorem ipsum dolor...

HTML 28

<div class="ab_28">
	<div class="par_28">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
	<div class="ab28_1">
		<div class="ab281" id="as28"></div>
		<div class="ab282" id="as28"></div>
		<div class="ab283" id="as28"></div>
		<div class="ab284" id="as28"></div>
		<div class="ab285" id="as28"></div>
	</div>
	<div class="ab28_2">
		<div class="ab281" id="as28"></div>
		<div class="ab282" id="as28"></div>
		<div class="ab283" id="as28"></div>
		<div class="ab284" id="as28"></div>
		<div class="ab285" id="as28"></div>
	</div>	
</div>

CSS 28


  	.ab_28{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as28{
		border-color: red;
		position: absolute;
	}
	.ab281{
		height: 230px;
		width: 230px;
		border-top: 6px solid;
		border-left: 6px solid;
		top: 10px;
		left: 10px;
  	}
  	.ab282{
  		height: 100px;
		width: 100px;
		border-top: 6px solid;
		border-left: 6px solid;
		top: 25px;
		left: 25px;
  	}
  	.ab283{
  		height: 9px;
		width: 9px;
		background: yellow;
		border: 6px solid;
		top: 10px;
		left: 10px;
  	}
  	.ab28_2{
  		position: absolute;
  		transform: rotate(180deg);
  		bottom: 0;
  		right: 0;
  	}
  	.par_28{
  		width: 200px; 			
  		position: absolute;
  		margin: 25px;
  	}

Lorem ipsum

Lorem ipsum dolor...

HTML 29

<div class="ab_29">
	<div class="par_29">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor...
	</div>
	<div class="ab29_1">
		<div class="ab291" id="as29"></div>
		<div class="ab292" id="as29"></div>
		<div class="ab293" id="as29"></div>
		<div class="ab294" id="as29"></div>
		<div class="ab295" id="as29"></div>
	</div>
	<div class="ab29_2">
		<div class="ab291" id="as29"></div>
		<div class="ab292" id="as29"></div>
		<div class="ab293" id="as29"></div>
		<div class="ab294" id="as29"></div>
		<div class="ab295" id="as29"></div>
	</div>		
</div>

CSS 29


  	.ab_29{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as29{
		border-color: red;
		position: absolute;
	}
	.ab291{
		height: 190px;
		width: 60px;
		border-left: 6px solid;
		border-bottom: 6px solid;
		bottom: 70px;
		left: 10px;
  	}
  	.ab292{
  		height: 60px;
		width: 190px;
		border-left: 6px solid;
		border-bottom: 6px solid;
		left: 70px;
		bottom: 10px;
  	}
  	.ab293{
  		height: 190px;
		width: 190px;
		border-left: 6px solid;
		border-bottom: 6px solid;
		left: 30px;
		bottom: 30px;
  	}
  	.ab294{
		height: 35px;
		width: 35px;
		border: 6px solid;
		left: 10px;
		bottom: 10px;
  	}
  	.ab295{
  		height: 35px;
		width: 35px;
		border: 6px solid;
		left: 50px;
		bottom: 50px;
  	}
  	.ab29_1{
  	}
  	.ab29_2{
  		position: absolute;
  		top: 0;
  		right: 0;
  		transform: rotate(180deg);
  	}
  	.par_29{
  		width: 200px; 			
  		position: absolute;
  		margin: 55px 25px;
  	}

Lorem ipsum

Lorem ipsum dolor...

HTML 30

<div class="ab_30">				
	<div class="ab30_1">
		<div class="ab301" id="as30"></div>
		<div class="ab302" id="as30"></div>
		<div class="ab303" id="as30"></div>
		<div class="ab304" id="as30"></div>
		<div class="ab305" id="as30"></div>
		<div class="ab306" id="as30"></div>
		<div class="ab307" id="as30"></div>
		<div class="ab308" id="as30"></div>
		<div class="ab309" id="as30"></div>
	</div>		
</div>

CSS 30


	.ab_30{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as30{
		position: absolute;
	}
	.ab30_1{
		position: absolute;		/*	Main div	*/
		height: 70px;
		width: 300px;
		left: 10px;
		/*border: 2px darkred solid;*/
	}
	.ab301{
		height: 14px;
		width: 14px;
		border-radius: 14px;
		top: 28px;
		left: 0px;
		background: darkred;
	}
	.ab302{
		height: 14px;
		width: 14px;
		border-radius: 14px;
		top: 28px;
		right: 0px;
		background: darkred;
	}
	.ab303{
		width: 100px;
		top: 33px;
		left: 8px;
		border-bottom: 4px darkred solid;
	}
	.ab304{
		width: 100px;
		top: 33px;
		right: 10px;
		border-bottom: 4px darkred solid;
	}
	.ab305{
		height: 30px;
		width: 30px;
		top: 16px;
		left: 110px;
		transform: rotate(45deg);
		border: 4px darkred solid;
	}
	.ab306{
		height: 30px;
		width: 30px;
		top: 16px;
		left: 130px;
		transform: rotate(45deg);
		border: 4px darkred solid;
	}
	.ab307{
		height: 30px;
		width: 30px;
		top: 16px;
		left: 150px;
		transform: rotate(45deg);
		border: 4px darkred solid;
	}

HTML 31

<div class="ab_31">				
	<div class="ab31_1">
		<div class="ab311" id="as31"></div>
		<div class="ab312" id="as31"></div>
		<div class="ab313" id="as31"></div>
		<div class="ab314" id="as31"></div>
		<div class="ab315" id="as31"></div>
		<div class="ab316" id="as31"></div>
		<div class="ab317" id="as31"></div>
		<div class="ab318" id="as31"></div>
	</div>		
</div>

CSS 31


  	.ab_31{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as31{
		position: absolute;
	}
	.ab31_1{
		position: absolute;		/*	Main div	*/
		height: 70px;
		width: 300px;
		left: 10px;
		/*border: 2px darkred solid;*/
	}
	.ab311{
		width: 125px;
		top: 33px;
		left: -5px;
		border-bottom: 4px darkred solid;
	}
	.ab312{
		width: 125px;
		top: 33px;
		right: -5px;
		border-bottom: 4px darkred solid;
	}
	.ab313{
		height: 40px;
		width: 40px;
		top: 11px;
		left: 125px;
		transform: rotate(45deg);
		border: 4px darkred solid;
	}
	.ab314{
		height: 20px;
		width: 20px;
		top: 21.5px;
		left: 135px;
		transform: rotate(45deg);
		border: 4px darkred solid;
	}
	.ab315{
		height: 20px;
		width: 80px;
		top: 21px;
		left: 50px;
		border-top: 4px darkred solid;
		border-bottom: 4px darkred solid;
	}
	.ab316{
		height: 15.5px;
		width: 15.5px;
		top: 25.15px;
		left: 40.3px;
		transform: rotate(-45deg);
		border-top: 4px darkred solid;
		border-left: 4px darkred solid;
	}
	.ab317{
		height: 20px;
		width: 80px;
		top: 21px;
		right: 50px;
		border-top: 4px darkred solid;
		border-bottom: 4px darkred solid;
	}
	.ab318{
		height: 15.5px;
		width: 15.5px;
		top: 25.15px;
		right: 40.3px;
		transform: rotate(45deg);
		border-top: 4px darkred solid;
		border-right: 4px darkred solid;
	}

HTML 32

<div class="ab_32">				
	<div class="ab32_1">
		<div class="ab321" id="as32"></div>
		<div class="ab322" id="as32"></div>
		<div class="ab323" id="as32"></div>
		<div class="ab324" id="as32"></div>
		<div class="ab325" id="as32"></div>
		<div class="ab326" id="as32"></div>
		<div class="ab327" id="as32"></div>
		<div class="ab328" id="as32"></div>
		<div class="ab329" id="as32"></div>
		<div class="ab3210" id="as32"></div>
		<div class="ab3211" id="as32"></div>
		<div class="ab3212" id="as32"></div>
		<div class="ab3213" id="as32"></div>
		<div class="ab3214" id="as32"></div>
		<div class="ab3215" id="as32"></div>
		<div class="ab3216" id="as32"></div>
	</div>		
</div>

CSS 32


  	.ab_32{
		height: 350px;
		width: 290px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as32{
		position: absolute;
	}
	.ab32_1{
		position: absolute;		/*	Main div	*/
		height: 70px;
		width: 350px;
		left: 4px;
		border: 2px darkred solid;
	}
	.ab321{
		width: 140px;
		top: 33px;
		left: 10px;
		border-bottom: 3px darkred solid;
	}
	.ab322{
		width: 140px;
		top: 33px;
		right: 10px;
		border-bottom: 3px darkred solid;
	}
	.ab323{
		height: 25px;
		width: 25px;
		top: 19px;
		left: 160px;
		transform: rotate(45deg);
		border: 3px darkred solid;
	}
	.ab324{
		height: 7px;
		width: 7px;
		top: 28.5px;
		left: 169px;
		transform: rotate(45deg);
		border: 3px darkred solid;
	}
	.ab325{
		height: 10px;
		width: 105.5px;
		top: 26.5px;
		left: 50px;
		border-top: 3px darkred solid;
		border-bottom: 3px darkred solid;
	}
	.ab326{
		height: 8px;
		width: 8px;
		top: 29px;
		left: 44px;
		transform: rotate(-45deg);
		border-top: 3px darkred solid;
		border-left: 3px darkred solid;
	}
	.ab327{
		height: 10px;
		width: 105.5px;
		top: 26.5px;
		right: 50px;
		border-top: 3px darkred solid;
		border-bottom: 3px darkred solid;
	}
	.ab328{
		height: 8px;
		width: 8px;
		top: 29px;
		right: 44px;
		transform: rotate(45deg);
		border-top: 3px darkred solid;
		border-right: 3px darkred solid;
	}
	.ab329{
		height: 8px;
		width: 8px;
		top: 29px;
		left: 148px;
		transform: rotate(-45deg);
		border-top: 3px darkred solid;
		border-left: 3px darkred solid;
	}
	.ab3210{
		height: 8px;
		width: 8px;
		top: 29px;
		right: 148px;
		transform: rotate(45deg);
		border-top: 3px darkred solid;
		border-right: 3px darkred solid;
	}
	.ab3211{
		height: 6px;
		width: 6px;
		top: 28.5px;
		left: 0px;
		transform: rotate(45deg);
		border: 3px darkred solid;
	}
	.ab3212{
		height: 6px;
		width: 6px;
		top: 28.5px;
		right: 0px;
		transform: rotate(45deg);
		border: 3px darkred solid;
	}
	.ab3213{
		height: 15px;
		top: 15px;
		left: 174px;
		border-left: 3px darkred solid;
	}
	.ab3214{
		height: 15px;
		top: 40px;
		left: 174px;
		border-left: 3px darkred solid;
	}
	.ab3215{
		width: 15px;
		top: 33px;
		left: 155px;
		border-top: 3px darkred solid;
	}
	.ab3216{
		width: 15px;
		top: 33px;
		right: 155px;
		border-top: 3px darkred solid;
	}

HTML 33

<div class="ab_33">				
	<div class="ab33_1">
		<div class="ab331" id="as33"></div>
		<div class="ab332" id="as33"></div>
		<div class="ab333" id="as33"></div>
		<div class="ab334" id="as33"></div>
		<div class="ab335" id="as33"></div>
		<div class="ab336" id="as33"></div>
		<div class="ab337" id="as33">
			<h1>Heding</h1>
			<p>Nothing to see here...</p>
		</div>
	</div>		
</div>

CSS 33


	.ab_33{
		height: 350px;
		width: 290px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as33{
		position: absolute;
	}
	.ab33_1{
		position: absolute;		/*	Main div	*/
		height: 210px;
		width: 350px;
		left: 4px;
		border: 2px darkred solid;
	}
	.ab331{
		height: 195px;
		width: 335px;
		top: 5px;
		left: 5px;
		border: 3px black dashed;
	}
	.ab332{
		height: 50px;
		width: 50px;
		top: 5px;
		left: 5px;
		border-top: 3px black solid;
		border-left: 3px black solid;
	}
	.ab333{
		height: 50px;
		width: 50px;
		top: 5px;
		right: 5px;
		border-top: 3px black solid;
		border-right: 3px black solid;
	}
	.ab334{
		height: 50px;
		width: 50px;
		bottom: 5px;
		left: 5px;
		border-bottom: 3px black solid;
		border-left: 3px black solid;
	}
	.ab335{
		height: 50px;
		width: 50px;
		bottom: 5px;
		right: 5px;
		border-bottom: 3px black solid;
		border-right: 3px black solid;
	}
	.ab336{
		height: 195px;
		width: 70px;
		top: 5px;
		left: 140.5px;
		border-top: 3px black solid;
		border-bottom: 3px black solid;
	}
	.ab337{
		height: 160px;
		width: 300px;
		top: 12.5px;
		left: 12.5px;
		padding: 10px;
		border: 2px darkred solid;
	}

Heding

Nothing to see here...

HTML 34

<div class="ab_34">				
	<div class="ab34_1">
		<div class="ab341" id="as34"></div>
		<div class="ab342" id="as34"></div>
		<div class="ab343" id="as34"></div>
		<div class="ab344" id="as34"></div>
		<div class="ab345" id="as34"></div>
		<div class="ab346" id="as34"></div>
		<div class="ab347" id="as34"></div>
		<div class="ab348" id="as34"></div>
		<div class="ab349" id="as34"></div>
		<div class="ab3410" id="as34"></div>
		<div class="ab3411" id="as34"></div>
		<div class="ab3412" id="as34"></div>
		<div class="ab3413" id="as34"></div>
		<div class="ab3414" id="as34"></div>
		<div class="ab3415" id="as34"></div>
		<div class="ab3416" id="as34"></div>
		<div class="ab3417" id="as34"></div>
		<div class="ab3418">
			<h1>Heding</h1>
			<p>Nothing to see here...</p>
		</div>
	</div>		
</div>

CSS 34


  	.ab_34{
		height: 350px;
		width: 290px;
		background:yellow;
		padding: 40px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as34{
		border: 3.5px black solid;
		position: absolute;
	}
	.ab34_1{
		border: 3.5px black solid;		/*	 Main div	*/
		position: absolute;		
		height: 250px;
		width: 355px;
		left: 5px;		
	}
	.ab341{
		height: 227px;
		width: 333px;
		top: 8px;
		left: 8px;
	}
	.ab342{
		height: 15px;
		width: 15px;
		top: -3.5px;
		left: -3.5px;
	}
	.ab343{
		height: 8px;
		width: 8px;
		top: 15px;
		left: 15px;
	}
	.ab344{
		height: 8px;
		width: 8px;
		top: 15px;
		left: -3.5px;
	}
	.ab345{
		height: 8px;
		width: 8px;
		top: -3.5px;
		left: 15px;
	}
	.ab346{
		height: 15px;
		width: 15px;
		top: -3.5px;
		right: -3.5px;
	}
	.ab347{
		height: 8px;
		width: 8px;
		top: 15px;
		right: 15px;
	}
	.ab348{
		height: 8px;
		width: 8px;
		top: 15px;
		right: -3.5px;
	}
	.ab349{
		height: 8px;
		width: 8px;
		top: -3.5px;
		right: 15px;
	}
	.ab3410{
		height: 15px;
		width: 15px;
		bottom: -3.5px;
		right: -3.5px;
	}
	.ab3411{
		height: 8px;
		width: 8px;
		bottom: 15px;
		right: 15px;
	}
	.ab3412{
		height: 8px;
		width: 8px;
		bottom: 15px;
		right: -3.5px;
	}
	.ab3413{
		height: 8px;
		width: 8px;
		bottom: -3.5px;
		right: 15px;
	}
	.ab3414{
		height: 15px;
		width: 15px;
		bottom: -3.5px;
		left: -3.5px;
	}
	.ab3415{
		height: 8px;
		width: 8px;
		bottom: 15px;
		left: 15px;
	}
	.ab3416{
		height: 8px;
		width: 8px;
		bottom: 15px;
		left: -3.5px;
	}
	.ab3417{
		height: 8px;
		width: 8px;
		bottom: -3.5px;
		left: 15px;
	}
	.ab3418{
		position: absolute;
		height: 207px;
		width: 313px;
		top: 30px;
		left: 30px;
	}

Heding

Nothing to see here...

HTML 35

<div class="ab_35">				
	<div class="ab35_1">
		<div class="ab351" id="as35"></div>
		<div class="ab352" id="as35"></div>
		<div class="ab353" id="as35"></div>
		<div class="ab354" id="as35"></div>
		<div class="ab355" id="as35"></div>
		<div class="ab356" id="as35">
			<p>Nothing to see here...</p>
		</div>
	</div>		
</div>

CSS 35


	.ab_35{
		height: 350px;
		width: 290px;
		background:yellow;
		padding: 40px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as35{
		position: absolute;
	}
	.ab35_1{
		border: 2px black solid;		/*	 Main div	*/
		position: absolute;		
		height: 250px;
		width: 358px;
		left: 5px;		
	}
	.ab351{
  		border: 3.5px black solid;
		height: 225px;
		width: 301px;
		top: 9.5px;
		left: 25px;
  	}
	.ab352{
		border-top: 3.5px black solid;
		border-right: 3.5px black solid;
		height: 202px;
		width: 302px;
		top: 19.5px;
		right: 35px;
	}
	.ab353{
		border-bottom: 3.5px black solid;
		border-left: 3.5px black solid;
		height: 202px;
		width: 302px;
		bottom: 19.5px;
		left: 35px;
	}
  	.ab354{
		border-bottom: 3.5px black solid;
		border-left: 3.5px black solid;
		height: 100px;
		width: 100px;
		bottom: 30px;
		left: 45px;
	}		
  	.ab355{
		border-top: 3.5px black solid;
		border-right: 3.5px black solid;
		height: 100px;
		width: 100px;
		top: 30px;
		right: 45px;
	}
	.ab356{
		height: 182px;
		width: 282px;
		padding: 10px;
		top: 30px;
		left: 45px;
	}

Nothing to see here...

HTML 36

<div class="ab_36">					
	<div class="ab36_1">
		<div class="ab361" id="as36"></div>
		<div class="ab362" id="as36"></div>
		<div class="ab363" id="as36"></div>
		<div class="ab364" id="as36"></div>
		<div class="ab365" id="as36"></div>
		<div class="ab366" id="as36"></div>
		<div class="ab367" id="as36"></div>
		<div class="ab368" id="as36"></div>
		<div class="ab369" id="as36"></div>
		<div class="ab3610" id="as36"></div>
		<div class="ab3611" id="as36"></div>
		<div class="ab3612" id="as36"></div>
		<div class="ab3613" id="as36">
			<h4>Nothing to see here...</h4>
		</div>
	</div>
</div>

CSS 36

	.ab_36{
		height: 350px;
		width: 280px;
		background:yellow;
		padding: 40px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as36{
		border-color: black;
		position: absolute;
	}
	.ab36_1{
				/*	 Main div	*/
		position: absolute;		
		height: 250px;
		width: 340px;
		left: 9px;		
	}
	.ab361{
		height: 15px;
		width: 15px;
		border: 5px solid;
		top: 0px;
		left: 0px;
  	}
  	.ab362{
  		height: 15px;
		width: 15px;
		border: 5px solid;
		top: 0px;
		right: 0px;
  	}
  	.ab363{
  		height: 15px;
		width: 15px;
		border: 5px solid;
		bottom: 0px;
		right: 0px;
  	}
  	.ab364{
		height: 15px;
		width: 15px;
		border: 5px solid;
		bottom: 0px;
		left: 0px;
  	}
  	.ab365{
		height: 15px;
		width: 15px;
		border: 5px solid;
		border-right: none;
		border-bottom: none;
		top: 20px;
		left: 20px;
  	}
  	.ab366{
  		height: 15px;
		width: 15px;
		border: 5px solid;
		border-bottom: none;
		border-left: none;
		top: 20px;
		right: 19.7px;
  	}
  	.ab367{
  		height: 15px;
		width: 15px;
		border: 5px solid;
		border-top: none;
		border-left: none;
		bottom: 20px;
		right: 19.7px;
  	}
  	.ab368{
		height: 15px;
		width: 15px;
		border: 5px solid;
		border-top: none;
		border-right: none;
		bottom: 20px;
		left: 20px;
  	}
  	.ab369{
		height: 15px;
		width: 261px;
		border: 5px solid;
		border-bottom: none;
		left: 35px;
  	}
  	.ab3610{
		height: 170px;
		width: 19.7px;
		border: 5px solid;
		border-left: none;
		top: 35px;
		right: 0px;
  	}
  	.ab3611{
		height: 15px;
		width: 261px;
		border: 5px solid;
		border-top: none;
		left: 35px;
		bottom: 0px;
  	}
  	.ab3612{
		height: 170px;
		width: 20px;
		border: 5px solid;
		border-right: none;
		top: 35px;
		left: 0px;
  	} 
  	.ab3613{
		height: 185px;
		width: 280px;
		top: 30px;
		left: 30px;
  	}

Nothing to see here...

HTML 37

<div class="ab_37">					
	<div class="ab37_1">
		<div class="ab371" id="as37"></div>
		<div class="ab372" id="as37"></div>
		<div class="ab373" id="as37"></div>
		<div class="ab374" id="as37"></div>
		<div class="ab375" id="as37"></div>
		<div class="ab376" id="as37"></div>
		<div class="ab377" id="as37"></div>
		<div class="ab378" id="as37"></div>
	</div>
</div>

CSS 37

	.ab_37{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 40px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as37{
		border-color: black;
		position: absolute;
	}
	.ab371{
		height: 208px;
		width: 130px;
		border-top: 4px solid;
		border-left: 4px solid;
		top: 5px;
		left: 5px;
  	}
  	.ab372{
  		height: 192px;
		width: 122px;
		border-top: 4px solid;
		border-left: 4px solid;
		top: 13px;
		left: 13px;
  	}
  	.ab373{
		width: 50px;
		border-bottom: 4px solid;
		top: 217px;
		left: 5px;
  	}
  	.ab374{
		width: 42px;
		border-bottom: 4px solid;
		top: 209px;
		left: 13px;
  	}
  	.ab375{
		height: 208px;
		width: 130px;
		border-bottom: 4px solid;
		border-right: 4px solid;
		top: 5px;
		right: 5px;
  	}
  	.ab376{
  		height: 192px;
		width: 122px;
		border-bottom: 4px solid;
		border-right: 4px solid;
		top: 13px;
		right: 13px;
  	}
  	.ab377{
		width: 50px;
		border-top: 4px solid;
		top: 5px;
		right: 5px;
  	}
  	.ab378{
		width: 42px;
		border-top: 4px solid;
		top: 13px;
		right: 13px;
  	}

HTML 38

<div class="ab_38">					
	<div class="ab38_1">					
		<div class="ab381" id="as38s1"></div>
		<div class="ab382" id="as38s1"></div>
		<div class="ab383" id="as38s1"></div>
		<div class="ab384" id="as38s1"></div>
		<div class="ab385" id="as38"></div>
		<div class="ab386" id="as38"></div>
		<div class="ab387" id="as38"></div>
		<div class="ab388" id="as38"></div>
		<div class="ab389" id="as38">
			<h4>Nothing to see here...</h4>
		</div>					
	</div>
</div>

CSS 38


  	.ab_38{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as38{
		border: 3.5px black solid;
		position: absolute;
	}		
  	#as38s1{
  		height: 30px;
		width: 30px;
		border-top: 3px solid;
		border-left: 3px solid;
		border-color: black;
		position: absolute;
	} 		
  	.ab381{ 			
		top: 18px;
		left: 18px;
  	}
  	.ab382{ 			
		top: 18px;
		right: 18px;
		transform: rotate(90deg);
  	}
  	.ab383{ 			
		bottom: 18px;
		right: 18px;
		transform: rotate(180deg);
  	}
  	.ab384{ 			
		bottom: 18px;
		left: 18px;
		transform: rotate(270deg);
  	}  		
	.ab385{
		width: 218px;
		top: 20px;
		left: 47.5px;
  	}
  	.ab386{ 	
  		height: 320px;		
		top: 46.5px;
		right: 20px;
  	}
  	.ab387{ 			
		width: 218px;
		bottom: 20px;
		left: 47.5px;
  	}
  	.ab388{ 			
		height: 320px;		
		top: 46.5px;
		left: 20px;
  	}
  	.ab389{
  		height: 315px;			
		width: 215px;
		top: 50px;
		left: 50px;
  	}

Nothing to see here...

HTML 39

<div class="ab_39">
	<div class="par_39">
		<h1>Lorem ipsum</h1>
		<br>
		Lorem ipsum dolor......
	</div>
	<div class="ab391" id="as39"></div>
	<div class="ab392" id="as39"></div>
	<div class="ab393" id="as39"></div>
	<div class="ab394" id="as39"></div>
	<div class="ab395" id="as39"></div>
	<div class="ab396" id="as39"></div>
	<div class="ab397" id="as39"></div>
	<div class="ab398" id="as39"></div>
	<div class="ab399" id="as39"></div>
	<div class="ab3910" id="as39"></div>
	<div class="ab3911" id="as39"></div>
	<div class="ab3912" id="as39"></div>
	<div class="ab3913" id="as39"></div>
	<div class="ab3914" id="as39"></div>	
</div>

CSS 39

	
	.ab_39{
	height: 350px;
	width: 350px;
	background:yellow;
	color: black;
	position: relative;
	overflow: hidden;
	text-align: justify;
  }
  #as39{
	position: absolute;			/*	< 	and 	>	border-radius 	*/
	border-radius: 50px;
	border: 3px blue solid;
  }
  .ab391{
	height: 240px;
	width: 240px;			
	top: 51.5px;
	left: 51.5px;
  }
  .ab392{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(15deg);
  }
  .ab393{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(25deg);
  }
  .ab394{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(35deg);
  }
  .ab395{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(45deg);
  }
  .ab396{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(55deg);
  }
  .ab397{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(65deg);
  }
  .ab398{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(75deg);
  }
  .ab399{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(85deg);
  }
  .ab3910{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(95deg);
  }
  .ab3911{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(105deg);
  }
  .ab3912{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(115deg);
  }
  .ab3913{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(125deg);
  }
  .ab3914{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(135deg);
  }
  .ab3915{
	height: 240px;
	width: 240px;			
	top: 51.5px;
	left: 51.5px;
	transform: rotate(145deg);
  }
  .ab3916{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(155deg);
  }
  .ab3917{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(165deg);
  }
  .ab3918{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(175deg);
  }
  .ab3919{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(185deg);
  }
  .ab3920{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(195deg);
  }
  .ab3921{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(205deg);
  }
  .ab3922{
	height: 230px;
	width: 230px;
	top: 56.5px;
	left: 56.5px;
	transform: rotate(215deg);
  }
  .ab3923{
	height: 220px;
	width: 220px;
	top: 61.5px;
	left: 61.5px;
	transform: rotate(225deg);
  }
  .ab3924{
	height: 240px;
	width: 240px;
	top: 51.5px;
	left: 51.5px;
	transform: rotate(235deg);
  }
  .par_39{
  	position: absolute;
  	height: 150px;
  	width: 150px;
  	font-size: 13.5px;
  	margin: 85px 80px 80px 110px;
  }

Lorem ipsum

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

HTML 40

<div class="ab_40">					
	<div class="ab40_1">
		<div class="ab401" id="as40"></div>
		<div class="ab402" id="as40"></div>
		<div class="ab403" id="as40"></div>
		<div class="ab404" id="as40"></div>
		<div class="ab405" id="as40"></div>
		<div class="ab406" id="as40"></div>
		<div class="ab407" id="as40"></div>
		<div class="ab408" id="as40"></div>
		<div class="ab409" id="as40"></div>
		<div class="ab4010" id="as40"></div>
		<div class="ab4011" id="as40">
			<h4>Nothing to see here...</h4>
		</div>				
	</div>
</div>

CSS 40


  	.ab_40{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as40{
		border-color: black;
		position: absolute;
	}
	.ab401{
		height: 405px;
		width: 305px;
		border: 3px solid;
		top: 5px;
		left: 5px;
  	}
  	.ab402{
  		height: 50px;
		width: 50px;
		border-left: 3px solid;
		border-top: 3px solid;
		top: 13px;
		left: 13px;
  	}
  	.ab403{
  		height: 50px;
		width: 50px;
		border-right: 3px solid;
		border-top: 3px solid;
		top: 13px;
		right: 13px;
  	}
  	.ab404{
		height: 50px;
		width: 50px;
		border-right: 3px solid;
		border-bottom: 3px solid;
		bottom: 13px;
		right: 13px;
  	}
  	.ab405{
  		height: 50px;
		width: 50px;
		border-left: 3px solid;
		border-bottom: 3px solid;
		bottom: 13px;
		left: 13px;
  	}
  	.ab406{
  		height: 20px;
		width: 185px;
		border: 3px solid;
		border-top: none;
		top: 13px;
		left: 65px;
  	}
  	.ab407{
  		height: 287px;
		width: 20px;
		border: 3px solid;
		border-right: none;
		top: 65px;
		right: 13px;
  	}
  	.ab408{
  		height: 20px;
		width: 185px;
		border: 3px solid;
		border-bottom: none;
		bottom: 13px;
		left: 65px;
  	}
  	.ab409{
  		height: 287px;
		width: 20px;
		border: 3px solid;
		border-left: none;
		top: 65px;
		left: 13px;
  	}
  	.ab4010{
  		height: 370px;
		width: 270px;
		border: 3px solid;
		top: 22.5px;
		left: 22.5px;
  	}
  	.ab4011{
  		height: 326px;
		width: 226px;
		border: 3px solid;
		top: 44px;
		left: 44px;
  	}

Nothing to see here...

HTML 41

<div class="ab_41">
	<div class="par_41">
		<h1>Lorem ipsum</h1>
	</div>
	<div class="ab41_1">
		<div class="ab411" id="as41"></div>
		<div class="ab412" id="as41"></div>
		<div class="ab413" id="as41"></div>
		<div class="ab414" id="as41"></div>
		<div class="ab415" id="as41"></div>
		<div class="ab416" id="as41"></div>
	</div>
	<div class="ab41_2">
		<div class="ab411" id="as41"></div>
		<div class="ab412" id="as41"></div>
		<div class="ab413" id="as41"></div>
		<div class="ab414" id="as41"></div>
		<div class="ab415" id="as41"></div>
		<div class="ab416" id="as41"></div>
	</div>	
</div>

CSS 41

 		
  	.ab_41{
		height: 350px;
		width: 250px;
		background:yellow;
		padding: 35px;
		color: black;
		position: relative;
		overflow: hidden;
		text-align: justify;
	}
	#as41{
		border-bottom: 4px red solid;
		border-right: 4px red solid;
		position: absolute;
	}
	.ab411{
		height: 10px;
		width: 10px;
		top: 5px;
		left: 5px;
  	}
  	.ab412{
  		height: 80px;
		width: 80px;			
		top: 15px;
		left: 15px;
		transform: rotate(180deg);
  	}
  	.ab413{
  		height: 5px;
		width: 5px;
		top: 19px;
		left: 19px;
  	}
  	.ab414{
		height: 220px;
		width: 220px;
		top: 24px;
		left: 24px;
		transform: rotate(180deg);
  	}
  	.ab415{
  		height: 33px;
		width: 33px;
		top: 0px;
		left: 0px;
  	}
  	.ab416{
  		height: 240px;
		width: 240px;
		top: 33px;
		left: 33px;
		transform: rotate(180deg);
  	}
  	.ab41_2{
  		position: absolute;
  		bottom: 0px;
  		right: 0px;
  		transform: rotate(180deg);
  	}
  	.par_41{
  		position: absolute;
  		height: 325px;
  		width: 225px;
  		border: 2px black solid;
  		font-size: 13.5px;
  		margin: 10px;
  	}

Lorem ipsum

HTML & CSS 42

<div style="height: 250px;width: 300px;border: 3px solid red;position: relative">
  	<div style="position: absolute;height: 220px;width: 270px;border: 5px red solid;top: 10px;left: 10px">
  	</div>
  	<div style="position: absolute;height: 150px;width: 35px;border-right: 5px red solid;top: 50px;left: -10px">
  	</div>
    <div style="position: absolute;height: 35px;width: 200px;border-bottom: 5px red solid;top: -10px;left: 50px">
    </div>
    <div style="position: absolute;height: 150px;width: 35px;border-left: 5px red solid;top: 50px;right: -10px">
    </div>
    <div style="position: absolute;height: 35px;width: 200px;border-top: 5px red solid;left: 50px;bottom: -10px">  
   	</div>
    <div style="position: absolute;height: 10px;width: 20px;border-bottom: 5px red solid;left: 38px;top: 10px;transform: rotate(45deg)">
    </div>
     <div style="position: absolute;height: 10px;width: 20px;border-bottom: 5px red solid;right: 38px;top: 10px;transform: rotate(-45deg)">
    </div>
    <div style="position: absolute;height: 20px;width: 20px;border-left: 5px red solid;top: 41px;right: 1.5px;transform: rotate(45deg)">
    </div>
    <div style="position: absolute;height: 20px;width: 20px;border-bottom: 5px red solid; right: 4px;bottom: 39px;transform: rotate(45deg)">
    </div>
    <div style="position: absolute;height: 10px;width: 20px;border-top: 5px red solid;left: 38px;bottom: 10px;transform: rotate(-45deg)">
    </div>
    <div style="position: absolute;height: 10px;width: 20px;border-top: 5px red solid;right: 38px;bottom: 10px;transform: rotate(45deg)">
    </div>
    <div style="position: absolute;height: 20px;width: 20px;border-right: 5px red solid;top: 41px;left: 1.5px;transform: rotate(-45deg)">
    </div>
    <div style="position: absolute;height: 20px;width: 20px;border-right: 5px red solid; left: 1.5px;bottom: 41px;transform: rotate(45deg)">
    </div>
</div>

HTML & CSS 43

<div style="height: 550px;width: 355px;border: 3px solid red;position: relative">
	<div style="position: relative;height: 500px;width: 93%;background: yellow;border: 2px black solid;margin: 20px 10px;overflow: hidden">  
   		<div style="height: 100%;width: 100%;border: 1px black solid;overflow: hidden;position: absolute;">
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>
   			✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️<br/>    						
   		</div>
   		<div style="height: 448px;width: 85%;border: 1px black solid;overflow: hidden;margin: 25px;position: absolute;background: navajowhite;">
     		<p style="padding: 10px;">
     			Right Your Text.......
     		</p>
   		</div>
 	</div>
</div>

✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️
✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️✴️

Right Your Text.......

HTML & CSS 44


<div style="height: 550px;width: 355px;border: 3px solid red;position: relative">
	<div style="position: relative;height: 500px;width: 93%;background: yellow;border: 2px black solid;margin: 20px 10px;overflow: hidden">  
   		<div style="height: 100%;width: 100%;border: 1px black solid;overflow: hidden;position: absolute;">
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>    	
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>
   		💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠<br/>    	
   		</div>
   		<div style="height: 448px;width: 85%;border: 1px black solid;overflow: hidden;margin: 25px;position: absolute;background: navajowhite;">
    			<p style="padding: 10px;">
    				Right Your Text.......
    			</p>
   		</div>
 	</div>
 </div>

💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠
💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠💠

Right Your Text.......

HTML & CSS 45


<div style="height: 550px;width: 355px;border: 3px solid red;position: relative">
	<div style="position: relative;height: 500px;width: 93%;background: yellow;border: 2px black solid;margin: 20px 10px;overflow: hidden">  
   		<div style="height: 100%;width: 100%;border: 1px black solid;overflow: hidden;position: absolute;">
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>    			
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>
   			❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️<br/>    			
   		</div>
   		<div style="height: 448px;width: 85%;border: 1px black solid;overflow: hidden;margin: 25px;position: absolute;background: navajowhite;">
    			<p style="padding: 10px;">
    				Right Your Text.......
    			</p>
   		</div>
 	</div>
 </div>

❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️

Right Your Text.......

HTML & CSS 46


<div style="height: 550px;width: 355px;border: 3px solid red;position: relative">
	<div style="position: relative;height: 500px;width: 93%;background: yellow;border: 2px black solid;margin: 20px 10px;overflow: hidden">  
   		<div style="height: 100%;width: 100%;border: 1px black solid;overflow: hidden;position: absolute;">
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>
   			⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️<br/>    						
   		</div>
   		<div style="height: 448px;width: 85%;border: 1px black solid;overflow: hidden;margin: 25px;position: absolute;background: navajowhite;">
    			<p style="padding: 10px;">
    				Right Your Text.......
    			</p>
   		</div>
 	</div>
 </div>

⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️
⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️⚜️

Right Your Text.......

HTML & CSS 47


<div style="height: 550px;width: 355px;border: 3px solid red;position: relative">
	<div style="position: relative;height: 500px;width: 93%;background: yellow;border: 2px black solid;margin: 20px 10px;overflow: hidden">  
   		<div style="height: 100%;width: 100%;border: 1px black solid;overflow: hidden;position: absolute;">
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   			🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆<br/>
   		</div>
   		<div style="height: 448px;width: 85%;border: 1px black solid;overflow: hidden;margin: 25px;position: absolute;background: navajowhite;">
    			<p style="padding: 10px;">
    				Right Your Text.......
    			</p>
   		</div>
 	</div>
 </div>
			</pre>			
		</div>

🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆
🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆🔆

Right Your Text.......

HTML & CSS 48


			<div style="height: 530px;width: 355px;border: 3px solid red;position: relative">					
				<div style="position: relative;height: 500px;width: 93%;background: yellow;border: 0px black solid;margin: 15px 10px;overflow: hidden">
   					<div style="height: 800px;width: 900px;background-image: repeating-linear-gradient(to right, black 1%, red 5%); transform: rotate(45deg);margin: -200px -190px">    
   					</div>
   					<br/>
  					<div style="position: relative;height: 430px;width: 80%;background: white;margin: -393px 0px 0px 23px;transform: rotate3d(45deg);padding: 10px">
    				<p>
      				Right Your Paragraph......
    				</p>
  				</div>
 			</div>

Right Your Paragraph......

HTML & CSS 49


			<div style="height: 530px;width: 355px;border: 3px solid red;position: relative">				
			 	<div style="position: relative;height: 500px;width: 93%;background: yellow;border: 0px black solid;margin: 15px 10px;overflow: hidden;border-start-start-radius: 50px;border-end-end-radius: 30px;">   
   					<div style="height: 800px;width: 900px;background-image: repeating-linear-gradient(to right, black 1%, red 5%); transform: rotate(45deg);margin: -200px -190px">    
   					</div>
   					<br/>
  					<div style="position: relative;height: 430px;width: 80%;background: white;margin: -393px 0px 0px 23px;transform: rotate3d(45deg);padding: 10px;border-start-start-radius: 30px;border-end-end-radius: 30px">
    				<p style="padding: 20px;">
      					Right Your Paragraph......
    				</p>
  				</div>
  			</div>

Right Your Paragraph......

HTML & CSS 50


			<div style="height: 530px;width: 355px;border: 3px solid red;position: relative">				
			 	<div style="position: relative;height: 500px;width: 93%;background: none;border: 0px black solid;margin: 50px 10px;overflow: hidden;">     
    				<div class="animrt" style="position: absolute;height: 700px;width: 60%;background: blueviolet;border: 0px black solid;overflow: hidden;margin: -90px 35%;animation: animrt 4s linear infinite;">
    				</div>      
  					<div style="position: relative;height: 486px;width: 96%;background: navajowhite;border: 3px black solid;margin: 4px 4px;">
 					</div>
  				</div>
  			</div>

			JavaScript
		@keyframes animrt{
                            0%{
                                top: 0px;
                                left: 0px;
                            }
                            100% {
                                top: 0px;
                                left: 0px;
                                transform: rotate(360deg)
                            }
            }

Right Your Paragraph......

HTML & CSS 51

			        <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);overflow: hidden;">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 40px;text-align: justify;">
                                                 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.

                                    <div style="position: absolute;height: 200%;width: 200%;background-image: repeating-linear-gradient(to right, black 1%, red 5%);top: -100px;left: -180px;z-index: -1;transform: rotate(45deg);">
                                    </div>
                                    <div style="position: absolute;height: 90%;width: 90%;background: whitesmoke;top: 5%;left: 5%;z-index: -1;">
                                    </div>

                                </div>
                            </td>
                        </tr>
                    </table>

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Category

☰

WcCoder

Borders In HTML CSS And JavaScript

HTML 1

CSS 1

Lorem ipsum

HTML 2

CSS 2

Lorem ipsum

HTML 3

CSS 3

Lorem ipsum

HTML 4

CSS 4

Lorem ipsum

HTML 5

CSS 5

CODE

HTML 6

CSS 6

Lorem ipsum

HTML 7

CSS 7

Lorem ipsum

HTML 8

CSS 8

JavaScript 8

Heding

HTML 9

CSS 9

HTML 10

CSS 10

Lorem ipsum

HTML 11

CSS 11

Lorem ipsum

HTML 12

CSS 12

Lorem ipsum

HTML 13

CSS 13

Lorem ipsum

HTML 14

CSS 14

Lorem ipsum

HTML 15

CSS 15

Lorem ipsum

HTML 16

CSS 16

Lorem ipsum

HTML 17

CSS 17

Lorem ipsum

HTML 18

CSS 18

Lorem ipsum

HTML 19

CSS 19

Lorem ipsum

HTML 20

CSS 20

Lorem ipsum

HTML 21

CSS 21

Lorem ipsum

HTML 22

CSS 22

Lorem ipsum

HTML 23

CSS 23

Happy Journey

HTML 24

CSS 24

New Learning Projects

HTML 25

CSS 25

Insert Picture

HTML 26

NEXT
>