Showing posts with label HTML & CSS. Show all posts
Showing posts with label HTML & CSS. Show all posts
Create QR Code Generater
HTML & JS
<!DOCTYPE html>
<html>
<head>
<title>QR Code Generateor</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<p>Enter Your Text or URL</p>
<input type="text" name="" placeholder="Text or URL" id="qrtxt">
<div id="img">
<img src="" id="qrimg">
</div>
<button onclick="gq()">Generate QR Code</button>
</div>
<script type="text/javascript">
let qrimg= document.getElementById("qrimg");
let qrtxt= document.getElementById("qrtxt");
function gq()
{
if(qrtxt.value.length > 0){
qrimg.src=" https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+qrtxt.value;
}
else
{
alert("plese enter text or url");
}
}
</script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
background-color: #262a2f;
}
.container
{
width: 400px;
padding: 25px 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 10px;
}
.container p{
font-weight: 600;
font-size: 15px;
margin-bottom: 8px;
}
.container input{
width: 100%;
height: 50px;
border: 1px solid #49eea;
outline: 0;
padding: 10px;
margin: 10px 0 20px;
border-radius: 5px;
}
.container button
{
width: 100%;
height: 50px;
background: green;
color: white;
border:0;
outline: 0;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
cursor: pointer;
margin: 20px 0;
font-weight: 500; }
HTML & CSS SLIDER
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Slider</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="carousel">
<div class="carousel-content">
<div class="carousel-item">
<img src="C:\Users\91940\Pictures\nature.jpg" alt="pic" />
</div>
<div class="carousel-item">
<img src="C:\Users\91940\Pictures\nature2.jpg" alt="pic" />
</div>
<div class="carousel-item">
<img src="C:\Users\91940\Pictures\nature3.jpg" alt="pic" />
</div>
<div class="carousel-item">
<img src="C:\Users\91940\Pictures\flower.webp" alt="pic" />
</div>
<div class="carousel-item">
<img src="C:\Users\91940\Pictures\nature3.jpg" alt="pic" />
</div>
<div class="carousel-item">
<img src="C:\Users\91940\Pictures\nature.jpg" alt="pic" />
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
.carousel {
width: 400px;
height: 400px;
perspective: 800px;
}
.carousel-content {
position: relative;
width: 100%;
height: 100%;
transform: translateZ(-500px) rotateY(0);
transform-style: preserve-3d;
animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.carousel-item {
width: 100%;
height: 100%;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
-webkit-box-reflect: below 0px
linear-gradient(transparent, transparent, #00000040);
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
.carousel-item:nth-child(1) {
transform: rotateY(0) translateZ(500px);
}
.carousel-item:nth-child(2) {
transform: rotateY(60deg) translateZ(500px);
}
.carousel-item:nth-child(3) {
transform: rotateY(120deg) translateZ(500px);
}
.carousel-item:nth-child(4) {
transform: rotateY(180deg) translateZ(500px);
}
.carousel-item:nth-child(5) {
transform: rotateY(240deg) translateZ(500px);
}
.carousel-item:nth-child(6) {
transform: rotateY(300deg) translateZ(500px);}
/* Create a carousel animation */
@keyframes carousel {
0%,
8.3% {
transform: translateZ(-500px) rotateY(0);
}
16.6%,
24.9% {
transform: translateZ(-500px) rotateY(-60deg);
}
33.2%,
41.5% {
transform: translateZ(-500px) rotateY(-120deg);
}
49.8%,
58.1% {
transform: translateZ(-500px) rotateY(-180deg);
}
66.4%,
74.7% {
transform: translateZ(-500px) rotateY(-240deg);
}
83%,
91.3% {
transform: translateZ(-500px) rotateY(-300deg);
}
100% {
transform: translateZ(-500px) rotateY(-360deg);
}
}
Dark & Light Mode
- <html>
- <head>
- <meta name="color-scheme" content="light">
- </head>
- </html>
- <body><br><br><br>
- <h1>Dark & Light Mode </h1>
- <select id="ab" onchange="change()">
- <div > <option value="light">Light</option>
- <option value="dark">Dark</option></div>
- </select>
- </body>
- </html>
- <script>
- function change()
- {
- const ab= document.getElementById("ab").value;
- document.getElementsByTagName("meta")[0].content = ab;
- }
- </script>
Create Layout Of Your Website With HTML & CSS!!
1.HTML CODE:
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <link rel="stylesheet" type="text/css" href="stylegride.css">
- </head>
- <body>
- <main class="l">
- <div class="div1">Header</div>
- <div class="div2">Box1</div>
- <div class="div3">Box2</div>
- <div class="div4">Box3</div>
- <div class="div5">sidebar</div>
- <div class="div6">Maincontent</div>
- <div class="div7">Footer</div>
- </main>
- </body>
- </html>
2.CSS CODE:
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- main
- {
- width: 75%;
- margin: 50px auto;
- border: 1px solid black;
- display: grid;
- grid-template-rows: 60px 100px 200px 60px;
- grid-template-columns: repeat(3, 1fr) 150px;
- grid-gap: 20px;
- }
- .div1{background-color: red; color: white;
- grid-column: 1/-1}
- .div2{background-color: blue; color: white;}
- .div3{background-color: blue; color: white;}
- .div4{background-color: blue;color: white;}
- .div5{background-color: gray;color: white;
- grid-row: 2/4;
- grid-column: 4/5;
- }
- .div6{background-color: orange;color: white;
- grid-column: 1/4;
- }
- .div7{background-color: black;color: white;
- grid-column: 1/-1;
- }
Subscribe to:
Posts (Atom)