- Have any questions? Contact us free of charge
- 233245354352
- 5432431
- [email protected]
ResponsiveCss_StarterFilesfirstjob.zip
ResponsiveCss_StarterFilesfirstjob.zip
__MACOSX/._ResponsiveCss
ResponsiveCss/index.html
NEIUCS300HTML & CSSResponsive Design
Block One – Always Full Width
The contents of this block whill always be full width, regardless of the screen resolution or the size of your device.
Responsive Design – The Basics
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.
How it works
- Create an element and give it class="row"
- Within each row, add columns until you total 12 (See examples below). Each element should be given a width. Column class names tend to have 3 parts:
- col
- size (xs, sm, md, lg, xl)
- # of columns (1, 2, 3,..11,12)
- Example: class="col-sm-1"
- Create @media rules for various screen sizes and resolutions. When your browser or device falls within that range, any styles/rules for a specific element listed within the @media rule will override rules for that element listed outside of the @media rule
- If a rule is outside of an @media rule and is not overridden by a specific rule within an @media rule, it will always apply, regardless of screen size / resolution
- Depending on the width of your browser / screen resolution, the styles will change
Block Two – Grid
12 Col1 Col11 Col2 Col10 Col3 Col9 Col4 Col8 Col5 Col7 Col6 Col6 Col
Block Three – Grid
Box 1Box 2Box 3Box 4Box 5Box 6Box 7Box 8
Block Four – Grid
NameEmailCommentsNortheastern Illinois University – CS300© Copyright 2018
__MACOSX/ResponsiveCss/._index.html
ResponsiveCss/.DS_Store
__MACOSX/ResponsiveCss/._.DS_Store
ResponsiveCss/css/styles.css
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: 500px) 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: 499px){.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%;}}*//* Colors *//*translucent red –> rgba(231,76,60 ,.3)midnight blue –> #2c3e50silver –> #bdc3c7sunflower –> #f1c40femerland –> #2ecc71wisteria –> #8e44adwetasphalt –> #34495e*/
ResponsiveCss/css/fonts.css
@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);}