Skip to content

Commit b7cde64

Browse files
codewithryugencodewithryugen
committed
yeahhh...
1 parent f9ea852 commit b7cde64

File tree

9 files changed

+358
-9
lines changed

9 files changed

+358
-9
lines changed

‎src/app/blog/[slug]/page.jsx‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,52 @@
11
import React from 'react'
2-
2+
import styles from './page.module.css'
3+
import Image from 'next/image'
34
const Post = () => {
45
return (
5-
<div>Post</div>
6+
<div className={styles.container}>
7+
<div className={styles.top}>
8+
<div className={styles.info}>
9+
<h1 className={styles.title}>Lorem ipsum dolor sit amet consectetur.</h1>
10+
<p className={styles.desc}>
11+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
12+
In obcaecati possimus quaerat! Corporis, totam ab quibusdam deserunt temporibus ducimus eum ea sint,
13+
iusto quod quas, architecto libero iste velit non.
14+
</p>
15+
<div className={styles.author}>
16+
<Image
17+
src='https://i.pinimg.com/564x/33/f7/f9/33f7f9739a50e708034b987544d2130d.jpg'
18+
width={40}
19+
height={40}
20+
alt='author_img'
21+
className={styles.avatar}
22+
/>
23+
<span className={styles.username}>BeliaAU..</span>
24+
</div>
25+
</div>
26+
<div className={styles.imgContainer}>
27+
<Image
28+
src='https://i.pinimg.com/564x/93/9f/85/939f85ff1a4e06c7bc16e54d0825c2ba.jpg'
29+
fill={true}
30+
className={styles.img}
31+
/>
32+
</div>
33+
</div>
34+
<div className={styles.content}>
35+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
36+
Possimus est incidunt atque ex id accusamus rerum animi doloremque unde impedit harum necessitatibus quo,
37+
iste non commodi dolor sunt aliquam fuga dolorum qui ea ipsam, quisquam sapiente? Veritatis quae perspiciatis, quam illum,
38+
nihil alias quaerat ratione officiis repellat perferendis saepe et sed aspernatur,
39+
in accusamus corporis tempora!</p>
40+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
41+
Possimus est incidunt atque ex id accusamus rerum animi doloremque unde impedit harum necessitatibus quo,
42+
iste non commodi dolor sunt aliquam fuga dolorum qui ea ipsam, quisquam sapiente? Veritatis quae perspiciatis, quam illum,
43+
nihil alias quaerat ratione officiis repellat perferendis saepe et sed aspernatur,
44+
in accusamus corporis tempora! Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur,
45+
adipisicing elit. Temporibus architecto minus exercitationem eos, quos laborum nostrum dolor quibusdam dolores omnis quae nemo neque unde illum!
46+
Necessitatibus impedit corrupti,
47+
doloremque amet vitae sunt, quas iure corporis dignissimos porro quidem, tempore consectetur!</p>
48+
</div>
49+
</div>
650
)
751
}
852

‎src/app/blog/[slug]/page.module.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.container{
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.top{
7+
display: flex;
8+
flex-direction: row;
9+
gap:10px;
10+
padding: 20px 0px;
11+
margin-bottom: 1rem;
12+
}
13+
14+
.info{
15+
flex: 1;
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
20+
.title{
21+
font-size: 30px;
22+
font-weight: 500;
23+
margin-bottom: 50px;
24+
}
25+
26+
27+
.author{
28+
padding: 1rem 0px;
29+
display: flex;
30+
gap: 10px;
31+
align-items: center;
32+
}
33+
34+
.avatar{
35+
border-radius: 50%;
36+
object-fit: cover;
37+
}
38+
39+
.imgContainer{
40+
flex: 1;
41+
position: relative;
42+
43+
}
44+
45+
.img{
46+
width:100%;
47+
height:100%;
48+
object-fit: contain;
49+
border-radius: 10px;
50+
}
51+
52+
.content{
53+
font-size: 20px;
54+
font-weight: 400;
55+
}

‎src/app/blog/page.jsx‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,63 @@
11
import React from 'react'
22
import styles from './page.module.css'
3+
import Link from 'next/link'
4+
import Image from 'next/image'
35

46
const Blog = () => {
57
return (
6-
<div className={styles.container}>Blog</div>
8+
<div className={styles.mainContainer}>
9+
<Link href='/blog/tesslug' className={styles.container}>
10+
<div className={styles.imgContainer}>
11+
<Image
12+
src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
13+
alt='image blog'
14+
width={400}
15+
height={250}
16+
className={styles.img}
17+
/>
18+
</div>
19+
<div className={styles.content}>
20+
<h1 className={styles.title}>ナツコミ2021開催中！</h1>
21+
<p className={styles.description}>対象商品購入でコースタープレゼント‼️】 8月よりナツコミ参加書店にて #マッシュル のコースター配布を開始します！
22+
<br></br>対象商品を購入してぜひゲットしてくださいね✨
23+
<br></br>※配布条件・時期は書店により異なります。</p>
24+
</div>
25+
</Link>
26+
<Link href='/blog/tesslug' className={styles.container}>
27+
<div className={styles.imgContainer}>
28+
<Image
29+
src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
30+
alt='image blog'
31+
width={400}
32+
height={250}
33+
className={styles.img}
34+
/>
35+
</div>
36+
<div className={styles.content}>
37+
<h1 className={styles.title}>ナツコミ2021開催中！</h1>
38+
<p className={styles.description}>対象商品購入でコースタープレゼント‼️】 8月よりナツコミ参加書店にて #マッシュル のコースター配布を開始します！
39+
<br></br>対象商品を購入してぜひゲットしてくださいね✨
40+
<br></br>※配布条件・時期は書店により異なります。</p>
41+
</div>
42+
</Link>
43+
<Link href='/blog/tesslug' className={styles.container}>
44+
<div className={styles.imgContainer}>
45+
<Image
46+
src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
47+
alt='image blog'
48+
width={400}
49+
height={250}
50+
className={styles.img}
51+
/>
52+
</div>
53+
<div className={styles.content}>
54+
<h1 className={styles.title}>ナツコミ2021開催中！</h1>
55+
<p className={styles.description}>対象商品購入でコースタープレゼント‼️】 8月よりナツコミ参加書店にて #マッシュル のコースター配布を開始します！
56+
<br></br>対象商品を購入してぜひゲットしてくださいね✨
57+
<br></br>※配布条件・時期は書店により異なります。</p>
58+
</div>
59+
</Link>
60+
</div>
761
)
862
}
963

‎src/app/blog/page.module.css‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,34 @@
1-
.contact{
2-
1+
.mainContainer{
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
}
6+
7+
.container{
8+
display: flex;
9+
padding:1rem 0px;
10+
}
11+
12+
.imgContainer{
13+
width:max-content;
14+
padding-right: 1rem;
15+
}
16+
17+
.img{
18+
object-fit: cover;
19+
border-radius:5px 0px;
20+
}
21+
22+
.content{
23+
display: flex;
24+
flex-direction:column;
25+
padding: 0px 5px;
26+
}
27+
28+
.title{
29+
font-size: 20px;
30+
}
31+
32+
.description{
33+
font-size: 10px;
334
}

‎src/app/portofolio/[category]/page.jsx‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,46 @@
11
import React from 'react'
2-
3-
const Category = () => {
2+
import styles from './page.module.css'
3+
import Button from '@/components/button/Button'
4+
import Image from 'next/image'
5+
const Category = ({params}) => {
46
return (
5-
<div>Category</div>
7+
<div className={styles.container}>
8+
<h1 className={styles.categoryTitle}>{params.category}</h1>
9+
<div className={styles.item}>
10+
<div className={styles.content}>
11+
<h1 className={styles.title}>Lorem, ipsum.</h1>
12+
<p className={styles.description}>Lorem ipsum dolor sit amet consectetur adipisicing elit.
13+
<b/>Eos eligendi alias, maxime illum assumenda fuga.
14+
</p>
15+
<Button text="See More" url="#"/>
16+
</div>
17+
<div className={styles.imgContainer}>
18+
<Image
19+
fill={true}
20+
src='https://i.pinimg.com/originals/d7/17/ed/d717ed080e612912c323110fef4670e8.jpg'
21+
alt='berontaksenku'
22+
className={styles.img}
23+
/>
24+
</div>
25+
</div>
26+
<div className={styles.item}>
27+
<div className={styles.content}>
28+
<h1 className={styles.title}>Lorem, ipsum.</h1>
29+
<p className={styles.description}>Lorem ipsum dolor sit amet consectetur adipisicing elit.
30+
<b/>Eos eligendi alias, maxime illum assumenda fuga.
31+
</p>
32+
<Button text="See More" url="#"/>
33+
</div>
34+
<div className={styles.imgContainer}>
35+
<Image
36+
fill={true}
37+
src='https://i.pinimg.com/originals/d7/17/ed/d717ed080e612912c323110fef4670e8.jpg'
38+
alt='berontaksenku'
39+
className={styles.img}
40+
/>
41+
</div>
42+
</div>
43+
</div>
644
)
745
}
846

‎src/app/portofolio/[category]/page.module.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.container{
2+
3+
}
4+
5+
.categoryTitle{
6+
color: cadetblue;
7+
}
8+
9+
.item{
10+
display: flex;
11+
gap: 50px;
12+
margin-top:50px;
13+
margin-bottom:100px;
14+
}
15+
16+
.item:nth-child(2n+1){
17+
flex-direction: row-reverse;
18+
}
19+
20+
.content{
21+
flex: 1;
22+
flex-direction: column;
23+
gap: 20px;
24+
justify-content: center;
25+
}
26+
27+
.title{
28+
font-size: 40px;
29+
30+
}
31+
32+
.description{
33+
font-size: 20px;
34+
}
35+
36+
.imgContainer{
37+
flex: 1;
38+
height: 500px;
39+
position: relative;
40+
}
41+
42+
.img{
43+
object-fit: cover;
44+
}

‎src/app/portofolio/layout.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import styles from './page.module.css'
3+
4+
5+
const Layout = ({children}) => {
6+
return (
7+
<div>
8+
<h1 className={styles.mainTitle}>dolor bro.</h1>
9+
{children}
10+
</div>
11+
)
12+
}
13+
14+
export default Layout

‎src/app/portofolio/page.jsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,28 @@
11
import React from 'react'
22
import styles from './page.module.css'
3+
import Link from 'next/link'
34
const Portofolio = () => {
45
return (
5-
<div className={styles.container}>Portofolio</div>
6+
<div className={styles.container}>
7+
<h1 className={styles.selectTitle}>Lorem ipsum dolor sit.</h1>
8+
<div className={styles.items}>
9+
<Link className={styles.item} href="/portofolio/illustration">
10+
<span className={styles.title}>
11+
Illustrations
12+
</span>
13+
</Link>
14+
<Link className={styles.item} href="/portofolio/websites">
15+
<span className={styles.title}>
16+
Websites
17+
</span>
18+
</Link>
19+
<Link className={styles.item} href="/portofolio/applications">
20+
<span className={styles.title}>
21+
Applications
22+
</span>
23+
</Link>
24+
</div>
25+
</div>
626
)
727
}
828

0 commit comments

Comments
 (0)