Skip to content

Commit 87320bd

Browse files
TarekAlQaddyTarekAlQaddy
committed
additional edits 🔥
add tracks remaining icons add footer to every page, modify graduates structure, add FAQs prototype page
1 parent 9f48d9c commit 87320bd

23 files changed

Lines changed: 471 additions & 318 deletions

‎css/faqs.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
body{
2+
background: #1abbcc;
3+
color: #fff;
4+
}
5+
#faqs-text-sec{
6+
margin: 35px auto;
7+
}
8+
#faqs-text-sec>.row>.col{
9+
10+
}
11+
#faqs-text-sec h1{
12+
font-size: 7rem;
13+
}
14+
#faqs-sec .collapsible{
15+
border:none;
16+
}
17+
#faqs-sec .collapsible .collapsible-header{
18+
background: #1ac5d6;
19+
height:70px;
20+
font-size: 2.3rem;
21+
line-height: 70px;
22+
border:none;
23+
}
24+
#faqs-sec .collapsible .collapsible-header:hover{
25+
background: #1aa1b2;
26+
}
27+
#faqs-sec .collapsible .collapsible-body{
28+
background: #fff;
29+
color:#1abbcc;
30+
font-size: 1.7rem;
31+
border:none;
32+
box-shadow:inset 0 2px 2px 0 rgba(0,0,0,0.4),inset 0 -3px 2px 0 rgba(0,0,0,0.1),inset 0 2px 2px -1px rgba(0,0,0,0.3),inset 0 -2px 2px 0 rgba(0,0,0,0.3);
33+
}

‎css/graduates.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ body{
3535
width:135px;
3636
border-radius: 50% 50%;
3737
}
38+
.grad h2{
3839

40+
}
3941

4042
@media only all and (max-width: 992px){
4143
#title-sec h1{

‎css/home.css‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -143,12 +143,7 @@
143143
}
144144

145145

146-
footer>.row:first-child{
147-
margin-top:150px;
148-
}
149-
footer h6{
150-
font-family: sans-serif;
151-
}
146+
152147

153148

154149
@keyframes track-anim{

‎css/main.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@font-face {
22
font-family: arc;
3-
src: local('arc'), url(../fonts/Arciform.otf) format('opentype');
3+
src: local('arc'), url("../fonts/Arciform.otf") format('opentype');
44
}
55
:root{
66
font-size: 16px
@@ -23,5 +23,17 @@ nav ul a{
2323
#sidenav-list{
2424
padding-left:30px;
2525
background: #ededed;
26-
list-style: square black;
26+
list-style: square;
27+
}
28+
footer{
29+
padding-top: 20px;
30+
padding-bottom: 20px;
31+
background: #fff;
32+
}
33+
footer>.row:last-child{
34+
margin-bottom: 0;
35+
}
36+
footer h6{
37+
font-family: sans-serif;
38+
color: #000;
2739
}

‎css/tracks.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@ body{
5353
.slick-block p{
5454
font-size: 1.4rem
5555
}
56-
56+
.slick-block img{
57+
width:150px;
58+
}
5759
.track-title.active{
5860
-webkit-transform: rotate(0);
5961
transform: rotate(0);

‎faqs.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Protons FAQs</title>
6+
<meta name="viewport" content="width=device-width">
7+
<meta name="theme-color" content="#2196f3">
8+
9+
<!-- use CDN in production mode -->
10+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11+
<link rel="stylesheet" href="vendor/css/materialize.min.css">
12+
13+
<link rel="stylesheet" href="css/main.css">
14+
<link rel="stylesheet" href="css/faqs.css">
15+
</head>
16+
<body>
17+
<nav>
18+
<div class="nav-wrapper white ">
19+
<a href="home.html" id="brand-logo"><img src="media/protons-blue.png"></a>
20+
<a href="#" data-activates="mobile-demo" id="button-collapse" class="button-collapse blue-text"><i class="material-icons">menu</i></a>
21+
<ul class="right hide-on-med-and-down">
22+
<li><a href="tracks.html" class="blue-text">Tracks</a></li>
23+
<li><a href="history.html" class="blue-text">History</a></li>
24+
<li><a href="faqs.html" class="blue-text">FAQs</a></li>
25+
<li><a href="graduates.html" class="blue-text">Graduates</a></li>
26+
</ul>
27+
<ul class="side-nav" id="mobile-demo">
28+
<li><a href="tracks.html">Tracks</a></li>
29+
<li><a href="history.html">History</a></li>
30+
<li><a href="faqs.html">FAQs</a></li>
31+
<li><a href="graduates.html">Graduates</a></li>
32+
</ul>
33+
</div>
34+
</nav>
35+
36+
<section id="faqs-text-sec">
37+
<div class="row">
38+
<div class="col m8 offset-m2 s8 offset-s2 center-align">
39+
<h1>Know more about protons</h1>
40+
</div>
41+
</div>
42+
</section>
43+
<section id="faqs-sec" class="">
44+
<div class="">
45+
<ul class="collapsible center-block center-align z-depth-2" data-collapsible="accordion">
46+
<li>
47+
<div class="collapsible-header">What is the goal of this project ?</div>
48+
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
49+
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet</span></div>
50+
</li>
51+
<li>
52+
<div class="collapsible-header">How are you ?</div>
53+
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</span></div>
54+
</li>
55+
<li>
56+
<div class="collapsible-header">What is your name ?</div>
57+
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
58+
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
59+
</span></div>
60+
</li>
61+
<li>
62+
<div class="collapsible-header">What is the goal of this project ?</div>
63+
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
64+
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet</span></div>
65+
</li>
66+
<li>
67+
<div class="collapsible-header">What is your name ?</div>
68+
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
69+
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
70+
</span></div>
71+
</li>
72+
<li>
73+
<div class="collapsible-header">How are you ?</div>
74+
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</span></div>
75+
</li>
76+
</ul>
77+
</div>
78+
</section>
79+
<footer>
80+
<div class="row">
81+
<img class="center-block" src="media/protons-black.png">
82+
</div>
83+
<div class="row">
84+
<h6 class="center-align">© IEEE AlexSB | Software Development Committee</h6>
85+
</div>
86+
</footer>
87+
88+
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
89+
<script src="vendor/js/materialize.min.js"></script>
90+
<script src="js/main.js"></script>
91+
<script src="js/faqs.js"></script>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)