https://github.com/mohd-faizy/learnwebtech

WebTechnologies: HTML, CSS, JavaScript
https://github.com/mohd-faizy/learnwebtech

angular css3 html javascript node nodejs php

Last synced: about 1 year ago
JSON representation

WebTechnologies: HTML, CSS, JavaScript

• Host: GitHub
• URL: https://github.com/mohd-faizy/learnwebtech
• Owner: mohd-faizy
• Created: 2022-09-17T19:55:58.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-04T20:25:44.000Z (over 2 years ago)
• Last Synced: 2025-01-12T18:33:28.857Z (about 1 year ago)
• Topics: angular, css3, html, javascript, node, nodejs, php
• Language: HTML
• Homepage:
• Size: 12.4 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# WebTechnologies



  

    

  



## Getting Started

### Sample Code Snippet for simple HTML page

### HTML (index.html)

```html

 

 

     

         


             
Home

             
About

             
Services

             
Contact

         

     

 

 


     

 

 


```

### CSS (styles.css)

```css

body {

    margin: 0;

    padding: 0;

    font-family: Arial, sans-serif;

}

.sticky-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: #333;

    color: #fff;

    padding: 10px 0;

    z-index: 100;

}

.sticky-header nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    justify-content: center;

}

.sticky-header nav ul li {

    margin: 0 20px;

}

.sticky-header nav ul li a {

    text-decoration: none;

    color: #fff;

    font-weight: bold;

}

.content {

    padding: 100px 20px;

}

```

### JavaScript (script.js)

```js

window.addEventListener("scroll", function() {

    const header = document.querySelector(".sticky-header");

    const scrollY = window.scrollY;

    if (scrollY > 100) { // Adjust the value as needed

        header.classList.add("sticky");

    } else {

        header.classList.remove("sticky");

    }

});

```