私が作ったゼリー

19346 ワード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
 border : 3px solid blue;
 min-width : 1500px;
}

#My{
  background : yellow;
  height : 130px;
  clear : both;
  text-align : center;
  padding-top: 5px;
  border-radius : 20px;

}
#Link{
  width : calc(28% - 3px);
  height : 500px;
  float : left;
  background : #ffada9;
  border-radius : 20px;
  padding: 20px;
  padding-top: 30px;
  padding-left: 5px;

}
#Link h2{
 margin-left : 15px;
}
#Link h3{
 margin-left : 100px;
}
section{
   width :calc(69% - 1%);
   height : 500px;
   float : right;
   background : #B4F0B4;
   /*border: 1px solid black;*/
   padding: 20px;
   padding-top: 30px;
   border-radius : 20px;
   margin : 0px;
   padding-right: 5px;
}


#atop{
  height: 200px;
  border: 3px dotted green;
  margin-bottom: 30px;
  background : #C8FAC8;
  padding : 10px;
  border-radius : 20px;
  
}

#abottom{
  height: 200px;
  border: 3px dotted green;
  background : #C8FAC8;
  padding : 10px;
  border-radius : 20px;
}
#Copy{
  background : #d8aff3;
  height : 50px;
  clear : both;
  text-align : center;
  border-radius : 20px;
}
img{
  width : 150px;
  height :150px;
  margin-left : 50px;
  border-radius : 20px;
}

</style>
</head>
<body>
 
 <header id = "My"><h1>My Blog Page</h1><h4>시멘틱 뭐시기로 만든 페이지 입니다</h4></header>

 <nav id = "Link"><h2>Links</h2>
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 <img src ="../images/달리는멍.jpg.crdownload" alt="달리는멍.jpg.crdownload">
 <h3>강아지</h3>
 </nav>
 
 <section>
 
 <article id="atop">
 <h2>Tags</h2><br>
 <h4>싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구</h4>
 </article>
 
  <article id="abottom">
  <h2>div</h2><br>
  <h4>싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구싱기방구</h4>
 </article>
 
 </section>
 
 <footer id="Copy">
 <h2>Copyright</h2>
 </footer>
 
 
 
</body>
</html>