├── 1
    ├── Scarecrow.png
    ├── index.css
    └── index.html
├── 2
    ├── images
    │   ├── photo1.png
    │   ├── photo2.png
    │   ├── photo3.png
    │   ├── photo4.png
    │   ├── photo5.png
    │   └── photo6.png
    ├── index.css
    └── index.html
└── README.md


/1/Scarecrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aceiny/Dev-challenge-responsive-/66f1915bdeff0a850745dd547fb4b3d6da1420c6/1/Scarecrow.png


--------------------------------------------------------------------------------
/1/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&family=Montserrat:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');
  2 | *{
  3 |     padding: 0;
  4 |     margin: 0;
  5 |     box-sizing: border-box;
  6 |     text-decoration: none;
  7 | }
  8 | body {
  9 |     height: 100vh;
 10 | }
 11 | .container { 
 12 |     display : flex;
 13 |     flex-direction : column ; 
 14 |     justify-content: space-between;
 15 |     height: 100%;
 16 | 
 17 | }
 18 | header{
 19 |     display: flex;
 20 |     justify-content: start;
 21 |     width: fit-content;
 22 |     padding: 30px 0 0 70px;
 23 | }
 24 | header p{
 25 |     font-family: "Inconsolata";
 26 |     font-size: 24px;
 27 |     font-weight: 700;
 28 |     line-height: 25px;
 29 |     letter-spacing: -0.08em;
 30 |     text-align: left;
 31 |     color: #333333;
 32 |     text-transform : uppercase;
 33 | 
 34 | }
 35 | .text-info{
 36 |     display : flex;
 37 |     justify-content : center;
 38 |     gap: 7%;
 39 |     width: 100%;
 40 |     padding: 0 15px;
 41 | } 
 42 | .info-text{
 43 |     display: flex;
 44 |     flex-direction: column;
 45 |     gap: 45px;
 46 |     justify-content: start;
 47 | }
 48 | .info-text h1{
 49 |     font-family: "Space Mono";
 50 |     font-size: 64px;
 51 |     font-weight: 700;
 52 |     line-height: 95px;
 53 |     letter-spacing: -0.035em;
 54 |     text-align: left;    
 55 |     color: #333333;
 56 |     max-width: 586px;
 57 | 
 58 | }
 59 | .info-text p {
 60 |     font-family: "Space Mono";
 61 |     font-size: 24px;
 62 |     font-weight: 400;
 63 |     line-height: 36px;
 64 |     letter-spacing: -0.035em;
 65 |     color: #4F4F4F;
 66 |     max-width : 381px;
 67 | }
 68 | .info-text button {
 69 |     width: 216px;
 70 |     height: 68px;
 71 |     text-align: center;
 72 |     background-color: #333333;
 73 |     color : white;
 74 |     font-family: "Space Mono";
 75 |     font-size: 14px;
 76 |     font-weight: 700;
 77 |     line-height: 21px;
 78 |     letter-spacing: -0.035em;
 79 |     text-transform : uppercase;
 80 |     outline: none;
 81 |     border: none;
 82 | }
 83 | .scarecrow-image img {
 84 |     max-width: 539px;
 85 | }
 86 | footer{
 87 |     display : flex;
 88 |     justify-content : center ; 
 89 |     align-items : center;
 90 |     font-family: "Montserrat";
 91 |     font-size: 14px;
 92 |     font-weight: 700;
 93 |     line-height: 17px;
 94 |     letter-spacing: 0em;
 95 |     color: #BDBDBD;
 96 |     justify-content: center;
 97 |     padding-bottom: 25px;
 98 |     
 99 | }
100 | footer p {
101 |     font-weight: 500;
102 | }
103 | .spanp1{
104 |     font-weight: 700;
105 | }
106 | .spanp2 {
107 |     font-weight: 600;
108 | }
109 | @media  (max-width : 856px){
110 |     header {
111 |         padding: 5% 0 0 10%;
112 |     }
113 |     .text-info {
114 |         flex-direction: column;
115 |         align-items: center;
116 |         gap: 20px;
117 |         margin-bottom: 30px;
118 |         padding: 0 0 0 25px;
119 |     }
120 |     .info-text{
121 |         max-width: 350px;
122 |     }
123 |     .text-info img{
124 |         width: 286.829833984375px;
125 |         height: 238.00001525878906px;
126 | 
127 |     }
128 |     .info-text h1{
129 |         font-size: 48px;
130 |     }
131 |     .info-text p{
132 |         font-size: 18px;
133 |     }
134 | }
135 | 


--------------------------------------------------------------------------------
/1/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>404 NOT FOUND</title>
 7 |     <link rel="stylesheet" href="index.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <header>
12 |             <p>404 not found</p>
13 |         </header>
14 |         <div>
15 |             <article class="text-info">
16 |                 <section class="scarecrow-image">
17 |                     <img src="Scarecrow.png" alt="Scarecrow">
18 |                 </section>
19 |                 <section class="info-text">
20 |                     <h1>I have bad news for you</h1>
21 |                     <p>The page you are looking for might be removed or is temporarily unavailable</p>
22 |                     <button>Back to homepage</button>
23 |                 </section>
24 |             </div>
25 |         </main>
26 |             <footer>
27 |                 <p>created by <span class="spanp1">ACEINY</span class="spanp2"> - <span>devChallenges.io</span></p>
28 |             </footer>
29 |     </div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/2/images/photo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aceiny/Dev-challenge-responsive-/66f1915bdeff0a850745dd547fb4b3d6da1420c6/2/images/photo1.png


--------------------------------------------------------------------------------
/2/images/photo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aceiny/Dev-challenge-responsive-/66f1915bdeff0a850745dd547fb4b3d6da1420c6/2/images/photo2.png


--------------------------------------------------------------------------------
/2/images/photo3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aceiny/Dev-challenge-responsive-/66f1915bdeff0a850745dd547fb4b3d6da1420c6/2/images/photo3.png


--------------------------------------------------------------------------------
/2/images/photo4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aceiny/Dev-challenge-responsive-/66f1915bdeff0a850745dd547fb4b3d6da1420c6/2/images/photo4.png


--------------------------------------------------------------------------------
/2/images/photo5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aceiny/Dev-challenge-responsive-/66f1915bdeff0a850745dd547fb4b3d6da1420c6/2/images/photo5.png


--------------------------------------------------------------------------------
/2/images/photo6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aceiny/Dev-challenge-responsive-/66f1915bdeff0a850745dd547fb4b3d6da1420c6/2/images/photo6.png


--------------------------------------------------------------------------------
/2/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&family=Montserrat:wght@500;600;700&family=PT+Serif:wght@400;700&family=Poppins:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
  2 | *{
  3 |     padding: 0;
  4 |     margin: 0;
  5 |     box-sizing: border-box;
  6 |     text-decoration: none;
  7 | }
  8 | body { 
  9 |     height: 1480px;
 10 | }
 11 | .container {
 12 |     display: flex;
 13 |     flex-direction: column;
 14 |     justify-content: space-between;
 15 |     align-items: center;
 16 |     height: 100%;
 17 |     gap: 40px;
 18 | }
 19 | header {
 20 |     display: flex;
 21 |     margin-top: 30px;
 22 |     justify-content: space-between;
 23 |     width: 60%;
 24 |     gap: 60px;
 25 | }
 26 | header div { 
 27 |     display: grid;
 28 |     grid-template-columns: 1fr 1fr;
 29 |     width: 60%;
 30 | }
 31 | header h1 {
 32 |     font-family: "PT Serif";
 33 |     font-size: 36px;
 34 |     font-weight: 700;
 35 |     line-height: 48px;
 36 |     letter-spacing: -0.045em;
 37 | 
 38 | }
 39 | header div span {
 40 |     display: flex;
 41 |     flex-direction: column;
 42 |     gap: 16px;
 43 | }
 44 | .firstp{
 45 |     font-family: "Poppins";
 46 |     font-size: 18px;
 47 |     font-weight: 600;
 48 |     line-height: 27px;
 49 |     letter-spacing: 0em;
 50 |     text-align: left;
 51 |     max-width: 117px;
 52 |     text-transform: uppercase;
 53 | 
 54 | }
 55 | .secondp{
 56 |     font-family: "Poppins";
 57 |     font-size: 18px;
 58 |     font-weight: 400;
 59 |     line-height: 27px;
 60 |     letter-spacing: 0em;
 61 |     text-align: left;
 62 |     max-width: 430px;
 63 | 
 64 | }
 65 | .all-cards{
 66 |     width: 1120px;
 67 |     display: grid;
 68 |     grid-template-columns: 1fr 1fr 1fr;
 69 |     column-gap: 20px;
 70 |     row-gap: 130px;
 71 |     margin-bottom: 90px;
 72 |     width: 60%;
 73 |     min-width: 800px;
 74 | }
 75 | .one-card {
 76 |     display: flex;
 77 |     max-width: 264px;
 78 |     align-items: flex-start;
 79 |     justify-content: start;
 80 | }
 81 | .big {
 82 |     position: relative;
 83 |     top: 20%;
 84 | }
 85 | .one-card img {
 86 |     border-radius: 5px;
 87 | }
 88 | .left-side{
 89 |     display: flex;
 90 |     flex-direction: column;
 91 |     align-items: start;
 92 |     gap: 14px;
 93 | }
 94 | .left-side img {
 95 |     max-width: 236px;
 96 | }
 97 | .left-side p {
 98 |     font-family: "poppins";
 99 |     font-size: clamp(18px, 15px, 14px);
100 |     font-weight: 600;
101 |     line-height: 27px;
102 |     letter-spacing: 0em;
103 |     text-align: left;
104 |     text-transform: capitalize;
105 |     
106 | }
107 | .right-side p{
108 |     transform-origin: top left; 
109 |     position: absolute;
110 |     transform: rotate(-90deg) translate(-100%,10%);
111 |     white-space: nowrap;
112 |     font-family: "PT Serif";
113 |     font-size: clamp(12px,11px,10px);
114 |     font-weight: 400;
115 |     line-height: 16px;
116 |     letter-spacing: 0em;
117 |     text-transform: uppercase;
118 | 
119 | }
120 | footer{
121 |     display : flex;
122 |     width: fit-content;
123 |     justify-content : center ; 
124 |     align-items : center;
125 |     font-family: "Montserrat";
126 |     font-size: 14px;
127 |     font-weight: 700;
128 |     line-height: 17px;
129 |     letter-spacing: 0em;
130 |     color: #BDBDBD;
131 |     justify-content: center;
132 |     padding-bottom: 25px;
133 |     
134 | }
135 | footer p {
136 |     font-weight: 500;
137 | }
138 | .spanp1{
139 |     font-weight: 700;
140 |     text-transform: uppercase;
141 |     color: black;
142 |     border: 2px solid black;
143 |     border-radius: 5px;
144 | }
145 | .spanp2 {
146 |     font-weight: 600;
147 | }
148 | @media (width < 1340px) {
149 |     header{
150 |         width: 876px
151 |     }
152 | }
153 | @media (width < 1216px) {
154 |     header {
155 |         width: 80%;
156 |     }
157 | }
158 | @media (width < 850px) {
159 |     header {
160 |         justify-content: start;
161 |         gap: 20px;
162 |         padding: 0 15px;
163 |         width: 100%;
164 |     }
165 |     header{
166 |         width: 100%;
167 |         display: grid;
168 |         grid-row: 5fr 5fr;
169 |     }
170 |     header p{
171 |         font-size: 14px;
172 |     }
173 |     .all-cards{
174 |         min-width: 150px;
175 |         padding: 0 60px;
176 |         display: grid;
177 |         grid-template-columns: 1fr 1fr;
178 |         column-gap:0px ;
179 |         width: 100%;
180 |         padding: 0 auto;
181 |     }
182 |     .one-card{
183 |         width: fit-content;
184 |     }
185 |     .all-cards img{
186 |         width: 210px
187 |     }
188 |     .all-cards .one-card {
189 |         width: fit-content;
190 |     }
191 | 
192 |     .big {
193 |         top: 0;
194 |     }
195 |     .small {
196 |         position: relative;
197 |         top: 30%;
198 |     }
199 | }
200 | @media (width < 550px){
201 |     .all-cards img {
202 |         width: 138px;
203 |     }
204 |     .all-cards{
205 |         padding: 0 3px;}
206 | }
207 | 


--------------------------------------------------------------------------------
/2/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>Team Page</title>
 7 |     <link rel="stylesheet" href="index.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <header>
12 |             <h1>The creative crew</h1>
13 |             <span><p class="firstp">Who we are</p><p class="secondp">We are team of creatively diverse.  driven.  innovative individuals working in various locations from the world.</p></span>
14 |         </header>
15 |         <div class="all-cards">
16 |                     <div class="one-card">
17 |                         <div class="left-side">
18 |                             <img src="images/photo1.png" alt="">
19 |                             <p>Bill Mahoney</p>
20 |                         </div>
21 |                         <div class="right-side">
22 |                             <p>Product owner</p>
23 |                         </div>
24 |                     </div>
25 |                     <!--second card-->
26 |                     <div class="one-card big small">
27 |                         <div class="left-side">
28 |                             <img src="images/photo2.png" alt="">
29 |                             <p>Saba Cabrera</p>
30 |                         </div>
31 |                         <div class="right-side">
32 |                             <p>Art director</p>
33 |                         </div>
34 |                     </div>
35 |                     <!--third card-->
36 |                     <div class="one-card">
37 |                         <div class="left-side">
38 |                             <img src="images/photo3.png" alt="">
39 |                             <p>Shae Le</p>
40 |                         </div>
41 |                         <div class="right-side">
42 |                             <p>Tech Lead</p>
43 |                         </div>
44 |                     </div>
45 |                     <!--4th child-->
46 |                     <div class="one-card small">
47 |                         <div class="left-side">
48 |                             <img src="images/photo4.png" alt="">
49 |                             <p>Skylah Lu</p>
50 |                         </div>
51 |                         <div class="right-side">
52 |                             <p>UX Designer</p>
53 |                         </div>
54 |                     </div>
55 |                     <!--5 card-->
56 |                     <div class="one-card big">
57 |                         <div class="left-side">
58 |                             <img src="images/photo5.png" alt="">
59 |                             <p>Griff Richards</p>
60 |                         </div>
61 |                         <div class="right-side">
62 |                             <p>Developer</p>
63 |                         </div>
64 |                     </div>
65 |                     <!--6 card-->
66 |                     <div class="one-card small">
67 |                         <div class="left-side">
68 |                             <img src="images/photo6.png" alt="">
69 |                             <p>Stan John</p>
70 |                         </div>
71 |                         <div class="right-side">
72 |                             <p>DEverloper</p>
73 |                         </div>
74 |                     </div>
75 |             </div>
76 |         <footer>
77 |             <p>created by <a class="spanp1" href="https://github.com/aceiny">aceiny</a class="spanp2"> - <span>devChallenges.io</span></p>
78 |         </footer>
79 |     </div>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | dev challenge responsive websites
2 | 


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