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.

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

changes required in team page #41

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
20 changes: 20 additions & 0 deletions Change required in team page/Navbars/Drive/Drive.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.drive {
border: solid black 1px;
}
</style>

</head>

<body>
<iframe src="https://drive.google.com/embeddedfolderview?id=1jQNs70Ji7XrT9DqXGnt5SXXzVx6h15Ec#grid" width="100%" height="500" class="drive">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iframe should have title attribute to help screen readers

</iframe>
</body>

</html>
63 changes: 63 additions & 0 deletions Change required in team page/Navbars/Footer/footer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Footer Menu -->
<footer id="footer">

<div class="details">
<div class="row">
<div id="col1">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, maybe list these items with ul?

<span id="icon" class="fa fa-map-marker"></span>
<span>address of the institute</span>
</div>

<div id="col2">
<span id="icon" class="fa fa-phone"></span>
<span> Telephone</span>
</div>

<div id="col3">
<span id="icon" class="fa fa-envelope"></span>
<span>email.com</span>
</div>
</div>
</div>

<!-- Social Section -->
<div class="copyright">


<ul class="contact">
<li>
<a href="#" class="fa fa-twitter">

</a>
</li>

<li>
<a href="#" class="fa fa-facebook">
<span></span>
</a>
</li>

<li>
<a href="#" class="fa fa-rss">

</a>
</li>
</ul>
</div>
</footer>

</body>

</html>
70 changes: 70 additions & 0 deletions Change required in team page/Navbars/Footer/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
#footer {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, don't style by ID 😁

position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

.details {
overflow: hidden;
padding: 3em 0em;
background: #E3F0F7;
text-align: center;
margin-top: 5em;
}

#footer #col1,
#footer #col2,
#footer #col3 {
float: left;
width: 320px;
padding: 0px 40px 0px 40px;
}

#footer #icon {
display: block;
margin-bottom: 1em;
font-size: 3em;
}

.copyright {
overflow: hidden;
padding: 3em 0em;
border-top: 20px solid rgba(255, 255, 255, 0.08);
text-align: center;
background: teal;
}

.p {
letter-spacing: 1px;
font-size: 0.90em;
color: rgba(255, 255, 255, 0.6);
}

.copyright a {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
}

ul.contact {
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}

ul.contact li {
display: inline;
margin: 4px;
}

ul.contact li a {
color: #FFF;
display: inline-block;
background: black;
padding: 10px;
border-radius: 100%;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
123 changes: 123 additions & 0 deletions Change required in team page/Navbars/NavStyle.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}

body {
font-family: montserrat;
}

.navbar {
height: 80px;
width: 100%;
background: teal;
}

label.logo {
font-size: 35px;
font-weight: bold;
color: white;
padding: 0 100px;
line-height: 80px;
}

.navbar ul {
float: right;
margin-right: 40px;
}

.navbar li {
display: inline-block;
margin: 0 8px;
line-height: 80px;
}

.navbar a {
color: white;
font-size: 18px;
text-transform: uppercase;
border: 1px solid transparent;
padding: 0;
border-radius: 3px;
}

.navlink a,
a:hover {
border: 1px solid white;
padding: 4px;
transition: .5s;
}

.material-icons {
color: white;
font-size: 30px;
line-height: 80px;
float: right;
margin-right: 40px;
cursor: pointer;
}

@media (max-width: 1048px) {
.material-icons {
font-size: 32px;
padding-left: 60px;
}
.navbar ul {
margin-right: 20px;
}
.navlink a {
font-size: 17px;
}
}

@media (max-width :909px) {
.material-icons {
display: block;
}
.navbar ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2f3640;
top: 80px;
left: -100%;
text-align: center;
}
.navbar li {
display: block;
margin: 50px 0;
line-height: 30px;
}
.navbar a {
font-size: 20px;
}
.navbar a.active,
a:hover {
border: none;
color: blue;
}
.navbar ul.show {
left: 0;
}
}

.image {
vertical-align: middle;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
padding: 10px;
width: 150px;
height: 150px;
border-radius: 50%;
display: -ms-flexbox;
display: flex;
align-items: center;
border: solid 1px black;
}

.link {
text-align: center;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think mobile first will be better idea for this one

5 changes: 5 additions & 0 deletions Change required in team page/Navbars/Navbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
$(document).ready(function() {
$('.material-icons').click(function() {
$('ul').toggleClass('show')
});
});
45 changes: 45 additions & 0 deletions Change required in team page/Navbars/cards/cards.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

.column {
float: left;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, don't use float 😁

width: 25%;
padding: 0 10px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Paddings in rem will be a better option

}

.row {
margin: 0 -5px;
}

.row:after {
content: "";
display: table;
clear: both;
}


/* Style the counter cards */

.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height: 200px;
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}


/* Responsive columns*/

@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
28 changes: 28 additions & 0 deletions Change required in team page/Navbars/cards/cards.hml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cards.css">

</head>

<body>
<div class="row">
<div class="column">
<div class="card"></div>
</div>
<div class="column">
<div class="card"></div>
</div>
<div class="column">
<div class="card"></div>
</div>
<div class="column">
<div class="card"></div>
</div>
</div>
</body>

</html>
Loading