connecting front-end to back-end - mysql
Bought a new front end template to set up an ecommerce store.
Will like to seek advice on how to connect the API.
The front-end template stores the all the products information in local storage. read around, it is not a safe practice. As attached is the code below, so the platform merely just passes all data into one json file.
Was thinking what will be the structure for the front-end drawing of data from the backend and database? should all information be parsed into 1 json file and be stored somewhere instead of the local server? can you recommend me a structure for it?
the framework will be react and nodejs. the server will be mysql.
{"data":{"products":[{"id":1,"name":"Buckle belt – Saint Laurent","pictures":["shop/outfits/b.jpg","shop/outfits/b1.jpg"],"stock":16,"price":200,"discount":20,"salePrice":180,"description":"Luxury French fashion house Saint Laurent prides itself on constructing high-quality accessories, as showcased by this black belt, new to the brand's AW17 collection. Expertly constructed from Italian leather and brass, the belt features a long length, a buckle fastening, eyelets and a silver-tone logo plaque..","rating":4,"tags":["accessories","Black"],"artistID":["excitedlybored"],"size":["100 CM","90 CM","95 CM"],"category":"accessories","colors":["black","gray","red"]},{"id":2,"name":"La-ta-da Boho Chic Head Wrap","pictures":["shop/accessroies/b.jpg","shop/accessroies/b1.jpg","shop/accessroies/b2.jpg","shop/accessroies/b3.jpg"],"stock":5,"price":330,"discount":50,"salePrice":165,"description":"Transform your tresses with the La-ta-da Boho Chic Head Wrap. Great for keeping hair out of your face or sliding over your forehead for a bohemian look, the mix of vibrant and jewel-toned colors make this a fun piece for everyone's hair accessories collection.","rating":5,"tags":["accessories"],"size":["100 CM"],"category":"accessories","artistID":["excitedlybored"],"colors":["black","gray","red"]},{"id":3,"name":"Women's Cozy Leisure Top","pictures":["shop/athleisure/a.jpg","shop/athleisure/a1.jpg","shop/athleisure/a2.jpg"],"stock":0,"price":500,"discount":0,"salePrice":500,"description":"Soften things up in the sweetest style when the weather turns colder with the Cozy Leisure Top from A New Day. This terry sweater keeps a simple design that can be dressed up or down, while the cutout on the back and the tied closure add the right amount of detail. Pair this warm sweater with skinny jeans and sneakers for an easy day out with friends.","rating":1,"tags":["women","athleisure"],"size":["M","L","XL","XS"],"category":"athleisure","colors":["black","gray","red"]},{"id":4,"name":"Women's Crochet Shoulder Chevron Sweatshirt","pictures":["shop/athleisure/b.jpg","shop/athleisure/b1.jpg"],"stock":10,"price":580,"discount":380,"salePrice":200,"description":"Wearing a sweatshirt in public doesn't mean you can't look put-together doing it. The Crochet-Shoulder Chevron Sweatshirt from Knox Rose is slightly more tailored for a pullover, though it still gives you a loose fit that remains comfortable and flexible as you move. The textured fabric is enhanced with crochet sleeve details. Throw this long-sleeve sweatshirt over a pair of jeans and you're ready to go.","rating":1,"tags":["women","athleisure"],"size":["S","M","L","XL"],"category":"women","colors":["black","gray","red"]},{"id":5,"name":"Women's Velour Hoodie","pictures":["shop/athleisure/c.jpg","shop/athleisure/c1.jpg"],"stock":50,"price":42,"discount":5,"salePrice":120,"description":"Soften even your most casual style with the Velour Hoodie from Mossimo Supply Co. This soft zip-up jacket is the perfect way to add cute warmth when the days turn cooler — wear it with skinny jeans, a plain tee and sneakers for a sporty day out.","rating":2,"tags":["jacket","women","athleisure"],"size":["S","M","L","XL"],"category":"women","colors":["black","gray","red"]},{"id":6,"name":"Women's Accessories Vegan Leather Mini Backpack","pictures":["shop/bags/a.jpg","shop/bags/a1.jpg","shop/bags/a2.jpg","shop/bags/a3.jpg"],"stock":0,"price":130,"discount":100,"salePrice":500,"description":"For those of you who are serious about having more, doing more, giving more and being more, success is achievable with some understanding of what to do, some discipline around planning and execution of those plans and belief that you can achieve your desires.","rating":5,"tags":["accessories"],"size":[],"category":"bags","colors":["orange"]},{"id":7,"name":"WD·NY Black – Men's Pinstripe Seer Sucker Vest","pictures":["shop/blazers/a.jpg","shop/blazers/a.jpg"],"stock":30,"price":950,"discount":2000,"salePrice":725,"description":"Introspection is the trick. Understand what you want, why you want it and what it will do for you. This is a critical factor, and as such, is probably the most difficult step. For this reason, most people never complete this aspect – then wonder why life is so difficult!","rating":4,"tags":["blazers","clothing","men"],"size":["S","M","XL"],"category":"men","colors":["black","gray","red"]},{"id":8,"name":"WD·NY Black – Men's Palm Burgundy Jacket","pictures":["shop/blazers/b.jpg","shop/blazers/b1.jpg"],"stock":100,"price":780,"discount":200,"salePrice":380,"description":"Bring some funky nostalgia to your next event — and every one after — with the Denim Blazer WD·NY Black – Men's Palm Burgundy Jacket. This suit jacket is the perfect way to add some fun style to your dressy look. Pair it with a floral button-down shirt and dress pants for the perfect mix of formal and unique.","rating":3,"tags":["fashion","clothing","men"],"size":["M","L","XL"],"category":"blazers","colors":["black","gray","red"]},{"id":9,"name":"Men's Standard Fit Bomber Sweater","pictures":["shop/blazers/c.jpg","shop/blazers/c1.jpg","shop/blazers/c2.jpg","shop/blazers/c3.jpg"],"stock":2,"price":870,"discount":0,"salePrice":870,"description":"With the cool style of your favorite jacket and the comfort of a sweater, the Bomber Sweater from Goodfellow & Co. will be your favorite layering piece when the weather turns cold. This zip-up jacket is an easy piece to layer over your favorite looks to transition them between seasons — for a fall day out, just add slim jeans, a cool tee and leather boots.","rating":5,"tags":["men","sale"],"size":["L","XL"],"category":"blazers","colors":["black","gray","red"]},{"id":10,"name":"Men's Standard Fit Deconstructed Knit Blazer","pictures":["shop/blazers/d.jpg","shop/blazers/d1.jpg","shop/blazers/d2.jpg"],"stock":30,"price":900,"discount":300,"salePrice":600,"description":"When the time comes to dress things up a bit, do it on your own terms with the Deconstructed Knit Blazer from Goodfellow & Co. This jacket is made to give you the formality you need without feeling stuffy — wear it with your favorite button-down shirt and dark pants, or rock it with a T-shirt and jeans. Wherever you need to go, this versatile piece will take you there.","rating":2,"tags":["fashion","men"],"size":["M","L","XL","2T"],"category":"men","colors":["black","gray","red"]},{"id":11,"name":"Toddler Boys' Jackets – Red","pictures":["shop/boys/a.jpg","shop/boys/a1.jpg","shop/boys/a2.jpg"],"stock":1,"price":50,"discount":25,"salePrice":250,"description":"Keep your cool little man rocking comfortable style wherever he goes with the Jacket from Cat & Jack. The color blocked design of this hooded zip-up sweatshirt brings a spark to his outfit, while the cozy construction adds warmth to any of his outfits. Just slip it over jeans and a graphic tee and he'll be ready to go.","rating":5,"tags":["boys","kids"],"size":["2T","3T","4T"],"category":"kids","colors":["black","gray","red"]},{"id":12,"name":"Extra Fine Wool Jumpers","pictures":["shop/clothing/a.jpg","shop/clothing/a1.jpg","shop/clothing/a2.jpg"],"stock":5,"price":25,"discount":15,"salePrice":180,"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus vitae risus id placerat. Duis ut tincidunt elit. Sed ac leo commodo mi aliquam ultricies non sed velit. Nullam pulvinar sapien ut dapibus vulputate. Vivamus pulvinar, elit quis laoreet consectetur, ipsum elit tempor urna, a sodales odio sem a ex. In vel rhoncus urna. Nullam bibendum tellus quis arcu ullamcorper, at mattis eros rutrum. Cras nisl leo, gravida quis orci eget, placerat imperdiet libero. Nunc accumsan dolor mollis, tincidunt sapien at, venenatis odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.","rating":3,"tags":["clothing","women"],"size":["M","L","XL"],"category":"clothing","colors":["white","black"]},{"id":13,"name":"Girls' Long Sleeve Bow Top","pictures":["shop/clothing/b.jpg","shop/clothing/b1.jpg","shop/clothing/b2.jpg","shop/clothing/b3.jpg"],"stock":30,"price":80,"discount":10,"salePrice":770,"description":"Freshen up your girl's wardrobe with this Long-Sleeve Bow Top from Cat & Jack. The basic long-sleeve tee is given a unique accent from the bow that sits on one of the shoulders, giving the tee a sweet style that she'll love.","rating":1,"tags":["women"],"size":["M","L","XL"],"category":"women","colors":["gray","green"]},{"id":14,"name":"Men's Long Sleeve Micro Thermal Shirt","pictures":["shop/clothing/c.jpg","shop/clothing/c1.jpg","shop/clothing/c2.jpg"],"stock":40,"price":950,"discount":50,"salePrice":425,"description":"When the winter weather approaches, make sure you're prepared to stay warm — the Long-Sleeve Microthermal Shirt from Goodfellow & Co will help you do just that. Made from a soft cotton blend for desired comfort, this micro thermal pullover shirt is perfectly designed to keep you warm in frosty temperatures. Simply throw it on underneath any outfit and you'll be ready to take on anything.","rating":4,"tags":["men","clothing"],"size":["M","L","XL"],"category":"men","colors":["yellow","orange","black"]},{"id":15,"name":"Men's Wool Top Coat","pictures":["shop/coats-jackets/a.jpg","shop/coats-jackets/a1.jpg"],"stock":70,"price":350,"discount":200,"salePrice":780,"description":"When colder weather starts to roll in, keep your outfits looking great and feeling even better with the Wool Topcoat from Goodfellow & Co. This sleek jacket has a classic look with the two buttons, two front flap pockets, notched collar and fitted construction. Just layer it over chinos and a button-down shirt for a chic day out.","rating":5,"tags":["clothing","men","coats-jackets"],"size":["S","M","XL"],"category":"men","colors":["black","white"]},{"id":16,"name":"Women's Leopard Faux Fur Coat","pictures":["shop/coats-jackets/b.jpg","shop/coats-jackets/b1.jpg","shop/coats-jackets/b2.jpg"],"stock":100,"price":400,"discount":20,"salePrice":300,"description":"When the temperature drops, you don't want to get caught outside without a coat. For one that maintains your sense of style, reach for the Leopard Faux-Fur Coat from A New Day. The long coat falls at mid-thigh to keep you warm while walking or standing outdoors, and looks equally fashionable buttoned up or open. This coat with pockets allows you to keep your hands warm, or keep your phone and keys within reach. The bold animal-print coat can coordinate with any outfit.","rating":2,"tags":["clothing","women","coats-jackets"],"size":["S","L","XL"],"category":"women","colors":["black","white"]},{"id":17,"name":"Men's Standard Fit Sweater Fleece Jacket","pictures":["shop/coats-jackets/c.jpg","shop/coats-jackets/c1.jpg"],"stock":3,"price":800,"discount":400,"salePrice":400,"description":"Whether you need to add a little extra warmth to your jeans and T-shirt or your dressier trousers and button-down shirt, the Sweater Fleece Jacket from Goodfellow & Co. is the perfect choice. This zip-up jacket has a simple design that can be paired with any outfit, making it the perfect layer to transition your looks into cooler weather.","rating":4,"tags":["clothing","men","coats-jackets"],"size":["M","XL"],"category":"men","colors":["blue","pink"]},{"id":18,"name":"Girls' Lace Mock Neck Dress – art class","pictures":["shop/dresswear/a.jpg","shop/dresswear/a1.jpg","shop/dresswear/a2.jpg","shop/dresswear/a3.jpg"],"stock":30,"price":2000,"discount":500,"salePrice":1500,"description":"She'll love the style and versatility of this Lace Mock-Neck Dress from art class. Your budding style icon can create plenty of outfits with this one dress through any season. She can pair the sleeveless lace dress with sandals during warm weather, or layer on a cardigan, tights and boots for a cute winter look.","rating":1,"tags":["girls","kids","dresswear"],"size":["S","M","L"],"category":"girls","colors":["orange","black","red"]},{"id":19,"name":"Women's Fabric Mix Midi Dress","pictures":["shop/dresswear/b.jpg","shop/dresswear/b1.jpg"],"stock":2,"price":500,"discount":250,"salePrice":1950,"description":"A gorgeous mix of demure and daring, the Point D'esprit Mix Midi – Who What Wear offers a gorgeous sheath of sheer loveliness, with extra texture added in all the right places. Long sleeve design suits the midi-length perfectly; high-neck collar lets you layer anything you like underneath without a competing neckline.","rating":3,"tags":["dresswear","women"],"size":["M","L"],"category":"dresswear","colors":["white","gray"]},{"id":20,"name":"Women's Ugly Holiday Sweater","pictures":["shop/dresswear/c.jpg","shop/dresswear/c1.jpg"],"stock":10,"price":220,"discount":10,"salePrice":210,"description":"Ring in the holiday cheer with this Ugly Holiday Sweater Dress by Xhilaration. The not-so-ugly holiday dress has a cute Mrs. Claus design with a playful cold-shoulder twist. Pair this holiday dress with knee-high boots, or wear with tights and heels for a cute look at your next ugly sweater party.","rating":1,"tags":["women","dresswear"],"size":["XL"],"category":"dresswear","colors":["orange","green"]},{"id":21,"name":"Girls' Long Sleeve Graphic T-Shirt – White","pictures":["shop/girls/a.jpg","shop/girls/a1.jpg","shop/girls/a2.jpg","shop/girls/a3.jpg"],"stock":25,"price":150,"discount":30,"salePrice":120,"description":"The Star Wars Forces of Destiny Sequin Long-Sleeve Graphic T-Shirt lets your little Jedi-in-training show off her allegiance with style and intergalactic flair. She'll love being a member of the Resistance like Rey, and the cool sequin logo adds a finishing touch that's out of this world. Pair this cool Star Wars tee with other Forces of Destiny apparel for a look that lets her conquer each day with confidence and style.","rating":4,"tags":["girls","kids","clothing"],"size":["L","XL"],"category":"girls","colors":["white","gray"]},{"id":22,"name":"Girls' Textured Sweater","pictures":["shop/girls/b.jpg","shop/girls/b1.jpg","shop/girls/b2.jpg","shop/girls/b3.jpg"],"stock":70,"price":330,"discount":150,"salePrice":200,"description":"Your little gal will be able to take on her day in style without losing out on any comfort with this Textured Sweater from art class. The girls' knit sweater features a simple knit that's elevated by the braids on each side of the front. Pairing perfectly with any of her favorite bottoms, this sweater will become an instant staple in her closet.","rating":3,"tags":["girls","kids","outfits"],"size":["M","L"],"category":"girls","colors":["green","black"]},{"id":23,"name":"Women's Velvet Strappy Romper","pictures":["shop/jumpsuits/a.jpg","shop/jumpsuits/a1.jpg"],"stock":0,"price":770,"discount":250,"salePrice":500,"description":"Dare to wear a bold one-piece made of a unique fabric with the Velvet Strappy Romper from Xhilaration. Fitted around the waist and loose in the legs, this fashionable romper will accentuate your figure while helping you handle warm weather. Delicate criss-cross straps come together on the back and over the shoulders into a soft v-neck that's perfect for showing off your impeccable style.","rating":2,"tags":["clothing","women"],"size":["S","L","XL"],"category":"women","colors":["pink","yellow"]},{"id":24,"name":"Women's Satin Jumpsuit","pictures":["shop/jumpsuits/b.jpg","shop/jumpsuits/b1.jpg"],"stock":150,"price":289,"discount":53,"salePrice":217,"description":"Mix up your formal style with a chic update with the Satin Jumpsuit from Xhilaration. This short-sleeve jumpsuit features a flattering surplice neckline with a side tie, a fitted waistline and sleek wide-leg pants. Just slip on some chunky heels and jewelry and you're ready to take on anything from an elegant date night to a holiday party.","rating":4,"tags":["clothing","jumpsuits"],"size":["S","XL"],"category":"jumpsuits","colors":[]},{"id":25,"name":"Women's Cheers Pullover","pictures":["shop/juniors/a.jpg","shop/juniors/a1.jpg"],"stock":6,"price":800,"discount":30,"salePrice":500,"description":"Bring a pop of sweet color and some elegant style to your day with the Walk-Thru Romper Maxi from Xhilaration.","rating":5,"tags":["juniors","clothing","women"],"size":["L","XL"],"category":["juniors"],"colors":["black","green"]},{"id":26,"name":"Women's Long Sleeve Sweatshirt With Bow","pictures":["shop/juniors/b.jpg","shop/juniors/b1.jpg"],"stock":1,"price":1569,"discount":369,"salePrice":1200,"description":"Bring the perfect mix of style and comfort to your wardrobe with the Metallic Sweatshirt with Bow from Xhilaration. This cozy cream sweater adds a fun look with the metallic accents and bow-tied detail on the sleeves. Just slip into some skinny jeans and booties for a look that's ready to take on the day.","rating":3,"tags":["women","juniors"],"size":["M","L"],"category":"juniors","colors":["white","pink"]},{"id":27,"name":"Girls' Shine Stripe Long Sleeve Ruffle Top","pictures":["shop/kids/a.jpg","shop/kids/a1.jpg","shop/kids/a2.jpg"],"stock":33,"price":1500,"discount":500,"salePrice":1000,"description":"TheGirls' Shine Stripe Long Sleeve Ruffle Top from C9 Champion® features brushed fabric with Duo Dry® wicking technology that is great for outdoor workouts in cool weather.","rating":4,"tags":["clothing","girls","kids"],"size":["M","L","XL"],"category":"kids","colors":["red","pink"]},{"id":28,"name":"Girls' Long Sleeve Graphic T-Shirt – White","pictures":["shop/kids/b.jpg","shop/kids/b1.jpg"],"stock":17,"price":322,"salePrice":161,"discount":167,"description":"The Star Wars Forces of Destiny Sequin Long-Sleeve Graphic T-Shirt lets your little Jedi-in-training show off her allegiance with style and intergalactic flair. She'll love being a member of the Resistance like Rey, and the cool sequin logo adds a finishing touch that's out of this world. Pair this cool Star Wars tee with other Forces of Destiny apparel for a look that lets her conquer each day with confidence and style.","rating":2,"tags":["clothing","girls","kids","outfits"],"size":["S"],"category":"kids","colors":["white","black"]},{"id":29,"name":"Men's Standard Fit Short Sleeve Crew T-Shirt","pictures":["shop/men/a.jpg","shop/men/a1.jpg","shop/men/a2.jpg"],"stock":14,"price":390,"discount":180,"salePrice":210,"description":"Go back to the basics and clean up your look with this Short-Sleeve Crewneck T-Shirt from Goodfellow & Co. The soft, washed fabric will keep you comfortable, while the fitted style welcomes a sleek edge. This tee comes in a simple solid color, making it easy to mix in with your existing clothing. Throw on a pair of jeans and gray chukka boots to create a simple but put-together outfit.","rating":1,"tags":["clothing","men"],"size":["S","M","L","XL"],"category":"clothing","colors":["green","yellow"]},{"id":30,"name":"Men's Standard Fit Short Sleeve V-Neck T-Shirt","pictures":["shop/men/b.jpg","shop/men/b1.jpg","shop/men/b2.jpg"],"stock":4,"price":1600,"discount":400,"salePrice":1200,"description":"Casual days are made even better with good style, so slip into the Heathered Short-Sleeve V-Neck T-Shirt from Goodfellow & Co. and start your day right. This ultra-soft heathered tee brings a cool look with the V-neckline and heathered color — just pair it with jeans for a casual day, or slip into chinos when you want to mix things up.","rating":4,"tags":["men","clothing"],"size":["M","L","XL"],"category":"men","colors":["red","yellow"]},{"id":31,"name":"Men's Standard Fit Short Sleeve Crew T-Shirt","pictures":["shop/men/c.jpg","shop/men/c1.jpg","shop/men/c2.jpg"],"stock":80,"price":1300,"discount":700,"salePrice":600,"description":"Whether it's a casual day at the office or a night out with the guys, keep your look easy and comfortable with the Short-Sleeve Crewneck T-Shirt from Goodfellow & Co. With the heathered design, this simple tee brings a cool look to even the most casual outfits — just pair it with chinos and sneakers for a look that's ready to take on anything.","rating":5,"tags":["men","clothing"],"size":["S"],"category":"men","colors":["black","red"]},{"id":32,"name":"Women's Jacquard Ruffle Sleeve Fit & Flare Dress","pictures":["shop/new-arrivals/a.jpg","shop/new-arrivals/a1.jpg"],"stock":20,"price":200,"discount":10,"salePrice":390,"description":"Bring some versatile style to your closet with the Jacquard Ruffle-Sleeve Fit-and-Flare Dress from Xhilaration. This cobalt blue dress is decorated with sweet ruffle sleeves and a ribbon across the back for fun and flirty style. Wear with cut-out booties for a casual date night or strappy heels and a sparkling clutch for the next wedding you attend.","rating":4,"tags":["clothing","new-arrivals","women"],"size":["M"],"category":"new-arrivals","colors":["blue","pink"]},{"id":33,"name":"Women's Robes – Gray","pictures":["shop/new-arrivals/b.jpg","shop/new-arrivals/b1.jpg"],"stock":5,"price":200,"discount":70,"salePrice":130,"description":"From getting ready for your day to cozying up before bed to simply lazing around on the weekends, you'll love doing so in ultimate comfort wearing the Plush Robe from Gilligan & O'Malley. This long-sleeve robe features an oh-so soft, heavyweight fabric that helps keep you nice and warm on chilly mornings and evenings. It's the perfect piece for wearing as you get ready for your day, just as much as it's comfy to pair with PJs on a snoozy Sunday morning. Plus, thanks to the below-the-knee cut and self-tie waistline, you'll get extra warmth and a custom fit wearing this cozy plush robe.","rating":3,"size":["M","L","XL"],"tags":["new-arrivals","women"],"category":"new-arrivals","colors":["gray","white"]},{"id":34,"name":"Women's Cold-Shoulder Bow-Sleeve Sweater Dress","pictures":["shop/new-arrivals/c.jpg","shop/new-arrivals/c1.jpg"],"stock":8,"price":320,"discount":160,"salePrice":160,"description":"Take your favorite summer style right into the cooler seasons with the Cold-Shoulder Bow-Sleeve Sweater Dress from Xhilaration. This long-sleeve sweater dress makes a versatile addition to your wardrobe thanks to its timeless color and ability to transition your look from season to season as well as to and from any occasion. A darling bow detail decorates the fashionable cold-shoulder design, bringing just a hint of sweetness to your everyday style. On a warm day, wear the dress on its own paired with chunky ankle boots, then layer with tights once it starts to get cool.","rating":1,"tags":["clothing","new-arrivals","women"],"size":["M","L","XL"],"category":"new-arrivals","colors":["black","red"]},{"id":35,"name":"Girls' Long Sleeve Ruffle Top – Cream","pictures":["shop/outfits/a.jpg","shop/outfits/a1.jpg"],"stock":90,"price":400,"discount":30,"salePrice":370,"description":"Your stylish chick will love making this Long-Sleeve Ruffle Top from art class a staple in her wardrobe. In cream, this long-sleeve tee has a ruffle hem that's longer in the front and back than on the sides, a heart graphic on the chest and a positive message on the back underlined in stars. Whether she pairs this shirt with leggings or jeans, just have her slip on some lace-up combat boots to give it a fun edge.","rating":2,"tags":["clothing","girls","kids","outfits"],"size":["S","M"],"category":"outfits","colors":["white"]},{"id":36,"name":"Girls' Cold Shoulder Short Sleeve T-Shirt with Tulle – Orange","pictures":["shop/outfits/b.jpg","shop/outfits/b1.jpg","shop/outfits/b2.jpg"],"stock":46,"price":230,"discount":110,"salePrice":115,"description":"Your little fashionista will love rocking this Cold-Shoulder T-Shirt with Tulle from art class. This orange tee features a peace symbol, tulle accents on the shoulders and the phrase “Peace Squad.” Whether she pairs this with a skirt or jeans, she'll be as stylish as she is comfy. Just have her slip on some sneakers, and she'll be ready to take on the day.","rating":5,"tags":["girls","kids","outfits"],"size":["S","M"],"category":"kids","colors":["yellow","pink"]},{"id":37,"name":"Women's Flannel Sleep shirt","pictures":["shop/pajamas-robes/a.jpg","shop/pajamas-robes/a1.jpg"],"stock":34,"price":480,"discount":30,"salePrice":240,"description":"Keep warm all night long – even when cold weather hits – in this Red Buffalo Flannel Sleepshirt from Xhilaration. This red and black plaid nightgown pairs perfectly with your bold personality, and the button-up style and chest pocket give it a classic flannel shirt look. Whether you're wearing it by itself or over some leggings to keep extra warm, you're sure to have a cozy night's sleep in this piece.","rating":3,"tags":["clothing","pajamas-robes","women"],"size":["M","L"],"category":"pajamas-robes","colors":["red","black"]},{"id":38,"name":"Women's 2pc Pajama Set – Almond Cream","pictures":["shop/pajamas-robes/b.jpg","shop/pajamas-robes/b1.jpg"],"stock":40,"price":210,"discount":100,"salePrice":120,"description":"There's nothing better than cozying up for bed in comfy-cute PJs like the Two-Piece Pajama Set from Gilligan & O'Malley. Featuring a cotton-blend construction, these two-piece PJs will keep you warm and comfortable from season to season. With just enough stretch to keep you freely moving throughout the night, along with a lively pattern that brightens up your sleepwear, you'll always be ready to cuddle up under the covers for a cozy night's sleep.","rating":1,"tags":["pajamas-robes","women"],"size":["M"],"category":"pajamas-robes","colors":["white","blue"]},{"id":39,"name":"Men's Joseph Captoe Dress Shoe","pictures":["shop/shoes/a.jpg","shop/shoes/a1.jpg","shop/shoes/a2.jpg"],"stock":30,"price":1200,"discount":230,"salePrice":900,"description":"A great outfit is in the details, and the Joseph Cap-Toe Dress Shoe from Goodfellow & Co. is the perfect detail when you want to keep your look high-class. These dressy shoes are the perfect finishing touch to your work outfit — just pair them with a long-sleeve button-down shirt and trousers and head into a sleek day.","rating":4,"tags":["shoes"],"size":["7","8","9"],"category":"shoes","colors":[]},{"id":40,"name":"Women's Cozy Leisure Top","pictures":["shop/women/a.jpg","shop/women/a1.jpg","shop/women/a2.jpg"],"stock":2,"price":635,"discount":362,"salePrice":456,"description":"Soften things up in the sweetest style when the weather turns colder with the Cozy Leisure Top from A New Day. This terry sweater keeps a simple design that can be dressed up or down, while the cutout on the back and the tied closure add the right amount of detail. Pair this warm sweater with skinny jeans and sneakers for an easy day out with friends.","rating":5,"tags":["athleisure","women"],"size":["S","M","XL"],"category":"women","colors":["pink","white"]},{"id":41,"name":"Women's Crochet Bell Sleeve Dress","pictures":["shop/women/b.jpg","shop/women/b1.jpg"],"stock":3,"price":200,"salePrice":120,"discount":80,"description":"For a casual look that's still as chic as you are, put on the Crochet Bell-Sleeve Dress from Knox Rose. This V-neck dress is accented with crocheted lace around the neckline, as well as crochet dot trim lining the bells of the sleeves. Layer over patterned leggings and riding boots or tights and booties for looks that will keep you comfortable and stylish from brunch with friends to a trip through the farmers market.","rating":2,"size":["S","M"],"tags":["dresswear","clothing","women"],"category":"women","colors":["green","blue"]},{"id":42,"name":"Women's Ruffle Wrap Dress","pictures":["shop/women/c.jpg","shop/women/c1.jpg","shop/women/c2.jpg"],"stock":3,"price":200,"discount":40,"salePrice":160,"description":"Steal the show in this attention grabbing Shift-Dress from Who What Wear. With intricate print along the back, neckline and bottom hem, all eyes will be on you.","rating":5,"tags":["dresswear","clothing","women"],"size":["S","M","L"],"category":"women","colors":["red","blue"]}],"detail_products":[]},"filters":{"category":[],"size":[],"color":[],"artist_ID":["excitedlybored"],"ratings":"","value":{"min":150,"max":1050},"search":"","sortOrder":""},"ReducersIntl":{"locale":"en"}}
Use an in memory cache to retrieve data from backend
The product details should be stored in MySQL server as a master data. Since the data will be read-heavy, it should be read from a cache like Redis or memcahed. The cache should reduce the load on MySQL server and it (MySQL) should only be accessed if the data is not found in the cache.
the cache should be updated when master data is altered in MySQL
Edit: To further reduce API hits, use session storage or some sort of Store management like Redux or Mobx to store the data in the front end client (Only if the change of data is not crucial, like product details can be stored in front end but not the price since it's change could lead to failure).
Using React Js you can fetch data easily using componentDidMount() Like this.
i just create a dummy api from your database and i implemented this in react js.
class Shop extends Component {
constructor(props) {
super(props);
this.state = {
product: []
};
}
async componentDidMount() {
try {
// fetch Api url using `fetch`
const res = await fetch(`http://www.mocky.io/v2/5e0201922f00003688dcd4e5`);
const product = await res.json();
console.log(product);
this.setState({
product: product.data.products
});
} catch (e) {
console.log(e);
}
}
render() {
const { product } = this.state;
if (product.length === 0)
return (
<p>
Loading ...
</p>
);
return (
<ul>
// After Using `map` you can display your all data
{product.map(c => (
<li key={c.id}>{c.name}</li>
))}
</ul>
)}}
export default Shop;
Related
First Apache Server, Webpage Images Missing
I just built my first AWS Apache Server and uploaded my website from my school project. The site works in Dreamweaver. However on my Apache server only some of the images appear. They all have the same path and are contained in the same folder /var/www/html/images. Some appear as intended, others are a broken link. Any ideas why it's not working? To get css to load I had to move my css folder. With the images some work fine while others do not. They are roughly the same size files. This is the code for one of the non working images: <img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo"> Here is the whole page: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/styles.css"> <!-- favicon code --> <link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png"> <link rel="manifest" href="../images/site.webmanifest"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <title>Rock list</title> </head> <body> <h1>List of Rocks and Minerals</h1> <figure> <figcaption>Description of Jasper</figcaption> <div class="bottom_mar"><img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo"><p>Jasper is an opaque rock of virtually any color stemming from the mineral content of the original sediments or ash. Patterns arise during the consolidation process forming flow and depositional patterns in the original silica rich sediment or volcanic ash. Hydrothermal circulation is generally thought to be required in the formation of jasper.</p><p> Jasper can be modified by the diffusion of minerals along discontinuities providing the appearance of vegetative growth, i.e., dendritic. The original materials are often fractured and/or distorted, after deposition, into diverse patterns, which are later filled in with other colorful minerals. Weathering, with time, will create intensely colored superficial rinds.</p><p> The classification and naming of jasper varieties presents a challenge. Terms attributed to various well-defined materials includes the geographic locality where it is found, sometimes quite restricted such as "Bruneau" (a canyon) and "Lahontan" (a lake), rivers and even individual mountains; many are fanciful, such as "forest fire" or "rainbow", while others are descriptive, such as "autumn" or "porcelain". A few are designated by the place of origin such as a brown Egyptian or red African.</p></div> <div class="clear"></div> <figcaption>Description of Amethyst</figcaption> <div class="bottom_mar"><img src="../images/amethyst2.jpg" alt="Uruguayan Amethyst" class="list_photo"><p>Amethyst was used as a gemstone by the ancient Egyptians and was largely employed in antiquity for intaglio engraved gems.</p><p>The Greeks believed amethyst gems could prevent intoxication, while medieval European soldiers wore amethyst amulets as protection in battle in the belief that amethysts heal people and keep them cool-headed. Beads of amethyst were found in Anglo-Saxon graves in England. Anglican bishops wear an episcopal ring often set with an amethyst, an allusion to the description of the Apostles as "not drunk" at Pentecost in Acts 2:15.</p><p>A large geode, or "amethyst-grotto", from near Santa Cruz in southern Brazil was presented at a 1902 exhibition in Düsseldorf, Germany.</p><p>In the 19th century, the color of amethyst was attributed to the presence of manganese. However, since it can be greatly altered and even discharged by heat, the color was believed by some authorities to be from an organic source. Ferric thiocyanate has been suggested, and sulfur was said to have been detected in the mineral.</p></div> <div class="clear"></div> <figcaption>Description of Siva Lingams</figcaption> <div class="bottom_mar"><img src="../images/siva_lingams2.jpg" alt="Siva Lingams" class="list_photo"><p>All traditional lingams come from only one place in the entire world, the Narmada River in India, at Onkar, Mandhata, which is one of the country’s seven sacred holy sites. In this sacred place, lingams wash up on the banks of the river or are carefully brought up from the riverbed.</p><p>India has a long, dry period, and it is at this time, when the river is at its lowest, that the nearby residents go out to the banks of the Narmada and gently pull the stones from their resting places. The lingams are then polished by hand, using methods in accordance with Vedic tradition. Many believe that the lingams are already sacred when they are pulled from the river, but also that the energy given to each lingam during polishing makes it extra special.</p></div> <div class="clear"></div> <figcaption>Description of Desert Rose</figcaption> <div class="bottom_mar"><img src="../images/desert_roses2.jpg" alt="Desert Roses" class="list_photo"><p>Desert rose is the colloquial name given to rose-like formations of crystal clusters of gypsum or baryte which include abundant sand grains. The 'petals' are crystals flattened on the c crystallographic axis, fanning open in radiating flattened crystal clusters.</p><p>The rosette crystal habit tends to occur when the crystals form in arid sandy conditions, such as the evaporation of a shallow salt basin. The crystals form a circular array of flat plates, giving the rock a shape similar to a rose blossom. Gypsum roses usually have better defined, sharper edges than baryte roses. Celestine and other bladed evaporite minerals may also form rosette clusters. They can appear either as a single rose-like bloom or as clusters of blooms, with most sizes ranging from pea sized to 4 inches (10 cm) in diameter.</p><p>The ambient sand that is incorporated into the crystal structure, or otherwise encrusts the crystals, varies with the local environment. If iron oxides are present, the rosettes take on a rusty tone.</p><p>The desert rose may also be known by the names: sand rose, rose rock, selenite rose, gypsum rose and baryte (barite) rose.</p><p>Rose rocks are found in Tunisia, Libya, Morocco, Algeria, Jordan, Saudi Arabia, Qatar, Egypt, the United Arab Emirates, Spain (Fuerteventura, Canary Islands; Canet de Mar, Catalonia; La Almarcha, Cuenca), Mongolia (Gobi), Germany (Rockenberg), the United States (central Oklahoma; Cochise County, Arizona; Texas), Mexico (Ciudad Juárez, Chihuahua), Australia, South Africa and Namibia.</p></div> <div class="clear"></div> <figcaption>Description of Aragonite</figcaption> <div class="bottom_mar"><img src="../images/aragonite2.jpg" alt="Aragonite" class="list_photo"><p>The type location for aragonite is Molina de Aragón in the Province of Guadalajara in Castilla-La Mancha, Spain, for which it was named in 1797. The mineral is not (as often assumed) named for the region of Aragon: Molina de Aragón is located in the historic region of Castile, albeit only 25 kilometers away from the border with Aragon. Aragonite is found in this locality as cyclic twins inside gypsum and marls of the Keuper facies of Triassic.[4] This type of aragonite deposits are very common in Spain, and there are also some in France and Morocco.</p><p>An aragonite cave, the Ochtinská Aragonite Cave, is situated in Slovakia. In the US, aragonite in the form of stalactites and "cave flowers" (anthodite) is known from Carlsbad Caverns and other caves. Massive deposits of oolitic aragonite sand are found on the seabed in the Bahamas.</p><p>Aragonite is the high pressure polymorph of calcium carbonate. As such, it occurs in high pressure metamorphic rocks such as those formed at subduction zones.</p></div> <div class="clear"></div> <figcaption>Description of Apophyllite</figcaption> <div class="bottom_mar"><img src="../images/aphopholite2.jpg" alt="Aphopholite" class="list_photo"><p>The name apophyllite refers to a specific group of phyllosilicates, a class of minerals. Originally, the group name referred to a specific mineral, but was redefined in 1978 to stand for a class of minerals of similar chemical makeup that comprise a solid solution series, and includes the members fluorapophyllite-(K), fluorapophyllite-(Na), hydroxyapophyllite-(K). The name apophyllite is derived from the Greek ἀποφυλλίζω apophylliso, meaning "it flakes off", a reference to this class's tendency to flake apart when heated, due to water loss. These minerals are typically found as secondary minerals in vesicles in basalt or other volcanic rocks. A recent change (2008) in the nomenclature system used for this group was approved by the International Mineralogical Association, removing the prefixes from the species names and using suffixes to designate the species. A subsequent nomenclature change approved by the International Mineralogical Association in 2013 renamed the minerals to include both suffixes and prefixes, as shown above.</p><p>Though relatively unfamiliar to the general public, apophyllites are fairly prevalent around the world, with specimens coming from some of the world's most well-known mineral localities. These localities include: Jalgaon, India; the Harz Mountains of Germany, Mont Saint-Hilaire in Canada, and Kongsberg, Norway, with other locations in Scotland, Ireland, Brazil, Japan, and throughout the United States.</p></div> <div class="clear"></div> <figcaption>Description of Calcite</figcaption> <div class="bottom_mar"><img src="../images/calcite2.jpg" alt="Orange Banded Calcite" class="list_photo"><p>Ancient Egyptians carved many items out of calcite, relating it to their goddess Bast, whose name contributed to the term alabaster because of the close association. Many other cultures have used the material for similar carved objects and applications.</p><p>High-grade optical calcite was used in World War II for gun sights, specifically in bomb sights and anti-aircraft weaponry.[13] Also, experiments have been conducted to use calcite for a cloak of invisibility.</p><p>Calcite is a common constituent of sedimentary rocks, limestone in particular, much of which is formed from the shells of dead marine organisms. Approximately 10% of sedimentary rock is limestone. It is the primary mineral in metamorphic marble. It also occurs in deposits from hot springs as a vein mineral; in caverns as stalactites and stalagmites; and in volcanic or mantle-derived rocks such as carbonatites, kimberlites, or rarely in peridotites.</p><p>Calcite is often the primary constituent of the shells of marine organisms, e.g., plankton (such as coccoliths and planktic foraminifera), the hard parts of red algae, some sponges, brachiopods, echinoderms, some serpulids, most bryozoa, and parts of the shells of some bivalves (such as oysters and rudists). Calcite is found in spectacular form in the Snowy River Cave of New Mexico as mentioned above, where microorganisms are credited with natural formations. Trilobites, which became extinct a quarter billion years ago, had unique compound eyes that used clear calcite crystals to form the lenses.</p><p>The largest documented single crystal of calcite originated from Iceland, measured 7×7×2 m and 6×6×3 m and weighed about 250 tons.</p></div> <div class="clear"></div> <figcaption>Description of Spirit Quartz</figcaption> <div class="bottom_mar"><img src="../images/spirit_quartz2.jpg" alt="Spirit Quartz" class="list_photo"><p>Spirit Quartz is an unusual member of the Quartz family - a community within a stone. Its core, a larger, candle-shaped crystal with a faceted termination point, is encrusted with hundreds of smaller crystal termination points. Also referred to as Cactus Quartz or Porcupine Quartz, it is found only in the Magaliesberg Mountain region of South Africa, first appearing around 2001. Most Spirit Quartz is Amethyst, though Citrine, Smokey, and White Quartz are also mined.</p><p>The word "quartz" is derived from the German word "Quarz", which had the same form in the first half of the 14th century in Middle High German in East Central German[8] and which came from the Polish dialect term kwardy, which corresponds to the Czech term tvrdý ("hard").</p><p>The Ancient Greeks referred to quartz as κρύσταλλος (krustallos) derived from the Ancient Greek κρύος (kruos) meaning "icy cold", because some philosophers (including Theophrastus) apparently believed the mineral to be a form of supercooled ice.[10] Today, the term rock crystal is sometimes used as an alternative name for the purest form of quartz.</p></div> <div class="clear"></div> <figcaption>Description of Moldavite</figcaption> <div class="bottom_mar"><img src="../images/moldavite2.jpg" alt="Moldavite" class="list_photo"><p>Moldavite is a forest green, olive green or blue greenish vitreous silica projectile rock formed by a meteorite impact probably in southern Germany (Nördlinger Ries Crater)[3] that occurred about 15 million years ago. It is a type of tektite.</p><p>Moldavite was introduced to the scientific public for the first time in 1786 as "chrysolites" from Týn nad Vltavou in a lecture by Josef Mayer of Prague University, read at a meeting of the Bohemian Scientific Society (Mayer 1788). Zippe (1836) first used the term "Moldavite", derived from the Moldau (Vltava) river in Bohemia (the Czech Republic), from where the first described pieces came.</p><p>In 1900, F. E. Suess pointed out that the gravel-size moldavites exhibited curious pittings and wrinkles on the surface, which could not be due to the action of water, but resembled the characteristic markings on many meteorites. He attributed the material to a cosmic origin and regarded moldavites as a special type of meteorite for which he proposed the name of tektite. Because of their difficult fusibility, extremely low water content, and chemical composition, the current consensus among earth scientists is that moldavites were formed about 14.7 million years ago during the impact of a giant meteorite in the present-day Nördlinger Ries crater. Splatters of material that was melted by the impact cooled while they were actually airborne and most fell in Bohemia. Currently, moldavites have been found in an area that includes southern Bohemia, western Moravia, the Cheb Basin (northwest Bohemia), Lusatia (Germany), and Waldviertel (Austria). Isotope analysis of samples of moldavites have shown a beryllium-10 isotope composition similar to the composition of Australasian tektites (australites) and Ivory Coast tektites (ivorites).</p></div> </figure> <!-- links to local webpages --> <nav> <ul> <li>Home Page</li> <li>Rock List</li> <li>Rock Images</li> <li>Comments</li> <li>Links</li> <li>Email Me</li> </ul> </nav> </body> </html>
I found that the file extension on some of the pictures was capitalized. These pictures wouldn't load until I changed .JPG to .jpg.
Bootstrap 4.0.0-beta.2 Scrollspy active class not updating with page scrolling
I am trying to create a personal landing page with three sections in HTML. The three sections need to be reachable by links on a nav bar and also update link highlighting according to position in the page. The linking to different parts of the page functionality works fine, however, when the page is scrolled, the highlighting on the link doesn't change to the current part of the page, the highlight and stays stuck at the default one initialized in the HTML. Here is the CodePen link. You can see my code and the preview of the page and see how the blue highlight doesn't update when you scroll down to different parts of the page. Here is my body declaration: <body data-spy="scroll" data-target="#spy" data-offset="70"> and here is my nav bar setup: <!-- Navbar --> <nav id="spy" class="navbar fixed-bottom navbar-light bg-light"> <a class="nav navbar-brand" href="#"><!-- LOGO --></a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#about_me"> about me></a> </li> <li class="nav-item"> <a class="nav-link" href="#portfolio"> portfolio </a> </li> <li class="nav-item"> <a class="nav-link" href="#contact_me"> contact me </a> </li> </ul> </nav> and here is the rest of the body: <div class="bg-light p-3 rounded"> <p id="about_me"> Cat ipsum dolor sit amet, woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now so kitty loves pigs but hunt by meowing loudly at 5am next to human slave food dispenser and stare at wall turn and meow stare at wall some more meow again continue staring . Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce if human is on laptop sit on the keyboard eat too much then proceed to regurgitate all over living room carpet while humans eat dinner or Gate keepers of hell stare at wall turn and meow stare at wall some more meow again continue staring so wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard. Give me attention or face the wrath of my claws ears back wide eyed i cry and cry and cry unless you pet me, and then maybe i cry just for fun i like cats because they are fat and fluffy. Paw at your fat belly decide to want nothing to do with my owner today. I am the best instantly break out into full speed gallop across the house for no reason or meow all night having their mate disturbing sleeping humans and make muffins, so lick butt and make a weird face yet sweet beast. </p> <p> Stare at ceiling lick arm hair. I can haz purrrrrr stare at ceiling sit and stare. Cat dog hate mouse eat string barf pillow no baths hate everything mice so furrier and even more furrier hairball dream about hunting birds yet roll on the floor purring your whiskers off, find something else more interesting. Chase red laser dot lick arm hair yet loves cheeseburgers drink water out of the faucet, fall asleep upside-down attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently so eat owner's food. Caticus cuteicus. Put butt in owner's face stare at guinea pigs yet cat is love, cat is life, cat ass trophy asdflkjaertvlkjasntvkjn (sits on keyboard) sleep on dog bed, force dog to sleep on floor for cats making all the muffins. Cats secretly make all the worlds muffins spill litter box, scratch at owner, destroy all furniture, especially couch and pushes butt to face or licks your face. Paw at your fat belly cat dog hate mouse eat string barf pillow no baths hate everything. </p> </p> </div> <hr> <div class="bg-light p-5 rounded"> <h3 id="portfolio" class="text-center"> portfolio </h3> <p> Leave fur on owners clothes gnaw the corn cob. Kitty loves pigs knock over christmas tree. Ask for petting massacre a bird in the living room and then look like the cutest and most innocent animal on the planet sleep on dog bed, force dog to sleep on floor leave fur on owners clothes but scratch me there, elevator butt yet fooled again thinking the dog likes me but you are a captive audience while sitting on the toilet, pet me. Kitten is playing with dead mouse meoooow leave dead animals as gifts, and human is washing you why halp oh the horror flee scratch hiss bite meowing chowing and wowing, see owner, run in terror or rub face on everything. Weigh eight pounds but take up a full-size bed. Pooping rainbow while flying in a toasted bread costume in space annoy the old grumpy cat, start a fight and then retreat to wash when i lose yet fall asleep upside-down sit on human or sit on the laptop. </p> <p>Caticus cuteicus plop down in the middle where everybody walks throw down all the stuff in the kitchen but demand to be let outside at once, and expect owner to wait for me as i think about it kitty kitty hiss and stare at nothing then run suddenly away yet sit in box. I could pee on this if i had the energy wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Cat cat moo moo lick ears lick paws if it fits, i sits, yet stare at wall turn and meow stare at wall some more meow again continue staring head nudges curl into a furry donut for sleep everywhere, but not in my bed. Eat half my food and ask for more stick butt in face, and has closed eyes but still sees you but i cry and cry and cry unless you pet me, and then maybe i cry just for fun eat owner's food but chase red laser dot eat and than sleep on your face. Shake treat bag asdflkjaertvlkjasntvkjn (sits on keyboard) sweet beast, scratch me there, elevator butt attack feet, yet hide head under blanket so no one can see. </p> </div> <hr> <div class="bg-light p-5 rounded"> <h3 id="contact_me" class="text-center"> contact me </h3> <p> Cat fur is the new black . Leave fur on owners clothes lick the curtain just to be annoying. Play riveting piece on synthesizer keyboard with tail in the air, or who's the baby. Throwup on your pillow claws in your leg dead stare with ears cocked for eat plants, meow, and throw up because i ate plants yet inspect anything brought into the house, and soft kitty warm kitty little ball of furr but eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap. Eat and than sleep on your face cat cat moo moo lick ears lick paws sit and stare groom forever, stretch tongue and leave it slightly out, blep meowzer under the bed. Bleghbleghvomit my furball really tie the room together scream for no reason at 4 am and chew foot stare at wall turn and meow stare at wall some more meow again continue staring yet be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day for walk on car leaving trail of paw prints on hood and windshield. Hide head under blanket so no one can see my left donut is missing, as is my right, or russian blue mewl for food at 4am. Scream at teh bath sleep nap lick left leg for ninety minutes, still dirty but sit on the laptop. Disappear for four days and return home with an expensive injury; bite the vet purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table chase red laser dot vommit food and eat it again yet you have cat to be kitten me right meow paw at your fat belly, so put toy mouse in food bowl run out of litter box at full speed . Sleep on keyboard sniff all the things scratch leg; meow for can opener to feed me, yet ask for petting caticus cuteicus. Your pillow is now my pet bed hide from vacuum cleaner eat and than sleep on your face or purrrrrr meow all night so groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. </p> </div> What am I not doing correctly? I have added data-spy="scroll" data-target="#spy" data-offset="70" to my body and have the id tagged correctly to nav element. I have spent three days on this and have scoured the internet for solutions to similar problems and I compared my code to something that worked and started off with something that worked, but I always end up with this problem. The links in the navbar work fine, but the highlighting of the links doesn't update when the page scrolls to a different part. How do I get the highlighting to update when the page is scrolled?
You need to reference/install popper.js. Bootstrap depends on it. Without it, the JS will error which is causing your scrollspy not to work. Here's the updated working pen with reference to: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js Working on Codeply (auto includes Bootstrap and any dependencies)
How to fix the following error : Error: Element style not allowed as child of element header in this context
I am trying to validate this using an online html validator, every time I run it It gets me an error : : Element style not allowed as child of element header in this context I do not how to fix, i am hopping you guys can help me out. I am trying to validate this using an online html validator, every time I run it It gets me an error : : Element style not allowed as child of element header in this context I do not how to fix, i am hopping you guys can help me out. thanks <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="csspage.css"/> <title>My Home Page</title> </head> <body> <section> <header> <h1>Welcome!!</h1> <style type="text/css"> header{ position:fixed; textsize:80; } </style> </header> <nav> Home | First Page | Second Page | Third Page </nav> <article> <h2 id="idh2">Short Bio (ID element)</h2> <img class ="pic1" src="http://me.byu.edu/sites/default/files/byu_logo.gif" style=float:right alt= "test" /> <p>I go to BYU. I was a 210 student and I can't seem to think of what to write here. Here is random text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Have you ever seen a movie where the main characters are fantastic creatures? Have you ever read a book where there is a powerful warrior whom nobody can defeat but is unlucky in love? It is very likely that you have been exposed to these wonderful tales and enjoyed the stories. Furthermore, believe it or not, most of those stories are based on ancient myth which at the beginning were presented in an oral-poetic tradition and then written in texts. It is in Greek mythology where a rich number of stories of gods and goddess, heroes and kings, and the creation of nature are found. Who has not heard about Achilles in the epic Iliad or the adventures Odysseus in the Odyssey written by Homer or the amazing accomplishments achieved by the courageous Heracles. However, not all the myths are based on war and tragedy. There is also love, the most wonderful feeling of all. One of the most beautiful and tragic stories in Greek mythology is the account of Orpheus and Eurydice found in Ovid’s Metamorphoses.</P> <p>Orpheus was the son of Apollo. The god Apollo taught Orpheus to play the lyre. He learned it to play it so well that even the god was impressed. Nobody could resist the sound and melody of Orpheus’ lyre. Orpheus fell in love with Eurydice, a woman of unique beauty and grace. They sealed their love in marriage, but it was not meant to last for long. One day, as Eurydice was wandering in the forest with a crowd of naiads, she was beaten by a snake and died. Orpheus became so sad that he dared to go down to Tartarus to talk with the lord of underground, Hades and his wife Persephone. As usual, Orpheus played beautiful melodies on his lyre that not only were pleasant to the god but also to all the creatures around. Accompanied by his wife Persephone, Orpheus sang, “My wife is the cause of my journey. A viper she trod on diffused its venom into her body, and robbed her of her best years … I beg you, by these fearful places, by this immense abyss, and the silence of your vast realms, reverse Eurydice’s swift death.” (Ovid, Metamorphoses) The king of the dead and his royal bride could not refuse the prayer given by Orpheus and called Eurydice. Hades accepted the petition but there was one condition that the lovers had to follow. As Orpheus and Eurydice leave Tartarus, He must not look back at her lover. As they were walking upward through a mist of darkness and silence, Orpheus became afraid that Eurydice was no longer there. As soon as Orpheus looked back, Eurydice disappeared and he only saw receding air. Orpheus then became extremely sad for losing his wife for the second time. Orpheus could not bring his wife Eurydice back to his world. This lovely but also tragic story shows what person is willing to do for his lover. Nevertheless, as we will see in the next paragraphs, the myth of Orpheus and Eurydice might not disappear through time since it continually influences art in many ways such as painting, films, and music.</p> <p>The lovely and tragic story of Orpheus and Eurydice has inspired many artists in visual arts especially in painting where a vast number of paintings has been created base on the myth. One of the most notably visual arts created was painted by the famous Flemish artist Peter Paul Rubens named “Orpheus and Eurydice”. In this painting, Rubens is portraying one of the most important scenes of the myth. It refers when Orpheus is meeting with Hades and queen Persephone on quest to bring Eurydice back to his world. Because of the talent, Orpheus has with the lyre, Hades has granted Orpheus’ request. However, the condition was that Orpheus should not look at his wife. Rubens, in an effort to show more than one scene of the myth in just one setting, illustrates Orpheus having his doubts about the promise given by Hades. It shows Orpheus with a lack of faith feeling temped to look behind to see if his wife was there. The artist is trying to show us that it is better to have faith and obey what god has commanded. Otherwise, our desires will not be granted. Rubens use iconography to easily identify hades such as his scepter and the three-headed dog called Cerberus. It is worth to mention that while Orpheus was playing the lyre, the dangerous and aggressive creature was very calm.</p> </article> <h2 class="color">This is a class element</h2> <div class="circle">Transition</div> <img class="pic" src="http://news.byu.edu/sites/default/files/1708-50%2001.jpg" alt="claudio"/> <img class="picenlargement" src="http://news.byu.edu/sites/default/files/1708-50%2001.jpg" alt="claudio"/> <footer> <p> Copyright © 2010 by Bill Shakespeare </p> </footer> </section> </body> </html> <!DOCTYPE HTML> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="csspage.css"/> <title>My Home Page</title> </head> <body> <section> <header> <h1>Welcome!!</h1> <style type="text/css"> header{ position:fixed; textsize:80; } </style> </header> <nav> Home | First Page | Second Page | Third Page </nav> <article> <h2 id="idh2">Short Bio (ID element)</h2> <img class ="pic1" src="http://me.byu.edu/sites/default/files/byu_logo.gif" style=float:right alt= "test" /> <p>I go to BYU. I was a 210 student and I can't seem to think of what to write here. Here is random text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Have you ever seen a movie where the main characters are fantastic creatures? Have you ever read a book where there is a powerful warrior whom nobody can defeat but is unlucky in love? It is very likely that you have been exposed to these wonderful tales and enjoyed the stories. Furthermore, believe it or not, most of those stories are based on ancient myth which at the beginning were presented in an oral-poetic tradition and then written in texts. It is in Greek mythology where a rich number of stories of gods and goddess, heroes and kings, and the creation of nature are found. Who has not heard about Achilles in the epic Iliad or the adventures Odysseus in the Odyssey written by Homer or the amazing accomplishments achieved by the courageous Heracles. However, not all the myths are based on war and tragedy. There is also love, the most wonderful feeling of all. One of the most beautiful and tragic stories in Greek mythology is the account of Orpheus and Eurydice found in Ovid’s Metamorphoses.</P> <p>Orpheus was the son of Apollo. The god Apollo taught Orpheus to play the lyre. He learned it to play it so well that even the god was impressed. Nobody could resist the sound and melody of Orpheus’ lyre. Orpheus fell in love with Eurydice, a woman of unique beauty and grace. They sealed their love in marriage, but it was not meant to last for long. One day, as Eurydice was wandering in the forest with a crowd of naiads, she was beaten by a snake and died. Orpheus became so sad that he dared to go down to Tartarus to talk with the lord of underground, Hades and his wife Persephone. As usual, Orpheus played beautiful melodies on his lyre that not only were pleasant to the god but also to all the creatures around. Accompanied by his wife Persephone, Orpheus sang, “My wife is the cause of my journey. A viper she trod on diffused its venom into her body, and robbed her of her best years … I beg you, by these fearful places, by this immense abyss, and the silence of your vast realms, reverse Eurydice’s swift death.” (Ovid, Metamorphoses) The king of the dead and his royal bride could not refuse the prayer given by Orpheus and called Eurydice. Hades accepted the petition but there was one condition that the lovers had to follow. As Orpheus and Eurydice leave Tartarus, He must not look back at her lover. As they were walking upward through a mist of darkness and silence, Orpheus became afraid that Eurydice was no longer there. As soon as Orpheus looked back, Eurydice disappeared and he only saw receding air. Orpheus then became extremely sad for losing his wife for the second time. Orpheus could not bring his wife Eurydice back to his world. This lovely but also tragic story shows what person is willing to do for his lover. Nevertheless, as we will see in the next paragraphs, the myth of Orpheus and Eurydice might not disappear through time since it continually influences art in many ways such as painting, films, and music.</p> <p>The lovely and tragic story of Orpheus and Eurydice has inspired many artists in visual arts especially in painting where a vast number of paintings has been created base on the myth. One of the most notably visual arts created was painted by the famous Flemish artist Peter Paul Rubens named “Orpheus and Eurydice”. In this painting, Rubens is portraying one of the most important scenes of the myth. It refers when Orpheus is meeting with Hades and queen Persephone on quest to bring Eurydice back to his world. Because of the talent, Orpheus has with the lyre, Hades has granted Orpheus’ request. However, the condition was that Orpheus should not look at his wife. Rubens, in an effort to show more than one scene of the myth in just one setting, illustrates Orpheus having his doubts about the promise given by Hades. It shows Orpheus with a lack of faith feeling temped to look behind to see if his wife was there. The artist is trying to show us that it is better to have faith and obey what god has commanded. Otherwise, our desires will not be granted. Rubens use iconography to easily identify hades such as his scepter and the three-headed dog called Cerberus. It is worth to mention that while Orpheus was playing the lyre, the dangerous and aggressive creature was very calm.</p> </article> <h2 class="color">This is a class element</h2> <div class="circle">Transition</div> <img class="pic" src="http://news.byu.edu/sites/default/files/1708-50%2001.jpg" alt="claudio"/> <img class="picenlargement" src="http://news.byu.edu/sites/default/files/1708-50%2001.jpg" alt="claudio"/> <footer> <p> Copyright © 2010 by Bill Shakespeare </p> </footer> </section> </body> </html>
tags can only appear in the tag. So trying moving your style gats to the head. <link rel="stylesheet" type="text/css" href="csspage.css"/> <title>My Home Page</title> <style type="text/css"> header{ position:fixed; textsize:80; } </style> </head>
Last margin ignored on CSS3 columns
Hi im trying to make horizontally "paged" text. I.e. the container has fixed height and should include n fixed width horizontally scrolling blocks. I am using css3 columns for that. Works nicely, but ignores last margin/padding, i.e. if you scroll all the way to the right, last column is flush with edge of screen which is not obviously what I want DEMO: https://jsfiddle.net/d1ae6uet/ #foo { column-width: 500px; height: 500px; column-gap: 50px; padding: 50px; } <div id="foo"> <p> </p> <p> Produced by G. Fuhrman </p> <p> LEAVES OF GRASS </p> <p> By Walt Whitman </p> <p> Come, said my soul, Such verses for my Body let us write, (for we are one,) That should I after return, Or, long, long hence, in other spheres, There to some group of mates the chants resuming, (Tallying Earth's soil, trees, winds, tumultuous waves,) Ever with pleas'd smile I may keep on, Ever and ever yet the verses owning--as, first, I here and now Signing for Soul and Body, set to them my name, </p> <p> Walt Whitman </p> <p> BOOK I. INSCRIPTIONS </p> <h2> <a name='chapter_90'></a> BOOK I. INSCRIPTIONS </h2> <p> One's-self I sing, a simple separate person, Yet utter the word Democratic, the word En-Masse. </p> <p> Of physiology from top to toe I sing, Not physiognomy alone nor brain alone is worthy for the Muse, I say the Form complete is worthier far, The Female equally with the Male I sing. </p> <p> Of Life immense in passion, pulse, and power, Cheerful, for freest action form'd under the laws divine, The Modern Man I sing. </p> <p> As I Ponder'd in Silence </p> <p> As I ponder'd in silence, Returning upon my poems, considering, lingering long, A Phantom arose before me with distrustful aspect, Terrible in beauty, age, and power, The genius of poets of old lands, As to me directing like flame its eyes, With finger pointing to many immortal songs, And menacing voice, What singest thou? it said, Know'st thou not there is but one theme for ever-enduring bards? And that is the theme of War, the fortune of battles, The making of perfect soldiers. </p> <p> Be it so, then I answer'd, I too haughty Shade also sing war, and a longer and greater one than any, Waged in my book with varying fortune, with flight, advance and retreat, victory deferr'd and wavering, (Yet methinks certain, or as good as certain, at the last,) the field the world, For life and death, for the Body and for the eternal Soul, Lo, I too am come, chanting the chant of battles, I above all promote brave soldiers. </p> <p> In Cabin'd Ships at Sea </p> <p> In cabin'd ships at sea, The boundless blue on every side expanding, With whistling winds and music of the waves, the large imperious waves, Or some lone bark buoy'd on the dense marine, Where joyous full of faith, spreading white sails, She cleaves the ether mid the sparkle and the foam of day, or under many a star at night, By sailors young and old haply will I, a reminiscence of the land, be read, In full rapport at last. </p> <p> Here are our thoughts, voyagers' thoughts, Here not the land, firm land, alone appears, may then by them be said, The sky o'erarches here, we feel the undulating deck beneath our feet, We feel the long pulsation, ebb and flow of endless motion, The tones of unseen mystery, the vague and vast suggestions of the briny world, the liquid-flowing syllables, The perfume, the faint creaking of the cordage, the melancholy rhythm, The boundless vista and the horizon far and dim are all here, And this is ocean's poem. </p> <p> Then falter not O book, fulfil your destiny, You not a reminiscence of the land alone, You too as a lone bark cleaving the ether, purpos'd I know not whither, yet ever full of faith, Consort to every ship that sails, sail you! Bear forth to them folded my love, (dear mariners, for you I fold it here in every leaf;) Speed on my book! spread your white sails my little bark athwart the imperious waves, Chant on, sail on, bear o'er the boundless blue from me to every sea, This song for mariners and all their ships. </p> <p> To Foreign Lands </p> <p> I heard that you ask'd for something to prove this puzzle the New World, And to define America, her athletic Democracy, Therefore I send you my poems that you behold in them what you wanted. </p> <p> To a Historian </p> <p> You who celebrate bygones, Who have explored the outward, the surfaces of the races, the life that has exhibited itself, Who have treated of man as the creature of politics, aggregates, rulers and priests, I, habitan of the Alleghanies, treating of him as he is in himself in his own rights, Pressing the pulse of the life that has seldom exhibited itself, (the great pride of man in himself,) Chanter of Personality, outlining what is yet to be, I project the history of the future. </p> <p> To Thee Old Cause </p> <p> To thee old cause! Thou peerless, passionate, good cause, Thou stern, remorseless, sweet idea, Deathless throughout the ages, races, lands, After a strange sad war, great war for thee, (I think all war through time was really fought, and ever will be really fought, for thee,) These chants for thee, the eternal march of thee. </p> <p> (A war O soldiers not for itself alone, Far, far more stood silently waiting behind, now to advance in this book.) </p> <p> Thou orb of many orbs! Thou seething principle! thou well-kept, latent germ! thou centre! Around the idea of thee the war revolving, With all its angry and vehement play of causes, (With vast results to come for thrice a thousand years,) These recitatives for thee,--my book and the war are one, Merged in its spirit I and mine, as the contest hinged on thee, As a wheel on its axis turns, this book unwitting to itself, Around the idea of thee. </p> <p> Eidolons </p> <p> I met a seer, Passing the hues and objects of the world, The fields of art and learning, pleasure, sense, To glean eidolons. </p> <p> Put in thy chants said he, No more the puzzling hour nor day, nor segments, parts, put in, Put first before the rest as light for all and entrance-song of all, That of eidolons. </p> <p> Ever the dim beginning, Ever the growth, the rounding of the circle, Ever the summit and the merge at last, (to surely start again,) Eidolons! eidolons! </p> <p> Ever the mutable, Ever materials, changing, crumbling, re-cohering, Ever the ateliers, the factories divine, Issuing eidolons. </p> <p> Lo, I or you, Or woman, man, or state, known or unknown, We seeming solid wealth, strength, beauty build, But really build eidolons. </p> <p> The ostent evanescent, The substance of an artist's mood or savan's studies long, Or warrior's, martyr's, hero's toils, To fashion his eidolon. </p> <p> Of every human life, (The units gather'd, posted, not a thought, emotion, deed, left out,) The whole or large or small summ'd, added up, In its eidolon. </p> <p> The old, old urge, Based on the ancient pinnacles, lo, newer, higher pinnacles, From science and the modern still impell'd, The old, old urge, eidolons. </p> <p> The present now and here, America's busy, teeming, intricate whirl, Of aggregate and segregate for only thence releasing, To-day's eidolons. </p> <p> These with the past, Of vanish'd lands, of all the reigns of kings across the sea, Old conquerors, old campaigns, old sailors' voyages, Joining eidolons. </p> <p> Densities, growth, facades, Strata of mountains, soils, rocks, giant trees, Far-born, far-dying, living long, to leave, Eidolons everlasting. </p> <p> Exalte, rapt, ecstatic, The visible but their womb of birth, Of orbic tendencies to shape and shape and shape, The mighty earth-eidolon. </p> <p> All space, all time, (The stars, the terrible perturbations of the suns, Swelling, collapsing, ending, serving their longer, shorter use,) Fill'd with eidolons only. </p> <p> The noiseless myriads, The infinite oceans where the rivers empty, The separate countless free identities, like eyesight, The true realities, eidolons. </p> <p> Not this the world, Nor these the universes, they the universes, Purport and end, ever the permanent life of life, Eidolons, eidolons. </p> <p> Beyond thy lectures learn'd professor, Beyond thy telescope or spectroscope observer keen, beyond all mathematics, Beyond the doctor's surgery, anatomy, beyond the chemist with his chemistry, The entities of entities, eidolons. </p> <p> Unfix'd yet fix'd, Ever shall be, ever have been and are, Sweeping the present to the infinite future, Eidolons, eidolons, eidolons. </p> <p> The prophet and the bard, Shall yet maintain themselves, in higher stages yet, Shall mediate to the Modern, to Democracy, interpret yet to them, God and eidolons. </p> <p> And thee my soul, Joys, ceaseless exercises, exaltations, Thy yearning amply fed at last, prepared to meet, Thy mates, eidolons. </p> <p> Thy body permanent, The body lurking there within thy body, The only purport of the form thou art, the real I myself, An image, an eidolon. </p> <p> Thy very songs not in thy songs, No special strains to sing, none for itself, But from the whole resulting, rising at last and floating, A round full-orb'd eidolon. </p> <p> For Him I Sing </p> <p> For him I sing, I raise the present on the past, (As some perennial tree out of its roots, the present on the past,) With time and space I him dilate and fuse the immortal laws, To make himself by them the law unto himself. </p> <p> When I Read the Book </p> <p> When I read the book, the biography famous, And is this then (said I) what the author calls a man's life? And so will some one when I am dead and gone write my life? (As if any man really knew aught of my life, Why even I myself I often think know little or nothing of my real life, Only a few hints, a few diffused faint clews and indirections I seek for my own use to trace out here.) </p> <p> Beginning My Studies </p> <p> Beginning my studies the first step pleas'd me so much, The mere fact consciousness, these forms, the power of motion, The least insect or animal, the senses, eyesight, love, The first step I say awed me and pleas'd me so much, I have hardly gone and hardly wish'd to go any farther, But stop and loiter all the time to sing it in ecstatic songs. </p> <p> Beginners </p> <p> How they are provided for upon the earth, (appearing at intervals,) How dear and dreadful they are to the earth, How they inure to themselves as much as to any--what a paradox appears their age, How people respond to them, yet know them not, How there is something relentless in their fate all times, How all times mischoose the objects of their adulation and reward, And how the same inexorable price must still be paid for the same great purchase. </p> <p> To the States </p> <p> To the States or any one of them, or any city of the States, Resist much, obey little, Once unquestioning obedience, once fully enslaved, Once fully enslaved, no nation, state, city of this earth, ever afterward resumes its liberty. </p> <p> On Journeys Through the States </p> <p> On journeys through the States we start, (Ay through the world, urged by these songs, Sailing henceforth to every land, to every sea,) We willing learners of all, teachers of all, and lovers of all. </p> <p> We have watch'd the seasons dispensing themselves and passing on, And have said, Why should not a man or woman do as much as the seasons, and effuse as much? </p> <p> We dwell a while in every city and town, We pass through Kanada, the North-east, the vast valley of the Mississippi, and the Southern States, We confer on equal terms with each of the States, We make trial of ourselves and invite men and women to hear, We say to ourselves, Remember, fear not, be candid, promulge the body and the soul, Dwell a while and pass on, be copious, temperate, chaste, magnetic, And what you effuse may then return as the seasons return, And may be just as much as the seasons. </p> <p> To a Certain Cantatrice </p> <p> Here, take this gift, I was reserving it for some hero, speaker, or general, One who should serve the good old cause, the great idea, the progress and freedom of the race, Some brave confronter of despots, some daring rebel; But I see that what I was reserving belongs to you just as much as to any. </p> <p> Me Imperturbe </p> <p> Me imperturbe, standing at ease in Nature, Master of all or mistress of all, aplomb in the midst of irrational things, Imbued as they, passive, receptive, silent as they, Finding my occupation, poverty, notoriety, foibles, crimes, less important than I thought, Me toward the Mexican sea, or in the Mannahatta or the Tennessee, or far north or inland, A river man, or a man of the woods or of any farm-life of these States or of the coast, or the lakes or Kanada, Me wherever my life is lived, O to be self-balanced for contingencies, To confront night, storms, hunger, ridicule, accidents, rebuffs, as the trees and animals do. </p> <p> Savantism </p> <p> Thither as I look I see each result and glory retracing itself and nestling close, always obligated, Thither hours, months, years--thither trades, compacts, establishments, even the most minute, Thither every-day life, speech, utensils, politics, persons, estates; Thither we also, I with my leaves and songs, trustful, admirant, As a father to his father going takes his children along with him. </p> </div>
You can simply add margin to last child like this: #foo :last-child { margin-right: 50px; } And here is the working fiddle: https://jsfiddle.net/d1ae6uet/2/
You would want to put some padding on the text itself, by applying it to the p tag. #foo { column-width: 500px; height: 500px; column-gap: 50px; padding: 50px; } #foo > p { padding-right: 50px; } <div id="foo"> <p> </p> <p> Produced by G. Fuhrman </p> <p> LEAVES OF GRASS </p> <p> By Walt Whitman </p> <p> Come, said my soul, Such verses for my Body let us write, (for we are one,) That should I after return, Or, long, long hence, in other spheres, There to some group of mates the chants resuming, (Tallying Earth's soil, trees, winds, tumultuous waves,) Ever with pleas'd smile I may keep on, Ever and ever yet the verses owning--as, first, I here and now Signing for Soul and Body, set to them my name, </p> <p> Walt Whitman </p> <p> BOOK I. INSCRIPTIONS </p> <h2> <a name='chapter_90'></a> BOOK I. INSCRIPTIONS </h2> <p> One's-self I sing, a simple separate person, Yet utter the word Democratic, the word En-Masse. </p> <p> Of physiology from top to toe I sing, Not physiognomy alone nor brain alone is worthy for the Muse, I say the Form complete is worthier far, The Female equally with the Male I sing. </p> <p> Of Life immense in passion, pulse, and power, Cheerful, for freest action form'd under the laws divine, The Modern Man I sing. </p> <p> As I Ponder'd in Silence </p> <p> As I ponder'd in silence, Returning upon my poems, considering, lingering long, A Phantom arose before me with distrustful aspect, Terrible in beauty, age, and power, The genius of poets of old lands, As to me directing like flame its eyes, With finger pointing to many immortal songs, And menacing voice, What singest thou? it said, Know'st thou not there is but one theme for ever-enduring bards? And that is the theme of War, the fortune of battles, The making of perfect soldiers. </p> <p> Be it so, then I answer'd, I too haughty Shade also sing war, and a longer and greater one than any, Waged in my book with varying fortune, with flight, advance and retreat, victory deferr'd and wavering, (Yet methinks certain, or as good as certain, at the last,) the field the world, For life and death, for the Body and for the eternal Soul, Lo, I too am come, chanting the chant of battles, I above all promote brave soldiers. </p> <p> In Cabin'd Ships at Sea </p> <p> In cabin'd ships at sea, The boundless blue on every side expanding, With whistling winds and music of the waves, the large imperious waves, Or some lone bark buoy'd on the dense marine, Where joyous full of faith, spreading white sails, She cleaves the ether mid the sparkle and the foam of day, or under many a star at night, By sailors young and old haply will I, a reminiscence of the land, be read, In full rapport at last. </p> <p> Here are our thoughts, voyagers' thoughts, Here not the land, firm land, alone appears, may then by them be said, The sky o'erarches here, we feel the undulating deck beneath our feet, We feel the long pulsation, ebb and flow of endless motion, The tones of unseen mystery, the vague and vast suggestions of the briny world, the liquid-flowing syllables, The perfume, the faint creaking of the cordage, the melancholy rhythm, The boundless vista and the horizon far and dim are all here, And this is ocean's poem. </p> <p> Then falter not O book, fulfil your destiny, You not a reminiscence of the land alone, You too as a lone bark cleaving the ether, purpos'd I know not whither, yet ever full of faith, Consort to every ship that sails, sail you! Bear forth to them folded my love, (dear mariners, for you I fold it here in every leaf;) Speed on my book! spread your white sails my little bark athwart the imperious waves, Chant on, sail on, bear o'er the boundless blue from me to every sea, This song for mariners and all their ships. </p> <p> To Foreign Lands </p> <p> I heard that you ask'd for something to prove this puzzle the New World, And to define America, her athletic Democracy, Therefore I send you my poems that you behold in them what you wanted. </p> <p> To a Historian </p> <p> You who celebrate bygones, Who have explored the outward, the surfaces of the races, the life that has exhibited itself, Who have treated of man as the creature of politics, aggregates, rulers and priests, I, habitan of the Alleghanies, treating of him as he is in himself in his own rights, Pressing the pulse of the life that has seldom exhibited itself, (the great pride of man in himself,) Chanter of Personality, outlining what is yet to be, I project the history of the future. </p> <p> To Thee Old Cause </p> <p> To thee old cause! Thou peerless, passionate, good cause, Thou stern, remorseless, sweet idea, Deathless throughout the ages, races, lands, After a strange sad war, great war for thee, (I think all war through time was really fought, and ever will be really fought, for thee,) These chants for thee, the eternal march of thee. </p> <p> (A war O soldiers not for itself alone, Far, far more stood silently waiting behind, now to advance in this book.) </p> <p> Thou orb of many orbs! Thou seething principle! thou well-kept, latent germ! thou centre! Around the idea of thee the war revolving, With all its angry and vehement play of causes, (With vast results to come for thrice a thousand years,) These recitatives for thee,--my book and the war are one, Merged in its spirit I and mine, as the contest hinged on thee, As a wheel on its axis turns, this book unwitting to itself, Around the idea of thee. </p> <p> Eidolons </p> <p> I met a seer, Passing the hues and objects of the world, The fields of art and learning, pleasure, sense, To glean eidolons. </p> <p> Put in thy chants said he, No more the puzzling hour nor day, nor segments, parts, put in, Put first before the rest as light for all and entrance-song of all, That of eidolons. </p> <p> Ever the dim beginning, Ever the growth, the rounding of the circle, Ever the summit and the merge at last, (to surely start again,) Eidolons! eidolons! </p> <p> Ever the mutable, Ever materials, changing, crumbling, re-cohering, Ever the ateliers, the factories divine, Issuing eidolons. </p> <p> Lo, I or you, Or woman, man, or state, known or unknown, We seeming solid wealth, strength, beauty build, But really build eidolons. </p> <p> The ostent evanescent, The substance of an artist's mood or savan's studies long, Or warrior's, martyr's, hero's toils, To fashion his eidolon. </p> <p> Of every human life, (The units gather'd, posted, not a thought, emotion, deed, left out,) The whole or large or small summ'd, added up, In its eidolon. </p> <p> The old, old urge, Based on the ancient pinnacles, lo, newer, higher pinnacles, From science and the modern still impell'd, The old, old urge, eidolons. </p> <p> The present now and here, America's busy, teeming, intricate whirl, Of aggregate and segregate for only thence releasing, To-day's eidolons. </p> <p> These with the past, Of vanish'd lands, of all the reigns of kings across the sea, Old conquerors, old campaigns, old sailors' voyages, Joining eidolons. </p> <p> Densities, growth, facades, Strata of mountains, soils, rocks, giant trees, Far-born, far-dying, living long, to leave, Eidolons everlasting. </p> <p> Exalte, rapt, ecstatic, The visible but their womb of birth, Of orbic tendencies to shape and shape and shape, The mighty earth-eidolon. </p> <p> All space, all time, (The stars, the terrible perturbations of the suns, Swelling, collapsing, ending, serving their longer, shorter use,) Fill'd with eidolons only. </p> <p> The noiseless myriads, The infinite oceans where the rivers empty, The separate countless free identities, like eyesight, The true realities, eidolons. </p> <p> Not this the world, Nor these the universes, they the universes, Purport and end, ever the permanent life of life, Eidolons, eidolons. </p> <p> Beyond thy lectures learn'd professor, Beyond thy telescope or spectroscope observer keen, beyond all mathematics, Beyond the doctor's surgery, anatomy, beyond the chemist with his chemistry, The entities of entities, eidolons. </p> <p> Unfix'd yet fix'd, Ever shall be, ever have been and are, Sweeping the present to the infinite future, Eidolons, eidolons, eidolons. </p> <p> The prophet and the bard, Shall yet maintain themselves, in higher stages yet, Shall mediate to the Modern, to Democracy, interpret yet to them, God and eidolons. </p> <p> And thee my soul, Joys, ceaseless exercises, exaltations, Thy yearning amply fed at last, prepared to meet, Thy mates, eidolons. </p> <p> Thy body permanent, The body lurking there within thy body, The only purport of the form thou art, the real I myself, An image, an eidolon. </p> <p> Thy very songs not in thy songs, No special strains to sing, none for itself, But from the whole resulting, rising at last and floating, A round full-orb'd eidolon. </p> <p> For Him I Sing </p> <p> For him I sing, I raise the present on the past, (As some perennial tree out of its roots, the present on the past,) With time and space I him dilate and fuse the immortal laws, To make himself by them the law unto himself. </p> <p> When I Read the Book </p> <p> When I read the book, the biography famous, And is this then (said I) what the author calls a man's life? And so will some one when I am dead and gone write my life? (As if any man really knew aught of my life, Why even I myself I often think know little or nothing of my real life, Only a few hints, a few diffused faint clews and indirections I seek for my own use to trace out here.) </p> <p> Beginning My Studies </p> <p> Beginning my studies the first step pleas'd me so much, The mere fact consciousness, these forms, the power of motion, The least insect or animal, the senses, eyesight, love, The first step I say awed me and pleas'd me so much, I have hardly gone and hardly wish'd to go any farther, But stop and loiter all the time to sing it in ecstatic songs. </p> <p> Beginners </p> <p> How they are provided for upon the earth, (appearing at intervals,) How dear and dreadful they are to the earth, How they inure to themselves as much as to any--what a paradox appears their age, How people respond to them, yet know them not, How there is something relentless in their fate all times, How all times mischoose the objects of their adulation and reward, And how the same inexorable price must still be paid for the same great purchase. </p> <p> To the States </p> <p> To the States or any one of them, or any city of the States, Resist much, obey little, Once unquestioning obedience, once fully enslaved, Once fully enslaved, no nation, state, city of this earth, ever afterward resumes its liberty. </p> <p> On Journeys Through the States </p> <p> On journeys through the States we start, (Ay through the world, urged by these songs, Sailing henceforth to every land, to every sea,) We willing learners of all, teachers of all, and lovers of all. </p> <p> We have watch'd the seasons dispensing themselves and passing on, And have said, Why should not a man or woman do as much as the seasons, and effuse as much? </p> <p> We dwell a while in every city and town, We pass through Kanada, the North-east, the vast valley of the Mississippi, and the Southern States, We confer on equal terms with each of the States, We make trial of ourselves and invite men and women to hear, We say to ourselves, Remember, fear not, be candid, promulge the body and the soul, Dwell a while and pass on, be copious, temperate, chaste, magnetic, And what you effuse may then return as the seasons return, And may be just as much as the seasons. </p> <p> To a Certain Cantatrice </p> <p> Here, take this gift, I was reserving it for some hero, speaker, or general, One who should serve the good old cause, the great idea, the progress and freedom of the race, Some brave confronter of despots, some daring rebel; But I see that what I was reserving belongs to you just as much as to any. </p> <p> Me Imperturbe </p> <p> Me imperturbe, standing at ease in Nature, Master of all or mistress of all, aplomb in the midst of irrational things, Imbued as they, passive, receptive, silent as they, Finding my occupation, poverty, notoriety, foibles, crimes, less important than I thought, Me toward the Mexican sea, or in the Mannahatta or the Tennessee, or far north or inland, A river man, or a man of the woods or of any farm-life of these States or of the coast, or the lakes or Kanada, Me wherever my life is lived, O to be self-balanced for contingencies, To confront night, storms, hunger, ridicule, accidents, rebuffs, as the trees and animals do. </p> <p> Savantism </p> <p> Thither as I look I see each result and glory retracing itself and nestling close, always obligated, Thither hours, months, years--thither trades, compacts, establishments, even the most minute, Thither every-day life, speech, utensils, politics, persons, estates; Thither we also, I with my leaves and songs, trustful, admirant, As a father to his father going takes his children along with him. </p> </div>
Html Paragraph styling: making it like this
how can I make a paragraph format look like this using this code? Thank you! :) <div class="col-sm-6 col-md-7 col-lg-7 sec-about-text"> <p> Healthy Endings came to life with the best intentions to create all natural snacks, organic when possible, raw and vegan with absolutely no preservatives. We love to snack periodically through out the day and we're always working on creating the most delicious and nutritious snacks to satisfy those cravings. "What fun is snacking if the snacks donít taste orgasmically good!"</p> <p> Cherie Spencer, the founder and creator of Healthy Endings snacks received her certification as a Health Educator from the world renowned Hippocrates Health Institute in West Palm Beach, Florida and holds a Bachelors in Healthcare Administration from Florida Atlantic University. She also received a culinary certification from Atlantic County VoTech and holds a SafeServ Food Manager Certification/License. She is a holistic chef specializing in raw, living foods and loves to prepare and share healthy food with family and friends.</p> </div>
Here is a jsfiddle showing the basic process: https://jsfiddle.net/jq16sfjg/ .floated { margin: 10px; float: right; } I will leave it up to you to style the font, whitespace, and colors. Basically, you just need to float the text that breaks the paragraph to the right.