Techno Sunita: August 2020

Tuesday, 18 August 2020

Thumbnail owl carousel responsive html and CSS By Techno Sunita

Html code

<!DOCTYPE html>

<head>

</head>

<body>

<h1 class="headingone"> Instagram </h1>

</div>

</div>

</section>

</body>

jQuery(document).ready(function($) {

$('#imageGallary').owlCarousel({

items: 2,

loop: true,

margin: 10,

responsive: {

600: {

items: 5

}

});

</script>

</html>

CSS CODE

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

body {

font-family: 'Open Sans', sans-serif;

color: #292929;

}

.thumnailSlider {

padding: 80px 0px;

position: relative;

}

.headingone {

text-align: center;

margin-bottom: 40px;

font-size: 45px;

}

.thumnailSlider .owl-carousel .owl-item img {

height: 200px;

object-fit: cover;

}

Monday, 3 August 2020

Center logo in navbar very easy way using bootstrap4 | logo center in bo...

Html Source code

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
</head>

<body style="background-image: url(./images/header.jpg);" class="bg">
<nav class="navbar navbar-expand-md bg-dark menubar">
<div class="container"> <a href="#" class="brandlogo"><img src="./images/logo.jpg" alt=""> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"> <a href="#" class="nav-link">Home </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">About us </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">Services </a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a href="#" class="nav-link">Contact </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">Services </a> </li>
<li class="nav-item"> <a href="#" class="nav-link">new </a> </li>
</ul>
</div>
</div>
</nav>
</body>
</html>

CSS Source code

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

body {

font-family: 'Open Sans', sans-serif;

color: #292929;

}

.bg {

background-attachment: fixed;

background-repeat: no-repeat;

position: relative;

background-position: center center;

background-size: cover;

height: 100vh;

}

.bg::before {

content: "";

width: 100%;

height: 100vh;

background-color: rgba(0, 0, 0, 0.5);

position: absolute;

left: 0px;

right: 0px;

top: 0px;

bottom: 0px;

margin: 0;

}

.brandlogo {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0px;

margin: auto;

text-align: center;

width: 82px;

}

.brandlogo>img {

max-width: 82px;

height: auto;

}

.menubar ul.navbar-nav>li.nav-item>a.nav-link {

color: #fff;

padding: 10px 30px !important;

font-size: 18px;

text-transform: uppercase;

transition: ease 0.3s all;

}

.menubar ul.navbar-nav>li.nav-item>a.nav-link:hover {

color: chocolate;

}

Techno Sunita