code-step.com
My Work
About
Works
News
Contact
インスタグラム
About
Xxxxx Ashley
2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan
tel: 000-0000-0000
url: www.xxxxxx.jp
mail: xxx@xxxxxx.jp
プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
Works
News
2022.XX.XX
デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。
2022.XX.XX
ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。
2021XX.XX
【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト
2021.XX.XX
デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。
2021.XX.XX
【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト
Contact
NAME
E-mail
MESSAGE
© 2022 My Work
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【コーディング練習】ポートフォリオサイト / LP</title>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<h1 class="site-title"><a href="index.html"><img src="img/logo.svg" alt="My Work"></a></h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://www.instagram.com/" target="_blank"><img class="icon" src="img/icon-instagram.png" alt="インスタグラム"></a></li>
</ul>
</nav>
</header>
<main class="main-content">
<div class="mainvisual">
<picture>
<source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">
<img src="img/mainvisual-pc.jpg" alt="テキストテキストテキスト">
</picture>
</div>
<section class="about wrapper">
<h2 class="sec-title">About</h2>
<ul>
<li>Xxxxx Ashley</li>
<li>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</li>
<li>tel: 000-0000-0000</li>
<li>url: www.xxxxxx.jp</li>
<li>mail: xxx@xxxxxx.jp</li>
</ul>
<p>
プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</section>
<section class="works wrapper">
<h2 class="sec-title">Works</h2>
<ul>
<li><img src="img/works1.jpg" alt="テキストテキストテキスト"></li>
<li><img src="img/works2.jpg" alt="テキストテキストテキスト"></li>
<li><img src="img/works3.jpg" alt="テキストテキストテキスト"></li>
<li><img src="img/works4.jpg" alt="テキストテキストテキスト"></li>
<li><img src="img/works5.jpg" alt="テキストテキストテキスト"></li>
<li><img src="img/works6.jpg" alt="テキストテキストテキスト"></li>
</ul>
</section>
<section class="news wrapper">
<h2 class="sec-title">News</h2>
<dl>
<dt>2022.XX.XX</dt>
<dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
<dt>2022.XX.XX</dt>
<dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
<dt>2021.XX.XX</dt>
<dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
<dt>2021.XX.XX</dt>
<dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
<dt>2021.XX.XX</dt>
<dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
</section>
<section class="contact wrapper">
<h2 class="sec-title">Contact</h2>
<form action="#" method="post">
<dl>
<dt><label for="name">NAME</label></dt>
<dd><input type="text" id="name" name="your-name"></dd>
<dt><label for="email">E-mail</label></dt>
<dd><input type="email" id="email" name="your-email"></dd>
<dt><label for="message">MESSAGE</label></dt>
<dd><textarea id="message" name="your-message"></textarea></dd>
</dl>
<div class="button"><input type="submit" value="送信"></div>
</form>
</section>
</main>
<footer class="footer">
<p>© 2022 My Work</p>
</footer>
</body>
</html>
@charset "UTF-8";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
border: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body {
color: #333;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.5;
}
.wrapper {
max-width: 960px;
margin: 0 auto 130px auto;
font-size: 14.5px;
padding: 0 4%;
}
.site-title {
line-height: 1.0;
}
.site-title a {
display: block;
}
.sec-title {
margin-bottom: 65px;
font-size: 24px;
text-align: center;
}
.header {
height: 80px;
margin-top: 20px;
text-align: center;
}
.header ul {
display: flex;
justify-content: center;
padding: 10px 0;
}
.header li {
font-size: 12px;
}
.header li a {
display: block;
padding: 0 12px;
}
.header li a:hover {
opacity: 0.7;
}
.header li img.icon {
width: 20px;
}
@media screen and (min-width: 768px) {
.header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 960px;
height: 270px;
margin: 0 auto;
padding: 0 4%;
}
.header ul {
padding: 7px 0 10px;
}
.header li {
font-size: 14.5px;
}
.header li a {
padding: 0 15px;
}
.header li:last-child a {
padding-right: 0;
}
}
.mainvisual {
margin-bottom: 86px;
}
.mainvisual img {
width: 100%;
max-width: 1920px;
height: 420px;
object-fit: cover;
}
.about {
margin-bottom: 70px;
}
.about .sec-title {
margin-bottom: 38px;
}
.about ul {
margin-bottom: 30px;
font-size: 14px;
}
.about li:first-child {
margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
.about {
margin-bottom: 128px;
}
.about .sec-title {
margin-bottom: 65px;
}
}
.works {
margin-bottom: 98px;
}
.works .sec-title {
margin-bottom: 38px;
}
.works li {
margin-bottom: 28px;
}
@media screen and (min-width:768px) {
.works {
margin-bottom: 158px;
}
.works .sec-title {
margin-bottom: 66px;
}
.works ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px
}
.works li {
margin-bottom: 0;
}
}
.news {
margin-bottom: 70px;
}
.news .sec-title {
margin-bottom: 40px;
}
.news dl {
border-top: 1px solid #c8c8c8;
}
.news dt {
padding: 15px 15px 0;
line-height: 1.45;
}
.news dd {
padding: 0 15px 15px;
border-bottom: 1px solid #c8c8c8;
line-height: 1.45;
}
@media screen and (min-width:768px) {
.news {
margin-bottom: 130px;
}
.news .sec-title {
margin-bottom: 70px;
}
.news dl {
display: grid;
grid-template-columns: 170px 1fr;
border-top: 1px solid #c8c8c8;
}
.news dt, .news dd {
padding: 15px;
border-bottom: 1px solid #c8c8c8;
line-height: 1.45;
}
}
.contact {
margin-bottom: 70px;
}
.contact .sec-title {
margin-bottom: 40px;
}
.contact dl {
margin-bottom: 20px;
}
.contact dd input,
.contact dd textarea {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #c8c8c8;
line-height: 1.6;
}
.contact dd textarea {
height: 160px;
}
.contact .button {
text-align: center;
}
.contact .button input {
width: 200px;
padding: 15px 0;
background-color: #24292e;
border: solid 1px #24292e;
color: #fff;
}
.contact .button input:hover {
background: #fff;
color: #24292e;
}
@media screen and (min-width: 768px) {
.contact {
margin-bottom: 130px;
}
.contact .sec-title {
margin-bottom: 64px;
}
.contact dl {
display: grid;
grid-template-columns: 15% 85%;
margin-bottom: 20px;
}
}
.footer {
padding: 10px 20px;
background-color: #000;
color: #fff;
font-size: 10px;
text-align: center;
}
