New Featured Pages — CSS Help!

  • Unknown's avatar
    lastfarthing · Member ·

    Ok @tanishqkumar.

    CSS 

    /* Hiding and Displaying Code */
#hidden-section-1 {
	display: none;
	width: 100%;
	text-align: center;
  height: 512px;}

#hidden-section-2 {
	display: none;
	width: 100%;
	text-align: center;
  height: 512px;}

#hidden-section-1 h4 {
	padding-top: 64px;
  padding-bottom: 32px;}

#hidden-section-2 h4 {
	padding-top: 64px;
  padding-bottom: 32px;}

#hidden-section-1:target {
	display: inline-block; }
#hidden-section-2:target {
	display: inline-block; }

/* Button Code */
.flex-holder {
display: flex;
margin-bottom: 64px;
justify-content: space-around; }

.button {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
border: 0;
font-weight: bold;
letter-spacing: .0625em;
text-transform: uppercase;
background: #615f8b;
color: #fff; }

.button:hover,
.button:focus,
.button:active {
background: #b7b6cd;
color: #fff; }

    HTML 

    I live in:

<div class="flex-holder">
<div class="button"><a href="#hidden-section-1">Option One</a></div>
<div class="button"><a href="#hidden-section-2">Option Two</a></div>
</div>

<div id="hidden-section-1">
<h4>Options Page One</h4>
<br><br>
<div class="button"><a href="">Option One</a></div>
<div class="button"><a href="">Option Two</a></div>
<div class="button"><a href="">Option Three</a></div>
<div class="button"><a href="">Option Four</a></div>
<br>
<div class="button"><a href="">Option Five</a></div>
<div class="button"><a href="">Option Six</a></div>
<div class="button"><a href="">Option Seven</a></div>
<div class="button"><a href="">Option Eight</a></div>
</div>

<div id="hidden-section-2">
<h4>Options Page Two</h4>
<br><br>
<div class="button"><a href="">Option One</a></div>
<div class="button"><a href="">Option Two</a></div>
<div class="button"><a href="">Option Three</a></div>
<div class="button"><a href="">Option Four</a></div>
<br>
<div class="button"><a href="">Option Five</a></div>
<div class="button"><a href="">Option Six</a></div>
<div class="button"><a href="">Option Seven</a></div>
<div class="button"><a href="">Option Eight</a></div>
</div>
  • Unknown's avatar
    lastfarthing · Member ·

    @tanishqkumar
    That’s the base code. There are two divs with 8 buttons (2 rows of 4) that are hidden when you hide the page. Clicking on one of the original 2 buttons displays one of those divs.

    Let me know if you like this basic setup and then we can talk about anything special that might have to be done to get the rest of the styling you want in there.

1 2
  • The topic ‘New Featured Pages — CSS Help!’ is closed to new replies.