CodeStar[1404]-FE-Phase04-Team[03]

[aslan-es]

• Introduction
• Learning
  • Box Model
    • Suppose we have a div with box-sizing set to border-box and a width of 100px. If we apply 20px of padding
      and 10px of margin, what is the actual width of this element? 100 پیکسل کل باکسمون و 10 پیکسل فاصله از اطراف در واقع عرض محتوای ما 60 پیکسل میشه چون یه پدینگ 20 از چپ ویه پدینگ 20 از راست داریم و اگه مجموع اینا رو از 100 کم کنیم 60پیکسل که سایز محتوای تو باکس هست بدست میاد
    • Units
      • Suppose we have a responsive page. Which unit do you prefer to use in this scenario? `
        برای تکست ها و پدینگ ها و مارجین ها از از rem استفاده میکنیم چون وابسته به روته و مقیاس پذیره

برای عرض و ارتفاع های نسبی باکس ها صفحه layout ها از %,vh,vw استفاده میکنیم

برای یه موارد جزئی مثال بوردر ها باکس شدو ها و ... از px استفاده میکنیم
- [ ] Selectors - [ ] Suppose we have two nested divs: a parent div with className "a" and a child div with className "b". What is the difference between the ".a.b" and ".a .b" selectors?
حالت .a.b)
المنتی را سلکت میکند که هم کلس a را داشته باشد و هم کلس b
در واقع تگ زیر رو سلکت میکند:

a && b

حالت .a .b)
توی این حالت کلاس a کلس parent میباشد و فرزندی از آن که کلس b را دارد انتخاب می شود
مثل مثال زیر:

**

**

اینجا اولین تگی که توی تیگ با کلسa هست انتخاب میشه
- [ ] Sass - [ ] Create a mixin that centers an element when it has the "box" className?
@mixin center-element {
position: absolute;
margin: auto;
inset: 0;
}

body {
position: relative;
height: 100vh;

.box {
    @include center-element;
    width: 200px;
    height: 200px;
    background-color: red;
}

}
`

• Project
  • Read the project instruction from documents and write your answers.
    1. `

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");

:root {
--color-primary: #4F46E5;
--color-secondary: #6366F1;
--color-accent: #F59E0B;
--color-background: #F3F4F6;
--color-card: #FFFFFF;
--color-border: #E5E7EB;
--color-text-primary: #111827;
--color-text-secondary: #6B7280;
}

@mixin center-flex {
display: flex;
justify-content: center;
align-items: center;
}

@mixin card-style {
background-color: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 1rem;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;

&:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}

@mixin heading-style {
color: var(--color-text-primary);
font-size: 1.25rem;
margin-bottom: 0.5rem;
text-align: center;
}

@mixin text-style {
font-size: 0.9rem;
color: var(--color-text-secondary);
margin: 0.3rem 0;
text-align: center;
}

@mixin section-header {
background-color: var(--color-secondary);
color: #fff;
padding: 2rem;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
background-color: var(--color-background);
}

body {
display: grid;
grid-template-columns: 1fr 15fr;
min-height: 100vh;
overflow-x: hidden;

.aside {
background-color: var(--color-primary);
color: #fff;
padding: 1rem;
@include center-flex;
}

.container {
display: flex;
flex-direction: column;

.header {
  @include section-header;
}

.article {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  background-color: var(--color-background);

  .boxes {
    @include card-style;
    max-width: 80%;

    h3 {
      @include heading-style;
    }

    img {
      width: 150px;
      height: auto;
      margin-bottom: 1rem;
      border-radius: 8px;
    }

    p {
      @include text-style;
    }
  }
}

.footer {
  background-color: var(--color-secondary);
  color: #fff;
  padding: 2rem;
  text-align: center;
}

}
}

2.Star-Academy/Summer1404-FE-Team03#1
لینک پروژه
3.در جواب 1 جواب داده شده4.در جواب 1 جواب داده شده`