Diskusi M Farhan Al Khiddier

Ditanyakan pada: Studi Kasus Membuet Tabel Pricing Part 5

flexbox media query

boleh dibantu kak, saya ada masalah saat membuat media query seperti di video terkahir, masalahnya flexbox tidak berubah, ada salah dimana ya kodingnya html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

html { font-family: 'open sans', sans-serif; box-sizing: border-box; }

body { background-color: #14fa1e; display: flex; justify-content: center; align-items: center; min-height: 100vh; }

.panel { background-color: aliceblue; border-radius: 10px; padding: 15px 25px; width: 100%; max-width: 960px; flex-direction: column; text-align: center; text-transform: capitalize; }

.pricing-header { color: #888; letter-spacing: 1px; font-weight: 600; }

.pricing-features { margin: 50px 0 15px; color: aqua;

}

.pricing-features-item { font-weight: 600; letter-spacing: 1px; font-size: 12px; line-height: 1.5; padding: 15px 0; border-top: 1px solid aliceblue; }

.pricing-features-item:last-child { border-bottom: 1px solid aliceblue; }

.pricing-price { color: aqua; display: block; font-size: 35px; font-weight: 700; }

.pricing-img { width: 100%; max-width: 100px; }

.pricing-button { border: 1px solid #9881ff; border-radius: 10px; color: #34dfff; display: inline-block; padding: 15px 35px; text-decoration: none; }

.pricing-button:hover, .pricing-button:focus {
background-color: blue; }

.pricing-button.is-featured { background-color: aqua; color: black; }

.pricing-button.is-featured:hover, .pricing-button.is-featured:focus {
background-color: darkblue; }

@media (min-width: 900px) { .panel { color: #9881ff; flex-direction: row; } }