100-project-100-days-website/100_projects/12-create-tabs/index.html
2023-03-05 17:26:14 +03:00
Ask

41 lines
2.6 KiB
HTML

{88ca49244e3eebe7151f473054e57645aaced166 true 2661 index.html 0xc0030cf0a0}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="tabs">
<li class="active" data-cont=".one">Tab 1</li>
<li data-cont=".two">Tab 2</li>
<li data-cont=".three">Tab 3</li>
<li data-cont=".four">Tab 4</li>
<li data-cont=".five">Tab 5</li>
</ul>
<div class="content">
<div class="one">Content 1
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.</P>
</div>
<div class="two">Content 2
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse earum nam fugit odit totam quaerat minus, nobis illo quia officiis iste
</P>
</div>
<div class="three">Content 3
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laborum nisi id? Eius eaque expedita ex. Ipsam, repudiandae. Dignissimos delectus suscipit voluptatem eum possimus facere dolor laborum recusandae dolorum vero.
</P>
</div>
<div class="four">Content 4
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.</P>
</div>
<div class="five">Content 5
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laborum nisi id? Eius eaque expedita ex. Ipsam, repudiandae. Dignissimos delectus suscipit voluptatem eum possimus facere dolor laborum recusandae dolorum vero.</P>
</div>
</div>
<script src="main.js"></script>
</body>
</html>