Apna Hai - W3 HTML CSS Courses Tutorials: Embed

Results for Embed

How To Blogger Contact Us Page creator

W3 HTML CSS Courses Tutorials July 04, 2022

How To Blogger Contact Us Page creator

Step 1
Layout >> Add a Gadget >> Contact Form

Step 2
Template >> Edit HTML Template
Jump to Wiget And click - ContactFrom1

Delete the code <b:includable id=’main’> </b:includable> This Code

Add The CSS Code

Press ctrl+f & Search "]]></b:skin>"
and after This Code Places

CSS

html

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="fm_name">Your Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div><div class="fm_email">E-mail Address *: <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear:both"></div><div class="fm_message">Message *: <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5">

IFrames Responsive for embedding webpages

W3 HTML CSS Courses Tutorials July 02, 2022

Embed website and pdf and more

An IFrame is HTML code that you simply will use to embed one HTML page, PDF page, another web site, or alternative web safe file into a another webpage inside a window

embedding website or Blogger Page

html

Or new Responsive Embedding Code
html

CSS Box Model CSS And Html

W3 HTML CSS Courses Tutorials May 22, 2019

Display box model

The CSS box model is essentially a box that is hidden around every HTML component. It consists of: border padding, margins, and actual content.
CSS box model is a container which contains multiple properties including Box-Model has multiple properties in CSS, Learn the HTML and CSS box model concept, outlining that every element on a page is a rectangular box, of which may include margins, padding, and borders, In CSS Box Model, every html element is considered as a rectangular box

Css box model
All HTML elements can be considered as box. In CSS, the term "box model" refers to the design and layout of the word.
The CSS box model is essentially a box that is hidden around every HTML component. It includes: margins, borders, padding and physical content. The picture below illustrates the box model:

Tha CSS Box Model

Explanation of different parts:
Content - The content of the box, where the text and the image appear
Padding - Clears an area around the content. Padding is transparent
Border - A border that is near the padding and content
Margins - Clears an area outside the premises. Margin is transparent
The box model allows to add a border around the elements and to position the objects.he objects.

Tha CSS Image Box Model

How To Creating 3D Button in HTML And CSS3 Your website or Blogger

W3 HTML CSS Courses Tutorials April 18, 2019

Creating 3D Button in HTML And CSS3

Create AN animated, three-dimensional button. to start out off, we have a tendency to care about making a fun expertise that works to its full potential within the browsers that support it, but degrades graciously within the browsers that don’t. In other words, if it isn’t totally supported, it shouldn’t look or behave as if it’s broken.

The syntax for CSS3 gradients is a small amount overwhelming at first, thus for this tutorial we’ll use a code generator to create the gradient. visit this CSS3 Gradient generator (or another one that you just realize through Google) and set 2 color stops to zero and a hundred victimisation rock bottom slider.

CSS

/* CSS Document */  /* DEMO 4 */  .a_demo_four {  background-color:#000000  font-family: 'Open Sans', sans-serif;  font-size:25px;  text-decoration:none;  color:#fff;  position:relative;  padding:14px 50px;  padding-right:50px;  background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, rgb(44,160,202)),  color-stop(1, rgb(62,184,229))  );  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -o-border-radius: 5px;  border-radius: 5px;  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; }  .a_demo_four:active {  top:3px;  background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, rgb(62,184,229)),  color-stop(1, rgb(44,160,202))  );  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; }  .a_demo_four::before {  background-color:#2591b4;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxS1v4P0SY0mOBAzT1CoCxH8BVc-dqyGt6zcl-bZzD19pgEq9Wa7iTlSRz2AiALtsJiwnm8CCJDM8CVCu4Y7fhH1iU08kYT15wPRgE-9rHVPnBaEyKPjdd7SEsxQ6zHqvM83SuYCus4o0/s1600/right_arrow.png);  background-repeat:no-repeat;  background-position:center center;  content:"";  width:25px;  height:25px;  position:absolute;  right:15px;  top:50%;  margin-top:-9px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;  -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;  -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;  box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; }  .a_demo_four:active::before {  top:50%;  margin-top:-12px;  -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;  -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;  -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;  box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; }

Then use these colours to form your gradient: #609bcb and #4a85b5. the foremost common mistake new designers create with gradients is to create them too obvious. we have a tendency to simply need to feature a delicate rounded result, nothing a lot of.

html