Scribd
Upload
2 views5 pages

Border-Box: Margin Padding Box-Sizing

Uploaded by

Miki Tariku
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

Border-Box: Margin Padding Box-Sizing

Uploaded by

Miki Tariku
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

*{

margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
display: block;
max-width: 100%;
height: auto;
}
.nowrap{
white-space: nowrap;
}
html{scroll-behavior: smooth;}

body{
font-family: sans-serif;
font-size: 1.5rem;
min-height: 100vh;
background-color: #475569;
background-image: radial-gradient(whitesmoke,#475569);
display: flex;
flex-direction: column;
}

/* header,nav,main,footer{
display: grid;
place-content: center;
grid-template-columns: 100%;
text-align: center;
} */

header,footer{
position: sticky;
background-color: #1E293B;
color: whitesmoke;
text-align: center;

}
header{
top: 0;
}

nav{
background-color: #fff;
/* color: #000; */
padding: 0.5rem;
border-bottom: 2px solid #000;
font-weight: bolder;
display: flex;
justify-content: space-evenly;
}
nav a, nav a:visited{
color: #000;
}
nav a:hover, nav a:focus{
color: hsla(0, 0%, 20%, 0.6);
}
main{
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 1rem;
}
footer{
bottom: 0;
}

.card{
scroll-margin: 8rem;
width: min(100%, 350px);
background-color: #cbd5e1;
border: 2px solid #000;
border-radius: 15px;
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}

.card figure{
display: flex;
flex-flow: column nowrap;
}
.card img{
border:5px double #333 ;
border-radius: 50%;
}
.card figcaption{
font-weight: bolder;
font-size: 2rem;
margin: 1rem;
text-align: center;
}

@media screen and (min-width:576px){


main{
justify-content: center;
flex-flow: row wrap;
}
.card{
width: min(100%, 400px);
}
.card:last-child{
order: -1;
}
}
@media screen and (min-width:768px){
nav{
display: none;
}
.card{
width: min(100%, 320px);
}
.card figure{
flex-flow: column-reverse;
}
.card figcaption{
margin: 0.1em 0;
}
.card p{
margin-top: 1rem;
}
}
@media screen and (min-width:992px){
.card{
width: min(100%, 400px);

}
.card:nth-child(2){
order: -1;
}
}
@media screen and (min-width:1200px){
.card{
width: min(calc(33% - 1rem), 500px);
}
}

@media screen and (max-height:425px) and (min-aspect-ratio:7/4){


h1{
font-size: 1.5rem;
}

nav{
display: none;
}
main{
flex-flow: nowrap;
justify-content: space-evenly;
align-items: stretch;
}
.card{
width: min(calc(33% - 0.25),200px);
}
.card figcaption,.card p{
font-size: 1.25rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Group</title>
</head>
<body>
<header>
<h1>Our Group</h1>
<nav>
<a href="#profile1">Miki</a>
<a href="#profile2">Mila</a>
<a href="#profile3">Minte</a>
</nav>
</header>
<main>
<article id="profile1" class="card">
<figure>
<img src="image/miki.jpg" alt="Miki. T" width="500" height="500">
<figcaption>Miki. T</figcaption>
</figure>
<p><q>I am coder</q></p>
</article>

<article id="profile2" class="card">


<figure>
<img src="image/mila.jpg" alt="Mila. D" width="500" height="500">
<figcaption>Mila. D</figcaption>
</figure>
<p><q>I am devloper</q></p>
</article>

<article id="profile3" class="card">


<figure>
<img src="image/menge.jpg" alt="Minte. M" width="500"
height="500">
<figcaption>Minte. <span class="nowrap">M
Mena</span></figcaption>
</figure>
<p><q>I am Designer</q></p>
</article>
</main>
<footer>
<p>&copy;M's Co, </p>
</footer>
</body>
</html>

You might also like