Skip to content

Commit c9bec0b

Browse files
aleks-ivanovaleks-ivanov
authored
Merge pull request #2 from pipeline-foundation/feature/styling-improvement
add new logo and section
2 parents ad685bb + ba48d91 commit c9bec0b

File tree

3 files changed

+176
-33
lines changed

3 files changed

+176
-33
lines changed

‎style.css‎ renamed to ‎css/style.css‎

Lines changed: 130 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ li {
3131
a {
3232
text-decoration: none;
3333
color: var(--orange);
34+
cursor: pointer;
3435
}
3536
a:hover {
3637
text-decoration: underline;
@@ -83,13 +84,12 @@ body {
8384
position: relative;
8485
}
8586
.logo {
86-
height: 20rem;
87-
width: 20rem;
88-
border-radius: 50%;
89-
background-color: var(--white-50);
90-
margin-right: 6rem;
91-
margin-top: 1rem;
92-
margin-bottom: 1rem;
87+
width: 15rem;
88+
margin: 1rem 3rem 1rem 0;
89+
text-align: center;
90+
}
91+
.logo img {
92+
max-width: 100%;
9393
}
9494
.nav {
9595
display: flex;
@@ -103,8 +103,8 @@ body {
103103

104104
.items {
105105
display: flex;
106-
position: absolute;
107-
top: 68%;
106+
position: absolute;
107+
bottom: -4px;
108108
}
109109

110110
.item {
@@ -114,6 +114,10 @@ body {
114114
padding: 1rem;
115115
font-weight: var(--medium);
116116
color: var(--black);
117+
border-bottom: 4px solid transparent;
118+
}
119+
.item:last-child {
120+
margin-right: 0 !important;
117121
}
118122
.item:hover {
119123
border-bottom: 4px solid var(--orange);
@@ -123,14 +127,76 @@ body {
123127
display: none;
124128
}
125129

130+
.case-studies > .text > li {
131+
margin: 20px 0 0;
132+
}
133+
.case-studies > .text > li:first-child {
134+
margin: 0;
135+
}
136+
.case-studies .item-video {
137+
margin: 10px 0 0;
138+
}
139+
140+
@media (max-width: 1099px) {
141+
.case-studies .item-video {
142+
position: relative;
143+
padding-bottom: 56.25%; /* 16:9 */
144+
height: 0;
145+
}
146+
.case-studies .item-video iframe {
147+
position: absolute;
148+
top: 0;
149+
left: 0;
150+
width: 100%;
151+
height: 100%;
152+
}
153+
}
154+
155+
.case-studies .item-right-s {
156+
padding: 20px;
157+
font-size: 16px;
158+
}
159+
.case-studies .item-description {
160+
}
161+
.case-studies blockquote {
162+
margin: 10px 0 0;
163+
padding: 15px 20px;
164+
background-color:var(--grey);
165+
font-style: italic;
166+
}
167+
.case-studies blockquote p {
168+
font-style: normal;
169+
margin: 5px 0 0;
170+
text-align: right;
171+
}
172+
126173
.footer {
174+
position: relative;
127175
margin-top: 3rem;
128176
padding: 3rem;
129177
background-color: var(--black);
130178
color: white;
131179
text-align: center;
132180
}
133181

182+
.footer .socials-list {
183+
display: flex;
184+
justify-content: center;
185+
}
186+
.footer .sl-item {
187+
padding: 0 7px;
188+
}
189+
.footer .sl-link {
190+
font-size: 0;
191+
}
192+
.footer .sl-icon {
193+
font-size: 28px;
194+
color: #fff;
195+
}
196+
.footer .sl-icon:hover {
197+
color: #eee;
198+
}
199+
134200
.footer .copyright {
135201
font-size: 2rem;
136202
color: var(--white);
@@ -155,21 +221,13 @@ body {
155221
display: inline;
156222
margin-right: 1.5rem;
157223
}
158-
.items {
159-
display: none;
160-
}
161224
.item a {
162225
text-decoration: none;
163226
}
164227
.container {
165228
padding: 0rem 3rem 0rem 3rem;
166229
}
167230

168-
.logo {
169-
height: 15rem;
170-
width: 15rem;
171-
margin-right: 2rem;
172-
}
173231
.title {
174232
font-size: 3.6rem;
175233
}
@@ -178,6 +236,12 @@ body {
178236
}
179237
}
180238

239+
@media (max-width: 860px) {
240+
.items {
241+
display: none !important;
242+
}
243+
}
244+
181245
/* Small devices (portrait tablets and large phones, 600px and up) */
182246
@media (min-width: 600px) {
183247
html {
@@ -195,14 +259,11 @@ body {
195259
.text {
196260
font-size: 2.5rem;
197261
}
198-
.items {
199-
top: 78%;
200-
}
201262

202263
.item {
203264
font-weight: var(--medium);
204265
font-size: 2rem;
205-
margin-right: 5rem;
266+
margin-right: 3rem;
206267
padding: 1rem;
207268
}
208269
}
@@ -213,10 +274,22 @@ body {
213274
font-size: 7px;
214275
}
215276

277+
.case-studies .item-title {
278+
font-size: 24px;
279+
}
280+
216281
.footer {
217282
overflow: hidden;
218283
}
219284

285+
.footer .socials-list {
286+
position: absolute;
287+
display: flex;
288+
top: 18px;
289+
left: 0;
290+
right: 0;
291+
}
292+
220293
.footer .copyright {
221294
float: right;
222295
}
@@ -232,11 +305,38 @@ body {
232305
html {
233306
font-size: 8px;
234307
}
235-
.items {
236-
top: 76%;
237-
}
238-
.logo {
239-
margin-right: 4rem;
308+
.footer .socials-list {
309+
top: 24px;
310+
}
311+
}
312+
313+
@media (min-width: 1100px) {
314+
.case-studies .text > li {
315+
display: -ms-flexbox;
316+
display: -webkit-flex;
317+
display: flex;
318+
-webkit-flex-direction: row;
319+
-ms-flex-direction: row;
320+
flex-direction: row;
321+
-webkit-flex-wrap: nowrap;
322+
-ms-flex-wrap: nowrap;
323+
flex-wrap: nowrap;
324+
-webkit-justify-content: flex-start;
325+
-ms-flex-pack: start;
326+
justify-content: flex-start;
327+
-webkit-align-content: stretch;
328+
-ms-flex-line-pack: stretch;
329+
align-content: stretch;
330+
-webkit-align-items: center;
331+
-ms-flex-align: center;
332+
align-items: center;
333+
}
334+
335+
.case-studies .item-right-s {
336+
margin: 0;
337+
max-width: 620px;
338+
background: none;
339+
padding: 0 0 0 40px;
240340
}
241341
}
242342

@@ -255,4 +355,8 @@ body {
255355
.text {
256356
font-size: 2rem;
257357
}
358+
359+
.footer .socials-list {
360+
top: 32px;
361+
}
258362
}

‎img/logo.png‎

49.4 KB
Loading

‎index.html‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,17 @@
88
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
99
rel="stylesheet"
1010
/>
11-
<link rel="stylesheet" href="style.css" />
12-
<link
13-
rel="stylesheet"
14-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
15-
/>
11+
<link rel="stylesheet" href="css\style.css" />
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
1613
<title>PIPELINE FOUNDATION</title>
1714
</head>
1815
<body>
1916
<div class="content">
2017
<div class="content-inside">
2118
<div class="container header">
22-
<div class="logo"></div>
19+
<div class="logo">
20+
<img src="img/logo.png" alt="">
21+
</div>
2322
<div class="nav">
2423
<h1 class="title">PIPELINE FOUNDATION</h1>
2524
<div class="items">
@@ -39,6 +38,10 @@ <h1 class="title">PIPELINE FOUNDATION</h1>
3938
<i class="fas fa-chart-line"></i>
4039
<span>Benefits</span>
4140
</a>
41+
<a href="#CaseStudies" class="item">
42+
<i class="fas fa-code"></i>
43+
<span>Case studies</span>
44+
</a>
4245
</div>
4346
</div>
4447
</div>
@@ -111,16 +114,52 @@ <h1 class="heading"><i class="fas fa-chart-line"></i>Benefits</h1>
111114
</li>
112115
</ul>
113116
</div>
117+
<div class="case-studies line" id="CaseStudies">
118+
<h1 class="heading"><i class="fas fa-code"></i>Case studies</h1>
119+
<ul class="text">
120+
<li>
121+
<div class="item-left-s">
122+
<div class="item-title">
123+
<i class="fas fa-caret-right"></i>
124+
<span>Notepads - </span>
125+
<a href="https://github.com/JasonStein/Notepads" target="_blank">[ repo ]</a>
126+
</div>
127+
<div class="item-video">
128+
<iframe width="560" height="315" src="https://www.youtube.com/embed/p0bGHP-PXD4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
129+
</div>
130+
</div>
131+
<div class="item-right-s">
132+
<p class="item-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis rerum aut fugit corporis quod, non temporibus recusandae quis dolores. Minus, placeat. Error, hic voluptate illum nulla sit totam dolor nam!
133+
Quae debitis alias officiis accusamus illum earum officia ducimus cupiditate tenetur. Totam incidunt dignissimos doloribus, excepturi nostrum blanditiis quasi saepe! Magni consequuntur, cumque cupiditate nulla quas obcaecati voluptate et necessitatibus?</p>
134+
<blockquote>"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis harum dicta odit ipsum debitis, rem praesentium laudantium. Laudantium reiciendis incidunt numquam odit quam ex possimus nisi eos. Libero, ad eum."
135+
<p class="quote-author">- Jason Stein</p>
136+
</blockquote>
137+
</div>
138+
</li>
139+
</ul>
140+
</div>
114141
</div>
115142
</div>
116143
</div>
117144

118145
<div class="footer">
119-
<p class="copyright">© 2021 Pipeline Foundation</p>
146+
<ul class="socials-list">
147+
<li class="sl-item">
148+
<a href="https://www.youtube.com/channel/UC74WMDdXLFaOc32ndvRSlqw" class="sl-link" target="_blank">
149+
<i class="fab fa-youtube sl-icon"></i>Youtube
150+
</a>
151+
</li>
152+
<li class="sl-item">
153+
<a href="https://twitter.com/PipelineFounda1" class="sl-link" target="_blank">
154+
<i class="fab fa-twitter sl-icon"></i>Twitter
155+
</a>
156+
</li>
157+
</ul>
120158
<p class="info">
121159
Non profit initiative sponsored by
122160
<a href="https://singlet.dev" target="_blank">Singlet Dev</a>
123161
</p>
162+
<p class="copyright">© 2021 Pipeline Foundation</p>
124163
</div>
125164
</body>
126165
</html>

0 commit comments

Comments
 (0)