JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<h2>I am a generalist</h2>
<div id="Boxy">
<div id="GeneralistHeader">Stratgey & Design</div>
<div id="General_List">
<ul>
<li class="Big">systems theory</li>
<li class="Medium">branding</li>
<li class="Small">ethnography</li>
<li class="Small">statistics</li>
<li class="Big">iOS development</li>
<li class="Medium">user experience</li>
<li class="Small">web development</li>
<li class="Small">infographics</li>
</ul>
</div>
</div>
<h2>Here are past projects</h2>
<p>that will let you see my thought process.</p>
</div>
CSS
/****************
General
***************/
/* gets rid of underline under text*/
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
text-align: center;
}
a {
text-decoration: none
}
/****************
Body Intro
***************/
/***Generalist***/
#GeneralistHeader {
font-size:2em;
font-weight: 700;
background:#19334c;
color:white;
display:inline-block;
padding: 2px 10px;
margin: -20px 0 0 0;
}
#Boxy {
border: solid;
display:inline-block;
border-width: 1px;
margin-top: 35px;
width:500px
}
#General_List ul {
list-style-type: none;
/*number of columns*/
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
margin: 10px 0 0 0;
padding: 0;
font-family:'Raleway', serif;
font-weight: 400;
}
/* makes list pretty*/
#General_List li.Big {
font-size: 1.45em;
font-weight: 700;
}
#General_List li.Medium {
margin: 10px 0;
font-size: 1.35em;
font-weight: 400;
}
#General_List li.Small {
margin: 10px 0;
font-size: 1.25em;
font-weight: 200;
}
h2 {
font-family:'Raleway', serif;
font-size: 1.5em;
margin: 1.75em 0 0 0;
font-weight: 700;
}
p {
font-size: auto;
margin: auto 0 0;
}
/****************
Color
***************/
body {
background:#fff;
color: #555
}
header {
background:#fff;
border-color: #596a8a;
}
h1, h2 {
color: #000;
}
a {
color:#19334c
}
JavaScript
https: //jsfiddle.net/mokk083/s2cq61ko/#run