Share Code Quickly

What is Harigami?

Harigami is a simple source code sharing service. You can share source code by an URL which is issued after submission.
You can also run your source code online such as Python, Ruby, JavaScript and so on.
For free.Use for code review.
Preferences
anonymous No title
Python
from collections import defaultdict
from enum import Enum
from itertools import chain
import random
from typing import Iterable, Iterator, List, Union

Card = Union["NormalCard", "Jorker"]


class Suit(Enum):
    HEART = 0
    CLAB = 1
    DIA = 2
    SPADE = 3

    @classmethod
    def display(cls, suit):
        return {cls.HEART: "❤️", cls.CLAB: "♣️", cls.DIA: "♦️", cls.SPADE: "♠️"}[suit]

    def __repr__(self):
        return f"{self.display(self)}"


class Rank(Enum):
    THREE = 3
    FOUR = 4
    FIVE = 5
    SIX = 6
    SEVEN = 7
    EIGHT = 8
    NINE = 9
    TEN = 10
    JACK = 11
    QUEEN = 12
    KING = 13
    ACE = 14
    DEUCE = 15

    @classmethod
    def display(cls, suit):
        dic = {
            cls.TEN: "T",
            cls.JACK: "J️",
            cls.QUEEN: "Q",
            cls.KING: "K",
            cls.ACE: "A",
            cls.DEUCE: "2",
        }
        if suit in dic:
            return dic[suit]
        return str(suit.value)

    def __repr__(self):
        return f"{self.display(self)}"


class NormalCard:
    def __init__(self, rank, suit):
        self.rank = rank
        self.suit = suit

    def __repr__(self):
        return f"{repr(self.rank)}{repr(self.suit)}"

    def __gt__(self, other):
        if self.rank.value > other.rank.value:
            return True
        elif self.rank.value < other.rank.value:
            return False
        return self.suit.value > other.suit.value

    def __hash__(self):
        return hash(repr(self))


class Jorker:
    def __repr__(self):
        return "Jo"

    def __hash__(self):
        return hash(repr(self))


class Deck:
    JORKER_NUM = 2
    normal_cards: List[Card] = [
        NormalCard(rank, suit) for rank in Rank for suit in Suit
    ]
    jorkers: List[Card] = [Jorker()] * JORKER_NUM
    cards = normal_cards + jorkers

    def __init__(self, jorker_num=2):
        random.shuffle(self.cards)
        self.it_cards = iter(self.cards)

    def deal(self, amount: int) -> Iterator[Card]:
        for _ in range(amount):
            yield next(self.it_cards)

    def reset(self, jorker_num=2):
        self.__init__(jorker_num)

    @classmethod
    def choices(cls, amount: int) -> List[Card]:
        return random.choices(cls.cards, k=amount)


def divide_cards(cards: List[Card]):
    normel_cards: List[NormalCard] = [
        card for card in cards if isinstance(card, NormalCard)
    ]
    jorkers: List[Jorker] = [card for card in cards if isinstance(card, Jorker)]
    return normel_cards, jorkers


class Hand:
    def __init__(self, cards: Iterable[Card]):
        self.normal_cards, self.jorkers = divide_cards(list(cards))
        self.normal_cards.sort()
        self.sorted_cards = self.normal_cards + self.jorkers

    def get_duplicates(self):
        rank_to_cards = defaultdict(list)
        for normal_card in self.normal_cards:
            rank_to_cards[normal_card.rank].append(normal_card)
        for rank in rank_to_cards.keys():
            rank_to_cards[rank].extend(self.jorkers)
        return [cards for (rank, cards) in rank_to_cards.items() if len(cards) >= 2]

    def get_sequences(self):
        suit_to_cards = {}
        for suit in Suit:
            same_suit_cards = [card for card in self.normal_cards if card.suit is suit]
            suit_to_cards[suit] = get_consectives(same_suit_cards, len(self.jorkers))
        sequences = list(chain.from_iterable(suit_to_cards.values()))
        return sorted(sequences, key=lambda seq: seq[0].rank.value)


def get_consectives(same_suit_cards: List[NormalCard], jorker_num: int):
    seqs = []
    for i, _ in enumerate(same_suit_cards):
        seq = get_seq(same_suit_cards[i:], jorker_num)
        if len(seq) >= 3:
            seqs.append(seq)
    return seqs


def get_seq(cards: List[NormalCard], jorker_num: int) -> List[Card]:
    """先頭から始まる最長のsequenceを返す"""
    ret: List[Card] = [cards[0]]
    for i, current_card in enumerate(cards[:-1]):
        next_card = cards[i + 1]
        delta = next_card.rank.value - current_card.rank.value
        if delta == 1:
            ret.append(next_card)
        elif delta == 2 and jorker_num >= 1:
            jorker_num -= 1
            ret.append(Jorker())
            ret.append(next_card)
        elif delta == 3 and jorker_num >= 2:
            jorker_num -= 2
            ret.extend([Jorker(), Jorker()])
            ret.append(next_card)
        else:
            break
        i += 1
    for _ in range(jorker_num):
        ret.append(Jorker())
    return ret


def get_max_length(arrays):
    if arrays:
        return max(map(lambda x: len(x), arrays))
    return 0


if __name__ == "__main__":
    result = {"deps": defaultdict(int), "seqs": defaultdict(int)}
    trial = 100
    for _ in range(trial):
        hand = Hand(Deck.choices(7))
        deps = hand.get_duplicates()
        seqs = hand.get_sequences()
        result["deps"][get_max_length(deps)] += 1
        result["seqs"][get_max_length(seqs)] += 1
    print(result)
anonymous No title
Python
hi there 
I have just checked harigami.jp for the ranking keywords and to see your SEO metrics and found that you website could use a boost. 
 
We will improve your SEO metrics and ranks organically and safely, using only whitehat methods 
 
Please check our pricelist here, we offer SEO at cheap rates. 
https://www.hilkom-digital.de/cheap-seo-packages/ 
 
Start boosting your business sales and leads with us, today! 
 
regards 
Hilkom Digital Team 
support@hilkom-digital.de
anonymous No title
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <title>FAT DOG STAND</title>
  <meta name="description" content="こだわりのホットドッグとコーヒーを提供するお店。FAT DOG STANDを紹介するサイト">

  <!--  FONT Noto Sans JP-->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/head_foot.css">

  <script src="https://kit.fontawesome.com/54fc518417.js"></script>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header_box inner_max flex flex_center">
      <h1 class="header_logo"><a href="index.html"><img src="image/common/fds_logo.png" width="196" alt="FAT DOG STAND ロゴ"></a></h1>
      <div class="header_right">
        <div class="header_navbtn"><span></span><span></span><span></span></div>
        <nav class="header_nav">
          <ul class="nav_box flex">
            <li><a href="index.html">HOME</a></li>
            <li><a href="fds_style.html">STYLE</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="access.html">ACCESS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
        <div class="main_copy">
          <p><img src="image/common/main_copy.png" width="730" alt="taste just one time"></p>
          <p>集い味わう。ただひとつの今を。</p>
        </div>
      </div>
    </div>
  </header>
  <!-- ヘッダー end -->
  <main>


    <!-- 商品へのこだわり -->
    <section class="kodawari inner">
      <h2 class="ttl">商品へのこだわり</h2>

      <div class="hotdog flex">
        <div class="hotdog_text fadein">
          <h3 class="ttl_cont">ホットドッグへの<span>こだわり</span></h3>
          <p class="text_cont">
          自家製のソーセージを使った、ケチャップとマスタードを使わないホットドッグ。<br>
          オリジナルに調合したスパイスとハーブを練んだソーセージをその場でグリルします。<br>
          アツアツの出来立てを味わってみてください。
        </p>
        </div>
        <div class="hotdog_img fadein2">
          <img src="image/home/hotdog.jpg" width="520" height="455" alt="ホットドッグイメージ">
        </div>
      </div>

      <div class="coffee flex">
        <div class="coffee_img fadein2">
          <img src="image/home/coffee.jpg" width="520" height="455" alt="コーヒーイメージ">
        </div>
        <div class="coffee_text fadein">
          <h3 class="ttl_cont">コーヒーへの<span>こだわり</span></h3>
          <p class="text_cont">
          酸味を抑えスッキリした味わいの日常に馴染むコーヒーです。<br>
          一番おいしい状態でコーヒーが出せるよう、豆の種類を厳選し、バリスタの資格を持つスタッフが丁寧に淹れています。<br>
          1日のスタート、仕事の合間、空堀散策のお供にこだわりのコーヒーをお楽しみください。
        </p>
        </div>
      </div>
    </section>
    <!-- 商品へのこだわり end -->


    <section class="shop_map inner">
      <div class="map">
        <div class="map_img"><img src="image/test/map.jpg" alt=""></div>
        <div class="btn01" id="aa"><a href="#a"><img src="image/test/01.jpeg" alt="" width="50"></a></div>
        <div class="btn02" id="bb"><a href="#b"><img src="image/test/02.jpeg" alt="" width="50"></a></div>
        <div class="btn03" id="cc"><a href="#c"><img src="image/test/05.jpeg" alt="" width="50"></a></div>
      </div>
      <div class="shop_list">
        <div class="shop_content">
          <p id="a" class="shop_ttl">店舗名01</p>
          <p class="shop_info">店舗情報</p>
          <p class="shop_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          <p class="shop_link"><a href="#aa">位置をチェック</a></p>
        </div>
        <div class="shop_content">
          <p id="b" class="shop_ttl">店舗名02</p>
          <p class="shop_info">店舗情報</p>
          <p class="shop_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          <p class="shop_link"><a href="#bb">位置をチェック</a></p>
        </div>
        <div class="shop_content">
          <p id="c" class="shop_ttl">店舗名04</p>
          <p class="shop_info">店舗情報</p>
          <p class="shop_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          <p class="shop_link"><a href="#cc">位置をチェック</a></p>
        </div>
      </div>
    </section>


  </main>

</body>

</html>
anonymous No title
CSS
@charset 'utf-8';

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* BASE STYLE
--------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  color: #333;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe {
  vertical-align: middle;
}

/* CLEAR-FIX */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
  line-height: 0;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーORIGINAL STYLE
--------------------------------------------------*/

.inner_max {
  margin: 0 auto;
  max-width: 1440px;
  width: 90%;
}

.inner {
  margin: 0 auto;
  max-width: 1000px;
  width: 90%;
  background-color: rgb(255, 191, 172);
}

.flex {
  display: flex;
}

.flex_center {
  justify-content: center;
}

.flex_between {
  justify-content: space-between;
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_around {
  justify-content: space-around;
}

.ttl {
  padding-top: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
  line-height: 1;
}







/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー商品へのこだわり テストコード*/
.hotdog {
  margin: 50px 0;
}
.coffee {
  margin-bottom: 100px;
}
.hotdog,
.coffee {
  align-items: center;
}
.hotdog_text {
  z-index: 2;
  padding: 35px 68px 20px 68px;
  width: 56%;
  background: rgba(0, 0, 0, .85);
  color: #fff;
}
.coffee_text {
  z-index: 2;
  padding: 35px 68px 20px 68px;
  width: 56%;
  background: rgba(0, 0, 0, .85);
  color: #fff;
}
.ttl_cont {
  padding-bottom: 20px;
  border-bottom: 1px solid #ff8c00;
  text-align: center;
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 1;
}
.text_cont {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 1.5rem;
  line-height: 2;
}
.hotdog_text p:last-child,
.coffee_text p:last-child {
  text-align: right;
}
.hotdog_text span,
.coffee_text span {
  font-weight: bold;
}
.hotdog_img {
  margin-left: -80px;
}
.coffee_img {
  margin-right: -80px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーマップテストコード */
.shop_map {
  display: flex;

  justify-content: space-between;
}

.map {
  position: relative;
  min-width: 500px;
}

.btn01 {
  position: absolute;
  top: 350px;
  left: 200px;
}
.btn02 {
  position: absolute;
  top: 690px;
  left: 280px;
}
.btn03 {
  position: absolute;
  bottom: 250px;
  left: 200px;
}


.shop_list {
  width: 45%;
  background: gold;
}
.shop_content {
  margin-bottom: 50px;
  padding: 20px;
  width: 100%;
  background: rgb(224, 151, 255);
}
.shop_ttl {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}
.shop_info {
  margin: 10px 0;
  text-decoration: underline;
  font-size: 1.7rem;
}

.shop_text {
  margin-bottom: 15px;
  font-size: 1.5rem;
}
.shop_link {
  text-align: right;
}
.shop_link a {
  padding: 10px 20px;
  border-radius: 10px;
  background: green;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーRESPONSIVE
--------------------------------------------------*/

@media screen and (max-width:950px) {
  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー商品へのこだわりテストコード */
  .coffee {
    flex-direction: column;
  }
  .hotdog {
    flex-direction: column-reverse;
  }

  .hotdog_text,
  .coffee_text {
    max-width: 520px;
    width: 100%;
  }

  .hotdog_img_res,
  .coffee_img {
    margin: 0 auto;
  }
.hotdog_img {
  margin-left: 0;
}
  .coffee_img img {
    margin-right: 0;
    height: 350px;

    object-fit: cover;
    object-position: 100% 100%;
  }

  /* ーーーーーーーーーーーーーーーーーーーーーーーーー ーーーーーーマップテストコード*/
  .shop_map {
    flex-direction: column;
    align-items: center;
  }

}



@media screen and (max-width:560px) {
  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーORIGINAL STYLE
--------------------------------------------------*/
  .ttl {
    font-size: 3.3rem;
  }

  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー商品へのこだわり */
  .hotdog_text,
  .coffee_text {
    padding: 35px 25px 20px 25px;
  }
  .hotdog_text span,
  .coffee_text span {
    display: inline-block;
    margin-top: 10px;
  }
}
anonymous No title
HTML

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーマップテストコード */
.shop_map {
  display: flex;

  justify-content: space-between;
}

.map {
  position: relative;
  min-width: 500px;
}

.btn01 {
  position: absolute;
  top: 350px;
  left: 200px;
}
.btn02 {
  position: absolute;
  top: 690px;
  left: 280px;
}
.btn03 {
  position: absolute;
  bottom: 250px;
  left: 200px;
}


.shop_list {
  width: 45%;
  background: gold;
}
.shop_content {
  margin-bottom: 50px;
  padding: 20px;
  width: 100%;
  background: rgb(224, 151, 255);
}
.shop_ttl {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}
.shop_info {
  margin: 10px 0;
  text-decoration: underline;
  font-size: 1.7rem;
}

.shop_text {
  margin-bottom: 15px;
  font-size: 1.5rem;
}
.shop_link {
  text-align: right;
}
.shop_link a {
  padding: 10px 20px;
  border-radius: 10px;
  background: green;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
}
anonymous No title
CSS
@charset 'utf-8';

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* BASE STYLE
--------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  color: #333;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  font-size: 1.4em;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe {
  vertical-align: middle;
}

/* CLEAR-FIX */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
  line-height: 0;
}

/* ORIGINAL STYLE
--------------------------------------------------*/

.inner_max {
  margin: 0 auto;
  max-width: 1440px;
  width: 91%;
}


.flex {
  display: flex;
}

.flex_center {
  justify-content: center;
}

.flex_between {
  justify-content: space-between;
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_around {
  justify-content: space-around;
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーACCESS */


.inner {
    margin: 0 auto;
    max-width: 1000px;
    width: 90%;
}

.inpage_ttl{
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}


.inner_cont{
    font-size: 16px;
}

.white{
    color: #fff;
}


.address{
position: relative;
width: 100%;
height: 550px;
padding: 30px 0;
}

.address_list{
    background-color: rgba(233, 233, 233, 0.87);
    padding:30px 30px 30px 220px;
    width: 80%
/*    width: 1140px;*/
}

.address_table{
border-left: 2px solid #000;
text-align: left;
width:100%;
/*width: 870px;*/
margin: 0 auto;
}

.address_table th{
    font-weight: bold;
}

.address_table th,td{
    padding: 0 0 25px 25px;
}


.address_mv img{
    width: 1000px;
    position: absolute;
    bottom:0;
    right: 0;
    z-index: -1;
}



.karahori_mv{
    position: relative;
    background-image: url(../image/access/karahori1017.jpg);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    z-index: 1;
}


.karahori_mv::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 6, 6, 0.38);
    content: '';
    z-index: -1;

}


.location{
background:#d9d5d5;
padding: 2% auto;
}


.sec_inner {
    margin: 0 25px;
    padding-bottom: 10px;
    background: #fff;
}

.box{
padding: 10px 0;
}

.box_ex{
margin:3%;
}

.box_no{
    width: 20%;
    text-align: center;
}

.box_cont h3{
    font-size: 20px;
    font-weight: bold;
    margin-bottom:2%;
}

.box_cont p{
margin-bottom: 10px;
}

.botton{
width: 80%;
background: black;
color: #fff;
text-align: center;
padding: 20% auto;

}


/*
    background-image: url(../image/access/shop.jpg);
    background-size: 1140px auto;
    background-repeat: no-repeat;
    background-position: right bottom 10%;

*/

    /*    color: #fff;*/
    /*    text-align: center;*/


/*
.back_visual img{
width: 60%;

}
*/

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヘッダー */
.header {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 600px;
  background-image: url(/image/common/mv.jpg);
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
}
.header::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  content: '';
}


.header_logo {
  padding: 0 2%;
  min-width: 200px;
  width: 300px;
  background-color: rgba(255, 255, 255, .8);
}
.header_logo img {
  display: block;
  margin: 0 auto;
  margin-top: 250px;
}
.header_right {
  max-width: 1000px;
  width: 100%;
  height: 600px;
}
.header_nav {
  padding-top: 35px;
  width: 100%;
  height: 85px;
}
.nav_box {
  justify-content: flex-end;
}
.nav_box li {
  margin-left: 4%;
}
.nav_box a {
  color: #fff;
  text-decoration: none;
  font-size: 1.8rem;
}
.main_copy {
  padding-top: 150px;
  padding-left: 5%;
  width: 100%;
  height: 515px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: calc(2.5rem + ((1vw - .6rem) * 1.7857));
}
.main_copy p + p {
  margin-top: 20px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフッター */
.footer {
  background-color: rgb(0, 0, 0);
  color: #fff;
}
.fot_left {
  margin-top: 45px;
  width: 170px;
  height: 150px;
  /* background: red; */
}
.fot_logo {
  min-width: 130px;
}
.fot_sns {
  padding-top: 30px;

  justify-content: space-around;
}
.fot_sns a {
  color: #fff;
  font-size: 40px;
  line-height: 0;
}

.fot_nav {
  margin-top: 40px;
}
.fot_nav_list li {
  margin: 8px 0;
}
.fot_nav_list a {
  color: #fff;
  text-decoration: none;
}
.address_box {
  margin: 40px 0 40px 0;
  padding-left: 2%;
  border-left: 3px solid #fff;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 2;
}

.copy {
  padding: 10px 0;
  background-color: #fff;
  color: #333;
  text-align: center;
  font-size: 13px;
}

/* RESPONSIVE
--------------------------------------------------*/
@media screen and (min-width:1440px) {
  .main_copy {
    font-size: 4rem;
  }
}

@media screen and (max-width:950px) {
  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヘッダー */
  .header {
    overflow: hidden;
  }

  .header_nav {
    position: fixed;
    top: 17%;
    right: 0;
    margin-top: 0;
    padding-top: 0;
    width: 100%;
    transition: .3s;
    transform: translateX(100%);
  }

  .header_nav.active {
    transform: translateY(0);
  }

  .header_nav ul {
    display: block;
  }

  .header_nav li {
    margin-left: 0;
  }

  .header_nav li + li {
    border-top: 1px solid rgba(255, 255, 255, .8);
  }

  .header_nav li a {
    display: block;
    background: rgba(0, 0, 0, .9);
    text-align: center;
    font-size: 18px;
    line-height: 50px;
  }

  .header_nav a:hover::after {
    width: 0;
  }


  .header_navbtn {
    position: fixed;
    top: 1%;
    right: 2%;
    display: block;
    margin-top: 5px;
    margin-left: auto;
    padding: 10px 0;
    width: 40px;
  }

  .header_navbtn:hover {
    cursor: pointer;
  }

  .header_navbtn span {
    display: block;
    width: 100%;
    height: 4px;
    background: rgb(0, 0, 0);
    transition: .3s;
  }

  .header_navbtn span + span {
    margin-top: 8px;
  }

  .header_navbtn.active span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
  }

  .header_navbtn.active span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
  }

  .header_navbtn.active span:nth-child(2) {
    opacity: 0;
  }

  .main_copy {
    padding-top: 240px;
  }


  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフッター */
  .footer_box {
    flex-wrap: wrap;
  }
  .fot_left {
    width: 100%;
  }

  .fot_logo {
    text-align: center;
  }
  .fot_sns {
    justify-content: center;
  }
  .fot_sns li {
    margin: 0 2%;
  }
  .fot_nav {
    margin-right: 5%;
    margin-left: 5%;
  }
}

@media screen and (max-width:560px) {
  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヘッダー */
  .header {
    height: 380px;
    background-image: url(/image/common/mv.jpg);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .header_box {
    display: block;
    width: 100%;
  }
  .header_logo {
    margin-top: 65px;
    padding: 20px 10px;
    width: 100%;
  }
  .header_logo img {
    margin-top: 0;
  }
  .main_copy {
    padding: 50px 5% 0 5%;
    font-size: 1.3em;
  }
  .main_copy p + p {
    margin-top: 8px;
    margin-left: 4%;
  }
  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフッター */
  .fot_nav {
    margin-top: 20px;
    width: 100%;
  }
  .fot_nav_list {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;
  }

  .fot_nav_list li {
    margin: 5% 2%;
  }
  .address_box {
    margin-top: 30px;
  }
}
anonymous No title
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <title>FAT DOG STAND|ACCESS</title>
  <meta name="description" content="こだわりのホットドッグとコーヒーを提供するお店。FAT DOG STANDを紹介するサイト">

  <!--  FONT Noto Sans JP-->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

  <script src="https://kit.fontawesome.com/54fc518417.js"></script>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header_box inner_max flex flex_center">
      <h1 class="header_logo"><a href="index.html"><img src="image/common/fds_logo.png" width="196" alt=""></a></h1>
      <div class="header_right">
        <div class="header_navbtn"><span></span><span></span><span></span></div>
        <nav class="header_nav">
          <ul class="nav_box flex">
            <li><a href="index.html">HOME</a></li>
            <li><a href="style.html">STYLE</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="access.html">ACCESS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
        <div class="main_copy">
          <p><img src="image/common/main_copy.png" width="730" alt=""></p>
          <p>集い味わう。ただひとつの今を。</p>
        </div>
      </div>
    </div>
  </header>
  <!-- ヘッダー end -->
  <main>
<!--   ACCESS-->
  <section>
      <h2 class="inpage_ttl">ACCESS</h2>
      <div class="address">
          <div class="address_list">
              <table class="address_table inner_cont">
                  <tr>
                      <th>ADDRESS</th>
                      <td>542-0012 大阪市中央区谷町7-6-33
                          <br>地下鉄谷町線 谷町六丁目駅3番出口から出て徒歩約3分
                          <br>地下鉄長堀鶴見緑地線 松屋町駅3番出口から出て徒歩約3分</td>
                  </tr>
                  <tr>
                      <th>OPEN HOURS</th>
                      <td>Week day 8:00-17:00
                          <br>Sat.-Sun. Holiday 10:30-17:00
                      </td>
                  </tr>
                  <tr>
                      <th>CL0SE</th>
                      <td>Tueseday</td>
                  </tr>
                  <tr>
                      <th>TEL</th>
                      <td>06-6776-2236</td>
                  </tr>
                  <tr>
                      <th>E-MAIL</th>
                      <td>fatdogstand@gmail.com</td>
                  </tr>
                  <tr>
                      <th>PARKING</th>
                      <td>None</td>
                  </tr>
              </table>

          </div>
          <div class="address_mv">
              <img src="image/access/shop.jpg" alt="">
          </div>
      </div>
  </section>

  <section>
      <div class="karahori_mv">
          <h2 class="inpage_ttl white">空堀商店街</h2>
          <p class="inner inner_cont white">商店街の中は昔ながらの個人商店が残る、人懐っこいローカルな雰囲気。もちろん商店街の中のお店も素敵ですが、一歩商店街から外に足を向けると、レトロな町屋がずらっと並んでいて、大正時代にタイムスリップしたような感覚に陥ります。</p>
      </div>
  </section>

  <section class="location">
      <h2 class="inpage_ttl">LOCATION</h2>

      <div class="flex inner">

      <div class="sec_inner">
          <img src="/image/access/karahorimap.jpg" alt="">
      </div>

<div>
      <div class="box">
      <div class="sec_inner">
          <div><img src="/image/access/shopex.jpg" alt=""></div>
          <div class="flex box_ex">
          <p class="box_no">1</p>
          <div class="box_cont">
              <h3>店の名前</h3>
              <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
              <p class="botton">MORE></p>
          </div>
          </div>
          </div>
      </div>
          <div class="box">
              <div class="sec_inner">
                  <div><img src="/image/access/shopex.jpg" alt=""></div>
                  <div class="flex box_ex">
                      <p class="box_no">1</p>
                      <div class="box_cont">
                          <h3>店の名前</h3>
                          <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                          <p class="botton">MORE></p>
                      </div>
                  </div>
              </div>
          </div>


    <div class="box">
        <div class="sec_inner">
            <div><img src="/image/access/shopex.jpg" alt=""></div>
            <div class="flex box_ex">
                <p class="box_no">1</p>
                <div class="box_cont">
                    <h3>店の名前</h3>
                    <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                    <p class="botton">MORE></p>
                </div>
            </div>
        </div>
    </div>

</div>







      </div>

  </section>

<!--ACCESS END-->


    <!-- NEWS -->
    <article class="news inner">
      <h2 class="ttl">NEWS</h2>
      <div class="insta"></div>
      <p>Instagram</p>
    </article>
    <!-- NEWS end -->
    <!-- FAT DOG STAND とは -->
    <section class="about inner">
      <h2 class="ttl">FAT DOG STAND とは</h2>
      <p>
        『“FAT DOG” STAND』にはつい食べ過ぎて太っちゃうほど美味しいホットドッグがあるコーヒースタンドにしたいという”食”への思いともう一つ、実は別のメッセージを込めています。<br>
        <br>
        『“PHAT DOG” STAND』=魅力的な仲間が集まる場所<br>
        <br>
        読み方は同じファットドッグですが、<br>
        “PHAT”はスラングで「かなりホットで魅力的」という意味があり、”DOG”は親しい友人を表します。<br>
        <br>
        ファッションやライフスタイルへのこだわり以外にも毎日の仕事や家族の為など”自分を信じて楽しみながら一生懸命生きている”それが私の考える魅力的な人たちです。<br>
        <br>
        そんな人たちが、気兼ねなくふらっと立ち寄れる。少しゆっくりできて「また頑張ろう」と思える。そんなお客様との心の距離の近い店にしていきたいという思いを込め、『FAT (=PHAT) DOG STAND』と名付けました。
      </p>
    </section>
    <!-- FAT DOG STAND とは end-->
  </main>

  <!-- フッター -->
  <footer class="footer">
    <div class="footer_box inner flex flex_around">
      <div class="fot_left">
        <div class="fot_logo">
          <img src="image/common/fds_logo_w.png" width="170" alt="">
        </div>
        <ul class="fot_sns flex">
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
          <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
        </ul>
      </div>
      <nav class="fot_nav">
        <ul class="fot_nav_list">
          <li><a href="index.html">HOME</a></li>
          <li><a href="style.html">STYLE</a></li>
          <li><a href="menu.html">MENU</a></li>
          <li><a href="access.html">ACCESS</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </nav>
      <address class="address_box">
        <ul>
          <li>OPEN : 8:00 - 17:00 ( weekday ) 10:30 - 17:00 ( holiday )</li>
          <li>CLOSE : Tuesday</li>
          <li>ADDRESS : 〒542-0012 大阪府大阪市中央区谷町7-6-33</li>
          <li>PHONE : 06-6776-2236</li>
          <li>E-MAIL : fatdogstand@gmail.com</li>
        </ul>
      </address>
    </div>
    <p class="copy">Copyright &copy; 2019 FAT DOG STAND All Rights Reserved.</p>
  </footer>
  <!-- フッターend -->
</body>

</html>
anonymous No title
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <title>FAT DOG STAND|ACCESS</title>
  <meta name="description" content="こだわりのホットドッグとコーヒーを提供するお店。FAT DOG STANDを紹介するサイト">

  <!--  FONT Noto Sans JP-->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

  <script src="https://kit.fontawesome.com/54fc518417.js"></script>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header_box inner_max flex flex_center">
      <h1 class="header_logo"><a href="index.html"><img src="image/common/fds_logo.png" width="196" alt=""></a></h1>
      <div class="header_right">
        <div class="header_navbtn"><span></span><span></span><span></span></div>
        <nav class="header_nav">
          <ul class="nav_box flex">
            <li><a href="index.html">HOME</a></li>
            <li><a href="style.html">STYLE</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="access.html">ACCESS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
        <div class="main_copy">
          <p><img src="image/common/main_copy.png" width="730" alt=""></p>
          <p>集い味わう。ただひとつの今を。</p>
        </div>
      </div>
    </div>
  </header>
  <!-- ヘッダー end -->
  <main>
<!--   ACCESS-->
  <section>
      <h2 class="inpage_ttl">ACCESS</h2>
      <div class="address">
          <div class="address_list">
              <table class="address_table inner_cont">
                  <tr>
                      <th>ADDRESS</th>
                      <td>542-0012 大阪市中央区谷町7-6-33
                          <br>地下鉄谷町線 谷町六丁目駅3番出口から出て徒歩約3分
                          <br>地下鉄長堀鶴見緑地線 松屋町駅3番出口から出て徒歩約3分</td>
                  </tr>
                  <tr>
                      <th>OPEN HOURS</th>
                      <td>Week day 8:00-17:00
                          <br>Sat.-Sun. Holiday 10:30-17:00
                      </td>
                  </tr>
                  <tr>
                      <th>CL0SE</th>
                      <td>Tueseday</td>
                  </tr>
                  <tr>
                      <th>TEL</th>
                      <td>06-6776-2236</td>
                  </tr>
                  <tr>
                      <th>E-MAIL</th>
                      <td>fatdogstand@gmail.com</td>
                  </tr>
                  <tr>
                      <th>PARKING</th>
                      <td>None</td>
                  </tr>
              </table>

          </div>
          <div class="address_mv">
              <img src="image/access/shop.jpg" alt="">
          </div>
      </div>
  </section>

  <section>
      <div class="karahori_mv">
          <h2 class="inpage_ttl white">空堀商店街</h2>
          <p class="inner inner_cont white">商店街の中は昔ながらの個人商店が残る、人懐っこいローカルな雰囲気。もちろん商店街の中のお店も素敵ですが、一歩商店街から外に足を向けると、レトロな町屋がずらっと並んでいて、大正時代にタイムスリップしたような感覚に陥ります。</p>
      </div>
  </section>

  <section class="location">
      <h2 class="inpage_ttl">LOCATION</h2>

      <div class="flex inner">

      <div class="sec_inner">
          <img src="/image/access/karahorimap.jpg" alt="">
      </div>

<div>
      <div class="box">
      <div class="sec_inner">
          <div><img src="/image/access/shopex.jpg" alt=""></div>
          <div class="flex box_ex">
          <p class="box_no">1</p>
          <div class="box_cont">
              <h3>店の名前</h3>
              <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
              <p class="botton">MORE></p>
          </div>
          </div>
          </div>
      </div>
          <div class="box">
              <div class="sec_inner">
                  <div><img src="/image/access/shopex.jpg" alt=""></div>
                  <div class="flex box_ex">
                      <p class="box_no">1</p>
                      <div class="box_cont">
                          <h3>店の名前</h3>
                          <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                          <p class="botton">MORE></p>
                      </div>
                  </div>
              </div>
          </div>


    <div class="box">
        <div class="sec_inner">
            <div><img src="/image/access/shopex.jpg" alt=""></div>
            <div class="flex box_ex">
                <p class="box_no">1</p>
                <div class="box_cont">
                    <h3>店の名前</h3>
                    <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                    <p class="botton">MORE></p>
                </div>
            </div>
        </div>
    </div>

</div>







      </div>

  </section>

<!--ACCESS END-->


    <!-- NEWS -->
    <article class="news inner">
      <h2 class="ttl">NEWS</h2>
      <div class="insta"></div>
      <p>Instagram</p>
    </article>
    <!-- NEWS end -->
    <!-- FAT DOG STAND とは -->
    <section class="about inner">
      <h2 class="ttl">FAT DOG STAND とは</h2>
      <p>
        『“FAT DOG” STAND』にはつい食べ過ぎて太っちゃうほど美味しいホットドッグがあるコーヒースタンドにしたいという”食”への思いともう一つ、実は別のメッセージを込めています。<br>
        <br>
        『“PHAT DOG” STAND』=魅力的な仲間が集まる場所<br>
        <br>
        読み方は同じファットドッグですが、<br>
        “PHAT”はスラングで「かなりホットで魅力的」という意味があり、”DOG”は親しい友人を表します。<br>
        <br>
        ファッションやライフスタイルへのこだわり以外にも毎日の仕事や家族の為など”自分を信じて楽しみながら一生懸命生きている”それが私の考える魅力的な人たちです。<br>
        <br>
        そんな人たちが、気兼ねなくふらっと立ち寄れる。少しゆっくりできて「また頑張ろう」と思える。そんなお客様との心の距離の近い店にしていきたいという思いを込め、『FAT (=PHAT) DOG STAND』と名付けました。
      </p>
    </section>
    <!-- FAT DOG STAND とは end-->
  </main>

  <!-- フッター -->
  <footer class="footer">
    <div class="footer_box inner flex flex_around">
      <div class="fot_left">
        <div class="fot_logo">
          <img src="image/common/fds_logo_w.png" width="170" alt="">
        </div>
        <ul class="fot_sns flex">
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
          <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
        </ul>
      </div>
      <nav class="fot_nav">
        <ul class="fot_nav_list">
          <li><a href="index.html">HOME</a></li>
          <li><a href="style.html">STYLE</a></li>
          <li><a href="menu.html">MENU</a></li>
          <li><a href="access.html">ACCESS</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </nav>
      <address class="address_box">
        <ul>
          <li>OPEN : 8:00 - 17:00 ( weekday ) 10:30 - 17:00 ( holiday )</li>
          <li>CLOSE : Tuesday</li>
          <li>ADDRESS : 〒542-0012 大阪府大阪市中央区谷町7-6-33</li>
          <li>PHONE : 06-6776-2236</li>
          <li>E-MAIL : fatdogstand@gmail.com</li>
        </ul>
      </address>
    </div>
    <p class="copy">Copyright &copy; 2019 FAT DOG STAND All Rights Reserved.</p>
  </footer>
  <!-- フッターend -->
</body>

</html>
anonymous No title
CSS
header {
  color:white;
}
anonymous No title
Python
Hello!  harigami.jp 
 
Have you ever heard that you can send a message through the contact form? 
These forms are located on many sites. We sent you our message in the same way, and the fact that you received and read it shows the effectiveness of this method of sending messages. 
Since people in any case will read the offer received through the contact form. 
Our database includes more than 35 million websites from all over the world. 
The cost of sending one million messages 49 USD. 
There is a discount program for large orders. 
 
Free proof mailing of 50,000 messages to any country of your choice. 
 
This message is created automatically. Please use the contact details below to contact us. 
 
Contact us. 
Telegram - @FeedbackFormEU 
Skype  FeedbackForm2019 
Email - feedbackform@make-success.com
年末年始は機械学習・深層学習を勉強しませんか?
広告
未経験から最短でエンジニアへの転職を目指すなら