HTMLCSS_code_template/work.html at main · taketo45/HTMLCSS_code_template · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Work Page</title>

    <!-- Normalize.css -->
    <link rel="stylesheet" href="stylesheets/normalize.css">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Piazzolla:opsz,wght@8..30,400;8..30,700&display=swap">

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/d5d188f750.js" crossorigin="anonymous"></script>

    <!-- My Styles -->
    <link rel="stylesheet" href="stylesheets/style.css">
    <link rel="stylesheet" href="stylesheets/style-mobile.css">
    <link rel="stylesheet" href="stylesheets/style-tablet.css">
    <link rel="stylesheet" href="stylesheets/style-laptop.css">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="images/favicon.png">
</head>

<body class="work">
    <header class="header">
        <div class="header-logo">
            <img class="header-logo-img" src="images/image-logo.svg" alt="logo">
            <span class="header-logo-title">Designer/Developer</span>
        </div>
        <nav class="header-nav">
            <ul class="header-nav-menu">
                <li class="header-nav-menu-item"><a href="index.html">Home</a></li>
                <li class="header-nav-menu-item"><a href="index.html#works">Works</a></li>
                <li class="header-nav-menu-item"><a href="index.html#about">About</a></li>
                <li class="header-nav-menu-item"><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <section class="main-hero">
            <div class="main-hero-container container">
                <div class="main-hero-highlight">
                    <h1>お仕事のタイトル</h1>
                </div>
            </div>
        </section>
        <section class="main-article">
            <h2><i class="far fa-file-alt"></i>Project Details</h2>
            <div class="main-article-container container">
                <div class="main-article-topic">
                    <img src="images/image-work-a1.jpg" alt="Work A1">
                    <h3>改善点の洗い出し</h3>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                </div>
                <div class="main-article-topic">
                    <img src="images/image-work-a2.jpg" alt="Work A2">
                    <h3>解決案の検討</h3>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                </div>
                <div class="main-article-topic">
                    <img src="images/image-work-a3.jpg" alt="Work A3">
                    <h3>最終結果</h3>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                    </p>
                </div>
            </div>
        </section>
        <section class="main-works">
            <h2><i class="fas fa-palette"></i>Read Next</h2>
            <div class="container">
                <div class="main-works-item">
                    <figure class="main-works-item-img secondary">
                        <img src="images/image-work-b.jpg" alt="Work B">
                    </figure>
                    <div class="main-works-item-text">
                        <h3>過去のお仕事 2</h3>
                        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                        </p>
                        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
                        </p>
                        <a href="work.html" class="button button-secondary">もっと読む</a>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer id="contact" class="footer">
        <div class="footer-container container">
            <div class="footer-form">
                <p>お仕事のご依頼やご相談等､お問い合わせはこちらからどうぞ｡</p>
                <form action="action.php" method="post" name="contact-form">
                    <div class="footer-form-input">
                        <i class="far fa-user"></i>
                        <input type="text" placeholder="氏名">
                    </div>
                    <div class="footer-form-input">
                        <i class="far fa-envelope"></i>
                        <input type="email" placeholder="メールアドレス">
                    </div>
                    <div class="footer-form-textarea">
                        <textarea placeholder="お問い合わせ内容"></textarea>
                    </div>
                    <input type="submit" value="送信する" class="button button-primary">
                </form>
            </div>
            <div class="footer-info">
                <div class="footer-info-nav">
                    <img class="footer-info-nav-img" src="images/image-logo.svg" alt="logo">
                    <nav class="footer-info-nav-menu">
                        <ul>
                            <li><a href="index.html#home">Home</a></li>
                            <li><a href="index.html#works">Works</a></li>
                            <li><a href="index.html#about">About</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="footer-info-follow">
                    <ul class="social-links">
                        <li>
                            <a href="" target="_blank">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" target="_blank">
                                <i class="fab fa-dribbble"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" target="_blank">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" target="_blank">
                                <i class="fab fa-medium"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" target="_blank">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </li>
                        <li>
                            <a href="" target="_blank">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <p class="footer-info-copy">
                    <small>© 2022 Elle Kasai. All Rights Reserved.</small>
                </p>
            </div>
        </div>
    </footer>
</body>

</html>