Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
	<div class="top-nav">
		<ul>
			<!-- Logo -->
			<div class="logo">
				<img src="https://app.greenrope.com/users/myteam42198/Media424.png">
			</div>
			<!-- Nav List -->
			<li><a>Home</a></li>
			<li>
				<a>Contacts</a>
			</li>
			<li><a>Communicate</a></li>
			<li><a>Automation</a></li>
			<li><a>Calendar</a></li>
			<li><a>Apps</a></li>
			<li><a>Media Library</a></li>

			<div class="right-nav">
				<ul>
					<li><a>Guide Me</a></li>
				</ul>
			</div>
		</ul>
	</div>
</header>
<!-- End Main Navigation -->

<!-- Sub Nav -->
<div class="sub-nav">
	<ul>
		<li>Group</li>
		<li class="group-selector">Test Group</li>
	</ul>
</div>
<!-- End Sub Nav -->

<div class="container">
	<h1 style="color:#84D600; font-weight: 400;">Group Settings</h1>

	<!-- Box Style 1 -->

	<div class="flex-container">
		<!-- Left Col: Group Info -->
		<div class="left-col">
			<div class="group-info-box box-style1">

				<!-- Group Info Title -->
				<div class="group-info-title">
					<p class="group-info-active">Group Info:</p>
				</div>

				<!-- Group Info Data -->
				<div class="group-info-data">
					<p>Group Member: <span style="font-weight:400">12</span></p>
					<div>
						<p>Test</p>
					</div>
					<p>Calendar Years:</p>
					<div>
						<p>Test</p>
					</div>
					<p>Shared Access: <span style="font-weight:400">5 contacts</span></p>
					<div>
						<p>Test</p>
					</div>
					<p>Media Library: <span style="font-weight:400">390 files</span></p>
					<div>
						<p>Test</p>
					</div>
					<p>Wiki Articles: <span style="font-weight:400">15 articles</span></p>
					<div>
						<p>Test</p>
					</div>
					<p>Group User Fields: <span style="font-weight:400">5</span></p>
					<div>
						<p>Test</p>
					</div>
					<p>Drip Campaigns: <span style="font-weight:400">12</span></p>
					<div>
						<p>Test</p>
					</div>
				</div>
			</div>


		</div>

		<!-- Right Col: Main Box -->
		<div class="right-col">
			<div class="main-box box-style1">
				<!-- Navigation-->
				<div class="group-settings-nav">
					<ul>
						<li onclick="toggleVisibility('description-panel')"><a class="hover-link active-link" href="#">Description</a></li>
						<li onclick="toggleVisibility('email-options-panel')"><a class="hover-link" href="#">Email Options</a></li>
						<li onclick="toggleVisibility('event-options-panel')"><a class="hover-link" href="#">Event Options</a></li>
						<li onclick="toggleVisibility('visibility-panel')"><a class="hover-link" href="#">Contact Visibility</a></li>
						<li onclick="toggleVisibility('history-panel')"><a class="hover-link" href="#">History</a></li>
					</ul>
				</div>

				<!-- Description Content -->
				<div class="group-settings-content" id="description-panel">
					<div>
						<h4>Label</h4>
						<div class="gs-row-wrapper">
							<label>Name:</label>
							<input type="text">
						</div>

						<div class="gs-row-wrapper">
							<label>Public Description:</label>
							<input type="text">
						</div>
					</div>

					<div>
						<h4>Navigation</h4>
						<div class="gs-row-wrapper">
							<label>Folder:</label>
							<select></select>
						</div>
					</div>

					<div>
						<h4>Basic Settings</h4>

						<div class="gs-row-wrapper">
							<label>Group Type:</label>
							<input type="text">
						</div>

						<div class="gs-row-wrapper">
							<label>Your Role:</label>
							<input type="text">
						</div>
						<div class="gs-row-wrapper">
							<label>Parent Organization:</label>
							<input type="text">
						</div>
					</div>

					<div>
						<h4>About Group Members</h4>
						<div class="gs-row-wrapper">
							<label>Demographic:</label>
							<input type="text">
						</div>

						<div class="gs-row-wrapper">
							<label>Members Are Called:</label>
							<input type="text">
						</div>
						<div class="gs-row-wrapper">
							<label>Membership Visibility:</label>
							<input type="text">
						</div>
						<div class="gs-row-wrapper">
							<label>Member Logins</label>
							<input type="text">
						</div>
					</div>

					<div>
						<h4>More Settings</h4>
						<div class="gs-row-wrapper">
							<label>Headquarters:</label>
							<input type="text">
						</div>
						<div class="gs-row-wrapper">
							<label>Group Language:</label>
							<input type="text">
						</div>
						<div class="gs-row-wrapper">
							<label>Group PayPal ID:</label>
							<input type="text">
						</div>
						<div class="gs-row-wrapper">
							<label>Logo:</label>
							<input type="text">
						</div>
						<div class="gs-row-wrapper">
							<label>Notes:</label>
							<input type="text">
						</div>
					</div>
				</div>

				<!-- Email Options Content -->
				<div class="group-settings-content email-options" id="email-options-panel">
					<div>
						<h4>Use these options to optimize your email communication</h4>
						<div class="gs-row-wrapper">
							<label>Email Test List:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Emails Sent From Name:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Emails Sent From Email:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Physical Address:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Google Analytics:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Addressee Placeholder:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>PDF Attachement:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Survey Page:</label>
						</div>

					</div>

					<div>
						<h4>Forward to a Friend</h4>
						<div class="gs-row-wrapper">
							<label>Forward to a Friend Design:</label>
						</div>

						<div class="gs-row-wrapper">
							<label>Forward Message:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Forward Thank You:</label>
						</div>
					</div>

					<div>
						<h4>Loading Default Emails:</h4>
						<div class="gs-row-wrapper">
							<label>Default Email on Send Page:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Default Personal Email:</label>
						</div>
					</div>

					<div>
						<h4>Automatic Emails Sent to Group Members</h4>
						<div class="gs-row-wrapper">
							<label>1 Week Prior Birthday Email:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Birthday Email:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Automatic Blog Digest:</label>
						</div>
					</div>

					<div>
						<h4>Unsubscribe / Profile Update Managements</h4>
						<div class="gs-row-wrapper">
							<label>Page Layout:</label>
						</div>

					</div>
				</div>

				<!-- Event Options Content -->
				<div class="group-settings-content event-options" id="event-options-panel">
					<div>
						<h4>Event Reminders</h4>
						<div class="gs-row-wrapper">
							<label>Event Reminder Emails:</label>
						</div>

						<div class="gs-row-wrapper">
							<label>Reminder Email:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Include Webcal Link:</label>
						</div>
					</div>

					<div>
						<h4>Attendance Actions</h4>
						<div class="gs-row-wrapper">
							<label>Attendance Confirmations:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>RSVP Page Format:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Email Attendance Summary To:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>SMS Attendance Summary:</label>
						</div>
					</div>

					<div>
						<h4>Time</h4>
						<div class="gs-row-wrapper">
							<label>Events Time Zone:</label>
						</div>
					</div>

					<div>
						<h4>Attendee Interaction</h4>
						<div class="gs-row-wrapper">
							<label>Forum:</label>
						</div>
						<div class="gs-row-wrapper">
							<label>Automatically Match Attendees:</label>
						</div>
					</div>

					<div>
						<h4>Calendar Design</h4>
						<div class="gs-row-wrapper">
							<label>Additional Calendar CSS:</label>
						</div>
					</div>
				</div>

				<!-- Contact Visibility -->
				<div class="group-settings-content visibility" id="visibility-panel">
					<div>
						<h4>Contact Visibility</h4>
						<p>Set the fields you would like contacts to be able to see on the contacts list page.</p>
						<table>
							<thead>
								<tr>
									<th>Field Name</th>
									<th style="text-align:center;">Contact Record</th>
									<th style="text-align:center;">Make Visible to all Groups</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Firstname</td>
									<td style="text-align:center;"><input type="checkbox"></td>
									<td style="text-align:center;"><input type="checkbox"></td>
								</tr>

								<tr>
									<td>Lastname</td>
									<td style="text-align:center;"><input type="checkbox"></td>
									<td style="text-align:center;"><input type="checkbox"></td>
								</tr>

								<tr>
									<td>Title</td>
									<td style="text-align:center;"><input type="checkbox"></td>
									<td style="text-align:center;"><input type="checkbox"></td>
								</tr>

								<tr>
									<td>Company</td>
									<td style="text-align:center;"><input type="checkbox"></td>
									<td style="text-align:center;"><input type="checkbox"></td>
								</tr>

								<tr>
									<td>Address1</td>
									<td style="text-align:center;"><input type="checkbox"></td>
									<td style="text-align:center;"><input type="checkbox"></td>
								</tr>

								<tr>
									<td>Address2</td>
									<td style="text-align:center;"><input type="checkbox"></td>
									<td style="text-align:center;"><input type="checkbox"></td>
								</tr>

								<tr>
									<td>City</td>
									<td style="text-align:center;"><input type="checkbox"></td>
									<td style="text-align:center;"><input type="checkbox"></td>
								</tr>

							</tbody>

						</table>

					</div>
				</div>

				<!-- History Content -->
				<div class="group-settings-content" id="history-panel">
					<div>
						throw those graphs here...
					</div>
				</div>


			</div>



		</div>


	</div>





</div>
              
            
!

CSS

              
                

	body {
		margin: 0;
		padding: 0;
		background: #f9f9f9;
		font-family: 'Open Sans', sans-serif;
	}

		.container {
		width: 100%;
		margin: 0px;
		padding: 2% 5%;
	}

	/* Test Nav Style */

	.logo {
		float: left;
		margin-left: 10px;
	}


	.top-nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
		background: #48454A;
		overflow: hidden;
	}



	.top-nav li a {
		float: left;
		font-family: 'Open Sans', sans-serif;
		padding: 19px 20px;
		color: white;
		font-weight: 400;
		font-size: 0.9em;
		display: inline-block;
		cursor: pointer;
	}

	.right-nav {
		float: right;
	}

	.sub-nav {
		background: white;
		padding: 20px 15px;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
		width: 100%;
	}

	.sub-nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
		overflow: hidden;
	}

	.sub-nav li {
		float: left;
		padding: 0px 20px;
	}

	.sub-nav li:first-child {
		padding-left: 0px;
	}

	.group-selector {
		border: 1px solid #48454A;
	}

	/* End Test Nav */


	/* Main Group Settings Style */

	.main-box {
	  background: #fff;
	  border-radius: 2px;
	  display: inline-block;
	  height: auto;
	  width: 850px;
	}


	/* Group Settings Nav Style */

	.group-settings-nav {
		width: 100%;
	}

	.group-settings-nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.group-settings-nav li {
		display: inline;
		float: left;
		padding: 10px 25px;
	}

	.group-settings-nav li::after {
		content: '';
		position: absolute;
		border-left: 1px solid black;
		right: 25px;
		z-index: -1;
	}

	.group-settings-nav li:last-child::after {
		display: none;
	}

	.group-settings-nav a {
		font-size: 18px;
		color: #585858;
		text-decoration: none;
		font-weight: 600;
		cursor: pointer;
	}

	.hover-link {
		display: inline-block;
		color: #4788CD;
		text-decoration: none;
	}

	.hover-link::after {
		content: '';
		display: block;
		width: 0;
		height: 3px;
		background: #4788CD;
		transition: width .5s;
	}

	.hover-link:hover::after {
		 width: 100%;
    	//transition: width .5s;
	}

	.active-link {
		display: inline-block;
		color: #4788CD;
		text-decoration: none;
	}

	.active-link::after {
		content: '';
		display: block;
		width: 100%;
		height: 3px;
		background: #4788CD;
	}

	/* Panel Styles */

	#description-panel {
		display: block;
	}

	.group-settings-content {
		margin: 10px 25px;
		display: none;
	}

	.group-settings-content h4 {
		color: #585858;
	}

	.group-settings-content > div {
		margin-top: 25px;
	}

	.group-settings-content > div:first-child {
		margin-top: 75px;
	}

	.group-settings-content > div::after {
		content: '';
		display: inline-block;
		width: 100%;
		height: 1px;
		background: rgba(0,0,0,0.1);
	}

	.group-settings-content > div:last-child::after {
		display: none;
	}


	label {
		display: inline-block;
		text-align: right;
		width: 150px;
		font-weight: 600;
		color: #585858;
		margin-top: 20px;
		font-size: 14px;
	}

	.email-options label {
		width: 192px;
	}

	.event-options label {
		width: 220px;
	}

	/* Field Style */

	.gs-row-wrapper {
		display: block;
	}

	input[type="text"] {
		display: inline-block;
	}


	/* Table Style */

	.visibility th {
		padding: 10px 25px 10px 0px;
		color: #585858;
		font-size: 14px;
	}

	.visibility td {
		font-size: 14px;
		padding: 3px 0px;
	}

	.visibility tr:hover {
		background: #f6f6f6;
	}



	/* Box Shadow */

	.box-style1 {
		box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.15);
	}

	/* Group Info Stye */

	.group-info-box {
		background: #fff;
		border-radius: 2px;
		display: inline-block;
		width: 215px;
		height: auto;
	}

	.group-info-box p {
		margin: 10px;
		font-size: 14px;
		color: #585858;
		font-weight: 600;
	}

	.group-info-title p {
		font-size: 18px;
		margin-top: 10px;
	}


	.group-info-data > div {
		margin-left: 5%;
	}

	.group-info-data > div > p {
		font-weight: 400;

	}


	.group-info-active {
		display: block;
		color: #57D154;
		text-decoration: none;
	}

	.group-info-active::after {
		content: '';
		display: block;
		width: 50%;
		height: 3px;
		background: #57D154;
	}




	/* Flex Container */

	.flex-container {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		flex-wrap: wrap !important;
		width: 100%;
	}


	.left-col {
		-webkit-flex: 1 0 0;
		flex: 1 0 0;
	}

	.right-col {
		-webkit-flex: 3 0 0;
		flex: 3.5 0 0;
	}

              
            
!

JS

              
                function toggleVisibility(selectedTab) {

 var content = document.getElementsByClassName('group-settings-content');
 for(var i=0; i<content.length; i++) {
	  if(content[i].id == selectedTab) {
			content[i].style.display = 'block';
	  } else {
			content[i].style.display = 'none';
	  }
 }
}
              
            
!
999px

Console