Skip to content

Commit 486ab39

Browse files
anubhavitisanubhavitis
authored
Merge pull request #18 from STM3900/beta
Update style of card and put the logo in the navbar
2 parents 260b1ec + d8077f8 commit 486ab39

File tree

3 files changed

+109
-85
lines changed

3 files changed

+109
-85
lines changed

‎Logo-removebg.png‎

12.1 KB
Loading

‎index.html‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,42 +36,45 @@
3636
<body>
3737
<div class="navlen">
3838
<div class="navbar">
39-
<box class="element">
40-
<a href="../../index.html">Algorithm Visualizer</a>
39+
<box class="element element-left">
40+
<img src="Logo1.png" alt="logo">
41+
<a href="index.html">Algorithm Visualizer</a>
4142
</box>
4243
<box class="element">
4344
<a href="https://github.com/servermonk/Algorithm-Visualizer" target=_blank>
4445
<i class="fab fa-github-square"></i>Github</a>
4546
</box>
4647
</div>
4748
</div>
48-
<img src="Logo.png" width="80%"
49-
style="margin: auto; margin-top: 20px; margin-bottom: 0px; box-shadow: 3px 3px 5px #666666, -3px -3px 5px white; border-radius: 15px;">
50-
<!-- <img src="https://user-images.githubusercontent.com/26124625/94157470-e811f400-fe9e-11ea-8a7e-d9a08fe1d542.png" width="80%" style="margin: auto; margin-top: 20px; margin-bottom: 0px; box-shadow: 3px 3px 5px #666666, -3px -3px 5px white; border-radius: 15px;"> -->
51-
<div class="flex-cards">
52-
<div class="flex-card-items" onclick="location.href='public/graph/graph.html'">
53-
<heading>Path Algorithms</heading>
54-
<content>
55-
<ul>
56-
<li> Dijkstra's Algorithm </li>
57-
<li> A* Algorithm </li>
58-
<li> Depth First Search (DFS) </li>
59-
<li> Breath First Search (BFS) </li>
60-
</ul>
61-
</content>
49+
<section class="main-content">
50+
<div class="main-content-logo">
51+
<img src="Logo-removebg.png" alt="logo">
6252
</div>
63-
<div class="flex-card-items" onclick="location.href='public/sorting/sorting_page.html'">
64-
<heading>Array Sorting Algorithms</heading>
65-
<content>
66-
<ul>
67-
<li> Bubble Sort </li>
68-
<li> Insertion Sort </li>
69-
<li> Merge Sort Sort </li>
70-
<li> Quick Sort </li>
71-
</ul>
72-
</content>
53+
<div class="flex-cards">
54+
<div class="flex-card-items first-card" onclick="location.href='public/graph/graph.html'">
55+
<heading>Path Algorithms</heading>
56+
<content>
57+
<ul>
58+
<li>Dijkstra's Algorithm</li>
59+
<li>A* Algorithm</li>
60+
<li> Depth First Search (DFS)</li>
61+
<li> Breath First Search (BFS)</li>
62+
</ul>
63+
</content>
64+
</div>
65+
<div class="flex-card-items second-card" onclick="location.href='public/sorting/sorting_page.html'">
66+
<heading>Array Sorting Algorithms</heading>
67+
<content>
68+
<ul>
69+
<li>Bubble Sort</li>
70+
<li>Insertion Sort</li>
71+
<li>Merge Sort Sort</li>
72+
<li>Quick Sort</li>
73+
</ul>
74+
</content>
75+
</div>
7376
</div>
74-
</div>
77+
</section>
7578
</body>
7679

7780
</html>

‎public/styling/style_home.css‎

Lines changed: 79 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,17 @@ body {
1515
/* ///////////////////////NavBar Styling ///////////////////////// */
1616
.navlen {
1717
width: 100%;
18-
background: #c6d3e7;
18+
background: rgb(50, 50, 50);
1919
box-shadow:
20-
3px 3px 5px #5A5C5E,
21-
-3px -3px 5px #ffffff;
20+
2px 2px 3px #5A5C5E,
21+
-2px -2px 3px #ffffff;
2222
}
2323

2424
.navbar {
25+
height: 5vh;
26+
color: white;
2527
margin-right: auto;
2628
margin-left: auto;
27-
padding: 5px;
2829
display: flex;
2930
flex-wrap: wrap;
3031
justify-content: space-between;
@@ -36,87 +37,106 @@ body {
3637
font-weight: inherit;
3738
background: transparent;
3839
}
40+
.element-left{
41+
display: flex;
42+
flex-direction: row;
43+
justify-content: space-between;
44+
align-items: center;
45+
align-content: center;
46+
}
47+
48+
.element-left img{
49+
height: 30px;
50+
}
51+
3952

4053
.fab {
4154
padding-left: 1px;
4255
padding-right: 5px;
4356
}
4457

45-
.element {
46-
padding-left: 5px;
47-
padding-right: 5px;
48-
background: transparent;
49-
align-items: center;
50-
border-radius: 5px;
58+
/* /////////////////////// Main content of Index ///////////////////////// */
59+
.main-content{
60+
width: 80%;
61+
height: 95vh;
5162
display: flex;
63+
flex-direction: column;
5264
justify-content: center;
53-
border: none;
65+
align-items: center;
66+
align-content: center;
67+
68+
margin-right: 10%;
69+
margin-left: 10%;
5470
}
5571

56-
.element:hover {
57-
box-shadow:
58-
inset 2px 2px 3px #5A5C5E,
59-
inset -2px -2px 3px #ffffff;
72+
.main-content-logo{
73+
align-self: flex-start;
74+
min-width: 50%;
75+
76+
margin-bottom: 30px;
6077
}
6178

62-
a:link,
63-
a:visited {
64-
margin: auto;
65-
background: transparent;
66-
padding: 5px;
67-
color: black;
68-
text-decoration: none;
69-
/* font-size: larger; */
70-
display: inline-flexbox;
71-
border: none;
79+
.main-content-logo img{
80+
height: auto;
81+
width: 100%;
7282
}
7383

74-
/* ///////////////////////NavBar Styling ENDS ///////////////////////// */
84+
.flex-cards{
85+
width: 100%;
7586

76-
.flex-cards {
77-
margin-left: auto;
78-
margin-right: auto;
79-
margin: auto;
80-
width: 80%;
81-
border: none;
8287
display: flex;
83-
flex-wrap: wrap;
84-
align-items: stretch;
85-
justify-content: space-around;
86-
align-items: center;
88+
flex-direction: row;
89+
justify-content: flex-start;
8790
align-content: center;
88-
padding: 5px;
89-
margin-top: 20px;
90-
border: none;
91+
align-items: center;
92+
93+
margin-top: 30px;
94+
margin-bottom: 5%;
9195
}
9296

93-
.flex-card-items {
94-
flex: 1 1 0;
97+
.flex-card-items{
98+
min-width: 40%;
99+
padding: 20px;
100+
color: white;
95101
border-radius: 5px;
96-
margin-left: auto;
97-
margin-right: auto;
98-
padding: 5px;
99-
margin: 10px;
100-
border: none;
101-
align-items: center;
102-
text-align: center;
103-
box-shadow:
104-
3px 3px 5px #5A5C5E,
105-
-3px -3px 5px #ffffff;
102+
transition: 0.3s;
103+
}
104+
105+
.flex-card-items:hover{
106106
cursor: pointer;
107+
transform: scale(0.99);
107108
}
108109

109-
.flex-card-items:hover {
110-
box-shadow:
111-
2px 2px 3px #5A5C5E,
112-
-2px -2px 3px #ffffff;
110+
.flex-card-items heading{
111+
font-size: 2rem;
113112
}
114113

115-
heading {
116-
/* font-size: larger; */
117-
padding: 10px;
114+
.first-card{
115+
background: rgb(50, 50, 50);
118116
}
119117

118+
.second-card{
119+
background: rgb(50, 50, 50);
120+
margin-left: 5%;
121+
}
122+
123+
124+
a:link,
125+
a:visited {
126+
margin: auto;
127+
background: transparent;
128+
padding: 5px;
129+
color: white;
130+
text-decoration: none;
131+
/* font-size: larger; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
132+
display: inline-flexbox;
133+
border: none;
134+
}
135+
136+
/* ///////////////////////NavBar Styling ENDS ///////////////////////// */
137+
138+
139+
120140

121141
li {
122142
padding: 5px;
@@ -176,4 +196,5 @@ li {
176196
.navbar {
177197
width: 90%;
178198
}
199+
179200
}

0 commit comments

Comments
 (0)