Uva Wellassa University Animal Science Department Site

https://github.com/sudarakas/ans-website
Admin
This project is a static website for the Animal Science Department of Uva Wellassa University,...
Tokens:29,460
Snippets:671
Trust Score:8.2
Update:4 months ago
Show doc for...
Tokens:
Raw
### Responsive CSS for Dynamic Content on Small Screens

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/roboto/Roboto-Light.html

Media query for screens up to 480px wide, adjusting borders, padding, and height of dynamic content elements for optimal viewing on small mobile devices.

```css
@media only screen and (max-width:480px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 2px 2px 2px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
```

--------------------------------

### Responsive CSS for Dynamic Content on Medium Screens

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/roboto/Roboto-Light.html

Media query for screens between 481px and 768px wide, adjusting borders, padding, and height of dynamic content elements for tablets and smaller desktop views.

```css
@media only screen and (max-width: 768px) and (min-width: 481px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0 2em 0 2em;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
```

--------------------------------

### CSS for Content Containers and Dynamic Content

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/roboto/Roboto-Light.html

Styles for content containers, including absolute positioning, background colors, and height. Also styles for dynamic content, managing borders, padding, and positioning for responsiveness.

```css
.content-container {
  position: absolute;
  background-color: #202020;
  height: 635px;
  width: 100%;
}
.dynamic-content {
  position: relative !important;
  padding: 0 10em 0 10em;
  top: -50px;
}
.dynamic-content > div {
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: #e1e1e1;
  height: 550px;
  overflow-y: hidden;
}
```

--------------------------------

### CSS for Content Container and Dynamic Content

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular.html

Styles the content container and dynamic content areas, including positioning, background, borders, and height. Includes responsive adjustments for smaller screens.

```css
.content-container {
  position: absolute;
  background-color: #202020;
  height: 635px;
  width: 100%;
}
.dynamic-content {
  position: relative !important;
  padding: 0 10em 0 10em;
  top: -50px;
}
.dynamic-content > div {
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: #e1e1e1;
  height: 550px;
  overflow-y: hidden;
}
@media only screen and (max-width:480px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 2px 2px 2px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
@media only screen and (max-width: 768px) and (min-width: 481px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0 2em 0 2em;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
```

--------------------------------

### Responsive CSS for Dynamic Content Divs

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/roboto/Roboto-Regular.html

Provides responsive styling for the dynamic content divs based on screen width. Adjusts border thickness, removes fixed height, and modifies padding for smaller screens (max-width: 480px and between 481px and 768px) to ensure content is visible and layout adapts.

```css
@media only screen and (max-width:480px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 2px 2px 2px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
@media only screen and (max-width: 768px) and (min-width: 481px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0 2em 0 2em;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
```

--------------------------------

### CSS for Page Layout and Styling

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-3.html

A collection of CSS rules to style the page layout, including wrapper, header, content containers, and dynamic content areas. It also includes media queries for responsive design on different screen sizes.

```css
.wrapper{
  overflow-y: hidden;
  padding: 0px;
  margin:0px;
  background: none !important;
  width: 100% !important;
}
.header-container {
  text-align: -webkit-center;
  width: 100%;
  height: 150px;
  background: white;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: larger;
}
.header-container > p,h1 {
  padding:5px;
}
.header-container > p {
  color: #707070;
}
.header-container > h1 {
  color: #333333;
}
.content-container {
  position: absolute;
  background-color: #202020;
  height: 635px;
  width: 100%;
}
.dynamic-content {
  position: relative !important;
  padding: 0 10em 0 10em;
  top: -50px;
}
.dynamic-content > div {
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: #e1e1e1;
  height: 550px;
  overflow-y: hidden;
}
@media only screen and (max-width:480px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 2px 2px 2px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
@media only screen and (max-width: 768px) and (min-width: 481px) {
  .dynamic-content > div {
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: #e1e1e1;
    overflow-y: hidden;
    height: auto;
  }
  .dynamic-content {
    padding: 0 2em 0 2em;
    top: 0;
  }
  .content-container {
    height: auto;
  }
}
```

--------------------------------

### Website Styling with CSS

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/roboto/Roboto-Bold-2.html

This CSS code defines styles for various website elements including the wrapper, header container, content container, and dynamic content areas. It includes responsive design rules for different screen sizes to ensure proper layout and appearance on various devices.

```css
.wrapper{ overflow-y: hidden; padding: 0px; margin:0px; background: none !important; width: 100% !important; }
```

```css
.header-container { text-align: -webkit-center; width: 100%; height: 150px; background: white; padding-top: 20px; padding-bottom: 20px; font-size: larger; }
```

```css
.header-container > p,h1 { padding:5px; }
```

```css
.header-container > p { color: #707070; }
```

```css
.header-container > h1 { color: #333333; }
```

```css
.content-container { position: absolute; background-color: #202020; height: 635px; width: 100%; }
```

```css
.dynamic-content { position: relative !important; padding: 0 10em 0 10em; top: -50px; }
```

```css
.dynamic-content > div { border-style: solid; border-width: 0 10px 10px 10px; border-color: #e1e1e1; height: 550px; overflow-y: hidden; }
```

```css
.dynamic-content { padding: 0; top: 0; }
```

```css
.content-container { height: auto; }
```

```css
@media only screen and (max-width:480px) { .dynamic-content > div { border-style: solid; border-width: 0 2px 2px 2px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0; top: 0; } .content-container { height: auto; } }
```

```css
@media only screen and (max-width: 768px) and (min-width: 481px) { .dynamic-content > div { border-style: solid; border-width: 0 5px 5px 5px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0 2em 0 2em; top: 0; } .content-container { height: auto; } }
```

--------------------------------

### CSS for Content Containers and Dynamic Content

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-5.html

Styles for the content container and dynamic content areas. The content container is positioned absolutely with a dark background, while the dynamic content is styled with borders and padding, adjusting for different screen sizes.

```css
.content-container { position: absolute; background-color: #202020; height: 635px; width: 100%; }
.dynamic-content { position: relative !important; padding: 0 10em 0 10em; top: -50px; }
.dynamic-content > div { border-style: solid; border-width: 0 10px 10px 10px; border-color: #e1e1e1; height: 550px; overflow-y: hidden; }
@media only screen and (max-width:480px) { .dynamic-content > div { border-style: solid; border-width: 0 2px 2px 2px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0; top: 0; } .content-container { height: auto; } }
@media only screen and (max-width: 768px) and (min-width: 481px) { .dynamic-content > div { border-style: solid; border-width: 0 5px 5px 5px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0 2em 0 2em; top: 0; } .content-container { height: auto; } }
```

--------------------------------

### CSS Media Query for Small Screens

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-4.html

Adjusts styling for small screens (max-width: 480px), modifying borders, padding, and height for dynamic content and content containers.

```css
@media only screen and (max-width:480px) { .dynamic-content > div { border-style: solid; border-width: 0 2px 2px 2px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0; top: 0; } .content-container { height: auto; } }
```

--------------------------------

### CSS for Wrapper and Header Container

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular.html

These CSS rules style the main wrapper and header container, controlling overflow, padding, margins, background, and text alignment.

```css
.wrapper{
  overflow-y: hidden;
  padding: 0px;
  margin:0px;
  background: none !important;
  width: 100% !important;
}
.header-container {
  text-align: -webkit-center;
  width: 100%;
  height: 150px;
  background: white;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: larger;
}
.header-container > p,h1 {
  padding:5px;
}
.header-container > p {
  color: #707070;
}
.header-container > h1 {
  color: #333333;
}
```

--------------------------------

### CSS for Error Page Wrapper

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-4.html

Styles the main wrapper for an error page, ensuring it takes full width and has no padding or margin.

```css
.wrapper{ overflow-y: hidden; padding: 0px; margin:0px; background: none !important; width: 100% !important; }
```

--------------------------------

### CSS Styling for Web Page Layout

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/roboto/Roboto-Light-2.html

A set of CSS rules to style various elements of a web page, including wrappers, headers, and content containers. Includes responsive adjustments for different screen sizes.

```css
.wrapper{ overflow-y: hidden; padding: 0px; margin:0px; background: none !important; width: 100% !important; } .header-container { text-align: -webkit-center; width: 100%; height: 150px; background: white; padding-top: 20px; padding-bottom: 20px; font-size: larger; } .header-container > p,h1 { padding:5px; } .header-container > p { color: #707070; } .header-container > h1 { color: #333333; } .content-container { position: absolute; background-color: #202020; height: 635px; width: 100%; } .dynamic-content { position: relative !important; padding: 0 10em 0 10em; top: -50px; } .dynamic-content > div { border-style: solid; border-width: 0 10px 10px 10px; border-color: #e1e1e1; height: 550px; overflow-y: hidden; } @media only screen and (max-width:480px) { .dynamic-content > div { border-style: solid; border-width: 0 2px 2px 2px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0; top: 0; } .content-container { height: auto; } } @media only screen and (max-width: 768px) and (min-width: 481px) { .dynamic-content > div { border-style: solid; border-width: 0 5px 5px 5px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0 2em 0 2em; top: 0; } .content-container { height: auto; } }
```

--------------------------------

### Load Content Dynamically with XMLHttpRequest

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular.html

Use this JavaScript to fetch content from a PHP file and update specific HTML elements. It also modifies headers and removes event listeners from links.

```javascript
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; document.getElementById("first-header").innerHTML = "404 - File Not Found"; document.getElementById("second-sub-header").innerHTML = "The Page/Resource you are looking for could not be found or is unavailable. Ensure you are using the correct URL/Domain name or contact the Site Owner"; var get=document.getElementsByTagName("A"); for(i=0; i<get.length; i++){ get[i].removeAttribute("onmouseover"); get[i].removeAttribute("onmouseout"); } } }; xhttp.open("GET", "/errors/MultiDomainHosting.php", true); xhttp.send();
```

--------------------------------

### CSS Media Query for Medium Screens

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-4.html

Adjusts styling for medium screens (481px to 768px), modifying borders, padding, and height for dynamic content and content containers.

```css
@media only screen and (max-width: 768px) and (min-width: 481px) { .dynamic-content > div { border-style: solid; border-width: 0 5px 5px 5px; border-color: #e1e1e1; overflow-y: hidden; height: auto; } .dynamic-content { padding: 0 2em 0 2em; top: 0; } .content-container { height: auto; } }
```

--------------------------------

### CSS for Dynamic Content Styling

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-4.html

Styles the dynamic content area within an error page, including padding, positioning, and border styles for its child divs.

```css
.dynamic-content { position: relative !important; padding: 0 10em 0 10em; top: -50px; }
```

```css
.dynamic-content > div { border-style: solid; border-width: 0 10px 10px 10px; border-color: #e1e1e1; height: 550px; overflow-y: hidden; }
```

--------------------------------

### CSS for Wrapper and Header Container

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-5.html

These CSS rules define the styling for the main wrapper and header container. The wrapper is set to hidden overflow and no padding/margin, while the header has a white background, padding, and larger font size.

```css
.wrapper{ overflow-y: hidden; padding: 0px; margin:0px; background: none !important; width: 100% !important; }
.header-container { text-align: -webkit-center; width: 100%; height: 150px; background: white; padding-top: 20px; padding-bottom: 20px; font-size: larger; }
.header-container > p,h1 { padding:5px; }
.header-container > p { color: #707070; }
.header-container > h1 { color: #333333; }
```

--------------------------------

### CSS for Error Page Content Container

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-4.html

Styles the main content container for an error page, positioning it absolutely and setting its background and dimensions.

```css
.content-container { position: absolute; background-color: #202020; height: 635px; width: 100%; }
```

--------------------------------

### CSS for Error Page Header Container

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-4.html

Styles the header container of an error page, setting its dimensions, background, padding, and text alignment.

```css
.header-container { text-align: -webkit-center; width: 100%; height: 150px; background: white; padding-top: 20px; padding-bottom: 20px; font-size: larger; }
```

```css
.header-container > p,h1 { padding:5px; }
```

```css
.header-container > p { color: #707070; }
```

```css
.header-container > h1 { color: #333333; }
```

--------------------------------

### JavaScript for XMLHttpRequest

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-4.html

This snippet uses XMLHttpRequest to fetch a resource and update the DOM. It also modifies link attributes and sets error messages.

```javascript
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; document.getElementById("first-header").innerHTML = "404 - File Not Found"; document.getElementById("second-sub-header").innerHTML = "The Page/Resource you are looking for could not be found or is unavailable. Ensure you are using the correct URL/Domain name or contact the Site Owner"; var get=document.getElementsByTagName("A"); for(i=0; i<get.length; i++){ get\[i\]\.removeAttribute("onmouseover"); get\[i\]\.removeAttribute("onmouseout"); } } }; xhttp.open("GET", "/errors/MultiDomainHosting.php", true); xhttp.send();
```

--------------------------------

### JavaScript for HTTP Request and DOM Manipulation

Source: https://github.com/sudarakas/ans-website/blob/master/fonts/glyphicons-halflings-regular-3.html

This JavaScript code uses XMLHttpRequest to fetch a resource and update specific HTML elements with the response. It also modifies header content and removes event listeners from anchor tags.

```javascript
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; document.getElementById("first-header").innerHTML = "404 - File Not Found"; document.getElementById("second-sub-header").innerHTML = "The Page/Resource you are looking for could not be found or is unavailable. Ensure you are using the correct URL/Domain name or contact the Site Owner"; var get=document.getElementsByTagName("A"); for(i=0; i<get.length; i++){ get\[i\].removeAttribute("onmouseover"); get\[i\].removeAttribute("onmouseout"); } } }; xhttp.open("GET", "/errors/MultiDomainHosting.php", true); xhttp.send();
```
Tokens:
Raw