Spaces:

AstraOS
/

learning

Running

App Files Files Community

AstraOS commited on May 30

Commit

ded7cac

verified ·

1 Parent(s): a9277b3

Upload 5 files

Browse files

Files changed (6) hide show

.gitattributes +1 -0
files/fresh.webp +3 -0
files/indexORindex.html +63 -0
index.html +77 -19
script.js +16 -0
style.css +154 -28

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+files/fresh.webp filter=lfs diff=lfs merge=lfs -text

files/fresh.webp ADDED Viewed

Git LFS Details

SHA256: de7ed273b5abda550b30de40ea49a11d5fb21943f97fcf2298d72f4db07149be
Pointer size: 131 Bytes
Size of remote file: 670 kB

files/indexORindex.html ADDED Viewed

	@@ -0,0 +1,63 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>✍️ Trying to have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout">Masonry layout</a></h1>
+        <div class="image-container">
+        <img src="https://randompic.grozav.dev/api/random?1" alt="img1">
+        <img src="https://randompic.grozav.dev/api/random?2" alt="img2">
+        <img src="https://randompic.grozav.dev/api/random?3" alt="img3">
+        <img src="https://randompic.grozav.dev/api/random?4" alt="img4">
+        <img src="https://randompic.grozav.dev/api/random?5" alt="img5">
+        <img src="https://randompic.grozav.dev/api/random?6" alt="img6">
+        <img src="https://randompic.grozav.dev/api/random?7" alt="img7">
+        <img src="https://randompic.grozav.dev/api/random?8" alt="img8">
+        </div>
+<style>
+    /* ------------------USE THIS----------------------------------- */
+/* .image-container {
+    columns: 250px auto;
+    column-gap: 16px;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+    img {
+    width: 100%;
+    display: block;
+    margin-bottom: 16px;
+    opacity: 0.8;
+    outline: auto;
+    border-radius: 16px;
+    cursor: pointer;
+} */
+    /* ----------------------------------OR THIS-------------------------- */
+    .image-container{
+        columns: 250px;
+    }
+    img{
+    margin: 4px;
+    opacity: 80%;
+    outline: auto;
+    border-radius: 16px;
+    cursor: pointer;
+    width: 100%;
+    display: block;
+    margin-bottom: 16px;
+    }
+</style>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,77 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1 class="Heading">Custom</h1>
+    <header>My Title:</header>
+    <div class="Description">Hey! this is my first self made custom html css website.</div>
+    <!-- <br /> -->
+    <strong><i>Note:</i> without any external refrence guide.</strong>
+    <h2>Main content starts from here. </h2>
+    <main>
+        Now, lets come to the main content of the page which is learning the html and css by doing.
+    </main>
+    <h3>✍️ Time to have some gallery grid view.</h3>
+        <div class="image-container">
+        <img class="gallery" src="https://cataas.com/cat?1" alt="cat1">
+        <img class="gallery" src="https://cataas.com/cat?2" alt="cat2">
+        <img class="gallery" src="https://cataas.com/cat?3" alt="cat3">
+        <img class="gallery" src="https://cataas.com/cat?4" alt="cat4">
+        <img class="gallery" src="https://cataas.com/cat?5" alt="cat5">
+        <img class="gallery" src="https://cataas.com/cat?6" alt="cat6">
+        <img class="gallery" src="https://cataas.com/cat?7" alt="cat7">
+        <img class="gallery" src="https://cataas.com/cat?8" alt="cat8">
+        </div>
+    <hr />
+        <h2>Now, after Gallery- the other stuff.</h2>
+        <div>∗ Here is the embedded GIF.</div>
+        <div style="padding: 1em;">
+        <q>Hi so here is our gif image.</q>
+        </div>
+        <div class="circle-container" style="margin-bottom: 35px">
+            <img class="webp first" src="files/fresh.webp" alt="webp">
+            <img class="webp second" src="files/fresh.webp" alt="webp">
+            <img class="webp third" src="files/fresh.webp" alt="webp">
+        </div>
+        <div>
+          Ok, so now after gif stuff.. <br />
+          We are going to do some other experiments.
+        </div>
+        <span><h2>Now embeddind iframe for local websites.</h2></span>
+        <div>
+          <iframe src="files/indexORindex.html" frameborder="0"></iframe>
+        </div>
+        <div id="last">
+          Ok so till now i also have used some refrence guide and also taken help of AI. <br />
+          <br />
+          Before finishing i want to make a list of random photo API,
+          <ul style="list-style-type: circle">
+            <li>https://cataas.com/cat</li>
+            <li>https://randompic.grozav.dev/api/random</li>
+            <li>https://api.algobook.info/v1/randomimage?category=nature</li>
+            <li>https://random.danielpetrica.com/api/random</li>
+          </ul>
+        </div>
+         <hr />
+        <footer>
+          <p>Author: Akshay Pratap Singh <br />
+            <a href="akshay-365.github.io">akshay-365.github.io</a>
+          </p>
+        </footer>
+  <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,16 @@

+const webps = document.querySelectorAll(".webp");
+const observer = new IntersectionObserver((entries) => {
+entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+    const img = entry.target;
+    const currentSrc = img.src;
+    img.src = "";           // clear to force reload
+    img.src = currentSrc;   // reassign original src to reload
+    }
+});
+}, {
+threshold: 0.5 // trigger when at least 50% of the webp is visible
+});
+webps.forEach((webp) => observer.observe(webp));

style.css CHANGED Viewed

@@ -1,28 +1,154 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+body{
+    color: cornsilk;
+    background-color: black;
+    font-size: x-large;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+header{
+    color: khaki;
+    font-size: 2em;
+    text-align: justify;
+}
+.Heading{
+    color: coral;
+    font: 4em sans-serif;
+    font-style: italic;
+    text-align: center;
+}
+strong{
+    color: burlywood;
+    font-family: monospace;
+    text-decoration: underline;
+    font-size: xx-large;
+}
+.Description, main{
+    font-size: 30px;
+    text-indent: 1em;
+}
+.gallery{
+    /* margin: 4px; */
+    opacity: 80%;
+    outline: auto;
+    border-radius: 16px;
+    cursor: pointer;
+    width: 100%;
+    transition: opacity 0.3s ease;
+    display: block;
+    margin-bottom: 16px;
+}
+.image-container{
+    columns: 250px;
+    margin-right: 32px;
+    margin-left: 32px;
+}
+img:hover {
+    opacity: 1;
+}
+.circle-container {
+display: flex;
+justify-content: center;
+align-items: center;
+}
+.webp {
+display: block;
+width: 300px;
+margin-left: -60px;
+border-radius: 150px;
+outline: auto;
+}
+footer{
+background-color:coral;
+text-align: center;
+font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+font-style: italic;
+outline: auto;
+border-radius: 10px;
+}
+iframe{
+background-color: cadetblue;
+border-radius: 20px;
+width: 100%;
+height: 100vh;
+border: none;
+}
+#last{
+  padding-top: 1em;
+}
+  /* -------------------------------- Responsive adjustments -----------------------*/
+/* Default (mobile first) — up to 540px */
+@media (max-width: 540px) {
+    /* --------------------------- */
+  .webp:nth-child(3) {
+    margin-left: 0;
+  }
+  /* ----------------------------- */
+    .webp.first {
+    display: none;
+    }
+    .webp.second {
+    display: none;
+    }
+    .webp.third {
+    display: block;
+    }
+}
+/* Medium screens — 541px to 768px */
+@media (min-width: 541px) and (max-width: 768px) {
+    /* --------------------------- */
+  .webp:nth-child(2) {
+    margin-left: 0;
+  }
+  /* ----------------------------- */
+  .webp.first {
+    display: none;
+  }
+  .webp.second {
+    display: block;
+  }
+  .webp.third {
+    display: block;
+  }
+}
+/* Large screens — 769px and up */
+@media (min-width: 769px) {
+  /* --------------------------- */
+  .webp:nth-child(1) {
+    margin-left: 0;
+  }
+  /* ----------------------------- */
+  .webp.first {
+    display: block;
+  }
+  .webp.second {
+    display: block;
+  }
+  .webp.third {
+    display: block;
+  }
+}