├── style.css
└── index.html


/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | :root{
  3 |     --praimary: #ddd;
  4 |     --light: #fff;
  5 |     --dark:#333;
  6 |     --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
  7 | }
  8 | html{
  9 |     box-sizing: border-box;
 10 |     color: var(--dark);
 11 |     font-family: Arial, Helvetica, sans-serif;
 12 | 
 13 | }
 14 | body{
 15 |     background: #ccc;
 16 |     margin: 30px 50px;
 17 |     line-height: 1.4;
 18 | }
 19 | .btn{
 20 |     background: var(--dark);
 21 |     color: var(--light);
 22 |     padding: 10px 20px;
 23 |     text-decoration: none;
 24 |     border: 0;
 25 | }
 26 | img{
 27 |     max-width: 100%;
 28 | }
 29 | .wrapper{
 30 |     display: grid;
 31 |     grid-gap: 20px;
 32 | }
 33 | /* navigation section  */
 34 | .main-nav ul{
 35 |     display: grid;
 36 |     grid-gap: 20px;
 37 |     list-style: none;
 38 |     padding: 0;
 39 |     grid-template-columns: repeat(4, 1fr);
 40 | 
 41 | }
 42 | .main-nav a{
 43 |     background-color: var(--praimary);
 44 |     color: var(--dark);
 45 |     padding: 15px;
 46 |     text-transform: uppercase;
 47 |     text-decoration: none;
 48 |     display: block;
 49 |     text-align: center;
 50 |     font-weight: bold;
 51 |     font-size: 18px;
 52 |     box-shadow: var(--shadow);
 53 | }
 54 | .main-nav a:hover{
 55 |     background: var(--dark);
 56 |     color: var(--light)
 57 | }
 58 | /* container section  */
 59 | .top_container{
 60 |     display: grid;
 61 |     grid-gap: 20px;
 62 |     grid-template-areas: 
 63 |     'showcase showcase top_box_a'
 64 |     'showcase showcase top_box_b';
 65 | 
 66 | }
 67 | .showcase{
 68 |     grid-area:showcase;
 69 |     min-height: 400px;
 70 |     background:url(https://image.ibb.co/kYJK8x/showcase.jpg);
 71 |     padding: 50px;
 72 |     background-position: center;
 73 |     background-size: cover;
 74 |     box-shadow: var(--shadow);
 75 |     display: flex;
 76 |     flex-direction: column;
 77 |     align-items: flex-start;
 78 |     justify-content: center;
 79 | }
 80 | .showcase h1{
 81 |    
 82 |     font-size: 48px;
 83 |     color: var(--light);
 84 |    
 85 | 
 86 | 
 87 | }
 88 | .showcase p{
 89 |     font-size: 20px;
 90 |     color: var(--light);
 91 | 
 92 | }
 93 | .top_box_a{
 94 |     grid-area:top_box_a;
 95 | }
 96 | .top_box_b{
 97 |     grid-area:top_box_b;
 98 | }
 99 | .top_box{
100 |     background: var(--praimary);
101 |     display: grid;
102 |     align-items: flex-start;
103 |     justify-items: center;
104 | 
105 |     padding: 40px;
106 | }
107 | .top_box .price{
108 |     font-size:40px ;
109 | }
110 |  /*  Box section */
111 |  .boxes{
112 |      display: grid;
113 |      grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
114 |     grid-gap: 10px 10px;
115 |     
116 |      
117 | 
118 |  }
119 |  .box{
120 |      background: var(--praimary);
121 |      text-align: center;
122 |      padding: 30px 40px;
123 |      box-shadow: ver(--praimary);
124 | 
125 |     
126 |  }
127 | /*  INfo Section */
128 | .info{
129 |     background: var(--praimary);
130 |     box-shadow: var(--shadow);
131 |     background-size: cover;
132 |     display: grid;
133 |     grid-template-columns: repeat(2,1fr);
134 |     grid-gap: 20px 20px;
135 |     padding: 15px;
136 |     
137 | }
138 | /* Portfolio Section  */
139 | .portfolio{
140 |     display: grid;
141 |     grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
142 |     grid-gap: 5px;
143 | 
144 | }
145 |  .portfolio img{
146 |     width:100%;
147 |     box-shadow: var(--praimary);
148 | }
149 | /* Footer Section */
150 | .footer {
151 |     background-color: var(--dark);
152 |     color:var(--praimary);
153 |     text-align: center;
154 |     
155 | }
156 | @media only screen and(max-width:700px){
157 |     .main-nav ul{
158 |      display: grid;
159 |     grid-template-columns: 1fr;
160 | }
161 | 
162 | .top_container{
163 |    
164 |     grid-template-areas: 
165 |     'showcase showcase' 
166 |     'top_box_a top_box_b';
167 | }
168 | .info{
169 | 
170 |     grid-template-columns: (1,1fr);
171 | }
172 | 
173 | 
174 | 
175 | .info .btn{
176 |     text-align: center;
177 |     display: block;
178 |     margin: auto;
179 | }
180 | }
181 | @media only screen and(max-width:580px){
182 | 
183 | 
184 |     .top_container{
185 |         grid-template-areas: 
186 |     'showcase' 
187 |     'top_box_a' 'top_box_b';
188 |     }
189 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Document</title>
  7 |     <link rel="stylesheet" type="text/css" href="style.css">
  8 |     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  9 | </head>
 10 | <body>
 11 |     <div class="wrapper">
 12 |      <!--    navigation section -->
 13 |         <nav class="main-nav">
 14 |             <ul>
 15 |                 
 16 |                 <li> <a href="#">Home </a></li>
 17 |                 <li> <a href="#">About </a></li>
 18 |                 <li> <a href="#"> Services</a></li>
 19 |                 <li><a href="#"> Contacts</a></li>
 20 |                         
 21 |                 
 22 |             </ul>
 23 | 
 24 |         </nav> 
 25 |       <!--   container section -->
 26 |         <section class="top_container">
 27 |             <div class="showcase">
 28 |                 <h1>Lorem ipsum dolor sit amet</h1>
 29 |                 <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit</p>
 30 | 
 31 |                 <a href="#" class="btn">Buy Now</a>
 32 |             </div>
 33 |             <div class="top_box top_box_a">
 34 |                 <h6>Pro Membership</h6>
 35 |                 <p class="price">$300/Month</p>
 36 |                 <a href="#" class="btn">Buy Now</a>
 37 |             </div>
 38 |             <div  class="top_box top_box_b">
 39 |                 <h6>Pro Membership</h6>
 40 |                 <p class="price">$900/Month</p>
 41 |                 <a href="#" class="btn">Buy Now</a>
 42 |   
 43 |             </div>
 44 |         </section>
 45 |         <!--   Box section -->
 46 |         <section class="boxes">
 47 |             <div class="box">
 48 |                 <i class="fas fa-chart-pie fa-4x"></i>
 49 |                 <h4>Lorem ipsum</h4>
 50 |                 <p>Lorem ipsum, dolor sit amet consectetur </p>
 51 | 
 52 |             </div>
 53 |             <div class="box">
 54 |                 <i class="fas fa-globe fa-4x"></i>
 55 |                 
 56 |                 <h4>Lorem ipsum</h4>
 57 |                 <p>Lorem ipsum, dolor sit amet consectetur </p>
 58 | 
 59 |             </div>
 60 |             <div class="box">
 61 |                 <i class="fas fa-user-cog fa-4x"></i>
 62 |                 
 63 |                 <h4>Lorem ipsum</h4>
 64 |                 <p>Lorem ipsum, dolor sit amet consectetur </p>
 65 | 
 66 |             </div>
 67 |             <div class="box">
 68 |                 <i class="fas fa-tools fa-4x"></i>
 69 |                 
 70 |                 <h4>Lorem ipsum</h4>
 71 |                 <p>Lorem ipsum, dolor sit amet consectetur</p>
 72 | 
 73 |             </section>
 74 |             <!-- INfo Section -->
 75 |             <section class="info">
 76 |                 
 77 |                 <img src="https://image.ibb.co/j4Qz8x/pic1.jpg">
 78 |                 <div class="content">
 79 |                     <h6>Lorem ipsum</h6>
 80 |                     <p >Lorem ipsum, dolor sit amet consectetur adipisicing elit,
 81 |                         Lorem ipsum, dolor sit amet consectetur adipisicing elit
 82 |                     </p>
 83 |                     <a href="#" class="btn">Learn More</a>
 84 |                     
 85 | 
 86 |                 </div>
 87 | 
 88 |             </section>
 89 |           <!--   Portfolio Section -->
 90 | 
 91 |           <section class="portfolio">
 92 |             <img src="https://source.unsplash.com/random/200x200" alt="">
 93 |       
 94 |             <img src="https://source.unsplash.com/random/201x200" alt="">
 95 |       
 96 |             <img src="https://source.unsplash.com/random/202x200" alt="">
 97 |       
 98 |             <img src="https://source.unsplash.com/random/203x200" alt="">
 99 |       
100 |             <img src="https://source.unsplash.com/random/204x200" alt="">
101 |       
102 |             <img src="https://source.unsplash.com/random/205x200" alt="">
103 |       
104 |             <img src="https://source.unsplash.com/random/206x200" alt="">
105 |       
106 |             <img src="https://source.unsplash.com/random/207x200" alt="">
107 |       
108 |             <img src="https://source.unsplash.com/random/208x200" alt="">
109 | 
110 | 
111 | 
112 | 
113 |           </section>
114 |          <!--  Footer Section -->
115 |           <footer class="footer">
116 |               <p>Grid &copy;2020</p>
117 | 
118 |           </footer>
119 |            
120 |         </div>
121 |        
122 |     </div>
123 |     
124 | </body>
125 | </html> 


--------------------------------------------------------------------------------