Settings Page

Developer
Anthony Koch
Size
16,757 Kb
Views
12,144
  1. Settings Page Previews
  2. Settings Page HTML Codes
  3. Settings Page CSS Codes
  4. Settings Page JS Codes

How do I make an settings page?

A dribbble design made by Jaroslav Getman turned into HTML and CSS. https://dribbble.com/shots/2342992-007-Settings. What is a settings page? How do you make a settings page? This script and codes were developed by Anthony Koch on 06 November 2022, Sunday.

Settings Page Previews
IQ Test

Settings Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Settings Page</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <aside class="Sidebar"> <nav class="Sidebar__nav" role="navigation"> <ul class="Sidebar__nav-list"> <li class="Sidebar__nav-list__item ion-person-stalker"></li> <li class="Sidebar__nav-list__item ion-music-note"></li> <li class="Sidebar__nav-list__item ion-image"></li> <li class="Sidebar__nav-list__item ion-android-film"></li> <li class="Sidebar__nav-list__item ion-social-dribbble-outline"></li> <li class="Sidebar__nav-list__item Sidebar__nav-list__item--active ion-levels"> </li> </ul> </nav> </aside> <section class="Details"> <header class="Details__header"> <h1 class="Details__title">Settings</h1> </header> <nav class="Details__nav" role="navigation"> <ul class="Details__nav-list"> <li class="Details__nav-list__item">Profile</li> <li class="Details__nav-list__item">Password</li> <li class="Details__nav-list__item">Notifications</li> <li class="Details__nav-list__item Details__nav-list__item--active">Sync</li> <li class="Details__nav-list__item">Advanced</li> </ul> </nav> <div class="Details__body"> <ul class="Details__options-list"> <li class="Details__options-list__item"> <div class="Media"> <div class="Media__side Media__side--left"><img class="Media__image" id="google-drive" src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Logo_of_Google_Drive.png" alt=""/> </div> <div class="Media__body Media u-flex-center--v"> <div> <h3>Google Drive</h3> <p>Configure to sync design and code files from Google Drive</p> </div> <div class="Media__side Media__side--right"> <input class="checkbox-input" id="DetailsOptionCheckbox1" checked="checked" type="checkbox"/> <label class="checkbox ion-ios-checkmark-empty" for="DetailsOptionCheckbox1"></label> </div> </div> </div> </li> <li class="Details__options-list__item"> <div class="Media"> <div class="Media__side Media__side--left"><img class="Media__image" id="dropbox-sync" src="" alt=""/> </div> <div class="Media__body Media u-flex-center--v"> <div> <h3>Dropbox Sync</h3> <p>Configure to sync design and code files from Dropbox</p> </div> <div class="Media__side Media__side--right"> <input class="checkbox-input" id="DetailsOptionCheckbox2" type="checkbox"/> <label class="checkbox ion-ios-checkmark-empty" for="DetailsOptionCheckbox2"></label> </div> </div> </div> </li> <li class="Details__options-list__item"> <div class="Media"> <div class="Media__side Media__side--left"><img class="Media__image" id="adobe-creative cloud" src="https://upload.wikimedia.org/wikipedia/en/8/88/Adobe_Creative_Cloud_Logo.png" alt=""/> </div> <div class="Media__body Media u-flex-center--v"> <div> <h3>Adobe Creative Cloud</h3> <p>Configure to sync design and code files from Adobe Creative Cloud</p> </div> <div class="Media__side Media__side--right"> <input class="checkbox-input" id="DetailsOptionCheckbox3" type="checkbox"/> <label class="checkbox ion-ios-checkmark-empty" for="DetailsOptionCheckbox3"></label> </div> </div> </div> </li> <li class="Details__options-list__item"> <div class="Media"> <div class="Media__side Media__side--left"><img class="Media__image" id="box" src="https://upload.wikimedia.org/wikipedia/commons/0/00/Box_cyan.png" alt=""/> </div> <div class="Media__body Media u-flex-center--v"> <div> <h3>Box</h3> <p>Configure to sync design and code files from Box</p> </div> <div class="Media__side Media__side--right"> <input class="checkbox-input" id="DetailsOptionCheckbox4" checked="checked" type="checkbox"/> <label class="checkbox ion-ios-checkmark-empty" for="DetailsOptionCheckbox4"></label> </div> </div> </div> </li> <li class="Details__options-list__item"> <div class="Media"> <div class="Media__side Media__side--left"><img class="Media__image" id="icloud" src="https://upload.wikimedia.org/wikipedia/en/f/f0/ICloud_logo_%28new%29.png" alt=""/> </div> <div class="Media__body Media u-flex-center--v"> <div> <h3>iCloud</h3> <p>Configure to sync design and code files from iCloud</p> </div> <div class="Media__side Media__side--right"> <input class="checkbox-input" id="DetailsOptionCheckbox5" type="checkbox"/> <label class="checkbox ion-ios-checkmark-empty" for="DetailsOptionCheckbox5"></label> </div> </div> </div> </li> </ul> </div> <button class="Button Button--sync" id="sync"><span class="a-spin ion-loop"></span></button> </section>
</div> <script src="js/index.js"></script>
</body>
</html>

Settings Page - Script Codes CSS Codes

body { color: rgba(0, 0, 0, 0.7); background-color: #0B9FED; font-family: Open Sans; line-heihgt: 1.5; margin: 0;
}
ul { padding: 0; margin: 0; list-style-type: none;
}
a { text-decoration: none;
}
a:link, a:visited { color: #B0B0B2;
}
a:hover, a:active { color: #0674D7;
}
p { font-size: 14px; margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 { font-weight: 300; margin: 0; padding: 0;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 80px 20px; max-width: 810px; min-width: 810px; margin: 0 auto;
}
.Sidebar { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #2D3139; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; box-shadow: -5px 0px 60px 0 rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; margin: 60px 0;
}
.Sidebar__nav-list { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.Sidebar__nav-list__item { color: rgba(255, 255, 255, 0.3); cursor: pointer; font-size: 1.75rem; padding: 20px 30px; text-align: center;
}
.Sidebar__nav-list__item:hover { color: white;
}
.Sidebar__nav-list__item--active { color: white;
}
/** * 1. z-indexed over the sidebar so the sidebar's shadow * doesn't show over the main content area */
.Details { background-color: white; border-radius: 4px; box-shadow: -5px 0px 70px 0 rgba(0, 0, 0, 0.4); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; z-index: 1;
}
.Details__header { padding: 30px;
}
.Details__title { color: rgba(0, 0, 0, 0.8); font-size: 28px; font-weight: 300; letter-spacing: 1px; text-align: center; text-transform: uppercase;
}
.Details__nav { padding: 0 60px;
}
.Details__nav-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.Details__nav-list__item { border-bottom: 2px solid transparent; color: #B0B0B2; cursor: pointer; padding-bottom: 30px; position: relative; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.Details__nav-list__item:hover { border-color: #0674D7;
}
.Details__nav-list__item--active { border-color: #0674D7;
}
.Details__body { background: #F7F9FA; padding: 50px 60px; border-radius: 4px;
}
.Media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 25px;
}
.Media__side { vertical-align: middle;
}
.Media__side--left { margin-right: 30px;
}
.Media__side--right { margin-left: 30px;
}
.Media__image { width: 100%; max-width: 55px;
}
.Media__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.checkbox { background-color: #E6E6E6; border-radius: 50%; display: inline-block; position: relative; text-align: center; vertical-align: middle; height: 20px; width: 20px;
}
.checkbox:before { background-color: #00BAFF; border-radius: 50%; color: white; font-size: 32px; line-height: 28px; opacity: 0; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.checkbox-input { display: none;
}
.checkbox-input:checked + .checkbox:before { opacity: 1; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px;
}
.Button { border-radius: 3px; border: 0; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 10px 20px 0 rgba(0, 0, 0, 0.1); color: white; cursor: pointer; display: inline-block; font-weight: 500; font-size: 13px; letter-spacing: 1px; outline: 0; padding: 16px 36px; position: relative; text-align: center; text-transform: uppercase; -webkit-transition: box-shadow 0.15s, background-color 0.15s; transition: box-shadow 0.15s, background-color 0.15s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; will-change: box-shadow, background-color, color;
}
.Button--sync { background-color: #00BAFF; border-radius: 50%; color: white; font-size: 32px; line-height: 70px; text-align: center; padding: 0; height: 70px; width: 70px;
}
.Button--sync > span { line-height: 70px;
}
#sync { bottom: 0; position: absolute; right: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%);
}
.u-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.u-flex-center--v { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}

Settings Page - Script Codes JS Codes

'use strict';
/* * https://dribbble.com/shots/2342992-007-Settings */
var dropboxURI = 'data:image/png;base64,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';
document.querySelector('#dropbox-sync').src = dropboxURI;
[{	src: 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Logo_of_Google_Drive.png',	title: 'Google Drive',	body: 'Configure to sync design and code files from Google Drive'
}, {	icon: 'ion-social-dropbox',	title: 'Dropbox Sync',	body: 'Configure to sync design and code files from Dropbox'
}, {	src: 'https://upload.wikimedia.org/wikipedia/en/8/88/Adobe_Creative_Cloud_Logo.png',	title: 'Adobe Creative Cloud',	body: 'Configure to sync design and code files from Adobe Creative Cloud'
}, {	src: 'https://upload.wikimedia.org/wikipedia/commons/0/00/Box_cyan.png',	title: 'Box',	body: 'Configure to sync design and code files from Box'
}, {	src: 'https://upload.wikimedia.org/wikipedia/en/f/f0/ICloud_logo_%28new%29.png',	title: 'iCloud',	body: 'Configure to sync design and code files from iCloud'
}];
Settings Page - Script Codes
Settings Page - Script Codes
Home Page Home
Developer Anthony Koch
Username anthonykoch
Uploaded November 06, 2022
Rating 4
Size 16,757 Kb
Views 12,144
Do you need developer help for Settings Page?

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!

Anthony Koch (anthonykoch) Script Codes
Name
Testing nth-child
Wordpress Admin Redesign
Calculator
Testing absolute in padding
Testing css specificity
Medium style blur image loading
Scroll scaling gallery
Smart Home UI
Testing upcoming height values
Social Connect
Create amazing love letters 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!