diff options
| -rw-r--r-- | fossee_manim/static/css/custom_font.css | 4 | ||||
| -rw-r--r-- | fossee_manim/templates/fossee_manim/index.html | 30 |
2 files changed, 21 insertions, 13 deletions
diff --git a/fossee_manim/static/css/custom_font.css b/fossee_manim/static/css/custom_font.css new file mode 100644 index 0000000..1d90f6a --- /dev/null +++ b/fossee_manim/static/css/custom_font.css @@ -0,0 +1,4 @@ +.navbar{ + font-family: 'Raleway', sans-serif; + font-size: 15px; +} diff --git a/fossee_manim/templates/fossee_manim/index.html b/fossee_manim/templates/fossee_manim/index.html index e0ba5a5..487e888 100644 --- a/fossee_manim/templates/fossee_manim/index.html +++ b/fossee_manim/templates/fossee_manim/index.html @@ -11,21 +11,23 @@ <meta name="keywords" content="fossee, iit bombay, animation based learning math, manim, python based animations"> <title>FOSSEE Animations</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> + <style type="text/css"> - .perma_link{ - color: #222222; - } .perma_link:hover{ - background-color:#a0e6ee; + background-color:#d1d2d3; text-decoration: none; } .perma_link a{ text-decoration: none; + font-family: 'Raleway', sans-serif; + font-weight: 500; + font-size: 18px; } .bck_clr{ background-color: #222222; @@ -34,6 +36,8 @@ padding: 10px; } </style> + <link href="https://fonts.googleapis.com/css?family=Raleway:400,500|Lato&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="{{ URL_ROOT }}/static/css/custom_font.css" type="text/css" /> <!-- favicon --> <link rel="shortcut icon" href="{{ URL_ROOT }}/static/img/favicon.ico" /> </head> @@ -73,7 +77,7 @@ </div> </nav> <!-- Remove sticky-top if the buttons are not supposed to scroll down--> - <div class="jumbotron row sticky-top" style="padding-top: 90px; padding-bottom: 0.2%; margin-bottom: 0px; color:#dddddd"> + <div class="jumbotron row sticky-top" style="padding-top: 90px; padding-bottom: 0.2%; margin-bottom: 0px; background-color:#dddddd"> <div class="btn-group btn-group-lg" role="group"> <button class="btn btn-link perma_link" type="button"><a href="{% url 'about' %}" style="color:#157b80">About</a></button> <button class="btn btn-link perma_link" type="button"><a href="{% url 'guidelines' %}" style="color:#222222">Guidelines</a></button> @@ -93,8 +97,8 @@ <div class="carousel-item active"> <img class="d-block w-100" src="{{ URL_ROOT }}/static/img/carousel1.png" alt="First slide" height=550> - <div class="carousel-caption col-md-4" style="float:left;"> - <h3><b>FOSSEE Animations</b></h3> + <div class="carousel-caption col-md-4" style="float:left; font-family: 'Lato', sans-serif; text-align: left; margin-left: -20px; margin-bottom:15px"> + <h3><a style="font-family: 'Raleway', sans-serif; font-weight: 500;">FOSSEE Animations</a></h3> <h5>endeavors to be an extensive library of community-curated videos on STEM topics </h5> @@ -102,16 +106,16 @@ </div> <div class="carousel-item"> <img class="d-block w-100" src="{{ URL_ROOT }}/static/img/carousel3.png" alt="Second slide" height=550> - <div class="carousel-caption col-md-3" style="float:right;"> - <h3><b>Anyone can contribute to the project</b></h3> + <div class="carousel-caption col-md-3" style="float:right; font-family: 'Lato', sans-serif;"> + <h3><a style="font-family: 'Raleway', sans-serif; font-weight: 500;">Anyone can contribute to the project</a></h3> <h5> The only requirement is that the video should be made using <i>OpenSource</i> tools</h5>like Blender, Manim, Mayavi, etc. </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="{{ URL_ROOT }}/static/img/carousel2.png" alt="Third slide" height=550> - <div class="carousel-caption col-md-4" style="margin-left:540px; margin-bottom:250px;float:right;"> - <h5><b>Upon successful submission</b><br> - you receive a certificate and an<br> + <div class="carousel-caption col-md-4" style="margin-left:560px; margin-bottom:250px;float:right; font-family: 'Lato', sans-serif; text-align:right"> + <h3><b><a style="font-family: 'Raleway', sans-serif; font-weight: 500;">On successful submission</a></h3> + <h5>you receive a certificate and an<br> honorarium from FOSSEE,<br>IIT-Bombay</h5> </div> </div> @@ -161,7 +165,7 @@ </div> </div> <hr> - <div class="text-center row" style="color: #e9ecef; color:white; padding:10px;margin-left: 10px; text-align:center"> + <div class="text-center row" style="color: #e9ecef; padding:10px; text-align:center"> The FOSSEE project is funded by the National Mission on Education through ICT, MHRD, Government of India. This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License </div> |