Skip to content
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

Major improvements in look and feel #29

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Major improvements in look and feel #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
87 changes: 48 additions & 39 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
*{
margin:0;
font-family:'Raleway',sans-serif;
scroll-behavior: smooth;
}
.logo-stripe{
text-align: center;
Expand All @@ -27,21 +28,15 @@ a{
text-decoration:none;
}
.button{
text-decoration:none;
color:white;
border:2px solid white;
padding-top:10px;
font-weight:bolder;
padding-bottom:10px;
padding-left:18px;
padding-right:18px;

font-size:18px;
text-transform:uppercase;

z-index:1;

}
text-decoration:none;
color:white;
border:2px solid white;
padding:10px 18px;
font-weight:bolder;
font-size:18px;
text-transform:uppercase;
z-index:1;
}
.button:after{
content: "";
position: absolute;
Expand Down Expand Up @@ -106,6 +101,7 @@ nav{
}
.image-two{
margin-left:-14%;
margin-left:-14%;
}
.subone-fixed{
margin-top:20%;
Expand Down Expand Up @@ -169,28 +165,37 @@ nav{
margin-left:100px;
color:#757575;
}
.fourz{
height:200px;
}
.fivez{
width:65%;
height:65%;
margin-top:35px;
}
.fiveone{
margin-left:78%;
margin-top:-10.7%;
.providers{
margin-top: 60px;
width: 100%;
height: fit-content;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: space-evenly;
}
.providers img{
height: 45px;
transition: all 200ms ease-in-out;
cursor: pointer;
}
.fourthone{
margin-left:62%;
margin-top:-9.4%;
.providers img:hover{
transform: scale(1.05);
}
.para-three{
line-height:2;
margin-left:100px;
margin-bottom:6px;
color:#757575;
}

.social{
transition: all 200ms ease-in-out;
}
.social:hover{
transform: scale(1.05);
}
.card {
display: block;
margin: auto;
Expand Down Expand Up @@ -542,11 +547,14 @@ body{
margin-top: 40px;
}
.products .product {
padding: 10px;
transition: background 0.6s linear;
padding: 10px 30px 15px;
transition: all 0.6s linear;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
}
.products .product:hover {
background: #ededee;
background: #dbdbdb;
border-radius: 10px;
}

Expand All @@ -558,13 +566,12 @@ body{
}

.products .product .pr-description{
text-align: center;
text-align: justify;
padding-bottom: 10px;
}

.products .product .pr-github{
padding-top: 30px;
padding-bottom: 40px;
padding: 20px 0 10px;
text-align: center;
}

Expand All @@ -574,10 +581,8 @@ body{


#main{
transition:margin-left 0.5s;


width:100%;
transition:margin-left 0.5s;
width:100%;
}

.navbar-nav{
Expand All @@ -591,6 +596,10 @@ body{
padding-right: 1.5rem !important;
}

#vendors{
margin-top: 80px;
}

@media(max-width:568px){
.navbar-nav{display:none}
}
Expand Down
Binary file modified img/l2.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.
Binary file modified img/l3.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.
Binary file modified img/l4.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.
Binary file modified img/l5.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.
51 changes: 22 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/vectwo.png" type="image/x-icon">
</head>

<body>
Expand Down Expand Up @@ -62,48 +63,48 @@
<div class="container">
<div class="row products">
<div class="col-lg-6 product">
<div class="pr-github">
<a href="https://github.com/cloudlibz/nodecloud"><i class="fa fa-3x fa-github"></i></a>
</div>
<div class="pr-name">
<a href="https://github.com/cloudlibz/nodecloud">NodeCloud</a>
</div>
<div class="pr-description">
NodeCloud is a standard library written in NodeJS to get a single API on the open cloud with multiple providers. Making open cloud easily accessible and managed.
</div>
<div class="pr-github">
<a href="https://github.com/cloudlibz/nodecloud"><i class="fa fa-3x fa-github"></i></a>
</div>
</div>
<div class="col-lg-6 product">
<div class="pr-github">
<a href="https://github.com/cloudlibz/gocloud"><i class="fa fa-3x fa-github"></i></a>
</div>
<div class="pr-name">
<a href="https://github.com/cloudlibz/gocloud">GoCloud</a>
</div>
<div class="pr-description">
GoCloud is a golang library which hides the difference between different APIs provided by varied cloud providers (AWS, GCP, OpenStack etc.) and allows you to manage different cloud resources through a unified and easy to use API.
</div>
<div class="pr-github">
<a href="https://github.com/cloudlibz/gocloud"><i class="fa fa-3x fa-github"></i></a>
</div>
</div>
<div class="col-lg-6 product">
<div class="pr-github">
<a href="https://github.com/cloudlibz/clocal-gcp"><i class="fa fa-3x fa-github"></i></a>
</div>
<div class="pr-name">
<a href="https://github.com/cloudlibz/clocal-gcp">CLocal - GCP</a>
</div>
<div class="pr-description">
CLocal GCP emulates Google Cloud Platform services locally. Users can leverage the rest endpoints provided by the CLocal-GCP to mock the cloud API invocations. It uses the same interfaces provided by the GCP REST API.
</div>
<div class="pr-github">
<a href="https://github.com/cloudlibz/clocal-gcp"><i class="fa fa-3x fa-github"></i></a>
</div>
</div>
<div class="col-lg-6 product">
<div class="pr-github">
<a href="https://github.com/cloudlibz/clocal-azure"><i class="fa fa-3x fa-github"></i></a>
</div>
<div class="pr-name">
<a href="https://github.com/cloudlibz/clocal-azure">CLocal - Azure</a>
</div>
<div class="pr-description">
Clocal-Azure provides an easy-to-use test/mocking framework for developing Cloud applications. It emulates Azure services on the localhost.
</div>
<div class="pr-github">
<a href="https://github.com/cloudlibz/clocal-azure"><i class="fa fa-3x fa-github"></i></a>
</div>
</div>
</div>
</div>
Expand All @@ -113,20 +114,12 @@
<div class="subtwo-fixed" id="vendors">
<font class="heading-two-tres">Providers unified by CloudLibz</font>
<br />
<div class="firstone">
<img src="img/l1.png" class="logoz onez">
</div>
<div class="secondone">
<img src="img/l2.png" class="logoz twoz">
</div>
<div class="thirdone">
<img src="img/l3.png" class="logoz trez">
</div>
<div class="fourthone">
<img src="img/l4.png" class="logoz fourz">
</div>
<div class="fiveone">
<img src="img/ali-cloud.png" class="logoz fivez">
<div class="providers">
<img src="img/l1.png">
<img src="img/l2.png">
<img src="img/l3.png">
<img src="img/l4.png">
<img src="img/ali-cloud.png">
</div>
</div>
</div>
Expand All @@ -137,22 +130,22 @@ <h1 class="testimonials-text" align="center">Awesome Community</h1>
<br>
<div class="row">
<div class="row-content">
<div class="gitter">
<div class="gitter social">
<a href="https://gitter.im/cloudlibz/cloudlibz">
<img src="img/gitter.jpg" alt="">
<p>Gitter</p>
</a>


</div>
<div class="forum">
<div class="forum social">
<a href="https://groups.google.com/forum/#!forum/cloudlibz">
<img src="img/google-groups-1.png" alt="">
<p>Mail Forum</p>
</a>

</div>
<div class="github">
<div class="github social">
<a href="https://github.com/cloudlibz/">
<img src="img/github.png" alt="">
<p>GitHub</p>
Expand Down