W7 done

w6/static/css/styles.css

@@ -0,0 +1,154 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: bisque;
+    font-size: 16pt;
+    font-family: 'Smooch Sans', sans-serif;
+}
+
+a {
+    text-decoration: none;
+    color: darkturquoise;
+}
+
+a:visited {
+    color: none;
+}
+
+#mainPageMain {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+    width: 60%;
+    height: 100%;
+    padding: 2rem;
+}
+
+.jumbotronSection {
+    background-color: beige;
+    padding: 4rem;
+    border-radius: 2rem;
+}
+
+.searchSection {
+    background-color: beige;
+    padding: 1rem;
+    border-radius: 2rem;
+}
+
+.searchSection > form {
+    display: flex;
+    flex-direction: column;
+}
+
+.searchSection > form > input[type="text"] {
+    width: 100%;
+    height: 40px;
+    background-color: transparent;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 2px black dashed;
+    margin-bottom: 2rem;
+}
+
+.categories {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.categoryCard {
+    display: flex;
+    flex: 1 0 40%;
+    flex-direction: row;
+    background-color: whitesmoke;
+    gap: 1rem;
+    margin: 1rem;
+    text-decoration: none;
+    color: black;
+    align-items: center
+}
+
+.categoryCard > img {
+    clip-path: circle(81% at 0% 50%);
+}
+
+.categoryCard > p {
+    padding-right: 4rem;
+    font-size: 28pt;
+    font-weight: 700;
+}
+
+.goodsSection {
+    background-color: whitesmoke;
+    padding: 2rem;
+    border-radius: 2rem;
+}
+
+.goods {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 2rem;
+}
+
+.goodsCard {
+    display: flex;
+    flex: 1 0 30%;
+    flex-direction: column;
+    background-color: whitesmoke;
+    gap: 1rem;
+    margin: 1rem;
+    align-items: center;
+}
+
+.goodsCard > .description {
+    height: 100%;
+}
+
+.goodsLink {
+    text-decoration: none;
+    color: coral;
+    padding: 5rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    display: inline-block;
+    border: solid;
+    border-radius: 1rem;
+    border-color: coral;
+    border-width: 1px;
+}
+
+.userCard {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    gap: 2rem;
+}
+
+.avatar {
+    height: 5rem;
+    border-radius: 50%;
+}
+
+.searchDataSection {
+    background-color: whitesmoke;
+    border-radius: 2rem;
+    padding: 2rem;
+}
+
+.goodsSearches {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 2rem;
+}