Skip to content

Commit 852add6

Browse files
author
Vineet
committed
Added features: 1.New layout for hero section, 2.Structure of files is improved, 3.Added cdn of Bootstrap#3 and jquery for faster implementation of website
1 parent 302bd4a commit 852add6

File tree

3 files changed

+189
-25
lines changed

3 files changed

+189
-25
lines changed

‎index.html

+111-25
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,119 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
5-
<meta charset="utf-8">
6-
<meta content="width=device-width, initial-scale=1.0" name="viewport">
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
77
<title>Catergos</title>
8-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9-
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
10-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
11-
<link rel="stylesheet" type="text/css" href="assets/css/index.css">
12-
</head>
13-
<body class="home-page">
14-
<img class="header-logo" alt="Catergos logo" src="assets/images/logo.png">
15-
<section>
8+
<!-- Latest compiled and minified Bootstrap CSS -->
9+
<link
10+
rel="stylesheet"
11+
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
12+
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
13+
crossorigin="anonymous"
14+
/>
1615

17-
<p class="heading-text">CATERGOS - THE CAT OPERATING SYSTEM</p>
16+
<link rel="stylesheet" href="./static/css/style.css" />
1817

19-
<p class="description">
20-
What are cats? Nothing but small, cute form of beasts like lion and tigers!
21-
Inspired from the difference, Catergos is a desktop linux which is a beautiful desktop OS, but is a beast in itself!</p>
18+
<script
19+
src="https://code.jquery.com/jquery-3.4.1.min.js"
20+
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
21+
crossorigin="anonymous"
22+
></script>
2223

23-
</section>
24+
<!-- Latest compiled and minified Bootstrap JavaScript -->
25+
<script
26+
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
27+
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
28+
crossorigin="anonymous"
29+
></script>
30+
<script src="./static/js/main.js"></script>
31+
</head>
32+
<body>
33+
<!-- navbar -->
34+
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top">
35+
<div class="container-fluid">
36+
<!-- Brand and toggle get grouped for better mobile display -->
37+
<div class="navbar-header">
38+
<img style="height: 50px;" src="./assets/images/logo.png" alt="" />
39+
</div>
2440

25-
<section class='dev-links'>
26-
<ul>
27-
<li><a href="https://github.com/Catergos/catergos-iso/releases" target="_blank">Download ISO</a></li>
28-
<li><a href="https://github.com/catergos" target="_blank">Developer Section</a></li>
29-
</ul>
30-
</section>
41+
<!-- Collect the nav links, forms, and other content for toggling -->
42+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
43+
<ul class="nav navbar-nav">
44+
<li>
45+
<a target="_blank" href="https://github.com/catergos"
46+
>Developer</a
47+
>
48+
</li>
49+
<li>
50+
<a target="_blank" href="https://github.com/Catergos/catergos-iso"
51+
>Get Involved</a
52+
>
53+
</li>
54+
</ul>
55+
<ul class="nav navbar-nav navbar-right"></ul>
56+
</div>
57+
<!-- /.navbar-collapse -->
58+
</div>
59+
<!-- /.container-fluid -->
60+
</nav>
61+
<div class="container-fluid">
62+
<div id="hero" class="col-sm-12 flexBox">
63+
<div class="col-sm-6">
64+
<h1 id="main-heading">CATERGOS - The cat operating system</h1>
65+
<!-- <h2 class="sub-heading">
66+
The cat operating system
67+
(some more content bla,bla,bla... Lorem
68+
ipsum dolor sit amet, consectetur adipisicing elit. Architecto,
69+
dolore.) <br />
70+
P.S. - The onigiri operating system
71+
</h2> -->
72+
<h2 id="sub-heading">
73+
What are cats? Nothing but small, cute form of beasts like lion and
74+
tigers! Inspired from the difference, Catergos is a desktop linux
75+
which is a beautiful desktop OS, but is a beast in itself!
76+
</h2>
77+
<button class="btn btn-lg btn-success downloadIso">
78+
Download ISO
79+
</button>
80+
</div>
81+
<div class="col-sm-6">
82+
<img style="width:100%" src="./assets/images/logo.png" alt="" />
83+
</div>
84+
</div>
3185

32-
</body>
86+
<div class="col-sm-12 content">
87+
<h2 class="text-center heading">Features</h2>
88+
<div class="col-sm-4 text-center">
89+
<h3>Fast</h3>
90+
<p>
91+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum sunt
92+
inventore vitae exercitationem sapiente accusantium ad dolor
93+
perferendis quaerat sequi!
94+
</p>
95+
</div>
96+
<div class="col-sm-4 text-center">
97+
<h3>
98+
Open Source
99+
</h3>
100+
<p>
101+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum sunt
102+
inventore vitae exercitationem sapiente accusantium ad dolor
103+
perferendis quaerat sequi!
104+
</p>
105+
</div>
106+
<div class="col-sm-4 text-center">
107+
<h3>
108+
Safe & Secure
109+
</h3>
110+
<p>
111+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum sunt
112+
inventore vitae exercitationem sapiente accusantium ad dolor
113+
perferendis quaerat sequi!
114+
</p>
115+
</div>
116+
</div>
117+
</div>
118+
</body>
33119
</html>

‎static/css/style.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* GLOBAL */
2+
.flexBox {
3+
display: flex;
4+
justify-content: space-around;
5+
align-items: center;
6+
}
7+
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
10+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
11+
}
12+
13+
#hero {
14+
padding-top: 80px;
15+
}
16+
17+
#hero .downloadIso {
18+
border-radius: 3px;
19+
}
20+
21+
#hero .downloadIso:focus {
22+
outline: none;
23+
}
24+
25+
.heading {
26+
font-size: 3em;
27+
font-weight: 300;
28+
}
29+
30+
.content {
31+
padding-top: 40px;
32+
}
33+
34+
.content > div {
35+
padding: 50px;
36+
}
37+
38+
.content > div h3 {
39+
font-weight: 300;
40+
margin-bottom: 30px;
41+
}
42+
43+
/* HEADER */
44+
45+
#main-nav {
46+
background: #fff;
47+
border: none;
48+
padding: 5px 0;
49+
transition: 0.5s all ease;
50+
box-shadow: none;
51+
}
52+
53+
/* HERO */
54+
55+
#main-heading {
56+
line-height: 60px;
57+
font-size: 60px;
58+
font-weight: 200;
59+
letter-spacing: 2px;
60+
}
61+
62+
#sub-heading {
63+
color: #757575;
64+
font-size: 20px;
65+
font-weight: 300;
66+
line-height: 27px;
67+
}

‎static/js/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
$(document).ready(function() {
2+
$(document).on("click", ".downloadIso", function() {
3+
window.open("https://github.com/Catergos/catergos-iso/releases");
4+
});
5+
});
6+
7+
$(document).scroll(function() {
8+
window.scrollY > 0
9+
? $("#main-nav").css("box-shadow", "0px 1px 10px rgba(0,0,0,0.1)")
10+
: $("#main-nav").css("box-shadow", "");
11+
});

0 commit comments

Comments
 (0)