advanced-css-layout

shoppingWebsite/.gitignore

@@ -0,0 +1,4 @@
+*.css
+*.html
+*.js
+

shoppingWebsite/css/base.css

@@ -0,0 +1,62 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/*Base Styles*/
+a:link {
+	text-decoration: none;
+	color: white;
+}
+
+a:visited {
+	text-decoration: none;
+	color: white;
+}
+
+body{
+	font-family: 'Quicksand', sans-serif;
+}
+
+img{
+	width: 100%;
+}

shoppingWebsite/css/layout.css

@@ -0,0 +1,199 @@
+header{
+  box-sizing: border-box;
+  background: rgba(45, 49, 55, 0.98);
+  z-index: 100;
+  padding-right: .5em;
+}
+
+.fixed{
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.flex{
+  display:flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-content: space-around;
+  align-items: stretch;
+}
+
+.flex-container{
+  display:flex;
+  justify-content: center;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.clearfix:after{
+  clear: both;
+  content: " ";
+  display: block;
+  font-size: 0;
+  height: 0;
+  visibility: hidden;
+}
+
+.service-info{
+  left: 4em;
+  position: absolute;
+  top: 10em;
+  z-index: 2;
+}
+
+.bg-pic-container{
+  top: 1em;
+  margin-top: -3.5em;
+}
+
+footer{
+  display: flex;
+  box-sizing: border-box;
+  height: 1em;
+  padding: 2.5em;
+  background-color: rgba(45, 49, 55, 0.98);
+}
+
+.icon-nav-box{
+  margin-top: 2em;
+}
+
+.vertical-align{
+  display:flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+ }
+
+/*single repsonsibility*/
+.inline{
+  display: inline;
+}
+
+.medium-pic{
+  width: 20%;
+}
+
+.full-view{
+  width: 100%;
+}
+
+.center-box{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.center-grid{
+  text-align: center;
+}
+
+.title-img{
+  top: 0;
+  z-index: -1;
+  position: relative;
+}
+
+/*Grid System*/
+@media only screen and (max-width: 480px) {
+  .span_3_of_3 {
+    width: 100%;
+  }
+  .span_2_of_3 {
+    width: 100%;
+  }
+  .span_1_of_3 {
+    width: 100%;
+  }
+}
+
+.span_3_of_3 {
+  width: 100%;
+}
+
+.span_2_of_3 {
+  width: 66.13%;
+}
+
+.span_1_of_3 {
+  width: 32.26%;
+}
+/*  GRID OF FOUR  */
+.span_4_of_4 {
+  width: 100%;
+}
+
+.span_3_of_4 {
+  width: 74.6%;
+}
+
+.span_2_of_4 {
+  width: 49.2%;
+}
+
+.span_1_of_4 {
+  width: 23.8%;
+}
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+@media only screen and (max-width: 480px) {
+  .span_4_of_4 {
+    width: 100%;
+  }
+  .span_3_of_4 {
+    width: 100%;
+  }
+  .span_2_of_4 {
+    width: 100%;
+  }
+  .span_1_of_4 {
+    width: 100%;
+  }
+}
+/*  GRID OF SIX */
+.span_6_of_6 {
+  width: 100%;
+}
+
+.span_5_of_6 {
+    width: 83.06%;
+}
+
+.span_4_of_6 {
+    width: 66.13%;
+}
+
+.span_3_of_6 {
+    width: 49.2%;
+}
+
+.span_2_of_6 {
+    width: 32.26%;
+}
+
+.span_1_of_6 {
+    width: 15.33%;
+}
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+@media only screen and (max-width: 350px) {
+  .span_6_of_6 {
+    width: 100%;
+  }
+  .span_5_of_6 {
+    width: 100%;
+  }
+  .span_4_of_6 {
+    width: 100%;
+  }
+  .span_3_of_6 {
+    width: 100%;
+  }
+  .span_2_of_6 {
+    width: 100%;
+  }
+  .span_1_of_6 {
+    width: 100%;
+  }
+}
+

shoppingWebsite/css/module.css

@@ -0,0 +1,122 @@
+.company-logo{
+  font-size: 3.2em;
+  padding: .2em;
+}
+
+.navList{
+  font-size: 1.2em;
+  margin-top: 1.5em;
+  margin-bottom: .3em;
+}
+
+.navList li{
+  border-right: 1px solid white;
+  padding-right: .4em;
+}
+
+.navList li:last-child{
+  border: none;
+}
+
+button {
+  background-color: #FF5049;
+  width: 40%;
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 5px 0 #A94743;
+  cursor: pointer;
+  margin: 0;
+  margin-top: 2em;
+  outline: 0;
+  padding: 12px 20px;
+  transition: all .1s;
+}
+
+.marginT-B{
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2em;
+  margin-bottom: 1em;
+}
+/*single responsibility*/
+.selling-title{
+  font-size: 2em;
+  color: #7E7777;
+}
+
+.info-title{
+  text-align: left;
+  font-size: 3.5em;
+  line-height: 1.2em;
+}
+
+.white-text{
+  color: white;
+}
+
+.iconList{
+  margin-top: -3em;
+}
+
+.wrapper{
+  padding-top: 3em;
+  background-color: white;
+}
+
+.copyrights{
+  font-size: 1.2em;
+}
+
+.social-nav{
+  text-align: center;
+  padding: .3em;
+  margin: 2em;
+  display: inline-block;
+}
+
+/*ICOMOON*/
+@font-face {
+  font-family: 'icomoon';
+  src:url('../icomoon/fonts/icomoon.eot?-el83e9');
+  src:url('../icomoon/fonts/icomoon.eot?#iefix-el83e9') format('embedded-opentype'),
+  url('../icomoon/fonts/icomoon.woff?-el83e9') format('woff'),
+  url('../icomoon/fonts/icomoon.ttf?-el83e9') format('truetype'),
+  url('../icomoon/fonts/icomoon.svg?-el83e9#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon-mail:before {
+  content: "\ea83";
+  font-size: 1.3em;
+  margin: .23em;
+}
+
+.icon-google:before {
+  content: "\ea87";
+  font-size: 1.3em;
+  margin: .23em;
+}
+
+.icon-facebook:before {
+  content: "\ea8c";
+  font-size: 1.3em;
+  margin: .23em;
+}
+
+.icon-instagram:before {
+  content: "\ea90";
+  font-size: 1.3em;
+  margin: .23em;
+}
+
+.icon-pinterest:before {
+  content: "\ead0";
+  font-size: 1.3em;
+  margin: .23em;
+}
+
+.hide-mobile{
+  display: none;
+}