WEB DEVELOP

HtmlCss_Floating+Positioning/css/styles.css

body{ font-family: GeometriaThin, calibri, arial, sans-serif; } *{ /*padding: 0; margin: 0;*/ } header{ /* * Set width = 90% * Set height = 200px */ /*width: 90%;*/ /*height: 200px;*/ /* * Set padding = 5% left and right * Set padding = 25px left and right */ /*padding: 25px 5%;*/ /* * Set border on the bottom = 2px solid black */ /*border-bottom: 2px solid black;*/ background: white; } footer{ /*width: 90%; height: 50px; padding: 25px 5%; border-top: 2px solid black;*/ } .big{ font-size: 50px; text-transform: lowercase; font-family: GeometriaHeavy; } .small{ font-size: 25px; text-transform: lowercase; letter-spacing: 5px; font-family: GeometriaLight; } #scrollBtn{ /* * This will be a "sticky" button * I.E. stuck to the bottom right corner */ /*height: 100px; width: 100px;*/ font-weight: 900; line-height: 100px; text-align: center; font-size: 32px; /*border: 2px solid black;*/ background: red; color: white; /*border-radius: 51px; position: fixed; right: 100px; bottom: 100px; z-index: 100;*/ } #container{ background: #ecf0f1; /*width: 100%; height: 1500px;*/ } .row{ /*width: 100%;*/ /*float: left;*/ } .col{ /*margin: 10px 1%;*/ /*height: 150px;*/ line-height: 150px; text-align: center; font-size: 32px; /*float: left;*/ /*border: 2px solid #2c3e50;*/ } .col-third{ /*width: 30%;*/ } .col-quarter{ /*width: 22%;*/ } .col-full{ /*width: 98%;*/ } .positioning{ /*float: left;*/ /*width: 100%;*/ } .floating{ background: white; /*height: 600px; width: 90%; margin: auto; box-shadow: 5px 5px #7f8c8d;*/ } .main{ background: #2c3e50; color: #f1c40f; font-size: 80px; letter-spacing: 35px; line-height: 150px; font-weight: 900; text-align: center; /*position: relative;*/ font-family: GeometriaHeavy; } .overlay{ /*height: 100%; width: 100px;*/ background: rgba(52,152,219 ,.75); color: white; font-size: 24px; letter-spacing: 10px; line-height: 75px; /*position: absolute; right: 30px; z-index: 10; top: 0;*/ }