@font-face{font-family: GeometriaBold;src: url(../fonts/Geometria-Bold.ttf);}@font-face{font-family: GeometriaLight;src: url(../fonts/Geometria-Light.ttf);}@font-face{font-family: GeometriaHeavy;src: url(../fonts/Geometria-Heavy.ttf);}@font-face{font-family: GeometriaThin;src: url(../fonts/Geometria-Thin.ttf);}@font-face{font-family: GeometriaMedium;src: url(../fonts/Geometria-Medium.ttf);}
body{float: left;width: 100%;padding: 0;margin: 0;font-family: GeometriaMedium, calibri, arial, sans-serif;}header{float: left;width: 96%;height: 75px;padding: 20px 2%;border-bottom: 2px solid black;background: #f7f7f7;z-index: 5;color: #2c3e50;}header .left{font-size: 36px;}header .right{font-size: 18px;}.left{float: left;width: 35%;}.right{float: right;width: 60%;text-align: right;}.big{font-weight: 900;text-transform: uppercase;font-family: GeometriaHeavy;}.small{font-weight: 400;text-transform: lowercase;color: #f1c40f;font-family: GeometriaBold}#container{float: left;width: 100%;}article{float: left;width: 90%;padding: 100px 5% 0 5%;height: auto;margin: 0 auto;}h2{float: left;clear: both;width: 100%;color: #34495e;font-size: 32px;}footer{float: left;width: 100%;padding: 20px 0;margin-top: 30px;border-top: 5px double black;}.ftrLeft{padding-left: 2%;}.ftrRight{padding-right: 2%;}section p{font-size: 18px;}/* Form Elements */label{width: 25%;padding-right: 3%;float: left;font-size: 24px;color: #2c3e50;}input{float: left;border: 2px solid #34495e;width: 100%;padding: 5px;font-size: 18px;}textarea{float: left;border: 2px solid #34495e;width: 100%;height: 100px;padding: 5px;font-size: 18px;}.row{float: left;width: 100%;margin: 10px auto;}.btnRow{margin-top: 20px;}.btn{height: 50px;width: 80%;margin: 0 10%;border: 1px solid #2c3e50;}.btn-primary{background: #2c3e50;color: #f1c40f;}.btn:hover{background: #bdc3c7;color: #2c3e50;}.btn-default{background: #FFFFFF;color: #2c3e50;}/* Boxes */.box{width: 100%;color: #f1c40f;background: #2c3e50;font-size: 1.5em;text-align: center;font-family: GeometriaHeavy;}.box:hover{color: #2c3e50;background: #f1c40f;}.shortBox{height: 50px;line-height: 50px;}.tallBox{height: 200px;line-height: 200px;}/* Grid */.row{width: 100%;margin: 0;float: left;}.col{float: left;margin: 10px 1%;}@media (min-width: 1000px){.col-lg-1{width: 6.33%;}.col-lg-2{width: 14.66%;}.col-lg-3{width: 23%;}.col-lg-4{width: 31.33%;}.col-lg-5{width: 39.66%;}.col-lg-6{width: 48%;}.col-lg-7{width: 56.33%;}.col-lg-8{width: 64.66%;}.col-lg-9{width: 73%;}.col-lg-10{width: 81.33%;}.col-lg-11{width: 89.66%;}.col-lg-12{width: 98%;}}@media (min-width: 600px) and (max-width: 999px){.col-md-1{width: 6.33%;}.col-md-2{width: 14.66%;}.col-md-3{width: 23%;}.col-md-4{width: 31.33%;}.col-md-5{width: 39.66%;}.col-md-6{width: 48%;}.col-md-7{width: 56.33%;}.col-md-8{width: 64.66%;}.col-md-9{width: 73%;}.col-md-10{width: 81.33%;}.col-md-11{width: 89.66%;}.col-md-12{width: 98%;}}@media (max-width: 599px){.col-sm-1{width: 6.33%;}.col-sm-2{width: 14.66%;}.col-sm-3{width: 23%;}.col-sm-4{width: 31.33%;}.col-sm-5{width: 39.66%;}.col-sm-6{width: 48%;}.col-sm-7{width: 56.33%;}.col-sm-8{width: 64.66%;}.col-sm-9{width: 73%;}.col-sm-10{width: 81.33%;}.col-sm-11{width: 89.66%;}.col-sm-12{width: 98%;}}@media print{.row{border-bottom: 2px dotted black;}}/* Colors *//*translucent red –> rgba(231,76,60 ,.3)midnight blue –> #2c3e50silver –> #bdc3c7sunflower –> #f1c40femerland –> #2ecc71wisteria –> #8e44adwetasphalt –> #34495e*/
NEIUCS300HTML & CSSResponsive Design
The contents of this block whill always be full width, regardless of the screen resolution or the size of your device.
Responsive design tends to use a 12 column grid. This is used by frameworks such as Bootstrap, Foundation, etc. The grid system allows us to easily adjust an elements width depending on browser size / device resolution.
12 Col1 Col11 Col2 Col10 Col3 Col9 Col4 Col8 Col5 Col7 Col6 Col6 Col
Box 1Box 2Box 3Box 4Box 5Box 6Box 7Box 8
NameEmailCommentsNortheastern Illinois University – CS300© Copyright 2018