Skip to content

add new logo and section #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 6, 2021
Merged

add new logo and section #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e160485
add new logo and section
aleks-ivanov Apr 6, 2021
ba48d91
Merge branch 'master' of https://github.com/pipeline-foundation/pipel…
aleks-ivanov Apr 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 130 additions & 26 deletions style.css → css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ li {
a {
text-decoration: none;
color: var(--orange);
cursor: pointer;
}
a:hover {
text-decoration: underline;
Expand Down Expand Up @@ -83,13 +84,12 @@ body {
position: relative;
}
.logo {
height: 20rem;
width: 20rem;
border-radius: 50%;
background-color: var(--white-50);
margin-right: 6rem;
margin-top: 1rem;
margin-bottom: 1rem;
width: 15rem;
margin: 1rem 3rem 1rem 0;
text-align: center;
}
.logo img {
max-width: 100%;
}
.nav {
display: flex;
Expand All @@ -103,8 +103,8 @@ body {

.items {
display: flex;
position: absolute;
top: 68%;
position: absolute;
bottom: -4px;
}

.item {
Expand All @@ -114,6 +114,10 @@ body {
padding: 1rem;
font-weight: var(--medium);
color: var(--black);
border-bottom: 4px solid transparent;
}
.item:last-child {
margin-right: 0 !important;
}
.item:hover {
border-bottom: 4px solid var(--orange);
Expand All @@ -123,14 +127,76 @@ body {
display: none;
}

.case-studies > .text > li {
margin: 20px 0 0;
}
.case-studies > .text > li:first-child {
margin: 0;
}
.case-studies .item-video {
margin: 10px 0 0;
}

@media (max-width: 1099px) {
.case-studies .item-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.case-studies .item-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

.case-studies .item-right-s {
padding: 20px;
font-size: 16px;
}
.case-studies .item-description {
}
.case-studies blockquote {
margin: 10px 0 0;
padding: 15px 20px;
background-color:var(--grey);
font-style: italic;
}
.case-studies blockquote p {
font-style: normal;
margin: 5px 0 0;
text-align: right;
}

.footer {
position: relative;
margin-top: 3rem;
padding: 3rem;
background-color: var(--black);
color: white;
text-align: center;
}

.footer .socials-list {
display: flex;
justify-content: center;
}
.footer .sl-item {
padding: 0 7px;
}
.footer .sl-link {
font-size: 0;
}
.footer .sl-icon {
font-size: 28px;
color: #fff;
}
.footer .sl-icon:hover {
color: #eee;
}

.footer .copyright {
font-size: 2rem;
color: var(--white);
Expand All @@ -155,21 +221,13 @@ body {
display: inline;
margin-right: 1.5rem;
}
.items {
display: none;
}
.item a {
text-decoration: none;
}
.container {
padding: 0rem 3rem 0rem 3rem;
}

.logo {
height: 15rem;
width: 15rem;
margin-right: 2rem;
}
.title {
font-size: 3.6rem;
}
Expand All @@ -178,6 +236,12 @@ body {
}
}

@media (max-width: 860px) {
.items {
display: none !important;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {
html {
Expand All @@ -195,14 +259,11 @@ body {
.text {
font-size: 2.5rem;
}
.items {
top: 78%;
}

.item {
font-weight: var(--medium);
font-size: 2rem;
margin-right: 5rem;
margin-right: 3rem;
padding: 1rem;
}
}
Expand All @@ -213,10 +274,22 @@ body {
font-size: 7px;
}

.case-studies .item-title {
font-size: 24px;
}

.footer {
overflow: hidden;
}

.footer .socials-list {
position: absolute;
display: flex;
top: 18px;
left: 0;
right: 0;
}

.footer .copyright {
float: right;
}
Expand All @@ -232,11 +305,38 @@ body {
html {
font-size: 8px;
}
.items {
top: 76%;
}
.logo {
margin-right: 4rem;
.footer .socials-list {
top: 24px;
}
}

@media (min-width: 1100px) {
.case-studies .text > li {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.case-studies .item-right-s {
margin: 0;
max-width: 620px;
background: none;
padding: 0 0 0 40px;
}
}

Expand All @@ -255,4 +355,8 @@ body {
.text {
font-size: 2rem;
}

.footer .socials-list {
top: 32px;
}
}
Binary file added img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 46 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,17 @@
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
<link rel="stylesheet" href="css\style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<title>PIPELINE FOUNDATION</title>
</head>
<body>
<div class="content">
<div class="content-inside">
<div class="container header">
<div class="logo"></div>
<div class="logo">
<img src="img/logo.png" alt="">
</div>
<div class="nav">
<h1 class="title">PIPELINE FOUNDATION</h1>
<div class="items">
Expand All @@ -39,6 +38,10 @@ <h1 class="title">PIPELINE FOUNDATION</h1>
<i class="fas fa-chart-line"></i>
<span>Benefits</span>
</a>
<a href="#CaseStudies" class="item">
<i class="fas fa-code"></i>
<span>Case studies</span>
</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -111,16 +114,52 @@ <h1 class="heading"><i class="fas fa-chart-line"></i>Benefits</h1>
</li>
</ul>
</div>
<div class="case-studies line" id="CaseStudies">
<h1 class="heading"><i class="fas fa-code"></i>Case studies</h1>
<ul class="text">
<li>
<div class="item-left-s">
<div class="item-title">
<i class="fas fa-caret-right"></i>
<span>Notepads - </span>
<a href="https://github.com/JasonStein/Notepads" target="_blank">[ repo ]</a>
</div>
<div class="item-video">
<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>
</div>
</div>
<div class="item-right-s">
<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!
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>
<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."
<p class="quote-author">- Jason Stein</p>
</blockquote>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="footer">
<p class="copyright">© 2021 Pipeline Foundation</p>
<ul class="socials-list">
<li class="sl-item">
<a href="https://www.youtube.com/channel/UC74WMDdXLFaOc32ndvRSlqw" class="sl-link" target="_blank">
<i class="fab fa-youtube sl-icon"></i>Youtube
</a>
</li>
<li class="sl-item">
<a href="https://twitter.com/PipelineFounda1" class="sl-link" target="_blank">
<i class="fab fa-twitter sl-icon"></i>Twitter
</a>
</li>
</ul>
<p class="info">
Non profit initiative sponsored by
<a href="https://singlet.dev" target="_blank">Singlet Dev</a>
</p>
<p class="copyright">© 2021 Pipeline Foundation</p>
</div>
</body>
</html>