Skip to content

Commit 0765eb9

Browse files
eduardosanchoeduardosancho
committed
Add project 4 & 5 imgs, space project ul in mobile
1 parent ff0aa25 commit 0765eb9

File tree

5 files changed

+62
-42
lines changed

5 files changed

+62
-42
lines changed

‎images/projects/recipes-thumbnail.png

72 KB
Loading

‎images/projects/reservify-thumbnail.png

1.8 MB
Loading

‎index.html

+14-12
Original file line numberDiff line numberDiff line change
@@ -119,33 +119,35 @@ <h2>Yu-Gi-Oh! Card Data Base</h2>
119119
<div class="thumbnail">
120120
</div>
121121
<div class="project-summary">
122-
<h2>Project Four</h2>
122+
<h2>Reservify</h2>
123123
<ul>
124-
<li>HTML/CSS</li>
125124
<li>Ruby on Rails</li>
126-
<li>Javascript</li>
125+
<li>React</li>
126+
<li>Redux</li>
127127
</ul>
128-
<button class="see-project" type="button">
128+
<a class="see-project" href="#"
129+
onclick='window.open("https://reservify.netlify.app/");return false;'>
129130
See this project
130131
<img src="images/Union.png" alt="right-arrow">
131-
</button>
132+
</a>
132133
</div>
133134
</div>
134135

135136
<div class="five">
136137
<div class="thumbnail">
137138
</div>
138139
<div class="project-summary">
139-
<h2>Project Five</h2>
140+
<h2>Recipes App</h2>
140141
<ul>
141-
<li>HTML/CSS</li>
142142
<li>Ruby on Rails</li>
143-
<li>Javascript</li>
143+
<li>PostgreSQL</li>
144+
<li>Bootstrap</li>
144145
</ul>
145-
<button class="see-project" type="button">
146+
<a class="see-project" href="#"
147+
onclick='window.open("https://infinite-stream-75498.herokuapp.com/");return false;'>
146148
See this project
147149
<img src="images/Union.png" alt="right-arrow">
148-
</button>
150+
</a>
149151
</div>
150152
</div>
151153

@@ -156,8 +158,8 @@ <h2>Project Five</h2>
156158
<h2>Budget App</h2>
157159
<ul>
158160
<li>Ruby on Rails</li>
159-
<li>Bootstrap</li>
160-
<li>PostgreSQL</li>
161+
<li>AWS S3</li>
162+
<li>SendGrid</li>
161163
</ul>
162164
<a class="see-project" href="#" onclick='window.open("https://rocky-cliffs-67926.herokuapp.com/");return false;'>
163165
See this project

‎styles/style-main.css

+17-11
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ header {
130130
.projects {
131131
margin-top: 20px;
132132
display: grid;
133-
grid-template-rows: 99px repeat(6, 120vw);
133+
grid-template-rows: 99px repeat(6, 114vw);
134134
grid-gap: 0;
135135
}
136136

@@ -157,7 +157,7 @@ header {
157157
.thumbnail {
158158
height: 60vw;
159159
background-repeat: no-repeat;
160-
background-size: 100%;
160+
background-size: cover;
161161
background-position: top;
162162
background-image: url(../images/projects/stock-thumbnail.png);
163163
}
@@ -171,35 +171,35 @@ header {
171171
}
172172

173173
.four .thumbnail {
174-
background-image: url(../images/project_thumbnail_4.svg);
174+
background-image: url(../images/projects/reservify-thumbnail.png);
175175
}
176176

177177
.five .thumbnail {
178-
background-image: url(../images/project_thumbnail_5.svg);
178+
background-image: url(../images/projects/recipes-thumbnail.png);
179179
}
180180

181181
.six .thumbnail {
182182
background-image: url(../images/projects/budget-thumbnail.png);
183183
}
184184

185185
.project-summary {
186+
height: 50vw;
186187
display: flex;
187-
flex-wrap: wrap;
188+
flex-direction: column;
189+
justify-content: space-around;
188190
font-family: 'Poppins', sans-serif;
189191
font-weight: 300;
190192
padding-inline-start: 4vw;
191193
padding-inline-end: 4vw;
192194
}
193195

194196
.project-summary h2 {
195-
flex: 1 1 100%;
196-
font-size: 20px;
197-
font-weight: 300;
197+
font-size: 5vw;
198198
margin-bottom: 0;
199+
line-height: 20px;
199200
}
200201

201202
.project-summary ul {
202-
flex: 1 1 100%;
203203
display: flex;
204204
justify-content: space-between;
205205
padding-inline-start: 0;
@@ -209,7 +209,8 @@ header {
209209
.project-summary li {
210210
list-style: none;
211211
text-align: center;
212-
padding-top: 0.7em;
212+
padding-top: 0.8em;
213+
padding-bottom: 0.8em;
213214
width: 28vw;
214215
white-space: nowrap;
215216
background-color: #98dede;
@@ -220,6 +221,7 @@ header {
220221
}
221222

222223
.see-project {
224+
align-self: flex-start;
223225
display: flex;
224226
align-items: center;
225227
padding: 10px;
@@ -228,11 +230,15 @@ header {
228230
border: solid white;
229231
color: white;
230232
font-family: 'Poppins', sans-serif;
231-
font-size: 16px;
233+
font-size: 3vw;
232234
font-weight: 500;
233235
transition: background-color 0.5s;
234236
}
235237

238+
.see-project img {
239+
width: 3.5vw;
240+
}
241+
236242
.see-project:hover {
237243
background-color: whitesmoke;
238244
color: #1a2236;

‎styles/style-min-width-992px.css

+31-19
Original file line numberDiff line numberDiff line change
@@ -159,16 +159,16 @@ header {
159159
grid-row: 10/12;
160160
grid-column: 6/9;
161161
overflow: hidden;
162-
background-image: url(../images/project_thumbnail_4.svg);
162+
background-image: url(../images/projects/reservify-thumbnail.png);
163163
background-repeat: no-repeat;
164-
background-size: contain;
164+
background-size: cover;
165165
}
166166

167167
.five {
168168
grid-row: 5/7;
169169
grid-column: 7/10;
170170
overflow: hidden;
171-
background-image: url(../images/project_thumbnail_5.svg);
171+
background-image: url(../images/projects/recipes-thumbnail.png);
172172
}
173173

174174
.six {
@@ -179,35 +179,44 @@ header {
179179
background-image: url(../images/projects/budget-thumbnail.png);
180180
}
181181

182-
.one .project-summary {
183-
transform: translateY(29vw);
182+
.see-project {
183+
white-space: nowrap;
184+
}
185+
186+
.see-project img {
187+
width: 70%;
188+
}
189+
190+
.project-summary {
184191
background-color: rgba(0, 0, 0, 0);
185192
transition: transform 1s, background-color 1s;
193+
}
194+
195+
.one .project-summary {
196+
transform: translateY(28vw);
186197
padding-bottom: 10vw;
198+
height: 60%;
187199
}
188200

189201
.two .project-summary {
190-
transform: translateY(16vw);
191-
background-color: rgba(0, 0, 0, 0);
192-
transition: transform 1s, background-color 1s;
202+
transform: translateY(15vw);
193203
padding-bottom: 5vw;
194204
padding-inline-start: 2vw;
205+
height: 65%;
195206
}
196207

197208
.three .project-summary {
198-
transform: translateY(24vw);
199-
background-color: rgba(0, 0, 0, 0);
200-
transition: transform 1s, background-color 1s;
209+
transform: translateY(22vw);
201210
padding-bottom: 5vw;
202211
padding-inline-start: 2vw;
212+
height: 65%;
203213
}
204214

205215
.four .project-summary,
206216
.five .project-summary,
207217
.six .project-summary {
208-
transform: translateY(14vw);
209-
background-color: rgba(0, 0, 0, 0);
210-
transition: transform 1s, background-color 1s;
218+
transform: translateY(12vw);
219+
height: 80%;
211220
padding-bottom: 5vw;
212221
padding-inline-start: 2vw;
213222
}
@@ -233,14 +242,20 @@ header {
233242
.four:hover .project-summary,
234243
.five:hover .project-summary,
235244
.six:hover .project-summary {
236-
transform: translateY(3vw);
245+
transform: translateY(2vw);
237246
background-color: #1a2236;
238247
color: white;
239248
}
240249

250+
.projects h2 {
251+
align-self: flex-start;
252+
padding-top: 0.8em;
253+
padding-bottom: 0.8em;
254+
background-color: #1a2236;
255+
}
256+
241257
.one h2 {
242258
flex: 0;
243-
background-color: #1a2236;
244259
font-size: 4.1vw;
245260
font-weight: 700;
246261
white-space: nowrap;
@@ -275,7 +290,6 @@ header {
275290

276291
.two h2 {
277292
flex: 0;
278-
background-color: #1a2236;
279293
font-size: 2vw;
280294
font-weight: 700;
281295
white-space: nowrap;
@@ -312,7 +326,6 @@ header {
312326

313327
.three h2 {
314328
flex: 0;
315-
background-color: #1a2236;
316329
font-size: 3.5vw;
317330
font-weight: 700;
318331
white-space: nowrap;
@@ -351,7 +364,6 @@ header {
351364
.five h2,
352365
.six h2 {
353366
flex: 0;
354-
background-color: #1a2236;
355367
font-size: 2vw;
356368
font-weight: 700;
357369
white-space: nowrap;

0 commit comments

Comments
 (0)