Membership Levels Redesign

Developer
Noel Peña
Size
3,711 Kb
Views
14,168
  1. Membership Levels Redesign Previews
  2. Membership Levels Redesign HTML Codes
  3. Membership Levels Redesign CSS Codes

How do I make an membership levels redesign?

What is a membership levels redesign? How do you make a membership levels redesign? This script and codes were developed by Noel Peña on 05 November 2022, Saturday.

Membership Levels Redesign Previews
IQ Test

Membership Levels Redesign - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Membership Levels Redesign</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3>Membership Levels</h3>
<div class="membership-levels"> <div class="mem-lvl lvl-1"> <p class="name">Classic<br>Membership</p> <div class="price-wrap"> <p class="price">$155<span>(Renews at $130 /yr)</span></p> </div> </div> <div class="mem-lvl lvl-2"> <p class="name">Senior<br>Membership</p> <div class="price-wrap"> <p class="price">$125<span>(Renews at $100 /yr)</span><span>(ages 65+)</span></p> </div> </div> <div class="mem-lvl lvl-3"> <p class="name">Young Professional<br>Membership</p> <div class="price-wrap"> <p class="price">$75<span style="display:inline;"> /yr</span><span>(ages 18-30)</span></p> </div> </div>
</div>
<div class="benefits-wrap"> <div class="benefits"> <p><strong>Membership Benefits</strong></p> <ul> <li>Membership in one (1) EWGA Chapter of choice</li> <li>Complimentary access to all domestic LPGA and Symetra Tournaments</li> <li>Access to EWGA Golf Handicap System</li> <li>One-year (12) issues GOLF Magazine. Subscription valued at $15.<br>(Subscription is not deductible from your membership dues)</li> <li>EWGA 25th Anniversary Phone Card Case</li> <li>Educational Webinars</li> <li>EWGA Golf Course Network (discounts on green fees)</li> <li>ClubCorp Member for a Day Program</li> <li>Ability to utilize the EWGA Member Graphic</li> </ul> </div> <div class="cta-buttons"> <p><a href="#" class="btn btn-lg btn-success">Join Today</a></p> <p>OR</p> <p><a href="#" class="btn btn-sm btn-default">Download Paper Application</a></p> </div>
</div>
</body>
</html>

Membership Levels Redesign - Script Codes CSS Codes

body { font-family: Arial;
}
.name { font-size: 130%;
}
h3, .price { font-size: 180%; font-weight: bold;
}
h3 span, .price span { display: block; font-size: 50%; color: #a2a2a2;
}
.membership-levels { display: flex; flex-wrap: wrap; justify-content: center;
}
.mem-lvl { margin: .5em; padding: .5em; text-align: center; min-height: 190px; flex-grow: 1; background-color: #EDEFF0; border-radius: 5px; position: relative;
}
.lvl-1 { border: 3px solid #ccc;
}
.lvl-2 { border: 3px solid #ccc;
}
.lvl-3 { border: 3px solid #ccc;
}
.price-wrap { text-align: center; position: absolute; top: 80px; left: 0px; right: 0px;
}
.benefits-wrap { display: flex; flex-wrap: wrap; justify-content: space-between;
}
.benefits-wrap .benefits { line-height: 20px; flex-grow: 1;
}
.benefits-wrap .benefits p { padding-left: 1em;
}
.benefits-wrap .benefits ul { margin: 0px; padding: 1em; padding-top: 0;
}
.benefits-wrap .benefits ul li { list-style-type: none; border-top: 1px solid #ccc; padding: 8px 5px; font-size: 14px;
}
.benefits-wrap .benefits ul li:last-child { border-bottom: 1px solid #ccc;
}
.benefits-wrap .cta-buttons { padding: 0 1em; flex-grow: 1; position: relative;
}
.benefits-wrap .cta-buttons p { text-align: center;
}
@media (max-width: 460px) { .mem-lvl { width: 100%; } .benefits { width: 100%; padding: 0px; }
}
.btn { text-decoration: none; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;
}
.btn-group-sm > .btn, .btn-sm { padding: 5px 11px; font-size: 12px; line-height: 1; border-radius: 5px;
}
.btn-group-lg > .btn, .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px;
}
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c;
}
.btn-default { color: #333; background-color: #fff; border-color: #ccc;
}
.btn-success:hover { color: #fff; background-color: #449d44; border-color: #398439;
}
.btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad;
}
Membership Levels Redesign - Script Codes
Membership Levels Redesign - Script Codes
Home Page Home
Developer Noel Peña
Username ewganoel
Uploaded November 05, 2022
Rating 3
Size 3,711 Kb
Views 14,168
Do you need developer help for Membership Levels Redesign?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Noel Peña (ewganoel) Script Codes
Name
Grayscale Filter - Hover to normal
Whitelisting Instructions
Countdown with Rings
Testing Responsive table
Moare btns2.0
FAQs with Toggle - CSS Only
EWGA PerksTable
NWGA
Member Discounts Legit and it
T3sting
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!