Skip to content

Commit

Permalink
Merge pull request #27 from kohta9521/develop
Browse files Browse the repository at this point in the history 
add footer pc layouts not create phone responsive desing
  • Loading branch information
@kohta9521
kohta9521 authored Nov 21, 2023
2 parents 5eb267b + 3be2b3f commit d71d4b8
Show file tree
Hide file tree
Showing 2 changed files with 236 additions and 15 deletions.
86 changes: 80 additions & 6 deletions src/components/organisms/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React from 'react'

import Link from 'next/link'
import Image from 'next/image'

// scss import
import styles from './styles/Footer.module.scss'
import Link from 'next/link'

// components import

// react icons import
import { LuExternalLink } from "react-icons/lu";
import { IoIosArrowRoundForward } from "react-icons/io";


const Footer = () => {
return (
Expand All @@ -32,10 +36,78 @@ const Footer = () => {
{/* サイトの基本情報などを格納　次のpege about pageへ誘導 */}
<div className={styles.centerBox}>
<div className={styles.leftBox}>

<Image
className={styles.logo}
src={"/assets/images/logo.png"}
width={180}
height={40}
alt='ロゴ画像'
/>
<ul>
<li>
<Link className={styles.link} href={"/"}>
HOME
<LuExternalLink className={styles.logo} />
</Link>
</li>
<li>
<Link className={styles.link} href={"/about"}>
ここごはんとは
<LuExternalLink className={styles.logo} />
</Link>
</li>
<li>
<Link className={styles.link} href={"/map"}>
マップについて
<LuExternalLink className={styles.logo} />
</Link>
</li>
<li>
<Link className={styles.link} href={"/ranking"}>
ランキングについて
<LuExternalLink className={styles.logo} />
</Link>
</li>
<li>
<Link className={styles.link} href={"/login"}>
ログイン
<LuExternalLink className={styles.logo} />
</Link>
</li>
<li>
<Link className={styles.link} href={"/contact"}>
コンタクト
<LuExternalLink className={styles.logo} />
</Link>
</li>
</ul>
<div className={styles.someImageBox}>
<Image
className={styles.someBoxImage}
src={"/assets/images/tech.png"}
width={250}
height={120}
alt='フッター用画像'
/>
</div>
<div className={styles.someBox}>
<Link className={styles.someLink} href={'/'}>ウェブサイト利用規約</Link>
<Link className={styles.someLink} href={'/'}>個人情報保護と取り扱いに関して</Link>
</div>
</div>
<div className={styles.rightBox}>

<Link
className={styles.nextPageLink}
href={"/about"}
>
<div className={styles.nextTitleBox}>
<p className={styles.nextText}>NEXT</p>
<h1 className={styles.aboutText}>About</h1>
</div>
<div className={styles.nextArrowBox}>
<IoIosArrowRoundForward className={styles.nextArrowIcon} />
</div>
</Link>
</div>
</div>
{/* copyrightやpge top buttonなどを格納 */}
Expand All @@ -44,10 +116,12 @@ const Footer = () => {

</div>
<div className={styles.copyrightBox}>

<p className={styles.copyright}>© kohta Corporation. All Rights Reserved.</p>
</div>
<div className={styles.pageTopBox}>

<Link className={styles.top} href={'/'}>
Page Top ↑
</Link>
</div>
</div>
</div>
Expand Down
165 changes: 156 additions & 9 deletions src/components/organisms/styles/Footer.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,182 @@
.footer {
width: 100%;
height: 400px;
background-color: var(--main-gray-color);
height: 1150px;
background-color: #1f1f1f;
.container {
width: 100%;
margin: 0 auto;
padding: 40px 0px;
.topBox {
display: flex;
width: 70%;
margin: 0 auto;
padding: 50px 0px;
justify-content: space-between;
.directLinkBox {
position: relative;
overflow: hidden;
max-width: 450px;
height: 240px;
width: 45%;
height: 200px;
padding: 30px 20px;
border-radius: 10px;
background-color: rgb(169, 169, 169);
&::after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
// background: url("/assets/images/tech.png") no-repeat center center;
background-color: var(--main-gray-color);
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
&:hover::after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.title {

}
.text {

}
}
}
.centerBox {
width: 100%;
height: 700px;
border-top: 0.1px solid var(--main-white-color);
border-bottom: 0.1px solid var(--main-white-color);
display: flex;
.leftBox {

width: 40%;
height: 100%;
border-right: 0.1px solid var(--main-white-color);
padding: 100px 100px;
box-sizing: border-box;
.logo {
margin-bottom: 40px;
}
ul {
display: block;
margin-bottom: 70px;
li {
display: block;
width: 200px;
height: 40px;
.link {
color: var(--main-white-color);
font-size: 14px;
display: flex;
&:hover {
color: #bebebe;
transition: all .3s ease-out;
}
.logo {
margin-left: 10px;
}
}
}
}
.someImageBox {
width: 300px;
height: 120px;
border-radius: 20px;
border: 1px solid rgb(42, 42, 42);
margin-bottom: 20px;
.someBoxImage {
height: 100%;
}
&:hover {
transition: all .3s ease-in-out;
background-color: #3c1d1d;
}
}
.someBox {
width: 100%;
.someLink {
display: block;
color: gray;
font-size: 12px;
line-height: 20px;
}
}
}
.rightBox {

width: 70%;
height: 100%;
padding: 200px 0px 200px 100px;
.nextPageLink {
display: flex;
align-items: center;
justify-content: space-around;
width: 80%;
height: 300px;
margin: 0 auto;
cursor: pointer;
}
.nextTitleBox {
.nextText {
display: block;
font-size: 20px;
line-height: 20px;
margin-bottom: 30px;
color: var(--main-white-color);
}
.aboutText {
display: block;
font-size: 80px;
font-weight: 600;
line-height: 100px;
color: var(--main-white-color);
&:hover {
}
}
}
.nextArrowBox {
display: flex;
width: 100px;
.nextArrowIcon {
color: var(--main-white-color);
font-size: 100px;
line-height: 300px;
}
}
}
}
.bottomBox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
.snsBox {

width: 10%;
height: 100%;
}
.copyrightBox {

padding: 10px;
width: 70%;
height: 100%;
color: gray;
font-size: 15px;
}
.pageTopbox {

.pageTopBox {
width: 20%;
height: 100%;
}
}
}
Expand Down

0 comments on commit d71d4b8

Please sign in to comment.