User:Axe Hack/Sandbox: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
mNo edit summary
mNo edit summary
Line 5: Line 5:
<div style="background-color: #f5f5f5; padding: 20px;">
<div style="background-color: #f5f5f5; padding: 20px;">


<!-- Basic user information (moved to the right, with gradient background, drop shadow, and border color) -->
<!-- Tabs Section -->
<div style="float: right; width: 250px; background: linear-gradient(135deg, #0073e6, #4facfe); border: 2px solid #0073e6; padding: 10px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); color: white;">
<div class="tabs">
{| class="infobox" style="width: 100%; background-color: transparent;" <!-- Transparent background to let gradient show through -->
  <input type="radio" id="tab1" name="tab-control" checked>
|-
  <input type="radio" id="tab2" name="tab-control">
! style="background-color: #0073e6; color: white; text-align: center;" | '''User Info'''
  <input type="radio" id="tab3" name="tab-control">
|-
| [[File:ProfileImage.jpg|200px|center]] <!-- Replace with your image link -->
|-
! style="text-align: left;" | '''Username:'''
| '''YourUsernameHere'''
|-
! style="text-align: left;" | '''Contributions:'''
| [[Special:Contributions/YourUsernameHere|View contributions]]
|-
! style="text-align: left;" | '''Languages:'''
| English, Spanish, etc.
|-
! style="text-align: left;" | '''Location:'''
| YourLocation
|}
</div>
 
<!-- Introduction section with gradient background, drop shadow, and border color -->
<div style="padding: 10px; background: linear-gradient(135deg, #e0f7fa, #0073e6); border: 2px solid #0073e6; margin-right: 270px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); color: white;">
<h2>Welcome to My User Page!</h2>
<p>Hello! I am <strong>YourUsernameHere</strong>. I contribute to this wiki by adding information on various topics that interest me. My primary focus is <i>your favorite topics</i>.</p>
</div>


<!-- Clear floating elements so they don't affect next sections -->
  <ul>
<div style="clear: both;"></div>
    <li title="Tab 1"><label for="tab1" role="button">About Me</label></li>
    <li title="Tab 2"><label for="tab2" role="button">Projects</label></li>
    <li title="Tab 3"><label for="tab3" role="button">Contact</label></li>
  </ul>


<!-- Personal Interests section with gradient background, drop shadow, and border color -->
  <div class="content">
<div style="padding: 10px; background: linear-gradient(135deg, #fef9e7, #f39c12); border: 2px solid #f39c12; margin-top: 10px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); color: black;">
    <!-- About Me Tab Content -->
<h3>Personal Interests</h3>
    <section>
<ul>
      <h2>About Me</h2>
  <li>Editing and improving articles related to <i>Topic 1</i></li>
      <p>Welcome to my user page! I am <strong>YourUsernameHere</strong>, and I enjoy contributing to this wiki by adding content related to <i>Your Topics</i>.</p>
  <li>Researching and writing about <i>Topic 2</i></li>
    </section>
  <li>Collaborating on projects with other wiki users</li>
</ul>
</div>


<!-- Project Section with gradient background, drop shadow, and border color -->
    <!-- Projects Tab Content -->
<div style="padding: 10px; background: linear-gradient(135deg, #ebf5fb, #3498db); border: 2px solid #3498db; margin-top: 10px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); color: black;">
    <section>
<h3>Current Projects</h3>
      <h2>Current Projects</h2>
<ul>
      <ul>
  <li>Project 1: <i>Brief description of project</i></li>
        <li>Project 1: <i>Brief description of the project</i></li>
  <li>Project 2: <i>Brief description of project</i></li>
        <li>Project 2: <i>Brief description of the project</i></li>
</ul>
      </ul>
</div>
    </section>


<!-- Contact Information with gradient background, drop shadow, and border color -->
    <!-- Contact Tab Content -->
<div style="padding: 10px; background: linear-gradient(135deg, #f2d7d5, #c0392b); border: 2px solid #c0392b; margin-top: 10px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); color: black;">
    <section>
<h3>Contact Me</h3>
      <h2>Contact Me</h2>
<p>If you'd like to collaborate, feel free to leave a message on my <b>[[User talk:YourUsernameHere|talk page]]</b>.</p>
      <p>If you'd like to collaborate, feel free to leave me a message on my <b>[[User talk:YourUsernameHere|talk page]]</b>.</p>
    </section>
  </div>
</div>
</div>


</div> <!-- End of page wrapper -->
</div> <!-- End of page wrapper -->
<!-- CSS for Tabs -->
<style>
  .tabs {
    position: relative;
    margin-top: 20px;
  }
  .tabs input[type="radio"] {
    display: none;
  }
  .tabs ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #0073e6;
  }
  .tabs ul li {
    flex-grow: 1;
  }
  .tabs ul li label {
    display: block;
    padding: 10px;
    text-align: center;
    background-color: #0073e6;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .tabs ul li label:hover {
    background-color: #005bb5;
  }
  .tabs input[type="radio"]:checked + label {
    background-color: #005bb5;
  }
  .tabs .content section {
    display: none;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin-top: -1px;
  }
  #tab1:checked ~ .content section:nth-of-type(1),
  #tab2:checked ~ .content section:nth-of-type(2),
  #tab3:checked ~ .content section:nth-of-type(3) {
    display: block;
  }
</style>

Revision as of 03:58, 10 October 2024


 <input type="radio" id="tab1" name="tab-control" checked>
 <input type="radio" id="tab2" name="tab-control">
 <input type="radio" id="tab3" name="tab-control">
  • <label for="tab1" role="button">About Me</label>
  • <label for="tab2" role="button">Projects</label>
  • <label for="tab3" role="button">Contact</label>
   <section>

About Me

Welcome to my user page! I am YourUsernameHere, and I enjoy contributing to this wiki by adding content related to Your Topics.

   </section>

   <section>

Current Projects

  • Project 1: Brief description of the project
  • Project 2: Brief description of the project
   </section>

   <section>

Contact Me

If you'd like to collaborate, feel free to leave me a message on my talk page.

   </section>

<style> 

 .tabs {
   position: relative;
   margin-top: 20px;
 }
 .tabs input[type="radio"] {
   display: none;
 }
 .tabs ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: #0073e6;
 }
 .tabs ul li {
   flex-grow: 1;
 }
 .tabs ul li label {
   display: block;
   padding: 10px;
   text-align: center;
   background-color: #0073e6;
   color: white;
   cursor: pointer;
   transition: background-color 0.3s;
 }
 .tabs ul li label:hover {
   background-color: #005bb5;
 }
 .tabs input[type="radio"]:checked + label {
   background-color: #005bb5;
 }
 .tabs .content section {
   display: none;
   padding: 10px;
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   margin-top: -1px;
 }
 #tab1:checked ~ .content section:nth-of-type(1),
 #tab2:checked ~ .content section:nth-of-type(2),
 #tab3:checked ~ .content section:nth-of-type(3) {
   display: block;
 }

</style>

Retrieved from "http://wiki.urbandead.com//index.php?title=User:Axe_Hack/Sandbox&oldid=2440258"