practice/practice1.html at main · uuronn/practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>練習001</title>
    <link rel="stylesheet" href="practice1.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>

    <!--サイドメニュー-->
    <div class="menu">
        <p>MoR</p>
        <ul>
            <li>ホーム</li>
            <li>MoRについて</li>
            <li>新着情報</li>
            <li>よくある質問</li>
            <li class="footer">contact</li>
            <li class="fa fa-twitter"></li>
            <li class="fa fa-facebook"></li>
        </ul>
    </div>

    <!--トップページ-->
    <div class="top">
        <img class="top_back" src="./image/blue_img.jpg" alt="青い画像です。" width="1700" height="1080">
        <div class="top_img">
        <img src="./image/iphone_img.png" alt="アイフォンの画像" width="640" height="1280">
        </div>
        <h1 class="top_title">モロりましょう。</h1>
        <div class="top_triangle">
        </div>
        <a class="top_button"></a>
    </div>


    <!--MoR紹介ページ-->
    <div class="intro">
        <img class="intro_park" src="./image/bigpark_img.jpg" alt="公園" width="1700" height="1080">
        <p class="intro_font">次世代型ニートアプリ[モロ]爆誕<br><span>MoR</span><br><small>2022年&nbsp;&nbsp;&nbsp;グッドデザイン賞受賞</small></p>
    </div>

    <!--MoRの特徴ページ-->
    <div class="feature">
        <img class="feature_park" src="./image/bigpark_img.jpg" alt="公園" width="1700" height="1080">
        <img class="feature_black" src="./image/black_img.png" alt="黒い画像" width="1700" height="1080">
        <p class="feature_title">MoRの特徴</p>
        <img class="feature_number_1" src="./image/circle_img.png" alt="丸">
        <img class="feature_number_2" src="./image/circle_img.png" alt="丸">
        <p class="number1">1</p>
        <p class="number2">2</p>

        <img class="feature_explain_first" src="./image/social_media_img.png" alt="アプリ">
        <img class="feature_explain_second" src="./image/coincheck_img.png" alt="コイン">
        <p class="feature_font_left"><span>いつでもバイトをサボれる</span><br>MoRは、安心のバイトサボりアプリ。<br>自分の休みたいときに、好きなだけ<br>バイトを休みましょう。</p>
        <p class="feature_font_right"><span>安心のサボり保証</span><br>MoRでは、１年間のサボり保証が<br>ついています。<br>バイトを飛んでもサボり保証で<br>給料ゲット！</p>
    </div>

        <!--著作権ページ-->

    <div class="bottom">
        <img class="bottom_back" src="./image/trapezoid_img.png" alt="灰色の図形" width="1700" height="1080">
        <p class="bottom_copy">&copy;MoR&nbsp;2020</p>
    </div>
    <script>console.log("hogehoge")
    </script>

</body>
</html>