WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ポートフォリオの雛形

Webサイト制作

今回使用したプラグイン
fancyapps.com


作成
http://felica29.starfree.jp/portfolio/



トップページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポートフォリオ</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
</head>
<body>
<h1>Portfolio</h1>




<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->




<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->

<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->





</div><!-- container -->
</div><!-- cd-timeline -->


<div class="grid-outer">
<div class="grid-wrapper">
<a data-fancybox data-type="iframe" data-src="site-01/index.html" href="javascript:;">
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
</a>




<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
<div class="box">
<p><img src="https://placehold.jp/4b98cc/ffffff/400x300.png" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali</p>
</div>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/main.js"></script>
</body>
</html>

style.scss

@import "_reset.scss";
@import "_time-line.scss";



.cd-timeline{
margin: 100px 0;
}




.grid-outer{
padding: 10px;
}
.grid-wrapper{
max-width: 1240px;
margin: 0 auto;
display: grid;
gap: 20px;

/* 3x3のままフルードの場合 */
//grid-template-columns: repeat(3,auto);

/* boxの幅の最小サイズを指定したい場合 */
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.box{
background: #ebacac;
border-radius: 4% 4% 0 0;
padding: 20px;
}
.box>p{
margin-bottom: 20px;
text-align: center;
}
.txt{
text-align: left;
}
.box img{
max-width: 100%;

}

site-01のindex.html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<style>
body{
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div class="box">
<h1>サイトタイトル</h1>
</div>
</body>
</html>