layout2 레이아웃2
css
layout2 레이아웃2
Header
#header{
background-color:#02918c;
}
<div id="header">
<h1>MYFOLIO</h1>
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>SERVICE</li>
<li>MY WORK</li>
<li>CONTACT ME</li>
</ul>
</div>
Main visual
- 로고 노란글씨 컬러 코드 : #cfc91e;
- 헤더 배경색깔 컬러 코드 : #02918c;
<div id="main_visual">
<div>Lorem ipsum dolor sit iusmod tempor</div>
<div>incididunt bore</div>
<div>Orem ipsum dolor sit amet, consectetur</div>
<img src="">
</div>
About me
<section>
<h2>ABOUT ME</h2>
<div class="sub_title">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et <br /> dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea <br /> commodo consequat
duis aute irure dolor.
</div>
</section>
<ul>
<li>
<img class="icon" src="/kaywon/sub/img/layout_jpg/layout2_icon1.jpg" />
<dl>
<dt>Title goes here</dt>
<dd>
onsectetur adipisicing elit, sedo eiusmod tempor
incidi et dolorerserss eerhfre mag.
</dd>
</dl>
</li>
</ul>
section>ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
section>ul>li{
width:calc(25% - 2px);
border: solid 1px black;
}
My works
<section>
<h2>MY WORK</h2>
<div class="sub_title">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <br /> incididunt ut labore et dolore magna
aliqua.
</div>
</section>