Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- * {
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- }
- body {
- background: linear-gradient(0deg, #532835, #8c7580, #be97c9, #d2f6d5, #6b4f6f, #532835);
- background-size: 1000% 1000%;
- -webkit-animation: BG 35s ease infinite;
- -moz-animation: BG 35s ease infinite;
- -o-animation: BG 35s ease infinite;
- animation: BG 35s ease infinite;
- }
- @-webkit-keyframes BG {
- 0%{background-position:52% 0%}
- 50%{background-position:50% 50%}
- 100%{background-position:52% 0%}
- }
- @-moz-keyframes BG {
- 0%{background-position:52% 0%}
- 50%{background-position:50% 50%}
- 100%{background-position:52% 0%}
- }
- @-o-keyframes BG {
- 0%{background-position:52% 0%}
- 50%{background-position:50% 50%}
- 100%{background-position:52% 0%}
- }
- @keyframes BG {
- 0%{background-position:52% 0%}
- 50%{background-position:50% 50%}
- 100%{background-position:52% 0%}
- }
- div {
- }
- .title{
- text-shadow: 0 0 3px #ffffff;
- animation-name: glow1;
- animation-duration: 5s;
- animation-timing-function:linear;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- font-family: 'Carrois Gothic SC'; font-size: 40px;
- color: white;
- text-align:center;
- margin-top: 10px;
- }
- @keyframes glow1 {
- 0% {text-shadow: 0 0 3px #D2F6D5;}
- 25% {text-shadow: 0 0 3px #D2F6D5, 0 0 4px #D2F6D5;}
- 50% {text-shadow: 0 0 3px #D2F6D5, 0 0 4px #D2F6D5, 0 0 5px #D2F6D5;}
- 75% {text-shadow: 0 0 3px #D2F6D5, 0 0 4px #D2F6D5, 0 0 5px #D2F6D5, 0 0 6px #D2F6D5;}
- 100% {text-shadow: 0 0 3px #D2F6D5, 0 0 4px #D2F6D5,0 0 5px #D2F6D5, 0 0 6px #D2F6D5, 0 0 7px #D2F6D5;}
- }
- @font-face {
- font-face: Carrois Gothic SC;
- src: url(carroisgothicsc-regular.ttf);
- }
- div#music {
- height: 1px;
- width: 1px;
- overflow: hidden;
- }
- div.tab {
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- overflow: hidden;
- border: 1px solid #fff;
- background-color: #f1f1f1;
- border-radius:5px;
- box-shadow:0 0 3px #fff;
- margin-left:10px;
- margin-right:10px;
- margin-top:10px;
- font-family: 'Carrois Gothic SC';
- }
- /* Style the buttons inside the tab */
- div.tab button {
- background-color: inherit;
- float: left;
- border: none;
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- outline: none;
- cursor: pointer;
- padding: 14px 16px;
- transition: 0.3s;
- font-size: 17px;
- font-family: 'Carrois Gothic SC';
- }
- h3 {
- font-size: 20px;
- font-family: 'Muli', sans-serif;
- color: #532835;
- text-align:center;
- bottom-border:1px #CCCCCC solid;
- text-transform: uppercase;
- }
- /* Change background color of buttons on hover */
- div.tab button:hover {
- background-color: #8C7580;
- color:#FFF;
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- }
- /* Create an active/current tablink class */
- div.tab button.active {
- background-color: #fff;
- color: #532835;
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- }
- a {
- text-decoration:none;
- color:#532835;
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- }
- a:hover {
- color:#fff;
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- }
- /* Style the tab content */
- .tabcontent {
- display: none;
- background-color:white;
- margin-top:10px;
- border-radius:5px;
- padding: 6px 12px;
- border: 0px solid #ccc;
- margin-left:10px;
- margin-right:10px;
- height:400px;
- box-shadow:0 0 3px #fff;
- cursor: url("http://www.rw-designer.com/cursor-view/65817.png"), auto;
- }
- marquee {
- margin-top: 40px;
- }
- .text {
- overflow: auto;
- text-align: justify;
- padding: 10px;
- height: 300px;
- font-family: 'Oxygen', sans-serif;
- font-size: 14px;
- line-height: 20px;
- color:#532835;
- }
- .picture {
- height: 100px; width: 100px; overflow:hidden; float:left; padding: 5px;
- }
- button.accordion {
- background-color: #eee;
- color: #444;
- cursor: pointer;
- padding: 18px;
- width: 100%;
- border: none;
- text-align: left;
- outline: none;
- font-size: 17px;
- transition: 0.4s;
- font-family: 'Carrois Gothic SC';
- }
- img.pet {
- height: 100px;
- width: 100px;
- }
- button.accordion:hover {
- background-color: #8C7580;
- color: white;
- }
- button.accordion.active {
- background-color:#D2F6D5;
- color:#532835;
- }
- .paragraph {
- font-family: 'Oxygen', sans-serif;
- line-height: 18px;
- font-size: 13px;
- float:left;
- margin-left: 20px;
- margin-top: 20px;
- }
- div.panel {
- padding: 0 18px;
- background-color: white;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.2s ease-out;
- }
- /* Create four equal columns that floats next to each other */
- .column {
- float: left;
- width: 25%;
- padding: 10px;
- }
- .column img {
- margin-top: 12px;
- width: 150px;
- }
- /* Clear floats after the columns */
- .row:after {
- content: "";
- display: table;
- clear: both;
- }
- /* Responsive layout - makes a two column-layout instead of four columns */
- @media (max-width: 800px) {
- .column {
- width: 50%;
- }
- }
- /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
- @media (max-width: 600px) {
- .column {
- width: 100%;
- }
- }
- img.patrick:hover {
- /* Start the shake animation and make the animation last for 0.5 seconds */
- animation: shake 0.5s;
- /* When the animation is finished, start again */
- animation-iteration-count: infinite;
- }
- @keyframes shake {
- 0% { transform: translate(1px, 1px) rotate(0deg); }
- 10% { transform: translate(-1px, -2px) rotate(-1deg); }
- 20% { transform: translate(-3px, 0px) rotate(1deg); }
- 30% { transform: translate(3px, 2px) rotate(0deg); }
- 40% { transform: translate(1px, -1px) rotate(1deg); }
- 50% { transform: translate(-1px, 2px) rotate(-1deg); }
- 60% { transform: translate(-3px, 1px) rotate(0deg); }
- 70% { transform: translate(3px, 1px) rotate(-1deg); }
- 80% { transform: translate(-1px, -1px) rotate(1deg); }
- 90% { transform: translate(1px, 2px) rotate(0deg); }
- 100% { transform: translate(1px, -2px) rotate(-1deg); }
- }
- img.fox:hover {
- -webkit-animation: blur 3s infinite;
- }
- @-webkit-keyframes blur {
- 0%, 100% { -webkit-filter: blur(0px); }
- 50% { -webkit-filter: blur(10px); }
- }
- img.dog:hover {
- -webkit-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- img.pika:hover {
- -webkit-animation: hue 3s infinite;
- }
- @-webkit-keyframes hue {
- 0%, 100% { -webkit-filter: hue-rotate(0deg); }
- 50% { -webkit-filter: hue-rotate(180deg); }
- }
- img.panda:hover {
- -webkit-animation: omgbbq 3s infinite;
- }
- @-webkit-keyframes omgbbq {
- 0%, 100% { -webkit-filter: blur(0px) brightness(none) hue-rotate(0deg) saturate(none); }
- 50% { -webkit-filter: brightness(10) blur(10px) hue-rotate(180deg) saturate(10); }
- }
- </style>
- <link href='https://fonts.googleapis.com/css?family=Carrois Gothic SC' rel='stylesheet'>
- <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
- </head>
- <body>
- <div id="music">
- <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/363526817&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
- </div>
- <div class="title">
- Title
- </div>
- <div class="tab">
- <button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen">Home</button>
- <button class="tablinks" onclick="openCity(event, 'L1')">Link 1</button>
- <button class="tablinks" onclick="openCity(event, 'L2')">Link 2</button>
- <button class="tablinks" onclick="openCity(event, 'L3')">Link 3</button>
- <button class="tablinks" onclick="openCity(event, 'L4')">Link 4</button>
- <button class="tablinks" onclick="openCity(event, 'L5')">Link 5</button>
- <button class="button" onclick="return myFunction();"><a href="http://www.marapets.com/profile.php?id=5481177">Credits</a></button>
- </div>
- <div id="Home" class="tabcontent">
- <h3>Home</h3>
- <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Curabitur elementum dapibus mauris eget varius. Mauris lacinia ut eros vitae bibendum. Curabitur ac mattis nibh, et dapibus lectus. Cras malesuada justo risus, id eleifend nisl tincidunt vel. Phasellus aliquet vulputate sagittis. Ut id nunc eget erat malesuada vehicula. Etiam consequat justo id purus tristique, vitae lobortis felis aliquet. Curabitur rhoncus efficitur scelerisque.
- </br>
- Nullam et pharetra dolor. Phasellus eget arcu felis. Cras accumsan elementum lacus quis luctus. Donec molestie libero et sapien iaculis sagittis. Curabitur gravida leo nec justo placerat, non feugiat ex facilisis. Cras sed ultricies ligula, eu imperdiet massa. Donec et aliquam diam, vel elementum sapien. Vivamus pellentesque ipsum quis lobortis egestas.
- </br>
- Suspendisse tempus porttitor lacus ut pretium. Mauris eu dui pulvinar dui commodo tempus. Aenean sit amet egestas nisl. Proin iaculis varius elit, quis bibendum quam laoreet sit amet. Pellentesque quis ipsum quis ex egestas elementum suscipit ut sem. Sed feugiat augue nec mauris fringilla, ut dapibus leo dictum. Donec ac eleifend augue. Cras vitae efficitur nisi. Pellentesque accumsan, sapien a finibus scelerisque, justo magna commodo diam, a fringilla metus lectus sit amet ipsum. Quisque bibendum congue bibendum. Sed in sapien augue. Nulla venenatis quis eros in lacinia. Etiam et convallis enim.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </p>
- </div>
- <div id="L1" class="tabcontent">
- <h3>Title</h3>
- <div class="text">
- <button class="accordion">Name</button>
- <div class="panel">
- <p class="picture"><img class="pet" src="http://images.marapets.com/pets/Kaala_breeze.gif" height:100px; width: 100px;/></p>
- <p class="paragraph">You can put art or pictures of your marapet here.</p>
- </div>
- <button class="accordion">Name</button>
- <div class="panel">
- <p class="picture"><img class="pet" src="http://images.marapets.com/pets/Feliz_cartoon.gif" height:100px; width: 100px;/></p>
- </div>
- <button class="accordion">Name</button>
- <div class="panel">
- <p class="picture"><img class="pet" src="http://images.marapets.com/pets/Reese_breeze.gif" height:100px; width: 100px;/></p>
- </div>
- <button class="accordion">Name</button>
- <div class="panel">
- <p class="picture"><img class="pet" src="http://images.marapets.com/pets/Fasoro_valentine.gif" height:100px; width: 100px;/></p>
- </div>
- <button class="accordion">Name</button>
- <div class="panel">
- <p class="picture"><img class="pet" src="http://images.marapets.com/pets/Walee_nimbus.gif" height:100px; width: 100px;/></p>
- </div>
- </div>
- </div>
- <div id="L2" class="tabcontent">
- <h3>Hover over pictures</h3>
- <div class="text">
- <div class="row">
- <div class="column">
- <img class="patrick" src="http://i.imgur.com/j2yyz.png">
- <img class="fox" src="http://data.whicdn.com/images/27266975/original.gif">
- <img class="dog" src="http://25.media.tumblr.com/3274a78bd1ea4d67ca54b03c70771f2c/tumblr_miavcw7PIn1rj3x28o1_500.gif">
- <img class="pika" src="https://78.media.tumblr.com/aa9c1b72838658bc6eb2d45f9764bdc4/tumblr_oa9jvweMer1qk7puko2_r1_500.gif">
- <img class="panda" src="http://data.whicdn.com/images/135861918/original.gif">
- <img class="patrick" src="https://vignette.wikia.nocookie.net/hipstermeangirls/images/b/b8/Tumblr_mf9kpihE5m1rgpyeqo1_400.gif/revision/latest?cb=20130401033734">
- <img class="fox" src="https://media.giphy.com/media/F20MDDzvmPHSo/giphy.gif">
- </div>
- <div class="column">
- <img class="dog" src="https://ocanimeblog.files.wordpress.com/2012/07/jinrui-01h.jpg">
- <img class="pika" src="http://media3.giphy.com/media/nwWKRTtHskhy0/giphy.gif">
- <img class="panda" src="https://media1.tenor.com/images/12db9a45e63977bdc9b82f04c57549ca/tenor.gif?itemid=5157556">
- <img class="patrick" src="https://media.giphy.com/media/sJqDC2Q6O1mhO/giphy.gif">
- <img class="fox" src="https://media.giphy.com/media/10zgXNFjNNAlna/giphy.gif">
- <img class="dog" src="https://media.giphy.com/media/DYaSZ71prgN1K/giphy.gif">
- </div>
- <div class="column">
- <img class="pika" src="http://data.whicdn.com/images/283391594/original.gif">
- <img class="panda" src="https://media.giphy.com/media/5Ej3L40MzUCgo/giphy.gif">
- <img class="patrick" src="https://media.giphy.com/media/3ofT5FomUh3R1GPDMs/giphy.gif">
- <img class="fox" src="http://pa1.narvii.com/6163/3569b0caf5f192ccdab95fa069b531b92f7771f1_00.gif">
- <img class="dog" src="https://media.giphy.com/media/xUySTyvcoeOypxv65W/giphy.gif">
- <img class="pika" src="https://media.giphy.com/media/kRI8KazPiBE4g/giphy.gif">
- <img class="panda" src="https://m.popkey.co/feec0a/G03EE.gif">
- </div>
- <div class="column">
- <img class="patrick" src="http://pa1.narvii.com/6591/5edf9b2f9fed035b8d0d79bbc03fce8b1d64261c_128.gif">
- <img class="fox" src="https://media.tenor.com/images/99a342240e18d4707434b5fb1d1e5568/tenor.gif">
- <img class="dog" src="https://media1.tenor.com/images/49daca5a6c7fe6ccf874be16a5419a98/tenor.gif?itemid=8137979">
- <img class="pika" src="https://media.tenor.com/images/9390d3ce9e9c85f6bc567732fbd410a8/tenor.gif">
- <img class="panda" src="http://31.media.tumblr.com/49d89a7a4d44fef66a620730e26a07dc/tumblr_my1x3cH2hu1s0gve6o3_r1_250.gif">
- <img class="patrick" src="https://media1.tenor.com/images/31b2a7c0be19554b473aeda4daa2c644/tenor.gif?itemid=8138028">
- </div>
- </div>
- </div>
- </div>
- <div id="L3" class="tabcontent">
- <h3>Title</h3>
- <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Curabitur elementum dapibus mauris eget varius. Mauris lacinia ut eros vitae bibendum. Curabitur ac mattis nibh, et dapibus lectus. Cras malesuada justo risus, id eleifend nisl tincidunt vel. Phasellus aliquet vulputate sagittis. Ut id nunc eget erat malesuada vehicula. Etiam consequat justo id purus tristique, vitae lobortis felis aliquet. Curabitur rhoncus efficitur scelerisque.
- </br>
- Nullam et pharetra dolor. Phasellus eget arcu felis. Cras accumsan elementum lacus quis luctus. Donec molestie libero et sapien iaculis sagittis. Curabitur gravida leo nec justo placerat, non feugiat ex facilisis. Cras sed ultricies ligula, eu imperdiet massa. Donec et aliquam diam, vel elementum sapien. Vivamus pellentesque ipsum quis lobortis egestas.
- </br>
- Suspendisse tempus porttitor lacus ut pretium. Mauris eu dui pulvinar dui commodo tempus. Aenean sit amet egestas nisl. Proin iaculis varius elit, quis bibendum quam laoreet sit amet. Pellentesque quis ipsum quis ex egestas elementum suscipit ut sem. Sed feugiat augue nec mauris fringilla, ut dapibus leo dictum. Donec ac eleifend augue. Cras vitae efficitur nisi. Pellentesque accumsan, sapien a finibus scelerisque, justo magna commodo diam, a fringilla metus lectus sit amet ipsum. Quisque bibendum congue bibendum. Sed in sapien augue. Nulla venenatis quis eros in lacinia. Etiam et convallis enim.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </p>
- </div>
- <div id="L4" class="tabcontent">
- <h3>Title</h3>
- <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Curabitur elementum dapibus mauris eget varius. Mauris lacinia ut eros vitae bibendum. Curabitur ac mattis nibh, et dapibus lectus. Cras malesuada justo risus, id eleifend nisl tincidunt vel. Phasellus aliquet vulputate sagittis. Ut id nunc eget erat malesuada vehicula. Etiam consequat justo id purus tristique, vitae lobortis felis aliquet. Curabitur rhoncus efficitur scelerisque.
- </br>
- Nullam et pharetra dolor. Phasellus eget arcu felis. Cras accumsan elementum lacus quis luctus. Donec molestie libero et sapien iaculis sagittis. Curabitur gravida leo nec justo placerat, non feugiat ex facilisis. Cras sed ultricies ligula, eu imperdiet massa. Donec et aliquam diam, vel elementum sapien. Vivamus pellentesque ipsum quis lobortis egestas.
- </br>
- Suspendisse tempus porttitor lacus ut pretium. Mauris eu dui pulvinar dui commodo tempus. Aenean sit amet egestas nisl. Proin iaculis varius elit, quis bibendum quam laoreet sit amet. Pellentesque quis ipsum quis ex egestas elementum suscipit ut sem. Sed feugiat augue nec mauris fringilla, ut dapibus leo dictum. Donec ac eleifend augue. Cras vitae efficitur nisi. Pellentesque accumsan, sapien a finibus scelerisque, justo magna commodo diam, a fringilla metus lectus sit amet ipsum. Quisque bibendum congue bibendum. Sed in sapien augue. Nulla venenatis quis eros in lacinia. Etiam et convallis enim.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </p>
- </div>
- <div id="L5" class="tabcontent">
- <h3>Title</h3>
- <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Curabitur elementum dapibus mauris eget varius. Mauris lacinia ut eros vitae bibendum. Curabitur ac mattis nibh, et dapibus lectus. Cras malesuada justo risus, id eleifend nisl tincidunt vel. Phasellus aliquet vulputate sagittis. Ut id nunc eget erat malesuada vehicula. Etiam consequat justo id purus tristique, vitae lobortis felis aliquet. Curabitur rhoncus efficitur scelerisque.
- </br>
- Nullam et pharetra dolor. Phasellus eget arcu felis. Cras accumsan elementum lacus quis luctus. Donec molestie libero et sapien iaculis sagittis. Curabitur gravida leo nec justo placerat, non feugiat ex facilisis. Cras sed ultricies ligula, eu imperdiet massa. Donec et aliquam diam, vel elementum sapien. Vivamus pellentesque ipsum quis lobortis egestas.
- </br>
- Suspendisse tempus porttitor lacus ut pretium. Mauris eu dui pulvinar dui commodo tempus. Aenean sit amet egestas nisl. Proin iaculis varius elit, quis bibendum quam laoreet sit amet. Pellentesque quis ipsum quis ex egestas elementum suscipit ut sem. Sed feugiat augue nec mauris fringilla, ut dapibus leo dictum. Donec ac eleifend augue. Cras vitae efficitur nisi. Pellentesque accumsan, sapien a finibus scelerisque, justo magna commodo diam, a fringilla metus lectus sit amet ipsum. Quisque bibendum congue bibendum. Sed in sapien augue. Nulla venenatis quis eros in lacinia. Etiam et convallis enim.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis quis risus eget tristique. Fusce quam turpis, blandit a sapien nec, rhoncus tempus ex. Etiam a efficitur eros. Maecenas iaculis sagittis fermentum. Duis scelerisque sodales risus in fermentum. Proin vitae nibh est. Nam rhoncus eros a neque ultrices, eget molestie quam aliquam. Cras eu lectus ligula. Pellentesque in efficitur lacus, non aliquet turpis. Ut volutpat semper mauris, at ultrices magna efficitur id. Duis magna odio, rhoncus ac turpis in, tincidunt tempor leo. Aenean varius faucibus lectus, sed semper odio cursus pulvinar.
- </p>
- </div>
- <marquee><img src="https://media.giphy.com/media/J25dqANtclNao/giphy.gif"/></marquee>
- <script>
- function openCity(evt, cityName) {
- var i, tabcontent, tablinks;
- tabcontent = document.getElementsByClassName("tabcontent");
- for (i = 0; i < tabcontent.length; i++) {
- tabcontent[i].style.display = "none";
- }
- tablinks = document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- document.getElementById(cityName).style.display = "block";
- evt.currentTarget.className += " active";
- }
- function myFunction() {
- document.getElementById(".myDiv").style.flexGrow = "5";
- }
- var acc = document.getElementsByClassName("accordion");
- var i;
- for (i = 0; i < acc.length; i++) {
- acc[i].onclick = function() {
- this.classList.toggle("active");
- var panel = this.nextElementSibling;
- if (panel.style.maxHeight){
- panel.style.maxHeight = null;
- } else {
- panel.style.maxHeight = panel.scrollHeight + "px";
- }
- }
- }
- // Get the element with id="defaultOpen" and click on it
- document.getElementById("defaultOpen").click();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment