Skip to content

Instantly share code, notes, and snippets.

@agdelax agdelax/.gitignore

Last active Aug 29, 2015
Embed
What would you like to do?
Practicing CSS layouts for mobile
.DS_Store
<!DOCTYPE HTML>
<html>
<head>
<title>Settings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="menu-item">
<img src="icon-menu.png">
</div>
<h2>Settings</h2>
<div class="menu-item side-item" id="image-icon">
<img src="icon-Logout.png">
</div>
<div class="menu-item side-item" id="export-icon">
<img src="icon-image.png">
</div>
</div>
<div id="user-picture">
<img src="Avatar.png">
</div>
<div class="form">
<div class="subsection">
<h3>General</h3>
</div>
<div class="form-item">
<h4>Name</h4>
<p>Marie Simpson</p>
</div>
<div class="form-item">
<h4>Email</h4>
<p>marie@invisionapp.com</p>
</div>
<div class="form-item">
<h4>Password</h4>
<p>&bull; &bull; &bull; &bull; &bull; &bull; &bull; &bull; &bull;</p>
</div>
<div class="form-item">
<h4>Birthday</h4>
<p>January 12, 1976</p>
</div>
<div class="subsection">
<h3>Notifications</h3>
</div>
<div class="form-item">
<p class="notification-text">Email Notifications</p>
<img src="Switch.png" class="side-item">
<div style="clear:both"></div>
</div>
<div class="form-item">
<p class="notification-text">Phone Notifications</p>
<img src="Switch1.png" class="side-item">
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
/* reset or base AKA root tag selectors */
* { box-sizing: border-box; }
body {
margin: 0;
}
.form { overflow: hidden; }
h2, h3, h4 {
font-family: sans-serif;
display: inline-block;
font-weight: 300;
margin: 0;
}
h2 {
font-size: 20px;
}
h3 {
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
line-height: 20px;
padding: 0 0 0 10px;
white-space: nowrap;
}
h4 {
color: gray;
margin: 0 0 10px;
}
p {
font-family: sans-serif;
margin: 0;
}
/* app styles */
.menu-item {
display: inline-block;
}
.menu-item img {
height: 20px;
width: 20px;
}
.notification-text {
display: inline-block;
/*float: left;*/
/*margin-top: 20px;*/
vertical-align: middle;
width: calc(100% - 60px);
}
.side-item {
/* margin: 13px;*/
/*float: right;*/
display: inline-block;
vertical-align: middle;
width: 50px;
}
#user-picture img {
display: block;
margin: auto;
margin-bottom: 20px;
height: 120px;
}
.subsection {
background-color: #dfdfdf;
padding: 5px;
}
.form-item {
border-bottom: 1px solid #dfdfdf;
padding: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.