Abhijit Kshirsagar
4 years ago
6 changed files with 233 additions and 2 deletions
@ -1,2 +0,0 @@ |
|||||
A simple Bootstrap theme template for an academic webpage, themed with IIT |
|
||||
Dharwad colours and typography. |
|
||||
@ -0,0 +1,8 @@ |
|||||
|
# BootstrapHomepageTemplate |
||||
|
|
||||
|
A simple Bootstrap theme template for an academic webpage, themed with IIT |
||||
|
Dharwad colours and typography. |
||||
|
|
||||
|
Bootstrap is a simple Javascript Library that enables lightweight yet responsive pages that look and feel great on all devices, from small mobile phones to tablets to large desktop displays. |
||||
|
|
||||
|
To edit, I recomment the open-source editor "Brackets" which has a "live-preview" mode, showing the changes as the HTML code is modified. |
||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
@ -0,0 +1,21 @@ |
|||||
|
.navbar-custom { |
||||
|
/* Jamun*/ |
||||
|
background-color: #6c1b85; |
||||
|
} |
||||
|
/* change the brand and text color */ |
||||
|
.navbar-custom .navbar-brand, |
||||
|
.navbar-custom .navbar-text { |
||||
|
color: rgba(255,255,255,1); |
||||
|
} |
||||
|
|
||||
|
/* change the link color */ |
||||
|
.navbar-custom .navbar-nav .nav-link { |
||||
|
color: rgba(255,255,255,1); |
||||
|
} |
||||
|
/* change the color of active or hovered links */ |
||||
|
.navbar-custom .nav-item.active .nav-link, |
||||
|
.navbar-custom .nav-item:hover .nav-link { |
||||
|
/*Marigold*/ |
||||
|
color: #ffad4a; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,129 @@ |
|||||
|
<!doctype html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<!-- Required meta tags --> |
||||
|
<!-- meta http-equiv="refresh" content="10" --> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||
|
<title>Homepage of Jane Doe</title> |
||||
|
<!-- Bootstrap CSS --> |
||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> |
||||
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> |
||||
|
<link rel="stylesheet" href="iitdh_bootstrapColour.css"> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap" rel="stylesheet"> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Open+Sans+Condensed:wght@700&display=swap" rel="stylesheet"> |
||||
|
<style> |
||||
|
body |
||||
|
{ position: relative;} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body data-spy="scroll" data-target=".navbar" data-offset="50"> |
||||
|
<!-- Navigation --> |
||||
|
<!-- nav class="navbar fixed-top" --> |
||||
|
<nav class="navbar navbar-expand-sm navbar-custom fixed-top"> |
||||
|
<a class="navbar-brand" href="./"> |
||||
|
<span style="font-family: 'Open Sans Condensed', sans-serif;"> |
||||
|
<!-- Optional Text field: You can add a name here--> |
||||
|
</span> |
||||
|
<img src="WebIcon.plain.svg" width="35" height="35" alt=""> |
||||
|
</a> |
||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
|
<ul class="navbar-nav mr-auto"> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="./">Home</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="./#">Link 1</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="./#">Link 2</a> |
||||
|
</li> |
||||
|
<li class="nav-item dropdown"> |
||||
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
||||
|
More |
||||
|
</a> |
||||
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> |
||||
|
<a class="dropdown-item" href="#"> |
||||
|
Action</a> |
||||
|
<a class="dropdown-item" href="#"> |
||||
|
Another action</a> |
||||
|
<div class="dropdown-divider"> |
||||
|
</div> |
||||
|
<a class="dropdown-item" href="#">Something else here</a> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<div id="section1" class="container bs-docs-grid" style="padding-top:70px"> |
||||
|
<!-- Control the column width, and how they should appear on different devices --> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-3"> |
||||
|
<!-- Sidebar--> |
||||
|
<div class="row"> |
||||
|
<div class="col-12"> |
||||
|
<div class="text-justify" style="font-family: 'Open Sans Condensed', sans-serif;"> |
||||
|
<h2>Dr. Jane Doe</h2> |
||||
|
</div> |
||||
|
<div class="text-center"> |
||||
|
<img src="ProfileImage_600px.jpg" width="100%" class="rounded" alt="Abhijit Kshirsagar Photograph" longdesc="A photograph of Prof. Abhijit Kshirsagar"> |
||||
|
</div> |
||||
|
<div class="text-left"> |
||||
|
<div class="text-justify" style="font-family: 'Open Sans Condensed', sans-serif;"> |
||||
|
<p> </p> |
||||
|
<h6>jane.doe at univ.ac.in</h6> |
||||
|
<p> |
||||
|
Professor of Quantum Computing<br> |
||||
|
Dept. of Quantum Engineering <br> |
||||
|
Fantastic University<br> |
||||
|
India |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-9"> |
||||
|
<!-- Main Content--> |
||||
|
<div class="row"> |
||||
|
<div class="col-12"> |
||||
|
<h3><a id="research"></a>About</h3> |
||||
|
<p class="text-justify"> |
||||
|
Here is some sample text generated by a <a href="https://www.lipsum.com/feed/html">Lipsum generator</a>. It makes the text body seem more natural. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut odio sed sapien congue maximus ac et elit. Nunc nibh orci, dictum in dolor nec, elementum varius tellus. Nulla facilisi. Donec cursus fermentum pulvinar. Praesent faucibus sem et neque ullamcorper vestibulum. Vivamus vitae leo vel leo pretium consequat vitae vel nisi. |
||||
|
</p> |
||||
|
|
||||
|
<p class="text-justify"> |
||||
|
Vivamus quis massa aliquam, accumsan urna sed, hendrerit dolor. Integer consequat tortor nec turpis elementum tincidunt. Vestibulum suscipit ultricies arcu, ac pharetra odio dictum at. Pellentesque et odio lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices blandit felis. |
||||
|
</p> |
||||
|
|
||||
|
<h3><a id="research"></a>Research</h3> |
||||
|
<p class="text-justify"> |
||||
|
Quisque a elit interdum, gravida erat a, maximus nisl. Nulla facilisi. Cras diam mauris, molestie id vulputate vitae, accumsan et lorem. Praesent aliquam ipsum orci, eget sodales mauris facilisis ac.Maecenas bibendum eleifend elit, ac commodo arcu elementum vel. Nullam vel sagittis justo, nec pretium urna. Nullam arcu orci, bibendum non aliquet sed, hendrerit at tellus. Vivamus dolor. |
||||
|
</p> |
||||
|
|
||||
|
<h3><a id="teaching">Teaching</a></h3> |
||||
|
<p class="text-justify"> |
||||
|
|
||||
|
</p> |
||||
|
<h6>Spring 2020</h6> |
||||
|
<ul> |
||||
|
<li>EE101: Electrical Energy</li> |
||||
|
</ul> |
||||
|
<h6>Fall 2020</h6> |
||||
|
<ul> |
||||
|
<li>EE102: Magnetic Energy</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Other people may like it too! --> |
||||
|
<a style="color:#b5bec9;font-size:0.8em; float:right;" href="https://gitea.iitdh.ac.in/kabhijit/BootstrapHomepageTemplate" target="_blank"> |
||||
|
kabhijit's BootstrapHomepageTemplate</a> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue