Create A Material Card

Create A Material Card

Create a card-based interface using HTML & CSS with the following content: Title: Museum and Art Gallery of the Northern Territory Image Text The main museum of the Northern Territory, MAGNT presents both local and national exhibitions. The museum hosts internationally renowned scientific and cultural collections and is home to sweetheart the crocodile. Actions Phone: Email: [email protected] · The card should follow Google’s material card design rules ( ) and be clear on a range of devices. · Your solution should be different from that of other members of your team. Create a second card with the same design (same CSS and HTML structure) using content from your website. Present both cards in a container where they appear side by side when there is space and one above the other when there is not room for them. Submission · Individual submissions are required · Ensure your submissions are appropriately labelled. · Upload your code to a folder called “prac 4†in a github repository called “HIT226†(or a similarly clear title). · Ensure your solution is available on spinetail or github pages · Submit the link to your github repository and hosted solution (on spinetail or github pages) to Learnline: Submit Here

Paper For Above instruction

/ Reset some default styles /

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: 'Roboto', sans-serif;

background-color: #f5f5f5;

padding: 20px;

}

/ Container for the cards /

.cards-container {

display: flex;

flex-wrap: wrap;

gap: 20px;

justify-content: center;

}

/ Material card styling following Google Material Design principles /

.material-card {

background-color: #ffffff;

box-shadow: 0 2px 5px rgba(0,0,0,0.26);

border-radius: 4px;

width: 300px;

display: flex;

flex-direction: column;

overflow: hidden;

transition: box-shadow 0.3s ease;

}

.material-card:hover {

box-shadow: 0 4px 10px rgba(0,0,0,0.3);

}

/ Card header styling /

.card-header {

padding: 16px;

background-color: #ffffff;

}

.card-title {

font-size: 1.25rem;

font-weight: 500;

margin-bottom: 8px;

}

/ Card media/image styling /

.card-media {

width: 100%;

height: 180px;

object-fit: cover;

}

/ Card content styling /

.card-content {

padding: 16px;

font-size: 0.95rem;

color: #333;

}

/ Card actions styling /

.card-actions {

padding: 16px;

display: flex;

flex-direction: column;

gap: 8px;

background-color: #fafafa;

}

.action {

display: flex;

align-items: center;

font-size: 0.9rem;

}

.action span {

margin-left: 8px;

color: #555;

}

/ Responsive adjustments /

@media (max-width: 650px) {

.cards-container {

flex-direction: column;

align-items: center;

}

}

Create A Material Card