css image&links

PHOTO

Tue Oct 08 2024 09:41:13 GMT+0000 (Coordinated Universal Time)

1.<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pink Frag Event Organizer</title>
    <style>
        /* External CSS for styling the menu and content */
        body {
            font-family: Arial, sans-serif; /* Set font for the body */
            margin: 20px; /* Add margin around the body */
            background-color: #f9f9f9; /* Light background color */
        }

        /* Link styles */
        a {
            background-color: #00CED1; /* Default background color */
            color: #000000; /* Default text color */
            width: 100px; /* Width of the links */
            border: 1px solid #000000; /* Border styling */
            padding: 15px; /* Padding around text */
            text-align: center; /* Center text */
            text-decoration: none; /* Remove underline */
            display: block; /* Display as block element */
            margin: 5px 0; /* Add margin between links */
        }

        /* Hover effect */
        a:hover {
            background-color: #4CAF50; /* Background color on hover */
            color: #FFFFFF; /* Text color on hover */
        }

        /* Active effect */
        a:active {
            background-color: #F0E68C; /* Background color when active */
            color: #FF8C00; /* Text color when active */
        }
    </style>
</head>
<body>
    <center>
        <h1>Pink Frag Event Organizer</h1><br>
    </center>
    <table width="100%">
        <tr>
            <td width="20%">
                <a id="home1" href="index.html">Home</a><br>
                <a id="events" href="events.html">Events</a><br>
                <a id="aboutus" href="aboutUs.html">About Us</a><br>
                <a id="contactus" href="contactUs.html">Contact Us</a><br>
            </td>
            <td width="80%" style="display: inline-block;margin-top: -20px;">
                <h2>Welcome to Pink Frag Event Organizer</h2>
                <p>We are indulged in offering a Promotional Event Management. 
                These services are provided by our team of professionals as 
                per the requirement of the client. 
                These services are highly praised for their features like 
                sophisticated technology, effective results, and reliability. We offer 
                these services in a definite time frame and at affordable rates.</p>
            </td>
        </tr>
    </table>
</body>
</html>
2.----->
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Album</title>
    <style>
        /* Styles for the images */
        img {
            max-width: 100%; /* Ensures images are responsive */
            height: auto; /* Maintains aspect ratio */
            margin: 10px; /* Adds some space around images */
        }
    </style>
</head>
<body>
    <h1>Wedding Album</h1>
    <img src="wedding.jpg" alt="Wedding Photo" /> <!-- First image without effects -->
    <img src="wedding.jpg" alt="Wedding Photo in Grayscale" style="filter: grayscale(100%);" /> <!-- Second image with grayscale effect -->
</body>
</html>

COPY

Save snippets that work from anywhere online with our extensions

Comments

WT-ebox

@signup

HTML Tables-i access HTML List-(1) i access html list i access(2) HTML Links HTML Forms javabasics i assess1 JavaScript in the Browser i-Assess [Module 2 JavaScript and ES6] Problem Solving using JS 1 i-Assess css image&links

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript

Get URL and URL Parts in JavaScript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#javascript

Full Stack Developer

function full_stack_developer() {
    full_stack_developer();
}

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#javascript

3 Ways To Detect Selenium Bots Using Javascript - CodingTutz

if (navigator.webdriver) {
    document.body.innerHTML = "This is a Bot";
}

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

#javascript #promises #howto

How to Get the Domain From A URL Using Javascript

var url = "http://scratch99.com/web-development/javascript/";
var urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
var domain = urlParts[0];

#javascript

Mapping an Object

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

#javascript #jquery

jQuery.post() - AJAX for post requests

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

css image&links

Save snippets that work from anywhere online with our extensions

Comments

More like this

WT-ebox

Browse more snippets >>

css image&links

Save snippets that work from anywhere online with our extensions

Comments

More like this

WT-ebox

Browse more snippets >>

Embed code snippet