-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from shendgeshraddha/main
Pet me
- Loading branch information
Showing
6 changed files
with
504 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Pet Shop</title> | ||
| <link rel="stylesheet" href="../css/about-css.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="http://127.0.0.1:5500/html/home.html">Home</a></li> | ||
| <li><a href="http://127.0.0.1:5500/html/contact.html">Contact</a></li> | ||
| <li><a href="http://127.0.0.1:5500/html/about.html">About</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="search"> | ||
| <input type="text" name="" id="" placeholder="Ex. Persian cat" /> | ||
| <button class="btn">Search</button> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <div class="about"> | ||
| <h1>Welcome to Pet Haven - Where Love Finds a Home</h1> | ||
| <p>At Pet Haven, we are more than just a pet shop; we are a sanctuary for rescue animals seeking love and a forever family. Our mission, since 21st July 2023, is to be a safe haven for pets in need, giving them a second chance at happiness.</p> | ||
| <p>Why choose Pet Haven? Because here, every adoption is a transformative journey. When you adopt a pet from us, you're not just providing a home; you're giving hope to a soul that deserves love. Each of our pets has a unique story of resilience, and with your support, they can begin a new chapter filled with joy and companionship.</p> | ||
| <p>Our adoption process is designed to ensure the perfect match between you and your future furry friend. We take the time to understand your needs and lifestyle, making sure that the love connection is genuine and lasting.</p> | ||
| <p>Join our Pet Haven community, a network of compassionate individuals who share a common goal - to make a difference in the lives of animals. Together, we celebrate the magic of adoption, share heartwarming stories, and provide valuable resources for pet care and happiness.</p> | ||
| <p>Take a step towards love and kindness. Visit Pet Haven today and experience the joy of bringing a rescue pet into your life. Find your soulmate, your confidant, and your most loyal companion at Pet Haven - Where Love Finds a Home! 🐾💕</p> | ||
| <p>~ Shravani.</p> | ||
| </div> | ||
| </main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| header { | ||
| background-color: pink; | ||
| } | ||
| nav { | ||
| display: flex; | ||
| } | ||
| .logo { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .logo img { | ||
| width: 88px; | ||
| padding: 0 25px; | ||
| } | ||
| nav ul { | ||
| height: 58px; | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } | ||
| nav ul li { | ||
| list-style: none; | ||
| padding: 0 23px; | ||
| } | ||
| nav ul li a{ | ||
| color:black; | ||
| text-decoration-line: none; | ||
| } | ||
| nav ul li a:hover { | ||
| font-weight: bold; | ||
| } | ||
| .search { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .search input { | ||
| width: 30vw; | ||
| height: 27px; | ||
| border-radius: 2px; | ||
| margin: 0 18px 0 50px; | ||
| padding: 0 10px; | ||
| } | ||
| .search button { | ||
| font-family: "Lato", sans-serif; | ||
| } | ||
| main { | ||
| background-color: peachpuff; | ||
| min-height: calc(100vh - 54px ); | ||
| /* height: 100vh; */ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| .about { | ||
| height: 500px; | ||
| width: 600px; | ||
| background-color: rgb(249, 235, 208); | ||
| margin: 20px; | ||
| padding: 33px; | ||
| border: 1px solid salmon; | ||
| border-radius: 3px; | ||
| } | ||
| h1{ | ||
| font-size: 45px; | ||
| margin-bottom: 10px; | ||
|
|
||
| } | ||
| p{ | ||
| font-size: 17px; | ||
| margin-bottom: 10px; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| body { | ||
| position: fixed; | ||
| } | ||
| header { | ||
| background-color: pink; | ||
| } | ||
| nav { | ||
| display: flex; | ||
| } | ||
| .logo { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .logo img { | ||
| width: 88px; | ||
| padding: 0 25px; | ||
| } | ||
| nav ul { | ||
| height: 58px; | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } | ||
| nav ul li { | ||
| list-style: none; | ||
| padding: 0 23px; | ||
| } | ||
| nav ul li a{ | ||
| color:black; | ||
| text-decoration-line: none; | ||
| } | ||
| nav ul li a:hover { | ||
| font-weight: bold; | ||
| } | ||
| .search{ | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .search input{ | ||
| width: 30vw; | ||
| height: 27px; | ||
| border-radius: 2px; | ||
| margin: 0 18px 0 50px; | ||
| padding: 0 10px; | ||
| } | ||
| .search button{ | ||
| font-family: "Lato", sans-serif; | ||
| } | ||
| main { | ||
| height: 100vh; | ||
| width: 100vw; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-content: center; | ||
| background-color: peachpuff; | ||
| } | ||
| .container { | ||
| display: flex; | ||
| margin: 11vh; | ||
| width: 31vw; | ||
| height: 70vh; | ||
| border: 2px solid salmon; | ||
| border-radius: 10px; | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| background-color: white; | ||
| color: black; | ||
| } | ||
| .question { | ||
| font-size: 4vh; | ||
| margin: 4vh auto; | ||
| } | ||
| .fill { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| } | ||
| .fill input { | ||
| font-family: "Lato", sans-serif; | ||
| height: 5vh; | ||
| width: 25vw; | ||
| margin: 1vh auto; | ||
| /* margin: 0 18px 0 50px; */ | ||
| padding: 0 10px; | ||
| } | ||
| /* .options input :hover{ | ||
| font-weight: bold; | ||
| } */ | ||
| .submit { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 3vh auto -1vh; | ||
| } | ||
| .submit input { | ||
| height: 5vh; | ||
| width: 20vw; | ||
| margin: 0 18px 0 50px; | ||
| padding: 0 10px; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Pet Shop</title> | ||
| <link rel="stylesheet" href="../css/contact-css.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="http://127.0.0.1:5500/html/home.html">Home</a></li> | ||
| <li><a href="http://127.0.0.1:5500/html/contact.html">Contact</a></li> | ||
| <li><a href="http://127.0.0.1:5500/html/about.html">About</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="search"> | ||
| <input type="text" name="" id="" placeholder="Ex. Persian cat" /> | ||
| <button class="btn">Search</button> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <div class="container"> | ||
| <div class="question"><p>Wanna adopt paw baby?</p></div> | ||
| <div class="fill"> | ||
| <input type="text" placeholder="Full name" > | ||
| <input type="text" placeholder="Email" > | ||
| <input type="text" placeholder="Phone Number" > | ||
| <input type="text" placeholder="Pet" > | ||
| <input type="text" placeholder="Breed" > | ||
| <input type="text" placeholder="Do you have any paw baby alredy?" > | ||
| </div> | ||
| <div class="submit"> | ||
| <input type="button" value="Submit" > | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Lato:wght@300&family=Red+Hat+Display:wght@300&family=Sarabun:wght@100&family=Satisfy&display=swap'); | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| header { | ||
| background-color: pink; | ||
| } | ||
| nav { | ||
| display: flex; | ||
| } | ||
| nav ul { | ||
| height: 58px; | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } | ||
| nav ul li { | ||
| list-style: none; | ||
| padding: 0 23px; | ||
| } | ||
| nav ul li a{ | ||
| color:black; | ||
| text-decoration-line: none; | ||
| } | ||
| nav ul li a:hover { | ||
| font-weight: bold; | ||
| } | ||
| .search { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .search input { | ||
| width: 30vw; | ||
| height: 27px; | ||
| border-radius: 2px; | ||
| margin: 0 18px 0 50px; | ||
| padding: 0 10px; | ||
| } | ||
| .search button { | ||
| font-family: "Lato", sans-serif; | ||
| } | ||
| .container { | ||
| background-color: peachpuff; | ||
| min-height: calc(100vh - 58px - 12vh); | ||
| } | ||
| .slider { | ||
| margin: auto; | ||
| width: 80vw; | ||
| position: relative; | ||
| text-align: center; | ||
| color: white; | ||
| overflow: hidden; | ||
| } | ||
| .slider img { | ||
| border: 1px solid salmon; | ||
| border-radius: 2px; | ||
| } | ||
| .centered { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| font-size: 72px; | ||
| } | ||
| .card { | ||
| background-color: rgba(255, 255, 255, 0.475); | ||
| border: 1px black; | ||
| border-radius: 2px; | ||
| max-width: 91vw; | ||
| margin: auto; | ||
| padding: 9px; | ||
| } | ||
| .card-item { | ||
| padding: 0 17px 0 17px; | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| } | ||
| .card-item img { | ||
| border: 1px solid salmon; | ||
| border-radius: 2px; | ||
| } | ||
| .card h2 { | ||
| font-family: "Lato", sans-serif; | ||
| } | ||
| .card line { | ||
| font-family: "Lato", sans-serif; | ||
| } | ||
| .card p:hover { | ||
| font-weight: bold; | ||
| } | ||
| .flex-all-center { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| footer { | ||
| background-color: rgb(240, 159, 186); | ||
| color: white; | ||
| height: 30px; | ||
| font-family: "Lato", sans-serif; | ||
| } |
Oops, something went wrong.