Skip to content

Instantly share code, notes, and snippets.

@jdursema

jdursema/PattrnPartyHTML.txt

Last active February 7, 2018 02:55
Show Gist options
  • Save jdursema/1c3f050774da28d12dbe7cc4b1e5af77 to your computer and use it in GitHub Desktop.
Save jdursema/1c3f050774da28d12dbe7cc4b1e5af77 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
PattrnPartyHTML.txt
<html>
<head>
<title>Pattrn Party</title>
<link rel='stylesheet' href='./styles.css'/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Pattrn <span>Party</span></h1>
<h2>Julie Dursema</h2>
</header>
<section class= 'accordion-tabs'>
<div class='pattern-title'>
<h3>Accordion Tabs</h3>
<hr/>
</div>
<div class='card-area'>
<div class='card-and-tab'>
<div class='all-tabs'>
<h4 class='selected desktop-tab tab1' id='1'>Tab 1</h4>
<h4 class='desktop-tab tab2' id='2'>Tab 2</h4>
<h4 class='desktop-tab tab3' id='3'>Tab 3</h4>
<h4 class='desktop-tab tab4' id='4'>Tab 4</h4>
</div>
<div class='card'>
<div class='mobile mobile-tab1'>
<h4>Tab 1</h4>
<div class='close-icon open'></div>
</div>
<div class='card-info card-1'>
<div class='card-image'></div>
<div class='card-text'>
<h5>
Lorem ipsum dolor sit amet, consectetue
</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.
</p>
</div>
</div>
</div>
<div class='card '>
<div class='mobile mobile-tab2'>
<h4>Tab 2</h4>
<div class='close-icon'></div>
</div>
<div class='card-info card-2 hidden'>
<div class='card-image'></div>
<div class='card-text'>
<h5>
Lorem ipsum dolor sit amet, consectetue
</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.
</p>
</div>
</div>
</div>
<div class='card'>
<div class='mobile mobile-tab3'>
<h4>Tab 3</h4>
<div class='close-icon'></div>
</div>
<div class='card-info card-3 hidden'>
<div class='card-image'></div>
<div class='card-text'>
<h5>
Lorem ipsum dolor sit amet, consectetue
</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.
</p>
</div>
</div>
</div>
<div class='card '>
<div class='mobile mobile-tab4'>
<h4>Tab 4</h4>
<div class='close-icon'></div>
</div>
<div class='card-info card-4 hidden'>
<div class='card-image'></div>
<div class='card-text'>
<h5>
Lorem ipsum dolor sit amet, consectetue
</h5>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<a class='view-code-btn'>View Code</a>
<div class='code hidden'>
<div class='html'>
<script src="https://gist.github.com/jdursema/1c3f050774da28d12dbe7cc4b1e5af77.js"></script>
</div>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment