Commit b8cc62d6 authored by Porter Libby's avatar Porter Libby
Browse files

basic layout of divs

parent b0dca3da
#flow-chart-container{
.flow-chart-container{
width: 60vw;
height: 40vw;
margin: 0 auto;
display: inline-block;
}
.flow-chart-circle{
.flow-chart-column{
height: 100%;
width: 16%;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
vertical-align: bottom;
overflow: hidden;
}
.flow-chart-square{
}
\ No newline at end of file
.flow-chart-block{
width: 100%;
height: 24%;
margin-top: -10px;
}
.flow-chart-circle-1{
background-color: #db584f;
border-radius: 300px;
}
.flow-chart-circle-2{
background-color: #7bd192;
border-radius: 300px;
}
.flow-chart-square-1{
background-color: #7bbad1;
}
.flow-chart-square-2{
background-color: #d9c755;
}
.flow-chart-line-down{
width: 100%;
padding-top: 5px;
margin-bottom: -10px;
}
p {
color: white;
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
\ No newline at end of file
......@@ -8,12 +8,98 @@
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id='flow-chart-container'>
<div class='flow-chart-circle'>
<div class='flow-chart-container'>
<div class='flow-chart-column'>
<div class='flow-chart-block flow-chart-circle-1'>
<p>First Year Advising</p>
</div>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-circle-2'>
<p>Career Exploration</p>
</div>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
</div>
<div class='flow-chart-column'>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-square-1'>
<p>Campus Life</p>
</div>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-square-1'>
<p>Campus Life</p>
</div>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-circle-2'>
<p>Career Exploration</p>
</div>
</div>
<div class='flow-chart-column'>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-square-1'>
<p>Major Selection</p>
</div>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-square-1'>
<p>Research</p>
</div>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-square-1'>
<p>Internship</p>
</div>
</div>
<div class='flow-chart-square'>
<div class='flow-chart-column'>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-square-1'>
<p>Off-Campus </p>
</div>
<div class="flow-chart-line-down">
<svg height="40px" width="100%">
<line x1="50%" y1="0" x2="50%" y2="40" stroke-dasharray="4" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>
</div>
<div class='flow-chart-block flow-chart-square-1'>
<p>Campus Life</p>
</div>
</div>
</div>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment