HTML

If you'd like to use this webpage, feel free. Copy and paste this text field into your text editor and alter as needed. Credit is always appreciated.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The web site of vertpush</title>
    
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <style>
    html {
      scroll-behavior: smooth;
    }
    
    body {
    background-image: url(/bg/75366c.gif);
    background-repeat: repeat;
    background-size: 300px;
    background-attachment: fixed;
    margin: 0;
    color: white;
    }
    
    h1 {
      color: #ff0066;
    }
    
    h3 {
      color: #ff0066;
      font-family: Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
    }
    
    p {
      color: white;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    a {
      color: #ff0066;
      text-transform: uppercase;
      text-decoration: none;
      font-weight: 900;
      font-family: Arial, sans-serif;
    }
    
    a:hover {
      color: white;
    }
    
    ul {
    list-style: none;
    padding-left: 0;
    }
    
    li.desc::before {
    content: "★";
    display: inline-block;
    /* vertical-align: middle; */
    padding-right: 5px;
    }

/* width */
    ::-webkit-scrollbar {
    width: 10px;
    }
    /* Track */
    ::-webkit-scrollbar-track {
    background: black; 
    }
    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: #ff0066;
    }

.cardcontainer {
    display: flex;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    
    .profilepic {
      width: 200px;
      height: 200px;
      border-radius: 100%;
      overflow: hidden;
      background-image: url(https://vertpush.neocities.org/Art/fromcomputer/fursona_D_ico.png);
      background-size:cover;
      background-position: center;
      margin-bottom: 30px;
    }
      
    .profiletitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .profiletext {
      display:flex;
      overflow-y:auto;
    }
    
    .card {
    max-width: 300px;
    max-height: 420px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.82);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
    
    .innercontainer {
    width: 90%;
    }
    
    .linkcontainer {
      width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-around;
    }
    
    button {
    background-color: #ff0066;
    color: white;
    border-radius: 5px;
    width: 100%;
    height: 35px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
    border: none;
    }
    
    button:hover {
    transform:scale(1.2);
    transition: .2s;
    }
    
    .socials {
    width: 28px;
    margin-right: 12px;
    }
    
    .wrappercontainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }
    
    .wrapper {
    padding: 6rem 0 4rem 0;
    position: relative;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.82);
    }
    
    .mid {
    background-color: rgba(0, 0, 0, 1);
    }
    
    .wrapper > .inner {
    margin: 0 auto;
    width: 70%;
    padding: 3rem;
    display: flex;
    justify-content: space-between;
    }

.exampleimg {
      max-height: 300px;
    }

.w3-display-container {
    display: inline-flex;
    width: 400px;
    justify-content: center;
    align-items: center;
  }
  
  .w3-button {
    margin: 15px;
  }
  
  .textdiv {
    width:400px;
  }
  
  .buttondiv {
    width: 270px;
  }

@media screen and (max-width: 900px) {
  
  .wrapper > .inner {
    margin: 0 auto;
    width: 70%;
    padding: 3rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  
  .exampleimg {
    max-height: 300px;
    max-width: 300px;
  }
  
  .textdiv {
  width:100%;
  }

.wrappercontainer {
display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  
  .w3-display-container {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

}
    </style>
  </head>
  <body>
  <div class="cardcontainer">
    <div class="profilepic">
    </div>
    <div class="card">
    <div class="innercontainer">
    <div class="profiletitle">
    <h1>Profile</h1>
    <h3>pronouns/age/etc</h3>
    </div>
    <div class="profiletext">
    <p>Some text description about the profile, maybe who you are, what you do and where to follow.</p>
    <p>If you would like to use this page layout, feel free. Credit is always appreciated.</p>
    </div>
    
    
    </div>
    <div class="linkcontainer">
    <a href="#one">#link1</a>
    <a href="#two">#link2</a>
    <a href="#three">#link3</a>
    <a href="#four">#link4</a>
    </div>
    <div class="innercontainer" style="margin-bottom: 10px;">
    <button><img src="/img/socials/icons8-twitter-48.png" class="socials"><h2>Button 1</h2></button>
    <button><img src="/img/socials/icons8-deviantart-48.png" class="socials"><h2>Button 2</h2></button>
    <button><img src="/img/socials/icons8-instagram-48.png" class="socials"><h2>Button 3</h2></button>
    <button><img src="/img/socials/icons8-twitch-50.png" class="socials"><h2>Button 4</h2></button>
    </div>
    </div>
  </div>
  
  <section id="one" class="wrapper">
		<div class="inner">
		<div class="wrappercontainer">
		<div class="textdiv">
    <h1>Item 1</h1>
    <p>Display item or information you might want to share.</p>
    <ul>
    <li class="desc">Coffee</li>
    <li class="desc">Tea</li>
    <li class="desc">Coca Cola</li>
    </ul>
    </div>
    <div class="buttondiv">
    <button><h2>Submit</h2></button>
    </div>
    </div>
    <div class="wrappercontainer">
  <div class="w3-content w3-display-container">
  <button class="w3-button" onclick="plusDivs(-1, 0)">❮</button>
  <img class="mySlides1" src="/Art/Obbylovicon.png" style="max-width:100%">
  <img class="mySlides1" src="/Art/Headshot_kidov2sm.png" style="max-width:100%">
  <img class="mySlides1" src="/Art/fromcomputer/Chao_sticker.png" style="max-width:100%">
  <img class="mySlides1" src="/Art/Headshot_kortseamav2sm.png" style="max-width:100%">
  <button class="w3-button" onclick="plusDivs(1, 0)">❯</button>
</div>
</div>
    </div>

</section>
	
		<section id="two" class="wrapper mid">
		<div class="inner">
		<div class="wrappercontainer">
		<div class="textdiv">
    <h1>Item 2</h1>
    <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
    <ul>
    <li class="desc">Coffee</li>
    <li class="desc">Tea</li>
    <li class="desc">Coca Cola</li>
    </ul>
    </div>
    <div class="buttondiv">
    <button><h2>Submit</h2></button>
    </div>
    </div>
    <div class="wrappercontainer">
    <img class="exampleimg" src="/Art/fromcomputer/crysml.png">
    </div>
		</div>
	</section>
	
	  <section id="three" class="wrapper">
		<div class="inner">
		<div class="wrappercontainer">
		<div class="textdiv">
    <h1>Item 3</h1>
    <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <ul>
    <li class="desc">Coffee</li>
    <li class="desc">Tea</li>
    <li class="desc">Coca Cola</li>
    </ul>
    </div>
    <div class="buttondiv">
    <button><h2>Submit</h2></button>
    </div>
    </div>
    <div class="wrappercontainer">
    <img class="exampleimg" src="/img/header1.png">
    </div>
		</div>
	</section>
	
		<section id="four" class="wrapper mid">
		<div class="inner">
		<div class="wrappercontainer">
		<div class="textdiv">
    <h1>Item 4</h1>
    <p>Display item or information you might want to share.</p>
    <ul>
    <li class="desc">Coffee</li>
    <li class="desc">Tea</li>
    <li class="desc">Coca Cola</li>
    </ul>
    </div>
    <div class="buttondiv">
    <button><h2>Submit</h2></button>
    </div>
    </div>
    <div class="wrappercontainer">
    <div class="w3-content w3-display-container">
    <button class="w3-button" onclick="plusDivs(-1, 1)">❮</button>
    <img class="mySlides2" src="/Art/Obbylovicon.png" style="max-width:100%">
    <img class="mySlides2" src="/Art/Headshot_kidov2sm.png" style="max-width:100%">
    <img class="mySlides2" src="/Art/fromcomputer/Chao_sticker.png" style="max-width:100%">
    <button class="w3-button" onclick="plusDivs(1, 1)">❯</button>
</div>
    </div>
		</div>
	</section>
	
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showDivs(1, 0);
showDivs(1, 1);

function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}