From ada9bb373a9623a3c70f495fb8faa6f394f26771 Mon Sep 17 00:00:00 2001 From: Priyatham Sai Chand Date: Mon, 11 Jan 2021 22:07:05 +0530 Subject: [PATCH] intial project setup --- pages/index.js | 57 ++++--- styles/Home.module.css | 330 ++++++++++++++++++++++++++++++++--------- 2 files changed, 299 insertions(+), 88 deletions(-) diff --git a/pages/index.js b/pages/index.js index 43956d9..b57f074 100644 --- a/pages/index.js +++ b/pages/index.js @@ -5,54 +5,67 @@ export default function Home() { return (
- Create Next App + Portfolio +
+
-

- Welcome to Next.js! -

+

Priyatham Sai Chand

+
+

+ I'm am

-

- Get started by editing{' '} - pages/index.js -

+
    +
  • a Programmer
    • +
  • a Full stack Dev
    • +
  • an Application Developer
    • +
  • a Techie
    • +
+
+
+
+ + + +

Projects

- -

Documentation →

-

Find in-depth information about Next.js features and API.

+ +

Locaft →

+

A logistics and renting website for both owners and tenants alike

 - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

+ +

Steganography →

+

Hiding images in plain bitmap images

 -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

+

Auction →

+

An Auctioning system for bidding items to the highest bidder using + Django +

-

Deploy →

+

Alz. →

- Instantly deploy your Next.js site to a public URL with Vercel. + A Mobile application to detect Alzheimers' prematurely.

-
) -} +} \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css index 42e7e60..a7a64df 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,122 +1,320 @@ .container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.page { + height: 100vh; } - .main { - padding: 5rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + padding: 5rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100px; + border-top: 1px solid #eaeaea; + display: flex; + justify-content: center; + align-items: center; } .footer img { - margin-left: 0.5rem; + margin-left: 0.5rem; } .footer a { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } -.title a { - color: #0070f3; - text-decoration: none; +.title { + text-decoration: none; + text-align: center; } .title a:hover, .title a:focus, .title a:active { - text-decoration: underline; + text-decoration: underline; } .title { - margin: 0; - line-height: 1.15; - font-size: 4rem; + margin: 0; + line-height: 1.15; + font-size: 4rem; } .title, .description { - text-align: center; + text-align: center; } .description { - line-height: 1.5; - font-size: 1.5rem; + line-height: 1.5; + font-size: 1.5rem; } .code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; + background: #fafafa; + border-radius: 5px; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; } .grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; - margin-top: 3rem; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + max-width: 800px; + margin-top: 3rem; } .card { - margin: 1rem; - flex-basis: 45%; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; } .card:hover, .card:focus, .card:active { - color: #0070f3; - border-color: #0070f3; + color: #0070f3; + border-color: #0070f3; } .card h3 { - margin: 0 0 1rem 0; - font-size: 1.5rem; + margin: 0 0 1rem 0; + font-size: 1.5rem; } .card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; + margin: 0; + font-size: 1.25rem; + line-height: 1.5; } .logo { - height: 1em; + height: 1em; } @media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } + .grid { + width: 100%; + flex-direction: column; + } +} +.content { + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); + height: 160px; + overflow: hidden; + font-family: "Lato", sans-serif; + font-size: 35px; + line-height: 40px; + margin-right: 0; + color: #16a085; +} + +.content__container { + font-weight: 1000; + overflow: hidden; + height: 40px; + padding: 0 60px; + width: 1000px; + margin-left: 25%; +} + +.content__container__text { + display: inline; + float: left; + margin: 0; + font-size: 1em; +} +.content__container__list { + margin-top: 0; + + padding-left: 110px; + text-align: left; + list-style: none; + -webkit-animation-name: change; + -webkit-animation-duration: 10s; + -webkit-animation-iteration-count: infinite; + animation-name: change; + animation-duration: 10s; + animation-iteration-count: infinite; +} +.content__container__list__item { + line-height: 40px; + + font-size: 1em; +} + +@-webkit-keyframes opacity { + 0%, + 100% { + opacity: 0; + } + 50% { + opacity: 1; + } +} +@-webkit-keyframes change { + 0%, + 12.66%, + 100% { + transform: translate3d(0, 0, 0); + } + 16.66%, + 29.32% { + transform: translate3d(0, -25%, 0); + } + 33.32%, + 45.98% { + transform: translate3d(0, -50%, 0); + } + 49.98%, + 62.64% { + transform: translate3d(0, -75%, 0); + } + 66.64%, + 79.3% { + transform: translate3d(0, -50%, 0); + } + 83.3%, + 95.96% { + transform: translate3d(0, -25%, 0); + } +} +@keyframes opacity { + 0%, + 100% { + opacity: 0; + } + 50% { + opacity: 1; + } +} +@keyframes change { + 0%, + 12.66%, + 100% { + transform: translate3d(0, 0, 0); + } + 16.66%, + 29.32% { + transform: translate3d(0, -25%, 0); + } + 33.32%, + 45.98% { + transform: translate3d(0, -50%, 0); + } + 49.98%, + 62.64% { + transform: translate3d(0, -75%, 0); + } + 66.64%, + 79.3% { + transform: translate3d(0, -50%, 0); + } + 83.3%, + 95.96% { + transform: translate3d(0, -25%, 0); + } +} + +.navbar_item { + color: #000000; + padding: 10px; +} + +.navbar_item:hover { + color: #58d5f7; + text-decoration: none; +} + +.bold { + font-weight: 600; +} + +.light { + font-weight: 300; +} + +.header { + padding-top: 35px; + width: 100%; + height: 100px; + position: relative; + z-index: 999; +} + +.logo { + max-width: 100px; + padding-left: 0; + padding-top: 5px; +} + +.headerbtn { + background-color: #0abceb; + border-radius: 10px; + border: #0abceb; + float: right; + width: 195px; + height: 51px; + color: white; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + margin-top: -10px; +} + +.headerbtn:hover { + background-color: #58d5f7; + color: white; + border-radius: 20px; + -webkit-box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1); + -moz-box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1); + box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1); +} + +.hero { + position: relative; + z-index: 999; + padding-bottom: 60px; +} + +.mouse { + position: absolute; + left: 0; + right: 0; + top: 85%; + margin: auto; + padding-bottom: 40px; + text-align: center; + cursor: pointer; + transition: transform 0.4s ease; +} + +.mouse:hover { + transform: translateY(5px); }