Skip to content

Commit bdfe34c

Browse files
piyusha2001piyusha2001
committed
page using reference created
1 parent f457183 commit bdfe34c

File tree

6 files changed

+1725
-1579
lines changed

6 files changed

+1725
-1579
lines changed

‎tscomm/Data/Cards.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const CardsData = [
2+
{
3+
image: 'https://thumbs.dreamstime.com/b/yellow-textured-plain-background-wallpaper-design-use-text-image-yellow-textured-plain-background-wallpaper-137515345.jpg',
4+
subheading: 'Tokens and Data Credits',
5+
about: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ',
6+
},
7+
{
8+
image: 'https://thumbs.dreamstime.com/b/yellow-textured-plain-background-wallpaper-design-use-text-image-yellow-textured-plain-background-wallpaper-137515345.jpg',
9+
subheading: 'Tokens and Data Credits',
10+
about: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ',
11+
},
12+
{
13+
image: 'https://thumbs.dreamstime.com/b/yellow-textured-plain-background-wallpaper-design-use-text-image-yellow-textured-plain-background-wallpaper-137515345.jpg',
14+
subheading: 'Tokens and Data Credits',
15+
about: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ',
16+
},
17+
{
18+
image: 'https://thumbs.dreamstime.com/b/yellow-textured-plain-background-wallpaper-design-use-text-image-yellow-textured-plain-background-wallpaper-137515345.jpg',
19+
subheading: 'Tokens and Data Credits',
20+
about: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ',
21+
},
22+
{
23+
image: 'https://thumbs.dreamstime.com/b/yellow-textured-plain-background-wallpaper-design-use-text-image-yellow-textured-plain-background-wallpaper-137515345.jpg',
24+
subheading: 'Tokens and Data Credits',
25+
about: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ',
26+
},
27+
{
28+
image: 'https://thumbs.dreamstime.com/b/yellow-textured-plain-background-wallpaper-design-use-text-image-yellow-textured-plain-background-wallpaper-137515345.jpg',
29+
subheading: 'Tokens and Data Credits',
30+
about: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ',
31+
},
32+
];

‎tscomm/package-lock.json‎

Lines changed: 4 additions & 45 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tscomm/pages/blogs.js‎

Lines changed: 52 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,57 @@
1-
import React from "react";
2-
import Image from "next/image";
3-
import style from "../styles/Blog.module.css";
4-
import { Blogsdata } from "../Blogsdata/Blogs";
1+
import Image from 'next/image';
2+
import React from 'react';
3+
import { Blogsdata } from '../Data/Blogs';
4+
import style from '../styles/Blog.module.css';
55
const blogs = () => {
6-
return (
7-
<div className={` container`}>
8-
<div className={`row ${style.flexer}`}>
9-
{Blogsdata.map((e) => {
10-
return (
11-
<>
12-
<div
13-
className={`${style.cardwrapper} $ col-md-3 col-lg-3 col-10`}
14-
>
15-
<div className={style.imgwrap}>
16-
<Image src={e.image} className="img-fluid" />
17-
</div>
18-
<h6 className={`${style.title} text-left`}>{e.title}</h6>
19-
<p className={`${style.title} ${style.content}`}>
20-
{e.content.slice(0, 200) + "...."}
21-
</p>
22-
<div className={`${style.cardbase}`}>
23-
<div className={`${style.logo}`}>
24-
{" "}
25-
<Image
26-
src={e.image}
27-
className={`${style.logo} img-fluid`}
28-
layout="intrinsic"
29-
/>
30-
</div>
6+
return (
7+
<div className={` container`}>
8+
<div className={`row ${style.flexer}`}>
9+
{Blogsdata.map((e) => {
10+
return (
11+
<>
12+
<div
13+
className={`${style.cardwrapper} $ col-md-3 col-lg-3 col-10`}
14+
>
15+
<div className={style.imgwrap}>
16+
<Image
17+
src={e.image}
18+
className='img-fluid'
19+
/>
20+
</div>
21+
<h6 className={`${style.title} text-left`}>
22+
{e.title}
23+
</h6>
24+
<p
25+
className={`${style.title} ${style.content}`}
26+
>
27+
{e.content.slice(0, 200) + '....'}
28+
</p>
29+
<div className={`${style.cardbase}`}>
30+
<div className={`${style.logo}`}>
31+
{' '}
32+
<Image
33+
src={e.image}
34+
className={`${style.logo} img-fluid`}
35+
layout='intrinsic'
36+
/>
37+
</div>
3138

32-
<div className="basetext">
33-
<p className={`${style.p}`}>Techsquad community</p>
34-
<p className={`${style.p}`}>
35-
{e.date} - {e.readtime}
36-
</p>
37-
</div>
38-
</div>
39-
</div>
40-
</>
41-
);
42-
})}
43-
</div>
44-
</div>
45-
);
39+
<div className='basetext'>
40+
<p className={`${style.p}`}>
41+
Techsquad community
42+
</p>
43+
<p className={`${style.p}`}>
44+
{e.date} - {e.readtime}
45+
</p>
46+
</div>
47+
</div>
48+
</div>
49+
</>
50+
);
51+
})}
52+
</div>
53+
</div>
54+
);
4655
};
4756

4857
export default blogs;

‎tscomm/pages/technology.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import { CardsData } from '../Data/Cards.js';
3+
import style from '../styles/Technology.module.css';
4+
function Technology() {
5+
return (
6+
<>
7+
<div className={`${style.heading}`}>
8+
<p className='mb-0'>
9+
Core
10+
<br />
11+
Technologies.
12+
</p>
13+
</div>
14+
<div className={`${style.about}`}>
15+
<p className='mb-0'>
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
17+
<br /> Ut enim ad minim veniam, quis nostrud exercitation
18+
ullamco
19+
<br />
20+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
21+
do eiusmod Ut
22+
<br /> enim ad minim veniam, quis nostrud exercitation
23+
ullamco
24+
</p>
25+
</div>
26+
<div className={` container`}>
27+
<div className={`row ${style.layout}`}>
28+
{CardsData.map((card) => {
29+
return (
30+
<>
31+
<div
32+
className={` ${style.card} w-25 overflow-hidden shadow-lg $col-md-3 col-lg-3 col-10`}
33+
>
34+
<img
35+
className={`${style.image}`}
36+
src={card.image}
37+
alt='Sunset in the mountains'
38+
height='150'
39+
width='100%'
40+
/>
41+
<div className='px-6 py-4'>
42+
<div
43+
className={`${style.subheading} font-bold text-xl mb-2`}
44+
>
45+
{card.subheading}
46+
</div>
47+
<p className='text-gray-700 text-base'>
48+
{card.about}
49+
</p>
50+
</div>
51+
</div>
52+
</>
53+
);
54+
})}
55+
</div>
56+
</div>
57+
</>
58+
);
59+
}
60+
61+
export default Technology;

‎tscomm/styles/Technology.module.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.heading {
2+
margin-top: 100px;
3+
margin-left: 170px;
4+
font-size: 80px !important;
5+
color: #33a1ff;
6+
font-weight: 500;
7+
}
8+
9+
.card {
10+
overflow: hidden;
11+
margin: 10px;
12+
display: flex;
13+
justify-content: space-around;
14+
flex-direction: column;
15+
border-radius: 25px;
16+
margin-top: 100px;
17+
}
18+
19+
.image {
20+
padding-top: 10px;
21+
}
22+
23+
.about {
24+
margin-left: 170px;
25+
margin-top: 0px;
26+
font-size: 20px;
27+
font-weight: 500;
28+
}
29+
30+
.subheading {
31+
font-size: 25px;
32+
font-weight: 500;
33+
color: #33a1ff;
34+
}
35+
36+
.layout {
37+
display: flex !important;
38+
justify-content: space-evenly !important;
39+
align-items: center;
40+
}

0 commit comments

Comments
 (0)