From 6b07b5235b65812160e252c023d0a52c77764ca5 Mon Sep 17 00:00:00 2001 From: Rohan Date: Wed, 9 Jun 2021 21:02:01 +0530 Subject: [PATCH] test --- components/Header.tsx | 37 ++++++++ components/Publications.tsx | 82 +++++++++++++++++ pages/index.tsx | 6 +- styles/Header.module.css | 50 +++++++++++ styles/Publications.module.css | 157 +++++++++++++++++++++++++++++++++ 5 files changed, 331 insertions(+), 1 deletion(-) create mode 100644 components/Header.tsx create mode 100644 components/Publications.tsx create mode 100644 styles/Header.module.css create mode 100644 styles/Publications.module.css diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..c9a8264 --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,37 @@ +import styles from '../styles/Header.module.css'; +export default function Header() { + return ( +
+
+
+
+
+
+

xBlogger

+
+
+
+
+
+ +
+
+
+
+
+ +
+

All about Hike. We share our knowledge on blog

+

Our approach is very simple: we define your problem and give the best solution.

+
+ +
+
+
+
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/components/Publications.tsx b/components/Publications.tsx new file mode 100644 index 0000000..9abc2cc --- /dev/null +++ b/components/Publications.tsx @@ -0,0 +1,82 @@ +import styles from "../styles/Publications.module.css"; +import Link from "next/link"; +const posts = [ + { + id: 1, + name: "Rohan Patidar", + title: "Full stack Developer", + image: "https://picsum.photos/130/130?image=1027", + description: "Hello everyone dwbefuw wcrwuer cweuircw er fecwue r cefwuer wefcwbe werwcer cweuiri ecwr" + }, + { + id: 2, + name: "Kevin", + title: "Full stack Developer", + image: "https://picsum.photos/130/130?image=1027", + description: "Hello everyone dwbefuw wcrwuer cweuircw er fecwue r cefwuer wefcwbe werwcer cweuiri ecwr" + }, + { + id: 3, + name: "Gracy Patel", + title: "Full stack Developer", + image: "https://picsum.photos/130/130?image=1027", + description: "Hello everyone dwbefuw wcrwuer cweuircw er fecwue r cefwuer wefcwbe werwcer cweuiri ecwr" + }, + { + id: 4, + name: "Rohan Patidar", + title: "Full stack Developer", + image: "https://picsum.photos/130/130?image=1027", + description: "Hello everyone dwbefuw wcrwuer cweuircw er fecwue r cefwuer wefcwbe werwcer cweuiri ecwr" + }, + { + id: 5, + name: "Rohan Patidar", + title: "Full stack Developer", + image: "https://picsum.photos/130/130?image=1027", + description: "Hello everyone dwbefuw wcrwuer cweuircw er fecwue r cefwuer wefcwbe werwcer cweuiri ecwr" + }, + { + id: 6, + name: "Rohan Patidar", + title: "Full stack Developer", + image: "https://picsum.photos/130/130?image=1027", + description: "Hello everyone dwbefuw wcrwuer cweuircw er fecwue r cefwuer wefcwbe werwcer cweuiri ecwr" + } +] +export default function Publications() { + posts.map(post => { + if(post.description.length>=80){ + post.description=post.description.substring(0,80)+"..."; + } + }); + return ( +
+ {posts.map(post => + ( + +
+
+
+
+ +
+
+

{post.name}

+

{post.title}

+

{post.description}read more

+
+ +
+ +
+
+ ))} +
+ ) +} diff --git a/pages/index.tsx b/pages/index.tsx index d1bda37..d5dd494 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -7,7 +7,9 @@ import Layout from '../components/Layout'; import { getAllPosts } from '../lib/api'; import { PostType } from '../types/post'; import {useSession } from "next-auth/client"; -import Login from './login' +import Login from './login'; +import Header from '../components/Header'; +import Publications from '../components/Publications'; type IndexProps = { posts: PostType[]; }; @@ -24,6 +26,8 @@ export const Index = ({ posts }: IndexProps): JSX.Element => { { return ( +
+

Home Page

Next.js starter for your next blog or personal site. Built with:

    diff --git a/styles/Header.module.css b/styles/Header.module.css new file mode 100644 index 0000000..61f0743 --- /dev/null +++ b/styles/Header.module.css @@ -0,0 +1,50 @@ +.conatiner { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Overpass', sans-serif; letter-spacing: 0px; font-size: 17px; color: #8d8f90; font-weight: 400; line-height: 32px; background-color: #edefef; } +.container h2{ color: #25292a; margin: 0px 0px 10px 0px; font-family: 'Overpass', sans-serif; font-weight: 700; letter-spacing: -1px; line-height: 1; } +.container h1{ color: #25292a; margin: 0px 0px 10px 0px; font-family: 'Overpass', sans-serif; font-weight: 700; letter-spacing: -1px; line-height: 1; } +.container h1 { font-size: 34px; } +.container h2 { font-size: 28px; line-height: 38px; } +.container h3 { font-size: 22px; line-height: 32px; } +.container h4 { font-size: 20px; } +.container h5 { font-size: 17px; } +.container h6 { font-size: 12px; } +.container p { margin: 0 0 20px; line-height: 1.7; } +.container p:last-child { margin: 0px; } + +.container a { text-decoration: none; color: #8d8f90; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } +.container a:focus{ text-decoration: none; color: #f85759; } +.container a:hover { text-decoration: none; color: #f85759; } + + + +.pageheader { + border-radius: 0 0 30% 30%; + background: url(https://easetemplate.com/free-website-templates/hike/images/pageheader.jpg)no-repeat; position: relative; background-size: cover; } +.pagecaption { padding-top: 170px; padding-bottom: 174px; } +.pagetitle { font-size: 46px; line-height: 1; color: #fff; font-weight: 600;; + +} + +.cardsection { position: relative; bottom: 60px; } +.cardblock { padding: 80px; } +.sectiontitle { margin-bottom: 60px; text-align: center; } + +.pagetitle span{ + color:rgb(223, 212, 66); +} +.pagecaption{ + position: relative; + left:25px; + top:-140px; +} +@media (max-width:600px) { + .pageheader{ + border-radius: 0 0 50% 50%; + } + .sectiontitle{ + font-size: 15px; + } + .sectiontitle h2{ + line-height: -10px; + font-size: 25px; + } +} \ No newline at end of file diff --git a/styles/Publications.module.css b/styles/Publications.module.css new file mode 100644 index 0000000..7308c26 --- /dev/null +++ b/styles/Publications.module.css @@ -0,0 +1,157 @@ +.container { + font-family: tahoma; + display: grid; + grid-template-columns: auto auto auto; + align-items: center; + } +/* .container{ + display: grid; +} */ + .ourteam { + padding: 30px 0 40px; + margin-bottom: 30px; + background-color: white; + text-align: center; + overflow: hidden; + position: relative; + border: 2px solid yellow; + border-radius: 15px; + margin: 10px; + } + + .ourteam .picture { + display: inline-block; + height: 130px; + width: 130px; + margin-bottom: 50px; + z-index: 1; + position: relative; + } + + .ourteam .picture::before { + content: ""; + width: 100%; + height: 0; + border-radius: 50%; + background-color: yellow; + position: absolute; + bottom: 135%; + right: 0; + left: 0; + opacity: 0.9; + transform: scale(3); + transition: all 0.3s linear 0s; + } + + .ourteam:hover .picture::before { + height: 100%; + } + + .ourteam .picture::after { + content: ""; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: yellow; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + + .ourteam .picture img { + width: 100%; + height: auto; + border-radius: 50%; + transform: scale(1); + transition: all 0.9s ease 0s; + } + + .ourteam .picture img { + box-shadow: 0 0 0 14px #f7f5ec; + transform: scale(0.7); + } + + .ourteam .title { + display: block; + font-size: 15px; + color:rgba(109, 84, 3, 0.411); + text-transform: capitalize; + position: relative; + top:-10px; + } + + .ourteam .social { + width: 100%; + padding: 0; + margin: 0; + background-color: #51d630; + position: absolute; + bottom: -100px; + left: 0; + transition: all 0.5s ease 0s; + } + + .ourteam:hover .social { + bottom: 0; + } + + .ourteam .social li { + display: inline-block; + } + + .ourteam .social li a { + display: block; + padding: 10px; + font-size: 17px; + color: white; + transition: all 0.3s ease 0s; + text-decoration: none; + } + + .ourteam .social li a:hover { + color: rgb(212, 212, 32); + background-color: hsl(140, 83%, 44%); + } + @media (max-width:900px){ + .container{ + grid-template-columns: auto auto; + } + } + @media (max-width:650px){ + .container{ + grid-template-columns: auto; + } + .ourteam .picture::before { + height: 100%; + } + .ourteam .picture img { + box-shadow: 0 0 0 14px #f7f5ec; + transform: scale(0.7); + } + .ourteam .social { + bottom: 0; + } + .ourteam .social li a { + color: yellow; + } + } + .follow{ + border-radius: 30px; + } + .description{ + color: teal; + } + #first{ + position: relative; + left: -23px; + } + #second{ + position: relative; + right: -30px; + } + .name{ + position: relative; + top:-15px; + color: black; + } \ No newline at end of file