diff --git a/DD '24 Logo - With Tagline.png b/DD '24 Logo - With Tagline.png new file mode 100644 index 0000000..0b5fa66 Binary files /dev/null and b/DD '24 Logo - With Tagline.png differ diff --git a/main.html b/main.html new file mode 100644 index 0000000..2775552 --- /dev/null +++ b/main.html @@ -0,0 +1,27 @@ + + + + + + + Developer Day Attendance Confirmation + + + + + + +
+
+ Developer Day Logo +

Thank you!

+

Thank you for attending Developer Day 2024, Your attendance for Developer Day has been marked.

+
+
+
+ DREAM DEVELOP + DELIVER +
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..31f1e0e --- /dev/null +++ b/styles.css @@ -0,0 +1,162 @@ +/* Define CSS variables for colors */ +:root { + --dark-blue: #003b66; + --white: #fff; + --shadow-dark: rgba(0, 0, 0, 0.3); + --shadow-light: rgba(0, 0, 0, 0.1); + --light-blue: #9bd7e6; + --blue: #007dd8; + --dark-blue: #0067b2; + --background-text-color: #00a0bf; +} + +body { + font-family: 'Roboto', sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: var(--background-text-color); + color: var(--white); + line-height: 1.8; +} + +.parent { + position: relative; +} + +.container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + background-color: var(--white); + padding: 30px; + border-radius: 20px; + text-align: center; + box-shadow: 0px 10px 20px var(--shadow-dark), 0px 6px 10px var(--shadow-light); + width: 40%; + margin: 0 auto; + position: relative; + transition: all 0.3s ease; + z-index: 2; +} + +.stripes { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('path/to/your/image/blue_stripe.png'); /* Replace with your image path */ + background-repeat: no-repeat; + background-size: cover; + opacity: 0.5; +} + +img { + width: 100%; + height: auto; + border-radius: 50%; + transition: all 0.3s ease; +} + +img:hover { + transform: scale(1.05); +} + +h1 { + font-family: 'Montserrat', sans-serif; + font-size: 3em; + margin-bottom: 0.5em; + font-weight: 700; + color: var(--dark-blue); + letter-spacing: 1px; +} + +p { + font-size: 1.2em; /* Font size for paragraph */ + font-weight: 400; + color: var(--dark-blue); + line-height: 1.8; +} + +.background-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + color: var(--white); + font-size: 3em; + letter-spacing: -5px; + font-weight: 700; + font-family: 'Montserrat', sans-serif; + letter-spacing: 2px; + z-index: 1; + animation: spam 10s infinite; +} + +.background-text span { + margin: 0 auto; +} + +.background-text span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: var(--white); + font-size: 8em; + letter-spacing: -5px; + font-weight: 700; + font-family: 'Montserrat', sans-serif; + letter-spacing: 2px; + z-index: 1; + flex-direction: column; + animation: spam 10s infinite; + content: "DREAM DEVELOP DELIVER"; /* Add the text "DREAM DEVELOP DELIVER" */ +} + +@keyframes spam { + 0% { + transform: translate(0, 0); + } + 25% { + transform: translate(-20px, -20px); + } + 50% { + transform: translate(0, 0); + } + 75% { + transform: translate(20px, 20px); + } + 100% { + transform: translate(0, 0); + } +} + +@media only screen and (max-width: 768px) { + h1 { + font-size: 2em; + } + + p { + font-size: 1em; + } + + .background-text { + width: 50%; /* Adjust width for smaller screens */ + } +} \ No newline at end of file