diff --git a/Images/Logo.jpg b/Images/Logo.jpg new file mode 100644 index 0000000..6fe01e3 Binary files /dev/null and b/Images/Logo.jpg differ diff --git a/Images/Req_img.png b/Images/Req_img.png new file mode 100644 index 0000000..1384798 Binary files /dev/null and b/Images/Req_img.png differ diff --git a/Images/logo.png b/Images/logo.png new file mode 100644 index 0000000..1d07498 Binary files /dev/null and b/Images/logo.png differ diff --git a/Pre_Reg_Img/short.png b/Pre_Reg_Img/short.png deleted file mode 100644 index abb43c7..0000000 Binary files a/Pre_Reg_Img/short.png and /dev/null differ diff --git a/Pre_Reg_Temp1.css b/Pre_Reg_Temp1.css deleted file mode 100644 index ffa5efd..0000000 --- a/Pre_Reg_Temp1.css +++ /dev/null @@ -1,162 +0,0 @@ -html, body { - height: 100%; - width: 100%; - margin: 0; - display: flex; - justify-content: center; - align-items: center; - background: #f0cce5; -} - -body { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - text-align: center; -} - -.container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 80%; -} - -.container .img-sho{ - display: none; - width: 100%; - height: auto; -} - -.container-1, .container-2{ - display: flex; - align-items: center; - justify-content: space-around; - width: 100%; - text-align: center; - margin: 30px 0 30px 0; -} - -.container-1 h1, .container h1 { - font-family: "IBM Plex Serif", serif; - font-weight: 700; - font-size: 5rem; - letter-spacing: 3px; -} - -.date-con{ - display: flex; - align-items: center; - margin: 25px 0px 25px 0px; -} - -.date-con p{ - font-style: italic; - font-size: 1.5rem; - font-weight: 200; -} - -.date-con button{ - font-family: "IBM Plex Serif", serif; - padding: 15px; - margin: 0px 20px 0px 20px; - border-radius: 120px; - font-size: 1rem; - width: auto; - border: 1px solid black; - border-bottom-width: 3px; - cursor: pointer; -} - -.join{ - background-color: white; -} - -.reg{ - background-color: blueviolet; - color: white; -} - -.join:hover, .reg:hover{ - border-bottom-width: 1px; - opacity: .6; - transition: all .45s ease; -} - -@media (max-width: 1123px){ - .date-con{ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - margin: 0 auto; - } - .container-1 h1, .container h1 { - font-weight: 700; - font-size: 3.5rem; - letter-spacing: 2.4px; - } - .container img{ - width: 23%; - } -} - -@media (max-width: 820px){ - .container-1 h1, .container h1 { - font-weight: 700; - font-size: 3rem; - letter-spacing: 2px; - } - .container img{ - width: 20%; - } -} - -@media (max-width: 631px){ - .container-1 h1, .container h1 { - font-weight: 700; - font-size: 2.4rem; - letter-spacing: 1.6px; - } - .container img{ - width: 16%; - } -} - -@media (max-width: 549px){ - div .date-con{ - width: 100%; - } - .btn a .join,.btn a .reg{ - width: 100%; - margin: 10px; - } -} - -@media (max-width: 442px){ - .container-1, .container-2{ - display: none; - } - .container .img-sho{ - display: block; - margin: 0 auto; - } - .date-con button{ - padding: 10px; - margin: 0px 15px 0px 15px; - border-radius: 120px; - font-size: .8rem; - font-style: oblique; - width: auto; - border: 1px solid black; - border-bottom-width: 3px; - } - .date-con p{ - font-style: italic; - font-size: 1rem; - font-weight: 200; - } -} \ No newline at end of file diff --git a/index.html b/index.html index ff2a1c2..5a40c84 100644 --- a/index.html +++ b/index.html @@ -3,32 +3,41 @@ - Document - - - - + PEC HACKS 2.0 + + + + + + + -
- Temp -
-

FORGE THE

- star - pill +
+
+ +
+
+ header
+
+

FORGE THE
FUTURE

UNLEASH YOUR CREATIVITY

+
+
+
+ +
+
+ - + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1f88bd8 --- /dev/null +++ b/styles.css @@ -0,0 +1,209 @@ +@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800&display=swap"); + +:root { + --primary-color: #ff833e; + --primary-color-dark: #db6f35; + --text-dark: #333333; + --text-light: #767268; + --white: #ffffff; + --max-width: 1200px; + --header-font: "Bebas Neue", sans-serif; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: "Poppins", sans-serif; + background-color: var(--primary-color) +} + +img { + width: 100%; +} + +.main-wrapper { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.main-container { + width: 100%; + max-width: var(--max-width); + padding: 30px; + box-sizing: border-box; + border: 1px solid white; + border-radius: 20px; + background-color: white; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; +} + +.nav__header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + background-color: var(--white); +} + +.nav__logo a img { + width: 200px; +} + +.header__container { + max-width: var(--max-width); + margin: auto; + padding: 5rem 1rem 2rem; + display: grid; + gap: 2rem; + overflow-x: hidden; + text-align: center; +} + +.header__image img { + max-width: 520px; + margin-inline: auto; +} + +.header__content .con-1, +.header__content .con-2 { + margin-bottom: .5rem; + font-family: var(--header-font); + color: var(--text-dark); +} + +.header__content .con-1 { + font-size: 4rem; + font-weight: 400; + line-height: 5.5rem; +} + +.header__content .con-2 { + font-size: 3.5rem; + font-weight: 400; + line-height: 5.5rem; +} + +.header__content h1 span { + color: var(--primary-color); +} + +.nav__btns button { + width: fit-content; + padding: 1rem 2rem; + outline: none; + border: none; + font-size: 1rem; + font-style: var(--header-font); + white-space: nowrap; + color: var(--white); + background-color: var(--primary-color); + border-radius: 10px; + transition: 0.3s; + cursor: pointer; +} + +.header__content button:hover, +.nav__btns button:hover { + background-color: var(--primary-color-dark); +} + +@media (min-width: 768px) { + nav { + max-width: var(--max-width); + margin: auto; + } + + .nav__header { + background-color: var(--white); + } + + .nav__logo a { + color: var(--text-dark); + } + + .nav__btns { + display: flex; + justify-content: center; + } + + .sign__in { + color: var(--white); + background-color: var(--primary-color); + } + + .sign__in:hover { + background-color: var(--primary-color-dark); + } + + .header__container { + padding-block: 2rem; + grid-template-columns: repeat(2, 1fr); + align-items: center; + } + + .header__content :is(h1, p) { + text-align: left; + } +} + +@media (min-width: 1024px) { + .header__content button { + width: fit-content; + } +} + +@media (max-width: 500px) { + .nav { + max-width: 900px; + } + .nav__btns a button { + width: 150px; + font-size: .8rem; + padding: .8rem; + } + .nav__logo a img { + width: 120px; + } +} + +@media (max-width: 768px) { + .header__content .con-1 { + font-size: 2.5rem; + font-weight: 400; + line-height: 3rem; + letter-spacing: 2px; + } + + .header__content .con-2 { + font-size: 1.5rem; + font-weight: 400; + line-height: 2.5rem; + letter-spacing: 2px; + } + + .header__container { + padding: 1.5rem 1rem 2rem; + } + .nav__btns a{ + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + } + .main-container { + border-radius: 10px; + } +}