-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1 lines (1 loc) · 4.84 KB
/
index.html
1
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /><script src="https://kit.fontawesome.com/a076d05399.js"></script><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><title>All Facts</title><style>body,html{height:100%}body{background-image:radial-gradient(circle 939px at 94.7% 50%,rgba(0,178,169,1) 0,rgba(0,106,101,1) 76.9%)}#crd-body,#crd-head{background-image:linear-gradient(112.1deg,rgba(32,38,57,1) 11.4%,rgba(63,76,119,1) 70.2%)}#factContainer{background-image:linear-gradient(109.6deg,rgba(44,83,131,1) 18.9%,rgba(95,175,201,1) 91.1%)}.all_alerts{top:5px;position:fixed;z-index:10000;width:100%}.card{margin-top:20%}.btn-circle.btn-xl{width:70px;height:70px;padding:10px 16px;border-radius:35px;font-size:37px;line-height:1.33;right:1.5rem;bottom:1.3rem;position:fixed;z-index:100}.modal-content{border-radius:40%;background-image:radial-gradient(circle farthest-corner at .8% 3.1%,rgba(255,188,224,1) 0,rgba(170,165,255,1) 46%,rgba(165,255,205,1) 100.2%)}@media (max-width:450px){.btn-circle.btn-xl{right:1rem;bottom:.9rem}}</style></head><body><div class="all_alerts"><div class="row"><div class="alert_container col-11 col-md-7 mx-auto"></div></div></div><div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header border-0"><h5 class="modal-title w-100 text-center">About</h5></div><div class="modal-body"><div class="mx-auto" style="width:20rem"><h4 class="card-title text-center">Ravinder Singh</h4><p class="card-text text-center">Python Developer | Web Developer</p><h4 class="badge badge-info text-light w-100" style="height:20px">Skills</h4><div class="row" style="margin:8px 0"><div class="col-3"><a class="badge badge-dark text-light">HTML </a></div><div class="col-3"><a class="badge badge-warning text-dark">CSS</a></div><div class="col-3"><a class="badge badge-success text-dark">JS</a></div><div class="col-3"><a class="badge badge-dark text-light">jQuery</a></div><div class="col-3"><a class="badge badge-dark text-light">Bootstrap</a></div><div class="col-3"><a class="badge badge-success text-dark">Django</a></div><div class="col-3"><a class="badge badge-dark text-light">PHP</a></div><div class="col-3"><a class="badge badge-warning text-dark">SQL</a></div><div class="col-3"><a class="badge badge-success text-dark">Python</a></div><div class="col-3"><a class="badge badge-warning text-dark">Tkinter</a></div><div class="col-4"><a class="badge badge-warning text-dark">Web Scraping</a></div><div class="col-3"><a class="badge badge-dark text-light">PyQt</a></div><div class="col-4"><a class="badge badge-dark text-light">Pygame</a></div><div class="col-4"><a class="badge badge-success text-light">C++</a></div></div><h4 class="badge badge-info text-light w-100" style="height:20px">_</h4></div><div class="card-text text-center"><a href="https://www.linkedin.com/in/ravindermaan/" class="badge-pill text-light" target="_blank" style="background-color:#81B622">Contact Me</a></div></div><div class="modal-footer border-0"><button type="button" class="btn btn-outline-dark mx-auto" data-dismiss="modal">Close</button></div></div></div></div><div class="container"><div class="row"><div class="col-md-8 col-lg-6 mx-auto"><div class="card border border-warning"><div class="card-header text-white" id="crd-head"><h3>Number Facts</h3><p>Type any number to get a fact associated with it</p></div><div class="card-body" id="crd-body"><div class="row"><div class="col-7 col-sm-8"><input type="number" class="form-control" id="number"></div><div class="col-5 col-sm-4"><select class="form-control" id="operation"><option>Trivia</option><option>Math</option><option>Date</option></select></div></div></div><div class="card-footer d-none text-light" id="factContainer"><h5 class="card-title"><i>Fact:</i></h5><div class="fact"></div></div></div></div></div></div><button type="submit" class="btn btn-warning btn-circle btn-xl shadow" data-toggle="modal" data-target="#aboutModal"><i class="far fa-comments"></i></button><script src="app.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script></body></html>