BCC_python

5/16

CS_student 2024. 5. 16. 15:52 
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<style>
	  * {
		padding:0;
        margin: 0;
		}
     
      body{
        background-color: #333;
        color: white;
      }
		
      .container{
        max-width:700px;
        margin: 0 auto;
        box-sizing: border-box;
        height: 100vh;
        display : flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }
      
      header{
        display:flex;
        justify-content: space-between;
        width:100%;
      }
      
      header > p {
      	font-size: 1.5rem;
        font-weight: 700;
      }
      
      header> ul {
        display:flex;
      }
      
      header > ul > li {
        list-style-type: none ;
        margin-left: 2.5rem;
      }
      header > ul > li > a {
        text-decoration : none;
        font-size : 1.2 rem;
        font-weight : 800;
      }
      
      header>ul>li:first-child>a { /* 메뉴 바 */
        border-bottom: 5px solid white;
      }
      
 	  header > ul> li> a:hover{ /*반짝*/
        border-bottom: 5px solid gray;
      }
      
      @media screen and (max-width:500px){
        header{
          flex-direction:column;
     
        }
      }
      section {
        padding : 0 3 rem;
        text-align : center;
      }
      
      section > p: first-child{
        font-size: 2 rem;
        font-weight: 900;
      }
      
      section > p: last-of-type{
        font-size: 1.3rem;
        font-weight: 500;
      }
      
      section>a {
        display: block;
        border : 1px solid black;
        width : 150 px;
        font-size: 1.3rem;
        font-weight : 600;
        margin : auto;
        padding: 1rem;
        border-radius: 10px;
        text-decoration: none;
        
        background-color: white;
        color: black;
      }
      
      footer {
        margin-bottom: 2rem;
        font-size: 1.1rem;
        color:gray;
      }
     
      footer>a {
        text-decoration: none;
        color:white;
      }
	</style>
</head>

<body>
  <div class = "container">
    <header>
      <p>Cover</p>
      <ul>
        <li><a herf = "#">Home</a></li>
        <li><a herf = "#">Features</a></li>
        <li><a herf = "#">Contact</a></li>
      </ul>
    </header>
    
    <section>
      <p>Cover your page</p>
      <p>자기소개 하기 ..</p>
      <a href = "#">Learn more</a>
    </section>
    
    <footer>Cover template
      for <a href="https://www.naver.com">@dyn</a>
    </footer>
    
  </div>
      
</body>

</html>