diff --git a/data.js b/data.js new file mode 100644 index 0000000..63fc0ce --- /dev/null +++ b/data.js @@ -0,0 +1,19 @@ +data = { + header:"Are you looking for Some dresses?", + content: [ + { + text:"Cotton White Dresses", + images: [ + "g2.jpg", + "p1.jpg" + ] + }, + { + text:"Other Dresses", + images: [ + "b1.jpg", + "h3.jpg" + ] + } + ] +} \ No newline at end of file diff --git a/index.css b/index.css index f7f0118..6c6abbe 100644 --- a/index.css +++ b/index.css @@ -74,6 +74,7 @@ body { overflow-x: hidden; + font-family: sans-serif; } .slide-container @@ -83,8 +84,8 @@ body bottom: 2em; right: 2em; - width: 20em; - height: 15em; + width: 22em; + height: 17em; } .slide @@ -97,15 +98,25 @@ body box-shadow: 0 0 3px rgba(0,0,0,.6); padding: 1em; +} + +.animate +{ -webkit-animation: slide-in-from-right 1.5s; -o-animation: slide-in-from-right 1.5s; animation: slide-in-from-right 1.5s; } -.slide-text +#slide>div +{ + width: 100%; + height: 100%; +} + +.slide-header { font-family: sans-serif; - font-size: 1em; + font-size: 1.1em; color: rgb(15,15,15); width: 100%; @@ -116,7 +127,8 @@ body .highlight { - font-size: 1.2em; + font-weight: bold; + /*font-size: 1.2em;*/ } /*Add quote symbol before and after content using pseudo-selectors*/ @@ -127,19 +139,75 @@ body height: 1em; } -.slide-img { +.slide-content { width: 100%; - height: 10em; + height: calc(100% - 3em); position: relative; } -img { +.content-container +{ + display: block; + float: left; + + margin: 0; + padding: 0; + width: calc(50% - 1em); + height: 100%; + + border: 1px solid darkgray; +} + +.content-container:first-child,.content-container:last-child +{ + width: calc(50% - .5em); +} + +.content-container +{ + margin: 0 .5em; +} + +.content-container:first-child +{ + margin-left: 0; +} + +.content-container:last-child +{ + margin-right: 0; +} + + +.content-img +{ + width: 100%; + height: 70%; +} + +.content-img li +{ + list-style: none; +} + +.content-img li +{ + position: relative; + float: left; + width: 50%; + height: 100%; + + overflow: hidden; +} + +.content-img img { display: block; - max-width: 100%; - max-height: 100%; + /*max-width: 100%;*/ + /*max-height: 100%;*/ width: auto; - height: auto; + /*height: auto;*/ + height: 100%; position: absolute; top: 50%; @@ -150,6 +218,17 @@ img { transform: translate(-50%, -50%); } +.content-footer +{ + width: 100%; + height: 30%; + + padding: .25em .5em; + background-color: rgba(0,0,0,.07); + + /*font-size: .8em;*/ +} + .slide-close-btn { position: absolute; @@ -159,6 +238,5 @@ img { padding: .375em .5em; background-color: rgba(255,255,255,0.5); - font-family: sans-serif; font-size: .85em; } \ No newline at end of file diff --git a/index.html b/index.html index f52e589..e85bd5f 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,49 @@