비전공자 개발일기

Tabs Using 본문

HTML _CSS

Tabs Using

HiroDaegu 2022. 9. 3. 00:23
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TABS USING</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <section class="section">  
    <div class="title">  
     <h2>about</h2>  
     <p>  
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum,  
      aperiam!  
     </p>  
    </div>  
    <div class="about-center section-center">  
     <article class="about-img">  
      <img src="bg.jpg" alt="" />  
     </article>  
     <article class="about">  
      <!-- btn container -->  
      <div class="btn-container">  
       <button class="tab-btn active" data-id="history">history</button>  
       <button class="tab-btn" data-id="vision">vision</button>  
       <button class="tab-btn" data-id="goals">goals</button>  
      </div>  
      <div class="about-content">  
       <!-- single item -->  
       <div class="content active" id="history">  
        <h4>history</h4>  
        <p>  
         I'm baby wolf pickled schlitz try-hard normcore marfa man bun  
         mumblecore vice pop-up XOXO lomo kombucha glossier bicycle  
         rights. Umami kinfolk salvia jean shorts offal venmo. Knausgaard  
         tilde try-hard, woke fixie banjo man bun. Small batch tumeric  
         mustache tbh wayfarers 8-bit shaman chartreuse tacos. Viral  
         direct trade hoodie ugh chambray, craft beer pork belly flannel  
         tacos single-origin coffee art party migas plaid pop-up.  
        </p>  
       </div>  
       <!-- end of single item -->  
       <!-- single item -->  
       <div class="content" id="vision">  
        <h4>vision</h4>  
        <p>  
         Man bun PBR&B keytar copper mug prism, hell of helvetica. Synth  
         crucifix offal deep v hella biodiesel. Church-key listicle  
         polaroid put a bird on it chillwave palo santo enamel pin,  
         tattooed meggings franzen la croix cray. Retro yr aesthetic four  
         loko tbh helvetica air plant, neutra palo santo tofu mumblecore.  
         Hoodie bushwick pour-over jean shorts chartreuse shabby chic.  
         Roof party hammock master cleanse pop-up truffaut, bicycle  
         rights skateboard affogato readymade sustainable deep v  
         live-edge schlitz narwhal.  
        </p>  
        <ul>  
         <li>list item</li>  
         <li>list item</li>  
         <li>list item</li>  
        </ul>  
       </div>  
       <!-- end of single item -->  
       <!-- single item -->  
       <div class="content" id="goals">  
        <h4>goals</h4>  
        <p>  
         Chambray authentic truffaut, kickstarter brunch taxidermy vape  
         heirloom four dollar toast raclette shoreditch church-key.  
         Poutine etsy tote bag, cred fingerstache leggings cornhole  
         everyday carry blog gastropub. Brunch biodiesel sartorial mlkshk  
         swag, mixtape hashtag marfa readymade direct trade man braid  
         cold-pressed roof party. Small batch adaptogen coloring book  
         heirloom. Letterpress food truck hammock literally hell of wolf  
         beard adaptogen everyday carry. Dreamcatcher pitchfork yuccie,  
         banh mi salvia venmo photo booth quinoa chicharrones.  
        </p>  
       </div>  
       <!-- end of single item -->  
      </div>  
     </article>  
    </div>  
   </section>  
</body>
</html>
 /*  
 ===============   
 Fonts  
 ===============  
 */  
 @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");  
 /*  
 ===============   
 Variables  
 ===============  
 */  
 :root {  
  /* dark shades of primary color*/  
  --clr-primary-1: hsl(205, 86%, 17%);  
  --clr-primary-2: hsl(205, 77%, 27%);  
  --clr-primary-3: hsl(205, 72%, 37%);  
  --clr-primary-4: hsl(205, 63%, 48%);  
  /* primary/main color */  
  --clr-primary-5: #49a6e9;  
  /* lighter shades of primary color */  
  --clr-primary-6: hsl(205, 89%, 70%);  
  --clr-primary-7: hsl(205, 90%, 76%);  
  --clr-primary-8: hsl(205, 86%, 81%);  
  --clr-primary-9: hsl(205, 90%, 88%);  
  --clr-primary-10: hsl(205, 100%, 96%);  
  /* darkest grey - used for headings */  
  --clr-grey-1: hsl(209, 61%, 16%);  
  --clr-grey-2: hsl(211, 39%, 23%);  
  --clr-grey-3: hsl(209, 34%, 30%);  
  --clr-grey-4: hsl(209, 28%, 39%);  
  /* grey used for paragraphs */  
  --clr-grey-5: hsl(210, 22%, 49%);  
  --clr-grey-6: hsl(209, 23%, 60%);  
  --clr-grey-7: hsl(211, 27%, 70%);  
  --clr-grey-8: hsl(210, 31%, 80%);  
  --clr-grey-9: hsl(212, 33%, 89%);  
  --clr-grey-10: hsl(210, 36%, 96%);  
  --clr-white: #fff;  
  --clr-red-dark: hsl(360, 67%, 44%);  
  --clr-red-light: hsl(360, 71%, 66%);  
  --clr-green-dark: hsl(125, 67%, 44%);  
  --clr-green-light: hsl(125, 71%, 66%);  
  --clr-black: #222;  
  --ff-primary: "Roboto", sans-serif;  
  --ff-secondary: "Open Sans", sans-serif;  
  --transition: all 0.3s linear;  
  --spacing: 0.25rem;  
  --radius: 0.5rem;  
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);  
  --max-width: 1170px;  
  --fixed-width: 620px;  
 }  
 /*  
 ===============   
 Global Styles  
 ===============  
 */  
 *,  
 ::after,  
 ::before {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: var(--ff-secondary);  
  background: var(--clr-grey-10);  
  color: var(--clr-grey-1);  
  line-height: 1.5;  
  font-size: 0.875rem;  
 }  
 ul {  
  list-style-type: none;  
 }  
 a {  
  text-decoration: none;  
 }  
 img:not(.logo) {  
  width: 100%;  
 }  
 img {  
  display: block;  
 }  
 h1,  
 h2,  
 h3,  
 h4 {  
  letter-spacing: var(--spacing);  
  text-transform: capitalize;  
  line-height: 1.25;  
  margin-bottom: 0.75rem;  
  font-family: var(--ff-primary);  
 }  
 h1 {  
  font-size: 3rem;  
 }  
 h2 {  
  font-size: 2rem;  
 }  
 h3 {  
  font-size: 1.25rem;  
 }  
 h4 {  
  font-size: 0.875rem;  
 }  
 p {  
  margin-bottom: 1.25rem;  
  color: var(--clr-grey-5);  
 }  
 @media screen and (min-width: 800px) {  
  h1 {  
   font-size: 4rem;  
  }  
  h2 {  
   font-size: 2.5rem;  
  }  
  h3 {  
   font-size: 1.75rem;  
  }  
  h4 {  
   font-size: 1rem;  
  }  
  body {  
   font-size: 1rem;  
  }  
  h1,  
  h2,  
  h3,  
  h4 {  
   line-height: 1;  
  }  
 }  
 /* global classes */  
 .btn {  
  text-transform: uppercase;  
  background: transparent;  
  color: var(--clr-black);  
  padding: 0.375rem 0.75rem;  
  letter-spacing: var(--spacing);  
  display: inline-block;  
  transition: var(--transition);  
  font-size: 0.875rem;  
  border: 2px solid var(--clr-black);  
  cursor: pointer;  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);  
  border-radius: var(--radius);  
 }  
 .btn:hover {  
  color: var(--clr-white);  
  background: var(--clr-black);  
 }  
 /* section */  
 .section {  
  padding: 5rem 0;  
 }  
 .section-center {  
  width: 90vw;  
  margin: 0 auto;  
  max-width: 1170px;  
 }  
 @media screen and (min-width: 992px) {  
  .section-center {  
   width: 95vw;  
  }  
 }  
 main {  
  min-height: 100vh;  
  display: grid;  
  place-items: center;  
 }  
 /*  
 ===============   
 About  
 ===============  
 */  
 .title {  
  text-align: center;  
  margin-bottom: 4rem;  
 }  
 .title p {  
  width: 80%;  
  margin: 0 auto;  
 }  
 .about-img {  
  margin-bottom: 2rem;  
 }  
 .about-img img {  
  border-radius: var(--radius);  
  object-fit: cover;  
  height: 20rem;  
 }  
 @media screen and (min-width: 992px) {  
  .about-img {  
   margin-bottom: 0;  
  }  
  .about-center {  
   display: grid;  
   grid-template-columns: 1fr 1fr;  
   column-gap: 2rem;  
  }  
 }  
 .about {  
  background: var(--clr-white);  
  border-radius: var(--radius);  
  display: grid;  
  grid-template-rows: auto 1fr;  
 }  
 .btn-container {  
  border-top-left-radius: var(--radius);  
  border-top-right-radius: var(--radius);  
  display: grid;  
  grid-template-columns: 1fr 1fr 1fr;  
 }  
 .tab-btn:nth-child(1) {  
  border-top-left-radius: var(--radius);  
 }  
 .tab-btn:nth-child(3) {  
  border-top-right-radius: var(--radius);  
 }  
 .tab-btn {  
  padding: 1rem 0;  
  border: none;  
  text-transform: capitalize;  
  font-size: 1rem;  
  display: block;  
  background: var(--clr-grey-9);  
  cursor: pointer;  
  transition: var(--transition);  
  letter-spacing: var(--spacing);  
 }  
 .tab-btn:hover:not(.active) {  
  background: var(--clr-primary-10);  
  color: var(--clr-primary-5);  
 }  
 .about-content {  
  border-bottom-left-radius: var(--radius);  
  border-bottom-right-radius: var(--radius);  
  padding: 2rem 1.5rem;  
 }  
 /* hide content */  
 .content {  
  display: none;  
 }  
 .tab-btn.active {  
  background: var(--clr-white);  
 }  
 .content.active {  
  display: block;  
 }
const about = document.querySelector(".about");  
const btns = document.querySelectorAll(".tab-btn");  
const articles = document.querySelectorAll(".content");  
about.addEventListener("click", function (e) {  
 const id = e.target.dataset.id;  
 if (id) {  
  // remove selected from other buttons  
  btns.forEach(function (btn) {  
   btn.classList.remove("active");  
  });  
  e.target.classList.add("active");  
  // hide other articles  
  articles.forEach(function (article) {  
   article.classList.remove("active");  
  });  
  const element = document.getElementById(id);  
  element.classList.add("active");  
 }  
});
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Oxygen  (0) 2022.09.05
Wave BG Button  (0) 2022.09.04
Lighting Loader  (0) 2022.09.02
Emotion Animation  (0) 2022.09.01
CSS Animated Swipe  (0) 2022.08.31
'HTML _CSS' Related Articles more