コーポレートサイトの制作 - WEBサイト制作の勉強

f:id:yachin29:20200713114511j:plain

Net Smart
よりスマートなインターネットライフを

HOME
CONCEPT
SERVICE
ACCESS

必要なものは、ビジネスの価値を届けるデザインの力。
Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、よりスマートなインターネットライフを送るお手伝いを致します。

CONCEPT
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

SERVICE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

ACCESS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore




会社情報

会社名
株式会社Net Smart

住所
東京都豊島区南池袋

電話番号
03-0000-0000

従業員
1000名

資本金
100,000,000円


© Net Smart all rights reserved.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Net Smart</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを</p>
</div><!--/.inner-->
<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
</nav>
</header>

<div class="main">
<p class="main-photo">
<img src="https://placehold.jp/3d4070/ffffff/960x300.jpg" alt="">
</p>
<h2>必要なものは、ビジネスの価値を届けるデザインの力。</h2>
<p class="txt">Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、よりスマートなインターネットライフを送るお手伝いを致します。</p>
</div><!--/.main-->

<div class="wrapper">
<div class="box">
<h3>CONCEPT</h3>
<p class="box-photo">
<img src="https://placehold.jp/3d4070/ffffff/280x280.jpg"
</p>
<p class="box-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!--/.box-->

<div class="box">
<h3>SERVICE</h3>
<p class="box-photo">
<img src="https://placehold.jp/3d4070/ffffff/280x280.jpg"
</p>
<p class="box-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>

<div class="box">
<h3>ACCESS</h3>
<p class="box-photo">
<img src="https://placehold.jp/3d4070/ffffff/280x280.jpg"
</p>
<p class="box-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>/<!--.wrapper-->


<div class="wrapper">
<div class="info">
<h3>会社情報</h3>
<dl>
<dt>会社名</dt>
<dd>株式会社Net Smart</dd>
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>電話番号</dt>
<dd>03-0000-0000</dd>
<dt>従業員</dt>
<dd>1000名</dd>
<dt>資本金</dt>
<dd>100,000,000円</dd>
</dl>
</div><!--/.info-->

<div class="map">
<h3>MAP</h3>
<div class="map-inner">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.0116470794305!2d139.71170681511273!3d35.72593208018393!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d69a1bfc623%3A0x6f829dc3047a4f7c!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yR77yS4oiS77yZIO-8q--8q-ODk-ODqw!5e0!3m2!1sja!2sjp!4v1594893187420!5m2!1sja!2sjp"  frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div><!--/.map-inner-->
</div><!--/.map-->
</div><!--/.wrapper-->


<footer>
<p><small>&copy;Net Smart all rights reserved.</small></p>
</footer>
</body>
</html>

@charset "utf-8";

html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}

/*PCレイアウト*/

.inner{
width: 960px;
margin: 0 auto;
}
h1{
margin: 30px 0 10px;
font-family: 'Josefin Sans', sans-serif;
font-size: 38px;
}
header p{
margin-bottom: 30px;
}

.g-nav{
width: 100%;
height: 50px;
background-color: darkslategrey;
margin-bottom: 60px;
}
.g-nav>ul{
width: 960px;
margin: 0 auto;
display: flex;
}
.g-nav li{
width: 25%;
height: 50px;
}
.g-nav a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;
border-right:1px solid #FFF;
}
.g-nav li:first-child>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: cadetblue;
}

.main{
text-align: center;
margin-bottom: 80px;
}
.main-photo{
margin-bottom: 80px;
}
h2{
margin-bottom: 30px;
}
.txt{
width: 600px;
margin: 0 auto;
line-height: 2;
}

.wrapper{
width: 960px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
}
.box{
width: 280px;
padding: 20px;
}
.box:hover{
box-shadow: 0 0 10px #BBB;
transition: 0.3s;
}
.box-photo{
margin-bottom: 10px;
}
.info{
width: 48%;
}
h3{
font-size: 28px;
margin-bottom: 30px;
border-left: 10px solid darkslategrey;
padding-left: 16px;
}
dl{
display: flex;
flex-wrap: wrap;
font-size: 18px;
}
dt{
width: 30%;
margin-bottom: 30px;
border-bottom: 1px solid #333;
padding-bottom: 6px;
}
dd{
width: 70%;
margin-bottom: 30px;
border-bottom: 1px solid #333;
padding-bottom: 6px;
}
.map{
width: 48%;
}
.map-inner{
height: 380px;
}
.g-map{
width: 100%;
height: 100%;
}
footer{
width: 100%;
height: 100px;
background-color: darkorange;
}
footer>p{
text-align: center;
line-height: 100px;
}