Created
March 7, 2026 01:14
-
-
Save frezocsss-cmd/ef82ffe4d90188fa97038f276957f4a3 to your computer and use it in GitHub Desktop.
My Portfolio Website
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>John Kendric</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" | |
| integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <nav> | |
| <h1>Portfolio</h1> | |
| <input class="check" id="check" type="checkbox" /> | |
| <ol> | |
| <li><a href="#">home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">Portfolio</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ol> | |
| <label class="s1" for="check"> | |
| <i class="fa-solid fa-bars"></i> | |
| </label> | |
| <label class="s2" for="check"> | |
| <i class="fa-solid fa-xmark"></i> | |
| </label> | |
| </nav> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="container"> | |
| <section> | |
| <div class="father"> | |
| <div class="son1"> | |
| <h2>Hello It's Me</h2> | |
| <h1>John Kendric</h1> | |
| <h2>And I'm a <span>Frontend Developer</span></h2> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae | |
| nulla libero labore | |
| </p> | |
| <p>exercitationem, iste iusto unde eos.</p> | |
| <div class="lk"> | |
| <a href="https://www.facebook.com/?locale=ru_RU"> | |
| <img src="images/Link.png" alt="" /> | |
| </a> | |
| <a href="https://x.com/?lang=ru"> | |
| <img src="images/Link (1).png" alt="" /> | |
| </a> | |
| <a href="https://www.instagram.com/"> | |
| <img src="images/Link (2).png" alt="" /> | |
| </a> | |
| <a href="https://www.linkedin.com/"> | |
| <img src="images/Link (3).png" alt="" /> | |
| </a> | |
| </div> | |
| <button>Download CV</button> | |
| </div> | |
| <div class="son2"> | |
| <img src="images/john.png" alt=""> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="our">Our <span>Services</span></h2> | |
| <div class="lak"> | |
| <div class="gym1"> | |
| <img src="images/Vector (11).png" alt=""> | |
| <h2>Web Development</h2> | |
| <p>Lorem ipsum dolor sit amet consectetur recusandae voluptas et voluptatibus</p> | |
| <button>Read More</button> | |
| </div> | |
| <div class="gym2"> | |
| <img src="images/Vector (12).png" alt=""> | |
| <h2>Web Development</h2> | |
| <p>Lorem ipsum dolor sit amet consectetur recusandae voluptas et voluptatibus</p> | |
| <button>Read More</button> | |
| </div> | |
| <div class="gym3"> | |
| <img src="images/Vector (13).png" alt=""> | |
| <h2>Web Development</h2> | |
| <p>Lorem ipsum dolor sit amet consectetur recusandae voluptas et voluptatibus</p> | |
| <button>Read More</button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="ss"> | |
| <h2>Latest<span>Project</span></h2> | |
| <div class="ik"> | |
| <div class="samp"> | |
| <img src="images/note.jpg" alt=""> | |
| </div> | |
| <div class="samp"> | |
| <img src="images/note.jpg" alt=""> | |
| </div> | |
| <div class="samp"> | |
| <img src="images/note.jpg" alt=""> | |
| </div> | |
| <div class="samp"> | |
| <img src="images/note.jpg" alt=""> | |
| </div> | |
| <div class="samp"> | |
| <img src="images/note.jpg" alt=""> | |
| </div> | |
| <div class="samp"> | |
| <img src="images/note.jpg" alt=""> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="email"> | |
| <div class="lol"> | |
| <h2>Contact <span>Me!</span></h2> | |
| </div> | |
| <div class="ota"> | |
| <div class="liri"> | |
| <input class="s1s1" id="simm" type="text" placeholder="Full Name"> | |
| <input class="s1s1" id="simm" type="email" placeholder="Email Address"> | |
| <input class="s1s1" id="simm" type="number" placeholder="Mobile Number"> | |
| <input class="s1s1" id="simm" type="email" placeholder="Email Subject"> | |
| <input class="grip" type="text"> | |
| </div> | |
| </div> | |
| <div class="lasat"> | |
| <button class="sims">Send Message</button> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <div class="jas"> | |
| <div class="rico"> | |
| <h2>Copyright © 2023 by Codehal | All Rights Reserved.</h2> | |
| </div> | |
| <div class="rico"> | |
| <button class="jaska"> | |
| <i class="fa-solid fa-arrow-up"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or 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
| * { | |
| margin: 0; | |
| padding: 0; | |
| color: inherit; | |
| text-decoration: none; | |
| box-sizing: border-box; | |
| list-style: none; | |
| font-family: cursive; | |
| } | |
| .container { | |
| width: 1280px; | |
| margin: 0 auto; | |
| } | |
| body { | |
| background-color: #1f242d; | |
| } | |
| header { | |
| padding: 27px 20px; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| h1 { | |
| font-family: Poppins; | |
| font-weight: 600; | |
| font-style: SemiBold; | |
| font-size: 25px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| color: white; | |
| } | |
| } | |
| ol { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 40px; | |
| li { | |
| font-family: Poppins; | |
| font-weight: 400; | |
| font-style: Regular; | |
| font-size: 17px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| color: white; | |
| } | |
| } | |
| li:hover { | |
| color: #00eeff; | |
| } | |
| .s1 { | |
| display: none; | |
| color: white; | |
| } | |
| .s2 { | |
| display: none; | |
| color: white; | |
| } | |
| .check { | |
| display: none; | |
| } | |
| .check:checked ~ ol { | |
| left: 0; | |
| transition: 1s; | |
| } | |
| .check:checked ~ ol ~ .s1 { | |
| display: none; | |
| } | |
| .check:checked ~ ol ~ .s2 { | |
| display: block; | |
| font-size: 25px; | |
| } | |
| main { | |
| padding-top: 221px; | |
| } | |
| .father { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .son1 { | |
| h1 { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 56px; | |
| line-height: 72.8px; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| color: white; | |
| } | |
| h2 { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 32px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| color: white; | |
| } | |
| span { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 32px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| color: #00eeff; | |
| } | |
| p { | |
| font-family: Poppins; | |
| font-weight: 400; | |
| font-style: Regular; | |
| font-size: 16px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| color: white; | |
| margin-top: 21px; | |
| } | |
| } | |
| .lk { | |
| display: flex; | |
| gap: 17px; | |
| margin-top: 31px; | |
| } | |
| button { | |
| font-family: Poppins; | |
| font-weight: 600; | |
| font-style: SemiBold; | |
| font-size: 16px; | |
| line-height: 100%; | |
| letter-spacing: 1px; | |
| vertical-align: middle; | |
| box-shadow: 0px 0px 10px 0px #00eeff; | |
| background-color: #00eeff; | |
| width: 176px; | |
| height: 45px; | |
| border-radius: 40px; | |
| border: none; | |
| outline: none; | |
| margin-top: 30px; | |
| color: white; | |
| } | |
| button:active { | |
| color: #00eeff; | |
| background-color: transparent; | |
| } | |
| .lak { | |
| padding-top: 53px; | |
| padding-bottom: 237px; | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| row-gap: 40px; | |
| } | |
| .gym1 { | |
| width: 380px; | |
| height: 369px; | |
| border-radius: 20px; | |
| border-width: 2px; | |
| background-color: #323946; | |
| border: 2px solid #1f242d; | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 5px; | |
| align-items: center; | |
| padding: 42px 30px; | |
| color: white; | |
| img { | |
| width: 70px; | |
| height: 70px; | |
| } | |
| } | |
| .our { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 45px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| text-align: center; | |
| vertical-align: middle; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 10px; | |
| color: white; | |
| } | |
| span { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 45px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| text-align: center; | |
| vertical-align: middle; | |
| color: #00eeff; | |
| } | |
| .gym2 { | |
| width: 380px; | |
| height: 369px; | |
| border-radius: 20px; | |
| border-width: 2px; | |
| background-color: #323946; | |
| border: 2px solid #1f242d; | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 5px; | |
| align-items: center; | |
| padding: 42px 30px; | |
| color: white; | |
| img { | |
| width: 70px; | |
| height: 70px; | |
| } | |
| } | |
| .gym3 { | |
| width: 380px; | |
| height: 369px; | |
| border-radius: 20px; | |
| border-width: 2px; | |
| background-color: #323946; | |
| border: 2px solid #1f242d; | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 5px; | |
| align-items: center; | |
| padding: 42px 30px; | |
| color: white; | |
| img { | |
| width: 70px; | |
| height: 70px; | |
| } | |
| } | |
| .ss { | |
| background-color: #323946; | |
| padding: 120px 130px 120px 130px; | |
| max-width: 100%; | |
| h2 { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 45px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| text-align: center; | |
| color: white; | |
| vertical-align: middle; | |
| } | |
| span { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 45px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| } | |
| .ik { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| margin-top: 40px; | |
| row-gap: 25px; | |
| } | |
| .samp { | |
| img { | |
| width: 320px; | |
| height: 200px; | |
| border-radius: 20px; | |
| } | |
| } | |
| .email { | |
| padding-top: 120px; | |
| padding-bottom: 170px; | |
| } | |
| .lol { | |
| h2 { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 45px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| text-align: center; | |
| vertical-align: middle; | |
| color: white; | |
| } | |
| span { | |
| font-family: Poppins; | |
| font-weight: 700; | |
| font-style: Bold; | |
| font-size: 45px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| text-align: center; | |
| vertical-align: middle; | |
| color: #00eeff; | |
| } | |
| } | |
| .ota { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-top: 37px; | |
| } | |
| .liri { | |
| max-width: 700px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| align-items: center; | |
| row-gap: 15px; | |
| } | |
| .s1s1 { | |
| width: 343px; | |
| height: 55px; | |
| border-radius: 8px; | |
| padding: 15px; | |
| color: #757575; | |
| background-color: #323946; | |
| border: none; | |
| outline: none; | |
| font-family: Poppins; | |
| font-weight: 400; | |
| font-style: Regular; | |
| font-size: 16px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| } | |
| .grip { | |
| width: 700px; | |
| height: 280px; | |
| border-radius: 8px; | |
| background-color: #323946; | |
| border: none; | |
| outline: none; | |
| color: #757575; | |
| font-family: Poppins; | |
| font-weight: 400; | |
| font-style: Regular; | |
| font-size: 16px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| padding: 20px; | |
| text-align: start; | |
| } | |
| .lasat { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .sims { | |
| text-align: center; | |
| color: white; | |
| } | |
| footer { | |
| background: #323946; | |
| height: 80px; | |
| padding: 0px 20px; | |
| } | |
| .jas { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .jaska { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| } | |
| .rico { | |
| h2 { | |
| font-family: Poppins; | |
| font-weight: 400; | |
| font-style: Regular; | |
| font-size: 16px; | |
| line-height: 100%; | |
| letter-spacing: 0%; | |
| vertical-align: middle; | |
| margin-top: 30px; | |
| color: white; | |
| } | |
| i { | |
| color: black; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| max-width: 600px; | |
| } | |
| nav h1 { | |
| font-size: 22px; | |
| } | |
| .s1 { | |
| display: block; | |
| font-size: 25px; | |
| } | |
| ol { | |
| position: absolute; | |
| top: 0; | |
| left: -1000px; | |
| height: 100vh; | |
| background-color: #323946; | |
| flex-direction: column; | |
| width: 250px; | |
| font-size: 25px; | |
| row-gap: 60px; | |
| transition: 1s; | |
| box-shadow: 25px 0 10px 0 rgba(6, 55, 147, 0.2); | |
| } | |
| .father { | |
| justify-content: center; | |
| row-gap: 45px; | |
| } | |
| .son1 { | |
| h2 { | |
| font-size: 22px; | |
| } | |
| h1 { | |
| font-size: 44px; | |
| } | |
| span { | |
| font-size: 22px; | |
| } | |
| img { | |
| width: 35px; | |
| height: 35px; | |
| } | |
| } | |
| .lak { | |
| justify-content: center; | |
| } | |
| .smokoe { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .gym1 { | |
| width: 366px; | |
| height: 265px; | |
| padding: 15px 10px; | |
| text-align: center; | |
| h2 { | |
| font-size: 20.8px; | |
| } | |
| p { | |
| max-width: 244.9803009033203; | |
| font-size: 14.1px; | |
| } | |
| button { | |
| width: 122px; | |
| height: 33px; | |
| } | |
| } | |
| .gym2 { | |
| width: 366px; | |
| height: 265px; | |
| padding: 15px 10px; | |
| text-align: center; | |
| h2 { | |
| font-size: 20.8px; | |
| } | |
| p { | |
| max-width: 244.9803009033203; | |
| font-size: 14.1px; | |
| } | |
| button { | |
| width: 122px; | |
| height: 33px; | |
| } | |
| } | |
| .gym3 { | |
| width: 721.9400024414062px; | |
| height: 274.95001220703125px; | |
| border-radius: 17.6px; | |
| border-width: 1px; | |
| padding: 15px 10px; | |
| text-align: center; | |
| h2 { | |
| font-size: 20.8px; | |
| } | |
| p { | |
| max-width: 244.9803009033203; | |
| font-size: 14.1px; | |
| } | |
| button { | |
| width: 122px; | |
| height: 33px; | |
| } | |
| } | |
| .samp { | |
| img { | |
| width: 300px; | |
| height: 200px; | |
| } | |
| } | |
| .ik { | |
| justify-content: center; | |
| gap: 20px; | |
| } | |
| .ss { | |
| padding: 20px 20px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| max-width: 320px; | |
| } | |
| ol { | |
| width: 255px; | |
| } | |
| .son2 { | |
| img { | |
| width: 273px; | |
| height: 331px; | |
| } | |
| } | |
| .gym1 { | |
| width: 366px; | |
| height: 265px; | |
| padding: 15px 10px; | |
| text-align: center; | |
| h2 { | |
| font-size: 20.8px; | |
| } | |
| p { | |
| max-width: 305.0086364746094px; | |
| font-size: 12.8px; | |
| } | |
| button { | |
| width: 122px; | |
| height: 33px; | |
| } | |
| } | |
| .gym2 { | |
| width: 366px; | |
| height: 265px; | |
| padding: 15px 10px; | |
| text-align: center; | |
| h2 { | |
| font-size: 20.8px; | |
| } | |
| p { | |
| max-width: 305.0086364746094px; | |
| font-size: 12.8px; | |
| } | |
| button { | |
| width: 122px; | |
| height: 33px; | |
| } | |
| } | |
| .gym3 { | |
| width: 366px; | |
| height: 265px; | |
| padding: 15px 10px; | |
| text-align: center; | |
| h2 { | |
| font-size: 20.8px; | |
| } | |
| p { | |
| max-width: 305.0086364746094px; | |
| font-size: 12.8px; | |
| } | |
| button { | |
| width: 122px; | |
| height: 33px; | |
| } | |
| } | |
| .liri { | |
| justify-content: center; | |
| } | |
| .s1s1 { | |
| width: 366.6300048828125px; | |
| height: 42px; | |
| } | |
| .grip { | |
| width: 366.6300048828125px; | |
| height: 204px; | |
| } | |
| .rico{ | |
| h2{ | |
| font-size: 12px; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment