احتاج مساعده بخصوص Grid

Zyad Developer · 3 سبتمبر

لدي تحدي تحويل هذا التصميم بدون استخدام ال flex

html

<!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>Grid-HW</title>
  </head>
  <body>
    <div class="container-page">
      <div class="iphone-container">
        <div class="text-container">
          <div>IPHONE 6s</div>
          <h3 style="padding: 10px 0;">3D Touch. 12MP photos. 4K video.One powerful phone</h3>
          <div style="font-weight: 100;">Learn more or visit an Apple Store today</div>
        </div>
        <img src="./1.png" alt="" />
      </div>
      <div class="second-section">
        <div>LEARN MORE</div>
        <h1>How to Use Rotary Evaporator in Chemical Labs</h1>
        <a href="#">Download now</a>
      </div>
      <div class="third-section">
        <img
          src="./3.png"
          width="319"
        />
        <h3><strong>Our Brand New Keyboard</strong></h3>
        <a href="#" class="arrow-link yellow"
          >LEARN <strong class="arrow">›</strong></a
        >
      </div>
      <div class="forth-section">
        <div class="left-section">
          <div class="caps">IMAC.RETINA</div>
          <h3 class="heading-5">Hardly a month passes these days where</h3>
          <img
            src="./2.png"
          />
        </div>
        <div class="right-section">
          <div>
            Apple may be experimenting in the virtual reality space. The company
            has been granted a patent for a head-mounted virtual reality device
            that would use the iPhone screen as the display.
          </div>
          <a href="#" class="arrow-link">DOWNLOAD NOW <span>›</span></a>
        </div>
      </div>
      <div class="fifth-section">
        <div class="circle">
          <div class="text-circle">POPULAR</div>
          <img
            src="https://uploads-ssl.webflow.com/5bc242f45a5ed923b1704210/5bc2f42de46b0e56a5607bd7_Floppy.png"
            width="239"
            alt=""
            class="image-3"
          />
          <div class="caps white">meet</div>
        </div>
        <h2 class="heading-2">iCloud</h2>
        <div class="text-icloud">
          With iCloud, you always have the latest versions of your most
          important things — like documents, apps, notes, and contacts — on
          whatever device you’re using.
        </div>
        <a href="#" class="button">LEARN MORE</a>
      </div>
      <div class="sixth-section">
        <img
          src="./5.png"
          alt=""
        />
        <h3>Games ourpasion</h3>
        <a href="#" class="arrow-link"
          >LEARN <strong class="arrow">›</strong></a
        >
      </div>
      <div class="seventh-section">
        <h3><strong>Much MuchBetter Experience</strong></h3>
        <img
          src="./4.png"
          width="655"
        />
      </div>
      <div class="eighth-section">
        <div class="twitter-circle">
          <img
            src="./6.png"
            width="43.5"
            alt=""
          />
          <h3>Connect with Twitter</h3>
        </div>
      </div>
      <div class="ninth-section">
        <div class="pop-tag">POPULAR</div>
        <h3>Much MuchBetter Experience</h3>
      </div>
      <div class="tenth-section">
        <img
          src="./7.png"
        />
        <h3>More than just a display, &nbsp;it’s a vision</h3>
      </div>
    </div>
  </body>
</html>

css

* {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
  }
  body {
    font-family: "Open Sans", sans-serif;
    line-height: 26px;
  }
  
  .caps {
    color: #9fa3a7;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  
  h3 {
    font-family: Arvo, sans-serif;
    font-size: 22px;
    line-height: 32px;
  }
  
  .container-page {
    display: grid;
    grid-template-columns: 1f 1f 1f 1f;
  }
  
  .second-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    grid-column: 3/5;
    background-color: #f7f8f9;
  }
  
  .second-section div {
    color: #9fa3a7;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
  }
  .second-section h1 {
    max-width: 550px;
    font-family: Arvo, sans-serif;
    font-size: 48px;
    line-height: 60px;
    font-weight: 400;
    text-align: center;
  }
  .second-section a {
    color: #27b9c2;
    text-decoration: underline;
  }
  
  .third-section {
    background-color: #f05638;
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
  }
  .third-section h3 {
    color: white;
  }
  
  .third-section a {
    color: #ffc80a;
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-decoration: none;
    text-transform: uppercase;
  }
  .arrow {
    font-size: 16px;
  }
  
  .forth-section {
    grid-column: 2/4;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 68px;
    padding-right: 4%;
    padding-left: 4%;
  }
  
  .left-section {
    width: 50%;
    max-width: 180px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .left-section h3 {
    margin-bottom: auto;
  }
  .left-section img {
    position: relative;
    left: -160%;
    width: 250%;
    max-width: none;
    margin-top: 20px;
  }
  .right-section {
    width: 40%;
    grid-column: 2/4;
  }
  
  .right-section div {
    color: #9fa3a7;
  }
  
  .right-section a {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-decoration: none;
    text-transform: uppercase;
    color: #27b9c2;
  }
  .right-section span {
    font-size: 16px;
  }
  
  .fifth-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-column: 4/5;
    grid-row: 2/4;
    overflow: hidden;
    text-align: center;
    background-color: #8f76bc;
    color: white;
  }
  
  .circle {
    display: flex;
    width: 373px;
    height: 373px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #8166b0;
  }
  .text-circle {
    border-radius: 60px;
    background-color: hsla(0, 0%, 100%, 0.08);
    width: 25%;
    font-size: 10px;
    line-height: 23px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: white;
  }
  
  .white {
    color: white;
  }
  
  .fifth-section h2 {
    font-size: 32px;
    line-height: 36px;
    margin-top: 20px;
  }
  .text-icloud {
    width: 80%;
    max-width: 290px;
  }
  
  .button {
    margin-top: 30px;
    padding: 14px 28px;
    border-radius: 50px;
    background-color: #ffc80a;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
  }
  .sixth-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-column: 1/2;
    background-color: #f7f8f9;
  }
  .sixth-section img {
    position: relative;
    left: -7%;
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
  }
  .sixth-section h3 {
    width: 54%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
  }
  .sixth-section a {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-decoration: none;
    text-transform: uppercase;
    color: #38d5f4;
  }
  
  .seventh-section {
    background-color: #93b6b7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    grid-column: 2/4;
    padding-top: 30px;
  }
  .seventh-section h3 {
    font-weight: bold;
    color: white;
    display: block;
    max-width: 280px;
    margin: auto;
    padding-top: 31px;
    padding-bottom: 31px;
  }
  
  .seventh-section img {
    position: relative;
    left: -10%;
    width: 90%;
    max-width: 100%;
    vertical-align: middle;
  }
  
  .eighth-section {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    grid-column: 1/2;
    overflow: hidden;
    background-color: #38d5f4;
  }
  
  .eighth-section h3 {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
    color: white;
  }
  .twitter-circle {
    display: flex;
    width: 195px;
    height: 230px;
    margin-top: 20px;
    padding-right: 34px;
    padding-left: 34px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #35cfed;
    text-align: center;
    gap: 10px;
  }
  
  .ninth-section {
    grid-column: 2/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
  .pop-tag {
    position: static;
    background-color: #7bc424;
    color: #fff;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    font-size: 8px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2px;
  }
  .ninth-section h3 {
    width: 70%;
    margin-bottom: 20px;
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
  }
  
  .tenth-section {
    display: flex;
    overflow: hidden;
    padding-right: 5%;
    padding-left: 5%;
    justify-content: center;
    align-items: center;
    background-color: #2c2c2c;
    color: #fff;
    grid-column: 3/5;
  }
  .tenth-section img {
    position: relative;
    left: -15%;
    width: 271px;
  }
  .tenth-section h3 {
    width: 34%;
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
  }
  @media only screen and (min-width: 600px) {
    .iphone-container {
      display: flex;
      justify-content: center; /* يضمن محاذاة الجوال والنص في الوسط */
      align-items: center; /* يضمن محاذاة الجوال والنص في نفس المستوى العمودي */
      grid-column: 1/3;
      padding-top: 50px;
    }
  
    .text-container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: left !important;
      font-size: 1em;
      width: 40%; /* تعديل العرض ليكون متساويًا مع عرض الجوال */
      margin-right: 20px; /* إضافة مسافة بين النص والجوال */
    }
  
    .iphone-container img {
      width: 40%; /* تعديل العرض ليكون متساويًا مع عرض النص */
    }
  }
  
  @media only screen and (max-width: 600px) {
    .iphone-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      grid-column: 1/3;
    }
  
    .text-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      text-align: left;
      font-size: 1em;
      width: 30%;
    }
    .iphone-container img {
      height: 50%;
      align-self: flex-end;
    }
  
    .iphone-container,
    .second-section,
    .third-section,
    .forth-section,
    .fifth-section,
    .sixth-section,
    .seventh-section,
    .eighth-section,
    .ninth-section,
    .tenth-section .iphone-container {
      grid-column: 1/5;
    }
    .second-section {
      grid-column: 1/5;
      grid-row: 1/2;
      padding: 3rem 0;
    }
    .iphone-container {
      grid-row: 2/3;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      text-align: start;
    }
  
    .iphone-container .text-container {
      margin-top: 1rem;
      width: 90%;
      text-align: start;
      justify-content: start;
      align-items: start;
    }
    .iphone-container img {
      position: relative;
      left: -4%;
      display: block;
      margin-right: auto;
      margin-left: auto;
      align-self: flex-end;
    }
    .third-section {
      grid-row: 3/4;
    }
    .forth-section {
      grid-row: 5/6;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      display: flex;
      overflow: hidden;
      padding-top: 68px;
      padding-right: 4%;
      padding-left: 4%;
      padding: 2rem 1rem;
    }
    .left-section {
      width: 100%;
      max-width: none;
      margin-bottom: 34px;
    }
    .left-section img {
      left: -115%;
      width: 200%;
      margin-top: 40px;
    }
    .right-section {
      width: 100%;
    }
    .fifth-section {
      grid-row: 8/9;
      padding: 2rem 0;
    }
    .sixth-section {
      grid-row: 4/5;
      padding: 2rem 0;
    }
    .seventh-section {
      grid-row: 7/8;
    }
    .eighth-section {
      grid-row: 6/7;
      padding: 2rem 0;
    }
    .ninth-section {
      grid-row: 9/10;
      padding: 2rem 0;
    }
    .tenth-section {
      grid-row: 10/11;
      padding-bottom: 30px;
      flex-direction: column;
      padding-right: 5%;
      padding-left: 5%;
      justify-content: center;
      align-items: center;
      grid-column: 1/5;
    }
    .tenth-section h3 {
      width: 100%;
      text-align: center;
    }
  }

image.png.ef646b2bda6ceda41828a35846fd7e89.png imgimgimg