svfero/index.html

## index.html
<!DOCTYPE html>

<html>
  <head>
    <title>SVFERO</title>
    <link rel="shortcut icon" href="https://user-images.githubusercontent.com/103388276/194958634-b3c4fd35-e95f-4089-bf13-fac51faf4e4c.png" type="image/x-icon">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&family=Oi&family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  </head>

  <body>
    <header>
      <div class="logo">
        <img src="https://user-images.githubusercontent.com/103388276/194958634-b3c4fd35-e95f-4089-bf13-fac51faf4e4c.png" alt="">
      </div>
      <nav>
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">SHOP</a></li>
          <li><a href="">GALLERY</a></li>
          <li><a href="">CUSTOM ORDERS</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <div class="container">
        <div class="statement">
          <p>S.V.Fero is a slow fashion brand. Each piece is handmade one of a kind from
             sustainably sourced material, with uniqueness at the forefront of each design.
             By shopping sustainably you are doing your part to intersect the factory to
             landfill pipeline. </p>
        </div>
      </div>

      <div class="container">
        <div class="products">
          <h1>FW2022</h1>
          <div class="photos">
            <div class="pic">
              <img src="https://user-images.githubusercontent.com/103388276/194958695-bf4af8ba-374b-4e5e-9797-d9a43fa2cc8d.JPG" alt="">
            </div>
            <div class="pic">
              <img src="https://user-images.githubusercontent.com/103388276/194958687-73274927-b89f-42fe-a7b3-18af80ac7212.JPG" alt="">
            </div>
            <div class="pic">
              <img src="https://user-images.githubusercontent.com/103388276/194958703-724431e4-0c27-409f-9295-6c3aa2134ce8.JPG" alt="">
            </div>
            <div class="pic">
              <img src="https://user-images.githubusercontent.com/103388276/194958671-8a1e0713-3569-49b3-8580-f224eafb94d2.JPG" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="artist">
          <h1>Meet the Artist</h1>
          <div class="artistpic">
            <img src="https://user-images.githubusercontent.com/103388276/194958662-d17faba8-6cd0-49a8-a440-f6c7a3565d1c.JPG" alt="">
            <p>S.V.Fero was founded by S---, a self taught seamstress. She thrifts every material
            and sews each piece herself, with the hope that the world will embrace slow fashion and shop responsibly.
            </p>
          </div>
        </div>
      </div>
    </main>

    <footer>
      <h1>S.V.FERO</h1>
      <div class="icons">
        <a href="https://www.depop.com/svfero/" target="blank"><img src="https://user-images.githubusercontent.com/103388276/194958614-80e5305d-cfdb-4095-9ad8-38b0cfe3a836.png" alt=""></a>

        <a href="https://www.instagram.com/s.v.fero/" target="blank"><img src="https://user-images.githubusercontent.com/103388276/194958622-c69d06da-1e66-4291-bd37-abaff0f66e52.png" alt=""></a>
      </div>

      <div class="container">
        <div class="copyright">
          <p>©Copyright. All rights reserved</p>
        </div>
        <div class="list">
          <ul>
            <li><a href="">Legal Notice</a></li>
            <li><a href="">Privacy Policy</a></li>
          </ul>
        </div>
      </div>
    </footer>

  </body>
</html>

## styles.css
html{
    font-family: Montserrat;
    text-align: center;
}

body{
    background-color: #FBEDD2;
}

main{
    margin: 3rem;
}

p{
    line-height: 1.75rem;
}

.container {
    margin: 0 auto;
}

h1{
    font-weight: 400;
}

header{
    text-align: center;
    background-color: white;
}

.logo img{
    height: 5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 2rem;
}

header ul{
    list-style-type: none;
    display: inline-flex;
    margin: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

header li{
    padding: 2rem;
}

header a{
    text-decoration: none;
    color: #000;
    padding: 1rem;
}

header a:hover{
    background-color: #FBEDD2;
}

/* statement */

.statement{
    background-color: white;
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

/* products */

.products{
    background-color: white;
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 1rem;
}

.photos{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pic{
    display: flex;
    margin: 1rem;
}

.pic img{
    height: auto;
    width: 100%;
}

/* artist */


.artist{
    background-color: white;
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 1rem;
}

.artistpic{
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.artist img{
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* footer */

footer{
    background-color: white;
    margin-top: 3rem;
}

.icons img{
    width: 2rem;
    margin: 0.5rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.icons img:hover{
    background-color: #FBEDD2;
    cursor: pointer;
}

footer ul{
    list-style-type: none;
    display: inline-flex;
}

footer h1{
    font-size: 1.5rem;
    padding-top: 2rem;
}

.list a{
    text-decoration: none;
    color: #000;
    padding: 1rem;
}

.list a:hover{
    background-color: #FBEDD2;
}

footer .container{
    display: inline-flex;
    width: 100%;
}

.list{
    float: right;
    width: 50%;
}

.copyright{
    float: left;
    background-color: white;
    width: 50%;
}


@media only screen and (min-width: 800px) {
    .pic{
    display: flex;
    margin: 1rem;
    width: 44%;
    }
}

@media only screen and (max-width: 650px) {
    footer .container{
        width: 100%;
        display: block;
        justify-content: center;
        background-color: white;
    }

    .list{
        width: 100%;
        background-color: white;
        font-size: 0.75rem;
    }

    .list ul{
        transform: translate(-0.75rem, -3.5rem);
    }

    .copyright p{
        transform: translate(0.5rem, 2.5rem);
    }

    .copyright{
        background-color: white;
        width: 100%;
    }
}
	<!DOCTYPE html>

	<html>
	<head>
	<title>SVFERO</title>
	<link rel="shortcut icon" href="https://user-images.githubusercontent.com/103388276/194958634-b3c4fd35-e95f-4089-bf13-fac51faf4e4c.png" type="image/x-icon">
	<link rel="stylesheet" href="styles.css">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&family=Oi&family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
	</head>

	<body>
	<header>
	<div class="logo">
	<img src="https://user-images.githubusercontent.com/103388276/194958634-b3c4fd35-e95f-4089-bf13-fac51faf4e4c.png" alt="">
	</div>
	<nav>
	<ul>
	<li><a href="">HOME</a></li>
	<li><a href="">SHOP</a></li>
	<li><a href="">GALLERY</a></li>
	<li><a href="">CUSTOM ORDERS</a></li>
	</ul>
	</nav>
	</header>

	<main>
	<div class="container">
	<div class="statement">
	<p>S.V.Fero is a slow fashion brand. Each piece is handmade one of a kind from
	sustainably sourced material, with uniqueness at the forefront of each design.
	By shopping sustainably you are doing your part to intersect the factory to
	landfill pipeline. </p>
	</div>
	</div>

	<div class="container">
	<div class="products">
	<h1>FW2022</h1>
	<div class="photos">
	<div class="pic">
	<img src="https://user-images.githubusercontent.com/103388276/194958695-bf4af8ba-374b-4e5e-9797-d9a43fa2cc8d.JPG" alt="">
	</div>
	<div class="pic">
	<img src="https://user-images.githubusercontent.com/103388276/194958687-73274927-b89f-42fe-a7b3-18af80ac7212.JPG" alt="">
	</div>
	<div class="pic">
	<img src="https://user-images.githubusercontent.com/103388276/194958703-724431e4-0c27-409f-9295-6c3aa2134ce8.JPG" alt="">
	</div>
	<div class="pic">
	<img src="https://user-images.githubusercontent.com/103388276/194958671-8a1e0713-3569-49b3-8580-f224eafb94d2.JPG" alt="">
	</div>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="artist">
	<h1>Meet the Artist</h1>
	<div class="artistpic">
	<img src="https://user-images.githubusercontent.com/103388276/194958662-d17faba8-6cd0-49a8-a440-f6c7a3565d1c.JPG" alt="">
	<p>S.V.Fero was founded by S---, a self taught seamstress. She thrifts every material
	and sews each piece herself, with the hope that the world will embrace slow fashion and shop responsibly.
	</p>
	</div>
	</div>
	</div>
	</main>

	<footer>
	<h1>S.V.FERO</h1>
	<div class="icons">
	<a href="https://www.depop.com/svfero/" target="blank"><img src="https://user-images.githubusercontent.com/103388276/194958614-80e5305d-cfdb-4095-9ad8-38b0cfe3a836.png" alt=""></a>

	<a href="https://www.instagram.com/s.v.fero/" target="blank"><img src="https://user-images.githubusercontent.com/103388276/194958622-c69d06da-1e66-4291-bd37-abaff0f66e52.png" alt=""></a>
	</div>

	<div class="container">
	<div class="copyright">
	<p>©Copyright. All rights reserved</p>
	</div>
	<div class="list">
	<ul>
	<li><a href="">Legal Notice</a></li>
	<li><a href="">Privacy Policy</a></li>
	</ul>
	</div>
	</div>
	</footer>

	</body>
	</html>
	html{
	font-family: Montserrat;
	text-align: center;
	}

	body{
	background-color: #FBEDD2;
	}

	main{
	margin: 3rem;
	}

	p{
	line-height: 1.75rem;
	}

	.container {
	margin: 0 auto;
	}

	h1{
	font-weight: 400;
	}

	header{
	text-align: center;
	background-color: white;
	}

	.logo img{
	height: 5rem;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding-top: 2rem;
	}

	header ul{
	list-style-type: none;
	display: inline-flex;
	margin: 0.25rem;
	flex-wrap: wrap;
	justify-content: center;
	}

	header li{
	padding: 2rem;
	}

	header a{
	text-decoration: none;
	color: #000;
	padding: 1rem;
	}

	header a:hover{
	background-color: #FBEDD2;
	}

	/* statement */

	.statement{
	background-color: white;
	margin-top: 3rem;
	padding: 2rem;
	border-radius: 1rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	}

	/* products */

	.products{
	background-color: white;
	margin-top: 3rem;
	padding: 2rem;
	border-radius: 1rem;
	}

	.photos{
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	}

	.pic{
	display: flex;
	margin: 1rem;
	}

	.pic img{
	height: auto;
	width: 100%;
	}

	/* artist */



	.artist{
	background-color: white;
	margin-top: 3rem;
	padding: 2rem;
	border-radius: 1rem;
	}

	.artistpic{
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
	}

	.artist img{
	width: 100%;
	margin-top: 2rem;
	margin-bottom: 2rem;
	}

	/* footer */

	footer{
	background-color: white;
	margin-top: 3rem;
	}

	.icons img{
	width: 2rem;
	margin: 0.5rem;
	padding: 0.25rem;
	border-radius: 0.25rem;
	}

	.icons img:hover{
	background-color: #FBEDD2;
	cursor: pointer;
	}

	footer ul{
	list-style-type: none;
	display: inline-flex;
	}

	footer h1{
	font-size: 1.5rem;
	padding-top: 2rem;
	}

	.list a{
	text-decoration: none;
	color: #000;
	padding: 1rem;
	}

	.list a:hover{
	background-color: #FBEDD2;
	}

	footer .container{
	display: inline-flex;
	width: 100%;
	}

	.list{
	float: right;
	width: 50%;
	}

	.copyright{
	float: left;
	background-color: white;
	width: 50%;
	}



	@media only screen and (min-width: 800px) {
	.pic{
	display: flex;
	margin: 1rem;
	width: 44%;
	}
	}

	@media only screen and (max-width: 650px) {
	footer .container{
	width: 100%;
	display: block;
	justify-content: center;
	background-color: white;
	}

	.list{
	width: 100%;
	background-color: white;
	font-size: 0.75rem;
	}

	.list ul{
	transform: translate(-0.75rem, -3.5rem);
	}

	.copyright p{
	transform: translate(0.5rem, 2.5rem);
	}

	.copyright{
	background-color: white;
	width: 100%;
	}
	}