| <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> |