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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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>
		<a href="">
			<img
				src="http://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
				alt="homepage logo"
				class="header__logo"
			/>
		</a>
		<form class="search-outline" role="search">
			<i class="fa fa-search" style="color: grey" aria-hidden="true"></i>
			<input
				class="search"
				type="text"
				autocapitalize="none"
				placeholder="Search"
				size="25"
				aria-label="search text"
			/>
		</form>
		<button aria-label="login">Login</button>
		<a class="signup" href="">Sign Up</a>
	</header>
	<main>
		<section class="bio">
			<div class="bio__img-block">
				<a href=""
					><img
						class="bio__img"
						src="https://placekitten.com/150/150"
						alt="profile picture"
				/></a>
			</div>
			<div class="bio__header">
				<h1 class="bio__account">kimkardashian</h1>
				<span class="bio__verified"
					><i class="fa fa-check" aria-hidden="true"></i
				></span>
				<button class="bio__follow">Follow</button>
			</div>
			<div class="bio__stats">
				<span class="bio__posts stats"><strong>5,097</strong> posts</span>
				<span class="bio_followers stats"
					><strong>165m</strong> followers</span
				>
				<span class="bio__following stats"
					><strong>37</strong> following</span
				>
			</div>
			<div class="bio_blurb">
				<h2 class="bio__name">Kim Kardashian West</h2>
				<p class="bio__description">
					The <a href="">@SKIMS</a> Smooth Essentials collection is available
					now & Shop KKW x KRIS by <a href="">@kkwfragrance</a> on Wednesday,
					April 15th at 12PM PDT skims.com
				</p>
			</div>
		</section>
		<nav>
			<ul class="story">
				<li>
					<a href="">
						<img
							src="https://www.fillmurray.com/77/77"
							alt="story with bill murray"
						/>
						<h2>KKW FRAGRANCE</h2>
					</a>
				</li>
				<li>
					<a href="">
						<img
							src="https://baconmockup.com/77/77"
							alt="story with slab of bacon"
						/>
						<h2>SKIMS</h2>
					</a>
				</li>
				<li>
					<a href="">
						<img
							src="https://www.fillmurray.com/150/150"
							alt="story with random photo"
						/>
						<h2>KKW BEAUTY</h2>
					</a>
				</li>
			</ul>
		</nav>
		<nav>
			<ul class="mobile-stats">
				<li class="mobile-stats__posts stats">
					<a href=""><strong>5,097</strong><br />posts</a>
				</li>
				<li class="mobile-stats_followers stats">
					<a href=""><strong>165M</strong><br />followers</a>
				</li>
				<li class="mobile-stats__following stats">
					<a href=""><strong>37</strong><br />following</a>
				</li>
			</ul>
		</nav>
		<section class="tabbed-pane">
			<nav>
				<ul class="tabbed-pane__header">
					<li>
						<a href="" class="tab-link selected"
							><i class="fa fa-table" aria-hidden="true"></i
							><span class="tab-link-text"> Posts</span></a
						>
					</li>
					<li>
						<a href="" class="tab-link"
							><i class="fa fa-television" aria-hidden="true"></i
							><span class="tab-link-text"> IGTV</span></a
						>
					</li>
					<li>
						<a href="" class="tab-link"
							><i class="fa fa-user" aria-hidden="true"></i
							><span class="tab-link-text"> Tagged</span></a
						>
					</li>
				</ul>
			</nav>
			<div class="tabbed-pane__posts">
				<a href=""
					><img
						src="https://www.fillmurray.com/300/300"
						alt="bill murray post picture"
				/></a>
				<a href=""
					><img
						src="https://baconmockup.com/300/300"
						alt="bacon post picture"
				/></a>
				<a href=""
					><img
						src="https://www.fillmurray.com/400/400"
						alt="bill murray post picture"
				/></a>
				<a href=""
					><img
						src="https://baconmockup.com/400/400"
						alt="bacon post picture"
				/></a>
				<a href=""
					><img
						src="https://www.fillmurray.com/500/500"
						alt="bill murray post picture"
				/></a>
				<a href=""
					><img
						src="https://baconmockup.com/800/800"
						alt="bacon post picture"
				/></a>
				<a href=""
					><img src="https://www.fillmurray.com/600/600" alt="post picture"
				/></a>
				<a href=""
					><img
						src="https://www.fillmurray.com/800/800"
						alt="bill murray post picture"
				/></a>
			</div>
			<div class="tabbed-pane__igtv"></div>
			<div class="tabbed-pane__tagged"></div>
		</section>
	</main>
	<footer class="site-footer">
		<nav>
			<ul>
				<li>
					<a
						href="https://about.instagram.com/about-us"
						rel="nofollow noopener noreferrer"
						target="_blank"
						>About</a
					>
				</li>
				<li>
					<a href="https://help.instagram.com/">Help</a>
				</li>
				<li>
					<a href="https://instagram-press.com/">Press</a>
				</li>
				<li><a href="/developer/">API</a></li>
				<li><a href="/about/jobs/">Jobs</a></li>
				<li>
					<a href="/legal/privacy/">Privacy</a>
				</li>
				<li>
					<a href="/legal/terms/">Terms</a>
				</li>
				<li>
					<a href="/explore/locations/">Locations</a>
				</li>
				<li>
					<a href="/directory/profiles/">Top Accounts</a>
				</li>
				<li>
					<a href="/directory/suggested/kimkardashian">Suggested Accounts</a>
				</li>
				<li>
					<a href="/directory/hashtags/">Hashtags</a>
				</li>
				<li>
					<span class="site-footer__language"
						>Language<select aria-label="Switch Display Language">
							<option value="af">Afrikaans</option>
							<option value="cs">Čeština</option>
							<option value="da">Dansk</option>
							<option value="de">Deutsch</option>
							<option value="el">Ελληνικά</option>
							<option value="en">English</option>
							<option value="es">Español (España)</option>
							<option value="es-la">Español</option>
							<option value="fi">Suomi</option>
							<option value="fr">Français</option>
							<option value="id">Bahasa Indonesia</option>
							<option value="it">Italiano</option>
							<option value="ja">日本語</option>
							<option value="ko">한국어</option>
							<option value="ms">Bahasa Melayu</option>
							<option value="nb">Norsk</option>
							<option value="nl">Nederlands</option>
							<option value="pl">Polski</option>
							<option value="pt-br">Português (Brasil)</option>
							<option value="pt">Português (Portugal)</option>
							<option value="ru">Русский</option>
							<option value="sv">Svenska</option>
							<option value="th">ภาษาไทย</option>
							<option value="tl">Filipino</option>
							<option value="tr">Türkçe</option>
							<option value="zh-cn">中文(简体)</option>
							<option value="zh-tw">中文(台灣)</option>
							<option value="bn">বাংলা</option>
							<option value="gu">ગુજરાતી</option>
							<option value="hi">हिन्दी</option>
							<option value="hr">Hrvatski</option>
							<option value="hu">Magyar</option>
							<option value="kn">ಕನ್ನಡ</option>
							<option value="ml">മലയാളം</option>
							<option value="mr">मराठी</option>
							<option value="ne">नेपाली</option>
							<option value="pa">ਪੰਜਾਬੀ</option>
							<option value="si">සිංහල</option>
							<option value="sk">Slovenčina</option>
							<option value="ta">தமிழ்</option>
							<option value="te">తెలుగు</option>
							<option value="vi">Tiếng Việt</option>
							<option value="zh-hk">中文(香港)</option>
							<option value="bg">Български</option>
							<option value="fr-ca">Français (Canada)</option>
							<option value="ro">Română</option>
							<option value="sr">Српски</option>
							<option value="uk">Українська</option>
						</select></span
					>
				</li>
			</ul>
		</nav>
		<span class="copyright">© 2020 Instagram from Facebook</span>
	</footer>
              
            
!

CSS

              
                :root {
  --header-height: 54px;
  --page-margin-side: 5px;
  --blue: #0095f6;
  --link-blue: #00376b;
  --dull-grey: #8e8e8e;
  --bg-grey: rgb(250, 250, 250);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font: inherit;
  vertical-align: baseline;
}

h1 {
  font-size: 28px;
  font-weight: 300;
}

body,
button,
input,
textarea,
h2 {
  color: #262626;
  color: rgba(38, 38, 38, 1);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

body {
  background: var(--bg-grey);
  overflow-y: auto;
}

a,
a:visited {
  color: inherit;
  text-decoration: none;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 12px;
}

header {
  position: fixed;
  background-color: white;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  width: 100%;
  grid-gap: 0 5px;
  border-bottom: 1px solid rgba(219, 219, 219, 1);
  padding: 0 var(--page-margin-side);
  z-index: 50;
}

.header__logo {
  justify-self: start;
}

.search-outline {
  display: none;
  border: solid 1px #dbdbdb;
  border-radius: 3px;
  padding: 0 0 0 10px;
  background: var(--bg-grey);
  z-index: 2;
  align-self: center;
  justify-self: center;
}

.search {
  border-radius: 3px;
  color: #262626;
  outline: 0;
  padding: 3px 0;
  background: var(--bg-grey);
  border: none;
  min-width: 125px;
}

main {
  display: grid;
  grid-gap: 20px;
  margin: 0 var(--page-margin-side);
  padding: 20px 0;
}

button {
  border: 1px solid transparent;
  background-color: var(--blue);
  color: white;
  cursor: pointer;
  display: block;
  font-weight: 600;
  padding: 5px 9px;
  text-align: center;
  text-transform: inherit;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4px;
}

/*bio*/

.bio {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 20px 0;
  padding-top: var(--header-height);
  align-items: start;
  grid-gap: 20px;
  margin-left: 10px;
}

.bio__img-block {
  position: relative;
  grid-row: 1 / -1;
  align-self: start;
  justify-self: center;
}

.bio__img {
  border-radius: 50%;
  width: 77px;
  height: 77px;
}

.bio__img-block:before {
  display: block;
  position: absolute;
  content: "";
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: var(--bg-grey);
  z-index: -1;
  top: -4px;
  left: -4px;
}

.bio__img-block:after {
  display: block;
  position: absolute;
  content: "";
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(45deg, #833ab4, #c13584, #e1306c, #fd1d1d);
  z-index: -2;
  top: -6px;
  left: -7px;
}

*/ .bio__header {
  grid-column: 2 / span 3;
  grid-row: 1;
}

.bio__verified {
  border-radius: 50%;
  height: 18px;
  width: 18px;
  background-color: var(--blue);
  position: relative;
  display: inline-block;
  z-index: -1;
  color: white;
}

.bio__verified i {
  position: absolute;
  left: 2px;
  top: 2px;
}

.bio__follow {
  padding: 5px 9px;
  margin-left: 0;
}

.bio__stats {
  grid-column: 2 / span 3;
  font-size: 16px;
}

.bio__account,
.bio__description {
  display: inline;
}

.bio_blurb {
  grid-column: span 3;
}

.bio__name,
.bio__description {
  grid-column: span 3;
  font-size: inherit;
}

.bio__name {
  font-weight: 600;
}

.bio__stats {
  display: none;
}

.stats {
  margin-right: 40px;
}

strong {
  font-weight: bold;
}

/*story nav */
.story {
  display: grid;
  grid-template-columns: repeat(auto-fill, 65px);
  grid-auto-flow: column;
  grid-gap: 10px;
  margin-left: 0;
  overflow-x: auto;
}

.story img {
  border-radius: 50%;
  width: 56px;
  height: 56px;
}

.story h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* mobile stats */
.mobile-stats {
  border-top: 1px solid lightgrey;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-items: center;
  align-items: center;
}

.mobile-stats li {
  text-align: center;
  margin-left: 20px;
  margin: 0 10px;
  padding-top: 10px;
}

/*tabbed pane*/
.tabbed-pane__header {
  border-top: 1px solid lightgrey;
}

.tabbed-pane__header {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-items: center;
}

.tabbed-pane__header li {
  text-transform: uppercase;
  padding: 10px 0;
}

a.tab-link {
  color: #8e8e8e;
  border-top: none;
  padding: 18px;
}

a.tab-link i {
  font-size: 2em;
}

.tab-link-text {
  display: none;
}

a.selected {
  border-top: 1px solid black;
  color: rgba(38, 38, 38, 1);
}

.tabbed-pane__posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-gap: 3px;
}

.tabbed-pane__posts img {
  width: 100%;
  height: 100%;
}

/*footer*/
.site-footer {
  display: grid;
  margin-top: 50px;
  grid-gap: 20px;
  margin: 0 var(--page-margin-side);
  margin-bottom: 20px;
  font-size: 12px;
}

footer nav ul {
  text-transform: uppercase;
}

.copyright {
  color: var(--dull-grey);
  text-transform: uppercase;
}

.site-footer__language {
  color: var(--link-blue);
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  vertical-align: top;
}

.site-footer__language select {
  display: none;
}

.site-footer a,
.site-footer a:visited {
  color: var(--link-blue);
  text-decoration: none;
}

@media screen and (min-width: 500px) {
  /*header: search is shown and header gains another column to accomodate it*/
  .search-outline {
    display: block;
  }

  header {
    grid-template-columns: auto 1fr auto auto;
  }
}

@media screen and (min-width: 700px) {
  /*tabbed pane change*/
  .tabbed-pane__header ul {
    grid-template-columns: 1fr repeat(3, auto) 1fr;
    justify-items: center;
  }

  .tabbed-pane__header ul li:nth-child(1) {
    grid-column: 2;
  }

  .tabbed-pane__header ul li:nth-child(2) {
    grid-column: 3;
  }

  .tabbed-pane__header ul li:nth-child(3) {
    grid-column: 4;
  }

  .tab-link-text {
    display: inline;
  }

  .tabbed-pane__header li {
    padding: 20px 0;
  }

  a.tab-link i {
    font-size: 1em;
  }

  a.tab-link {
    padding: 20px;
  }

  /*bio change */
  .bio {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    align-items: center;
  }

  .bio__img {
    width: 150px;
    height: 150px;
  }

  .bio__name,
  .bio__description {
    font-size: 16px;
  }

  .bio__follow {
    display: inline;
    margin-left: 10px;
  }

  .bio__img-block {
    align-self: center;
  }

  .bio__img-block:before {
    display: block;
    position: absolute;
    content: "";
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--bg-grey);
    z-index: -1;
    top: -5px;
    left: -5px;
  }

  .bio__img-block:after {
    display: block;
    position: absolute;
    content: "";
    width: 166px;
    height: 166px;
    border-radius: 50%;
    background: linear-gradient(45deg, #833ab4, #c13584, #e1306c, #fd1d1d);
    z-index: -2;
    top: -8px;
    left: -8px;
  }

  /*swap stats display */
  .bio__stats {
    display: inline;
  }

  .mobile-stats {
    display: none;
  }

  /* resize story elements */
  .story ul {
    grid-template-columns: repeat(auto-fill, 115px);
  }

  .story {
    grid-gap: 40px;
    margin-left: 70px;
  }

  .story img {
    width: 77px;
    height: 77px;
  }

  /* posts */
  .tabbed-pane__posts {
    grid-gap: 25px;
  }
}

@media screen and (min-width: 1000px) {
  /* resize margins for entire page */
  :root {
    --page-margin-side: 15%;
  }

  main {
    grid-gap: 50px;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console