-
Notifications
You must be signed in to change notification settings - Fork 255
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1cd6ad3
commit 6df606b
Showing
4 changed files
with
277 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,227 @@ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| background-color: #f0f0f0; | ||
| } | ||
|
|
||
| .certificate { | ||
| width: 700px; | ||
| height: 500px; | ||
| position: relative; | ||
| text-align: left; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| overflow: hidden; | ||
| padding: 30px 40px; | ||
| } | ||
|
|
||
| .certificate-bg { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| z-index: -1; | ||
| opacity: 0.8; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| .rentalog-logo { | ||
| display: block; | ||
| margin: 0; | ||
| height: 70px; | ||
| width: 160px; | ||
| position: absolute; | ||
| top: 10px; | ||
| left: 120px; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .rental-info { | ||
| text-align: left; | ||
| margin-top: 60px; | ||
| } | ||
|
|
||
| .rental-info p { | ||
| font-size: 14px; | ||
| color: #333; | ||
| font-weight: 500; | ||
| margin-bottom: 20px; | ||
| margin-top: -30px; | ||
| width: 60%; | ||
| margin-left: -2%; | ||
| } | ||
|
|
||
| .content { | ||
| position: relative; | ||
| padding: 20px; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .header p { | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| margin-top: 10px; | ||
| color: #060506; | ||
| text-align: left; | ||
| margin-left: -20px; | ||
| } | ||
|
|
||
| .name { | ||
| font-family: "Brush Script MT", cursive; | ||
| font-size: 40px; | ||
| font-weight: bold; | ||
| margin: 20px 0; | ||
| color: #4a148c; | ||
| text-align: left; | ||
| margin-left: -20px; | ||
| } | ||
|
|
||
| .description { | ||
| font-size: 18px; | ||
| line-height: 1.5; | ||
| color: #333; | ||
| margin-top: 10px; | ||
| text-align: left; | ||
| margin-left: -20px; | ||
| width: 60%; | ||
| } | ||
|
|
||
| .description span { | ||
| font-weight: bold; | ||
| color: #4a148c; | ||
| } | ||
|
|
||
| .signatures-logos { | ||
| display: flex; | ||
| position: absolute; | ||
| bottom: -120px; | ||
| left: 0; | ||
| width: calc(100% - 80px); | ||
| } | ||
|
|
||
| .signatures h2 { | ||
| font-size: 20px; | ||
| color: #4a148c; | ||
| margin-bottom: -10px; | ||
| } | ||
|
|
||
| .signatures p::before { | ||
| content: ""; | ||
| display: block; | ||
| width: 100%; | ||
| height: 3px; | ||
| background-color: #daa520; | ||
| margin-top: 5px; | ||
| } | ||
|
|
||
| .signatures p { | ||
| font-size: 16px; | ||
| color: #555; | ||
| padding-bottom: 5px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .signatures span { | ||
| color: #4a148c; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .logos { | ||
| display: flex; | ||
| align-items: center; | ||
| width: 200px; | ||
| margin-left: 62px; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 60px; | ||
| width: auto; | ||
| padding: 10px; | ||
| margin: 0 5px; | ||
| } | ||
|
|
||
| /* Responsive styles */ | ||
| @media screen and (max-width: 768px) { | ||
| .certificate { | ||
| width: 90%; | ||
| height: auto; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .rentalog-logo { | ||
| height: 50px; | ||
| width: auto; | ||
| left: 20px; | ||
| } | ||
|
|
||
| .rental-info p { | ||
| font-size: 12px; | ||
| width: 100%; | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .name { | ||
| font-size: 28px; | ||
| } | ||
|
|
||
| .description { | ||
| font-size: 16px; | ||
| width: 100%; | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .signatures-logos { | ||
| bottom: -90px; | ||
| width: calc(100% - 40px); | ||
| } | ||
|
|
||
| .logos { | ||
| width: 100%; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 50px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 480px) { | ||
| .certificate { | ||
| width: 100%; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| .rentalog-logo { | ||
| height: 40px; | ||
| width: auto; | ||
| left: 30px; | ||
| } | ||
|
|
||
| .name { | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .description { | ||
| font-size: 14px; | ||
| width: 100%; | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .signatures-logos { | ||
| bottom: -70px; | ||
| width: calc(100% - 20px); | ||
| } | ||
|
|
||
| .logos { | ||
| justify-content: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 40px; | ||
| } | ||
| } |
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,50 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Certificate</title> | ||
| <link rel="stylesheet" href="certificate.css"> | ||
| </head> | ||
| <body> | ||
| <div class="certificate"> | ||
| <!-- Certificate Background Image --> | ||
| <img src="template.png" alt="Certificate Background" class="certificate-bg"> | ||
| <img src="logo.png" alt="Rentalog Logo" class="rentalog-logo"> | ||
|
|
||
| <div class="content"> | ||
| <!-- Centered Description Below Logo --> | ||
| <div class="rental-info"> | ||
| <p>Rentalog.in connects people to essential rental resources, <br>making the rental process simple and efficient.</br></p> | ||
| </div> | ||
|
|
||
| <!-- Certificate Header --> | ||
| <div class="header"> | ||
| <p>This is to certify that</p> | ||
| </div> | ||
|
|
||
| <!-- Name of Contributor --> | ||
| <div class="name">[Contributor Name]</div> | ||
|
|
||
| <!-- Certificate Description --> | ||
| <div class="description"> | ||
| has contributed to <span>Rentalog.in</span> under GirlScript <br>Summer Of Code (GSSoC) '2024 as a Contributor.</br> | ||
| <p>Date: <span id="date">[Date]</span></p> | ||
| </div> | ||
|
|
||
| <!-- Signature Section --> | ||
| <div class="signatures-logos"> | ||
| <div class="signatures"> | ||
| <h2>Gaurav Pratap Singh</h2> | ||
| <p>Founder and CEO of <span>Rentalog.in</span></p> | ||
| </div> | ||
| <!-- Logo Section --> | ||
| <div class="logos"> | ||
| <img src="https://raw.githubusercontent.com/github/explore/e838e6d3526495c83c195ed234acf109cb781f00/topics/hacktoberfest/hacktoberfest.png" alt="Hacktoberfest Logo" class="logo"> | ||
| <img src="https://media.licdn.com/dms/image/v2/C510BAQGSObrO0QPlMQ/company-logo_200_200/company-logo_200_200/0/1630597186826/girlscriptsoc_logo?e=2147483647&v=beta&t=hMIYqKIIlV3PFys0Ff4bQba_kZIMvychDesmF1_xmcU" alt="GirlScript Logo" class="logo"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.