MD Tech Tamizha: 2020

Wednesday, December 23, 2020

How To Create Glassmorphism Close And Fade In Tabs In Website Using Html, Css, Js

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Click on the x button in the top right corner to close the current tab:</p>

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>

<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>

<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

</div>

<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

<h3>London</h3>

<p>London is the capital city of England.</p>

</div>

<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

<h3>Paris</h3>

<p>Paris is the capital of France.</p>

</div>

<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

<h3>Tokyo</h3>

<p>Tokyo is the capital of Japan.</p>

</div>

function openCity(evt, cityName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(cityName).style.display = "block";

evt.currentTarget.className += " active";

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

</script>

</body>

</html>

CSS

body {

margin: 0;

padding: 0;

font-family: Arial;

background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(/2.bmp);

background-size: cover;

overflow:hidden;

}

.tabs{

width: 50%;

margin: 15% 25%;

border-radius: 20px;

}

/* Style the tab */

.tab {

overflow: hidden;

background-color: rgb(255, 255, 255,0.1);

backdrop-filter: blur(30px);

border-radius: 20px;

}

.tabs h2, p{

color: white;

}

/* Style the buttons inside the tab */

.tab button {

color: white;

float: left;

border: none;

outline: none;

transition: 0.3s ease-in;

border-radius: 20px;

cursor: pointer;

padding: 16px;

font-size: 17px;

background-color: rgb(255, 255, 255,0.1);

}

/* Change background color of buttons on hover */

.tab button:hover {

background-color: rgba(255, 255, 255, 0.3);

backdrop-filter: blur(60px);

}

/* Create an active/current tablink class */

.tab button.active{

background-color: rgba(255, 255, 255, 0.3);

backdrop-filter: blur(60px);

}

/* Style the tab content */

.tabcontent {

background-color: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(30px);

display: none;

padding: 6px 12px;

border-top: none;

border-radius: 20px;

color: white;

-webkit-animation: fadeEffect 3s;

animation: fadeEffect 3s;

}

/* Style the close button */

.topright {

float: right;

cursor: pointer;

font-size: 28px;

}

.topright:hover {color: red;}

/* Fade in tabs */

@-webkit-keyframes fadeEffect {

from {opacity: 0;}

to {opacity: 1;}

}

@keyframes fadeEffect {

from {opacity: 0;}

to {opacity: 1;}

}

Tuesday, December 22, 2020

Animated accordion in website creation using HTML, CSS, JS

HTML

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accord">
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>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.</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

CSS

    body{

  margin: 0;
  padding: 0;
  background-color: rgb(170, 73, 73);
}
.accord{
  width: 60%;
  margin: auto;
}
.accordion {
  background-color: rgb(44, 43, 43);
  color: rgb(255, 255, 255);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-radius: 20px;
  }
  
  .active, .accordion:hover {
    background-color: rgb(44, 43, 43);
    box-shadow: 10px 10px 20px 3px rgb(255, 255, 255),
    -10px -10px 20px 3px rgb(255, 255, 255);
    color: white;
  }
  
  .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "\2212";
  }
  
  .panel {
    padding: 0 18px;
    background-color: rgb(187, 181, 179);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 20px;
  }

Accordion in website creation using HTML, CSS, JS

HTML

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="accord">
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>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.</p>
</div>
</div>
<script>
  var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
  </script>

</body>
</html>

CSS

body{
  margin: 0;
  padding: 0;
  background-color: lightgreen;
}
.accord{
  width: 60%;
  margin: auto;
  
}
.accordion {
    background-color: rgb(197, 197, 197);
    color: rgb(0, 0, 0);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-radius: 20px;
  }
  
  .active, .accordion:hover {
    background-color: rgb(41, 36, 36); 
    color: white;
  }
  
  .panel {
    padding: 0 18px;
    display: none;
    background-color: lightsalmon;
    overflow: hidden;
    border-radius: 20px;
  }

Monday, December 21, 2020

Menu Icon Create Using Html, CSS Only

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<h2>SUBSCRIBE TO MD TECH TAMIZHA</h2>

<h2>THANK YOU FOR WATCHING</h2>

</body>

</html>

CSS

body{

margin: 0;

padding: 0;

background-color: silver;

}

.menu{

position: relative;

left: 50%;

margin-top: 300px;

}

div {

width: 35px;

height: 5px;

background-color: rgb(0, 0, 0);

margin: 6px 0;

}

font-size: 30px;

left: 45%;

top: 38%;

position: absolute;

}

h2{

position: relative;

text-align: center;

top: 30px;

left: 30px;

}

Animated Menu Icon Create Using Html, CSS, JS Only

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Click on the Menu Icon to transform it to "X":</p>

</div>

<h2>SUBSCRIBE TO MD TECH TAMIZHA</h2>

<h2>THANK YOU FOR WATCHING</h2>

</div>

function myFunction(x) {

x.classList.toggle("change");

}

</script>

</body>

</html>

CSS

body{

margin: 0;

padding: 0;

background-color: rgb(100, 93, 93);

}

.container {

background-color: rgb(100, 93, 93);

position: absolute;

left: 50%;

top: 50%;

cursor: pointer;

}

color: white ;

text-align: center;

margin-top: 250px

}

.bar1, .bar2, .bar3 {

width: 35px;

height: 5px;

background-color: rgb(255, 255, 255);

margin: 6px 0;

transition: 0.4s;

}

.change .bar1 {

-webkit-transform: rotate(-45deg) translate(-9px, 6px);

transform: rotate(-45deg) translate(-9px, 6px);

}

.change .bar2 {opacity: 0;}

.change .bar3 {

-webkit-transform: rotate(45deg) translate(-8px, -8px);

transform: rotate(45deg) translate(-8px, -8px);

}

.content{

position: absolute;

left: 35%;

bottom: 20%;

}

.content h2{

text-align: center;

color: white;

}

Sunday, December 20, 2020

Vertical Icon Menu Bar Creation Using Html, CSS Only

1.HTML

<!DOCTYPE html>

<html>

<body>

<a href="#"><i class="fa fa-search">SEARCH</i></a>

<a href="#"><i class="fa fa-envelope">EMAIL</i></a>

<a href="#"><i class="fa fa-globe">GLOBAL</i></a>

<a href="#"><i class="fa fa-trash">TRASH</i></a>

</div>

<p>SUBSCRIBE TO MD TECH TAMIZHA</p>

<p>THANKS FOR WATCHING</p>

</div>

</body>

</html>

2.CSS

body {

padding: 0;

margin:0;

background-color: silver;

}

.icon-bar {

overflow: hidden;

position: absolute;

height: 100%;

width: 150px;

}

.icon-bar a {

display: block;

text-align: center;

align-items: center;

padding: 46px 0;

transition: all 0.3s ease;

color: white;

font-size: 26px;

background-color: black;

}

.icon-bar a:hover{

background-color: #31bdcf;

}

.icon-bar .active{

background-color: #31bdcf;

}

.icon-bar .active:hover{

background-color: black;

color: white;

}

.content{

position: absolute;

top: 40%;

left: 30%;

}

.content p{

font-size: 30px;

text-align: center;

}

Horizontal Icon Bar Using Html, CSS Only

1. Html

<!DOCTYPE html>

<head>

</head>

<body>

<a href=""><i class="fa fa-search">Search</i></a>

<a href=""><i class="fa fa-globe">Global</i></a>

<a href=""><i class="fa fa-envelope">Email</i></a>

<a href=""><i class="fa fa-trash">Trash</i></a>

</div>

<p>SUBSCRIBE TO MD TECH TAMIZHA</p>

<p>THANK YOU FOR WATCHING</p>

</div>

</body>

</html>

2. CSS

body{

margin: 0;

padding: 0;

background-color: silver;

}

.icon-bar{

width: 100%;

}

.icon-bar a{

float: left;

width: 20%;

text-align: center;

padding: 15px 0;

transition: all 0.3s ease;

color: white;

font-size: 30px;

background-color: black;

}

.icon-bar a:hover{

background-color: #31bdcf;

}

.icon-bar .active{

background-color: #31bdcf;

}

.icon-bar .active:hover{

background-color: black;

color: white;

}

.content{

position: absolute;

top: 40%;

left: 30%;

}

.content p{

font-size: 30px;

}

Monday, September 21, 2020

HOW TO DOWNLOAD LENOVO E41-25 OFFICIAL AMD VGA ON WINDOWS 10

1: GOTO https://www.amd.com/en

2: And goto DRIVERS AND SUPPORT

3.Scroll down and then search for your product choose (AMD RADEON RX 5000) And enter

the submit button.

4.And see the below picture windows 10 and windows 7 64 bit VGA official here.

5.And hit the + symbol and download the recommend verison.

6.And install the VGA .exe file and done.

Watch the video : https://www.youtube.com/watch?v=Re3r7HoAbTQ

Thank you for watching.

Please support and watch my site.