WM5-Zahra khademi-HTML-CSS-Project-Week-1/2

css/store.css

@@ -0,0 +1,187 @@
+h1{
+  font-size: 6ch;
+  color: #f96b37;
+  margin-top: 80px;
+  margin-bottom: 50px;
+  margin-left: 0;
+}
+
+.logo{
+  width:30px;
+  height: auto;
+}
+
+.header{
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 3%;
+  margin-left: 3%;
+  margin-bottom: 10px;
+}
+
+.list {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  /* 1 row and 6 columns */
+  list-style: none;
+  justify-content: flex-end;
+  align-items: center;
+  /* Adjust the gap as needed */
+  gap: 2%;
+  width: 50vw;
+  height: 2vh;
+}
+
+.list li {
+  padding: 0;
+  text-align: center;
+  box-sizing: border-box;
+  font-size: clamp(1.5vh, 1vw, 3vh);
+}
+
+.flex{
+  display: flex;
+}
+.container{
+display: flex;
+flex-direction: row;
+gap: 2rem;
+}
+
+.card{
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+  } 
+
+.form{
+    width: 50vw;
+    margin-left: 50px;
+}
+.store_img{
+    width: 50vw;
+}
+.address-info{
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    margin-bottom: 70px;
+}
+
+
+.select {
+  width: 220px;
+  height: 40px;
+  border: 1px solid rgb(138, 132, 132);
+  border-radius: 2px;
+  color: rgb(138, 132, 132);
+}
+
+.name-input{
+  width: 75%;
+  padding: 8px;
+  border: 1px solid black;
+  border-radius: 4px;
+  margin-bottom: 10%;
+}
+.address-input {
+  width: 270%;
+  padding: 8px;
+  border: 1px solid black;
+  border-radius: 4px;
+  margin-bottom:10%;
+}
+
+.add-container {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 150px; 
+}
+
+select#city {
+  flex: 2; 
+  padding: 8px;
+  border: 1px solid black;
+  border-radius: 4px;
+  width: 150%;
+}
+
+input#postcode {
+  flex: 1; 
+  padding: 8px;
+  border: 1px solid black;
+  border-radius: 4px;
+  width: 70%; 
+}
+
+label{
+  cursor: pointer;
+  padding:8px;
+  margin-bottom: 20px;
+}
+
+  .button{
+    padding:10px 30px;
+    background-color:rgb(218, 90, 20);
+    border: none;
+    border-radius: .3rem;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 40px;
+    color:#fff;
+    width:270px;
+    height: 70px;
+    flex-shrink: 0;
+    }
+    .button:hover{
+            background-color: #fff;
+            color:rgb(218, 90, 20);;
+            border:2px solid rgb(218, 90, 20);
+
+    }
+
+footer{
+  margin-top:5rem;
+  text-align: center;
+  margin-top: 0;
+  border-top: 1px solid rgb(214, 212, 212);
+
+}
+.footer-items{
+  margin-top: 2rem;
+}
+.content{
+  font-weight:normal;
+  font-size: 1rem;
+}
+
+.footer-icons{
+display: flex;
+justify-content: center;
+
+}
+
+.footer_icon{
+height: 1.2rem;
+display: flex;
+justify-content: space-evenly;
+border: 1px solid rgb(220, 217, 217);
+border-radius: 50%;
+margin-top: 2rem;
+padding: 0.5rem;
+
+}
+
+#facebook-icon {
+  margin-right:15px;
+  margin-left:15px;
+}
+.karma_mobality{
+  margin-top:10px;
+  font-size: smaller;
+  font-weight:lighter ;
+  color: rgb(196, 193, 193);
+}
+
+

css/style.css

@@ -1,11 +1,188 @@
+/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
-
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Roboto;
+}
 body {
     font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased; 
+}
+
+a {
+    background-color: transparent;
+}
+
+h2{
+    font-size:50px;
+    text-align: center;
+    margin-top: 100px;
+    font-weight: 300;
+}
+
+.logo{
+    width:30px;
+    height: auto;
+}
+
+.header{
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 3%;
+    margin-left: 3%;
+    margin-bottom: 10px;
+}
+
+.list {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    /* 1 row and 6 columns */
+    list-style: none;
+    justify-content: flex-end;
+    align-items: center;
+    /* Adjust the gap as needed */
+    gap: 2%;
+    width: 50vw;
+    height: 2vh;
+}
+
+.list li {
+    padding: 0;
+    text-align: center;
+    /* Center the content within each grid item */
+    box-sizing: border-box;
+    /* Include padding and border in total width/height */
+    font-size: clamp(1.5vh, 1vw, 3vh);
+}
+.item a{
+text-decoration: none;
+color:gray;
+}
+.item :hover{
+   color:rgb(228, 108, 23);
+}
+
+
+.main-image{
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    justify-content: center;
+    align-items: center;
+    background-image: url(/img/first-background.jpg);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: white;
+
+}
+
+.main-intro{
+font-weight: 300;
+font-size: 3rem;
+margin-bottom: 18px;
+
+}
+
+
+.main-button{
+    background-color:rgb(250, 101, 21);
+    border:1px solid rgb(250, 101, 21);
+    border-radius: 5px ;
+    margin-top:40px;
+    padding:10px 20px;
+    font-size: smaller;
+    color: white;
+}
+
+.icon{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.icons{
+display: flex;
+justify-content: space-evenly;
+align-items: center;
+}
+
+.icon-img{
+  width:10rem;
+  margin:5rem 0;
+
+}
+.text{
+    font-size:2rem; 
+}
+
+.input_card {
+    display:flex;
+}
+
+.feature-container{
+    display:flex;
+    margin-top: 10rem;
+}
+
+.text-info{
+    margin-top: 10rem;
+}
+
+.feature{
+    background-color: rgb(250, 233, 233);
+    width:70vw;
+    text-align: center;
+    font-size: larger;
+}
+
+footer{
+    margin-top:5rem;
+    text-align: center;
+    margin-top: 6rem;
+    border-top: 1px solid rgb(214, 212, 212);
+
+}
+.footer-items{
+    margin-top: 2rem;
+}
+.content{
+    font-weight:normal;
+    font-size: 1rem;
+}
+
+.footer-icons{
+display: flex;
+justify-content: center;
+
+}
+
+.footer_icon{
+height: 1.2rem;
+display: flex;
+justify-content: space-evenly;
+border: 1px solid rgb(220, 217, 217);
+border-radius: 50%;
+margin-top: 2rem;
+padding: 0.5rem;
+
+}
+
+#facebook-icon {
+    margin-right:15px;
+    margin-left:15px;
+}
+.karma_mobality{
+    margin-top:10px;
+    font-size: smaller;
+    font-weight:lighter ;
+    color: rgb(196, 193, 193);
 }
 
+
 /**
  * Add your custom styles below
  * 
@@ -14,6 +191,4 @@ body {
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
- */
-
-
+ */