webdevelopment

Thursday, 25 July 2019

Bootstrap 4 accordion

FAQs Image preview

Code

<!doctype html>

<head>

.faqs .accordion .card-header{ background-color: transparent; padding: 4px 15px; cursor: pointer; }

.faqs .accordion .card{border: 1px solid rgba(0,0,0,.125) !important;

margin-bottom: 10px; border-radius: 40px !important;}

.faqs .accordion .card-header a{ font-size: 20px; font-weight: 600; display: block; text-align: left; }

.faqs .accordion .card-header a.collapsed:before{ content: "\f067"; font-family: "Font Awesome 5 Pro"; font-size: 20px }

.faqs .accordion .card-header a:before{ margin-right: 10px !important; content: "\f068"; font-family: "Font Awesome 5 Pro"; font-size: 20px }

</style>

</head>

<body>

Question number #1

</a>

</h2>

</div>

tebllus Gorem telalus ibpsadm dplor bit anet, conssectetar tevus adioscing eleit. Etriam telvslus sibt amebet mbaxismubs telvslus neqbnsue. tebllus Gorem telalus ibpsadm dplor bit anet, conssectetar tevus adioscing eleit. Etriam telvslus sibt amebet mbaxismubs telvslus neqbnsue tebllus Gorem telalus ibpsadm dplor bit anet, conssectetar tevus adioscing eleit. Etriam telvslus sibt amebet mbaxismubs telvslus neqbnsuetebllus Gorem telalus ibpsadm dplor bit anet, conssectetar tevus adioscing eleit. Etriam telvslus sibt amebet mbaxismubs telvslus neqbnsue.

</div>

Question number #2

</a>

</h2>

</div>

</div>

Question number #3

</a>

</h2>

</div>

</div>

</section>

</body>

</html>

Wednesday, 13 March 2019

Basic template structure - HTML5 / Bootstrap 4.1

Copy paste this code in HTML document:

<!doctype html>

<html lang="en">

   <head>

      <!-- Required meta tags -->

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

      <meta name="keywords" content="....">

      <meta name="description" content="....">

      <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>

      <!-- Bootstrap CSS -->

      <link rel="stylesheet" href="css/main.css" />

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

      <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

      -->

      <title>Login</title>

   </head>

   <body>

      <header>

         <nav class="navbar navbar-expand-lg navbar-light bg-light">

            <div class="col-md-6 col-6">

               <a class="navbar-brand" href="#"><img src="images/logo.png" /></a>

            </div>

             <div class="col-md-6 col-6 pull-right-md pull-right-lg text-md-right text-lg-right">

               <a class="btn btn-primary our-button btn-sm mr-1"  >Sign In</a>

               <a class="btn btn-primary our-button btn-sm mr-1" >Sign Up</a> 

               <!-- <a class="btn btn-primary our-button btn-lg" >Support</a>  -->

            </div>

         </nav>

      </header>

      <section class="main-content">

         <div class="container">

            <div class="col-sm-12 col-md-12 p-0 mx-auto">

            <!-- start content area -->

            This is content area

            <!--end content area-->

           </div>

         </div>

      </section>

      <footer class="footer">

         <div class="copy-right-text">&copy; All rights reserved. </div>

      </footer>

      <!-- move to top -->

      <div href="#" id="gotop"><i class="fa fa-angle-up"></i></div>

      <!-- Optional JavaScript -->

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->

      <script src="js/jquery.min.js" ></script>

      <script src="js/sticky-header.js" ></script><!-- for smooth header on scroll page-->

      <script src="js/bootstrap.min.js"  ></script>

      <script src="js/popper.min.js" ></script>      

      <script src="js/common.js"  ></script>

   </body>

</html>

Wednesday, 12 December 2018

Responsive and based device icon

Responsive and based device icon

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


<link rel="apple-touch-icon" sizes="57x57" href="path/favicons/apple-touch-icon-57x57.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="72x72" href="path/favicons/apple-touch-icon-72x72.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="114x114" href="path/favicons/apple-touch-icon-114x114.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="144x144" href="path/favicons/apple-touch-icon-144x144.png?v=5c11f68f183dc">


<link rel="apple-touch-icon" sizes="60x60" href="path/favicons/touch-icon-iphone-60x60.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="76x76" href="path/favicons/touch-icon-ipad-76x76.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="120x120" href="path/favicons/touch-icon-iphone-retina-120x120.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="152x152" href="path/favicons/touch-icon-ipad-retina-152x152.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="180x180" href="path/favicons/apple-touch-icon-180x180.png?v=5c11f68f183dc">


<link rel="icon" sizes="192x192" href="path/favicons/touch-icon-192x192.png?v=5c11f68f183dc" >
<link rel="icon" sizes="128×128" href="path/favicons/favicon.png?v=5c11f68f183dc" >

Sunday, 21 October 2018

I most liked Box shadow like this

div{box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 0 7.6923%;}

Wednesday, 20 June 2018

Embeding video repsonsive in html page

How do responsive in embeded video in html page

Embed video code from youtube or anywhere
HTML code is below
CSS code is below

Just change your video path only everything tested, working perfectly.

<div class="main-video-container">
                <div class="myvideowraper">
                    
                            <iframe width="764" height="429" src="videoembedcodehere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
</div>


<style type="text/css">

/* Embeded video responsive */
.myvideowraper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0px;
height: 0;
}
.myvideowraper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* End video responsive */

.main-video-container{ max-width: 767px !important; overflow-x: hidden; margin:0px auto; }

@media only screen and (max-width:1366px) {
.main-video-container{ max-width: 767px !important; overflow-x: hidden; margin:0px auto; }
}

/* flex box css */

.mainsection-items{flex-direction:row; display: flex; align-items: center; justify-content: center; min-height: 200px; height: 100%; border: solid 1px #ccc }
.box1{ width: 33.3%; }
</style>

Friday, 19 January 2018

Array data display in list / span Array with id for single items

Array data display in list / span
Array with id for single items

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
n = 0;
var cars = ["Saab", "Volvo", "BMW"];

var str = "";
for (var i = 0; i < cars.length; i++)
{
n = n + 1;
str = str + "<span id='" + n +"'>this car is:" + cars[i] + "</span><br>";

//str += "<li>" + cars[i] + "</li>";

//document.write("this car name is :" + cars[i] + "<br>");
}

document.getElementById("demo").innerHTML = str;

</script>

Tuesday, 31 October 2017

Text align left, right & center in single line

HTML
<div class="col-md-12 all-results-info">
            <span class="text-alignleft">87 results found</span>
            <span class="text-aligncenter">87 results found</span>
            <span class="text-alignright">Filter Results <i class="fa fa-filter" aria-hidden="true"></i>
</span>
         </div>

CSS

.text-alignleft {
    float: left;
    text-align:left;
    width:33.33333%;
}
.text-aligncenter {
    float: left;
    text-align:center;
    width:33.33333%;
}
.text-alignright {
    float: left;
    text-align:right;
    width:33.33333%;
}

Pages

Thursday, 25 July 2019

Code

Wednesday, 13 March 2019

Wednesday, 12 December 2018

Sunday, 21 October 2018

Wednesday, 20 June 2018

Friday, 19 January 2018

Tuesday, 31 October 2017