Results: 1580
Notes
  • Newest first
  • Oldest first
  • Newest first(All)
  • Oldest first(All)
CSS Variables
Global Scope
: Variables defined at the
:root
level are considered to be in the
global 
scope and can be
accessed
throughout your
entire stylesheet.
Example1: CSS:
:root {
  --primary-color: #007bff; /* Define the CSS variable */
}

.button {
  background-color: var(--primary-color); /* Use the CSS variable */
}
HTML:
<button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
Example2:
:root {
	--card-bg-color: #232323;
    --text-color: #7FFFD4;
    --text-font-family: 'Arial', sans-serif;
    --text-font-size: 17px;
    --text-line-height: 1.5;
}

.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
  background-color: var(--card-bg-color);
}

.card p {
  color: var(--text-color);
  font-family: var(--text-font-family);
  font-size: var(--text-font-size);
  line-height: var(--text-line-height);
  
}
HTML:
<div class="card">
    <p>This is the first card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div class="card">
    <p>This is the second card. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>

  <div class="card">
    <p>This is the third card. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
Example 3: CSS:
:root {
  --color-white: #ffffff;
  --color-blue: #007bff;
  --color-red: #ff0000;
  --color-green: #00ff00;
  --color-yellow: #fcba03;
}

.card {
	background-color: #f8f8f8;
  border: 5px solid var(--color-yellow);
  padding: 20px;
  margin: 10px;
}

.card h2 {
  color: var(--color-blue);
}

.card p {
  color: var(--color-black);
}

.button {
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin: 5px;
}
HTML:
<div class="card">
    <h2>Card 1</h2>
    <p>This is some text within Card 1.</p>
    <button class="button">Button 1</button>
  </div>

  <div class="card">
    <h2>Card 2</h2>
    <p>This is some text within Card 2.</p>
    <button class="button">Button 2</button>
  </div>
  
  <div class="card">
    <h2>Card 3</h2>
    <p>This is some text within Card 3.</p>
    <button class="button">Button 3</button>
  </div>
by Luka Tatarishvili
1 year ago
0
CSS
CSS VARIABLES
0
pointer-events: none
The element does not react to pointer events. It's a way to disable inputs inside the div
style="pointer-events: none;" 
by Luka Tatarishvili
1 year ago
0
CSS
css property
0
add column to datatable
{
    $query = Comment::with('user')
        ->where('model', $model)
        ->where('model_id', $model_id)
        ->orderBy('id', 'desc');

    return DataTables::of($query->get())
        ->addColumn('user_roles', function ($comment) {
            return $comment->user->getRoleNames()->implode(', ');
        })
        ->toJson();
}
we can add new column to datatable json data using this
by Giorgi Ivanidze
1 year ago
0
Laravel
PHP
datatable
0
Commonly used attributes
HTML attributes are additional properties that can be added to HTML elements to provide extra information or modify the behavior of the elements. id:
<div id="myElement">This is a div with an ID</div>
class:
<p class="highlighted">This paragraph has a class</p>
style:
<span style="color: red; font-size: 16px;">Red and larger text</span>
src:
<img src="image.jpg" alt="An image">
href:
<a href="https://www.example.com">Visit Example</a>
href:
<img src="image.jpg" alt="A beautiful landscape">
alt:
<img src="image.jpg" alt="A beautiful landscape">
disabled:
<button type="button" disabled>Disabled Button</button>
required:
<input type="text" required>
by Luka Tatarishvili
1 year ago
0
HTML
Attributes
0
Custom Data Attributes
Custom Data Attributes 
allow us to
attach
custom
data
to
HTML elements
without affecting the element's functionality or appearance. Syntax: To create a custom data attribute, you need to use the data- prefix followed by your chosen attribute name. Example:
<div data-info="example-data" data-count="42">Custom Data Attributes</div>
In this example, we have added two custom data attributes, data-info and data-count, to a <div> element. Accessing Data Attributes with JavaScript:
<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>

<script>
  const myDiv = document.getElementById("myDiv");
  
  // Accessing individual data attributes
  const infoData = myDiv.dataset.info;
  const countData = myDiv.dataset.count;
  
  console.log(infoData); // Output: "example-data"
  console.log(countData); // Output: "42"
</script>
Modify:
<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>

<script>
  const myDiv = document.getElementById("myDiv");
  
  // Modifying data attributes
  myDiv.dataset.info = "new-data";
  myDiv.dataset.count = 100;
</script>
Using Custom Data Attributes with Events:
<button data-action="delete" data-id="123">Delete Item</button>

<script>
  const deleteButton = document.querySelector("[data-action='delete']");
  
  deleteButton.addEventListener("click", function(event) {
    const itemId = event.target.dataset.id;
    console.log("Deleting item with ID:", itemId);
    // Perform the delete operation using the itemId
  });
</script>
by Luka Tatarishvili
1 year ago
0
HTML
Attributes
0
The
<pre>
tag defines preformatted text. Text in a
<pre>
element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
by Tinatin Kvinikadze
1 year ago
0
HTML
<PRE>
0
სინტაქქსები
დეკლარაცია განსაზღვრავს, რომ ეს
<!DOCTYPE html>
დოკუმენტი არის HTML5 დოკუმენტი
<html>
ელემენტი არის HTML გვერდის ძირითადი ელემენტი
<head>
ელემენტი შეიცავს მეტა ინფორმაციას HTML გვერდის შესახებ ელემენტი განსაზღვრავს სათაურს HTML გვერდისთვის ( <title>რომელიც ნაჩვენებია ბრაუზერის სათაურის ზოლში ან გვერდის ჩანართში) ელემენტი განსაზღვრავს დოკუმენტის <body>სხეულს და წარმოადგენს კონტეინერს ყველა ხილული შინაარსისთვის, როგორიცაა სათაურები, აბზაცები, სურათები, ჰიპერბმულები, ცხრილები, სიები და ა.შ.
<h1>
ელემენტი განსაზღვრავს დიდ სათაურს
<p>
ელემენტი განსაზღვრავს აბზაცს
by ვაჟა ტყემალაძე
1 year ago
0
HTML
html
0
Meta tags
control how a webpage is displayed on different devices by adjusting the width and initial zoom level of the viewport to match the device's screen size
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width
- sets the width of the viewport to be equal to the width of the device's screen. This ensures that the webpage adapts and fills the entire width of the device, regardless of its specific screen size or resolution. CSS media query works properly with any device by setting device width to viewport
initial-scale=1
- sets the initial zoom level when the webpage is first loaded. A value of 1 means that the webpage will be displayed at a 1:1 ratio, without any zooming or scaling applied
by ვაჟა ტყემალაძე
1 year ago
0
HTML
html
meta tags
0
Semantic tags sum up
Summary of semantical meaning tags: Tags with Semantic Meaning:
<strong>
<em>
Tags without Semantic Meaning:
<b>
<I>
<mark>
<small>
<del>
<ins>
<sub>
<sup>
<s>
<u>
<be>
<pre>
by ვაჟა ტყემალაძე
1 year ago
0
HTML
html
0
Semantic tags
Header: The
<header>
tag defines the header of a document or section. Nav: The
<nav>
tag defines a navigation bar. Section: The
<section>
tag defines a section of a document. Article: The
<article>
tag defines an independent piece of content, such as a blog post or news article. ** aside:** The
<aside>
tag defines a sidebar or other secondary content. Footer: The
<footer>
tag defines the footer of a document or section. figure: The
<figure>
tag defines a self-contained piece of content, such as an illustration, diagram, photo, code listing, etc. figcaption: The
<figcaption>
tag defines a caption for a figure. h1-h6: The
<h1>
through
<h6>
tags define headings of different levels. main: The
<main>
tag defines the main content of a document. a: The
<a>
tag defines a hyperlink. form: The
<form>
tag defines a form. input: The
<input>
tag defines an input field. img: The
<img>
tag defines an image. blockquote: The
<blockquote>
tag defines a quotation. time: The
<time>
tag defines a date or time. mark: The
<mark>
tag defines a highlighted passage of text. b: The
<b>
tag defines bold text. strong: The
<strong>
tag defines strong text. em: The
<em>
tag defines emphasized text. code: The
<code>
tag defines code snippets. pre: The
<pre>
tag defines preformatted text.
by ვაჟა ტყემალაძე
1 year ago
0
HTML
html
0
Results: 1580