diff --git a/portfolio/templates/layout.html b/portfolio/templates/layout.html new file mode 100644 index 0000000000000000000000000000000000000000..9863712a227c063bc2099077c469b9ffb134a1b4 --- /dev/null +++ b/portfolio/templates/layout.html @@ -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"> + <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous"> + <title>Tech Portfolio - {% block title %}{% endblock %}</title> +</head> +<body> + <header> + <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> + <div class="container"> + <a class="navbar-brand" href="#">Ariel Lau's Portfolio</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarNav"> + <ul class="navbar-nav ml-auto"> + <li class="nav-item"> + <a class="nav-link" href="/home">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/about">Projects</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/comment">Comment</a> + </li> + </ul> + </div> + </div> + </nav> + </header> + <div class="container mt-5"> + <div class="row"> + <div class="col-12"> + {% with messages = get_flashed_messages() %} + {% if messages %} + <div class="alert alert-danger" role="alert"> + {% for message in messages %} + {{ message }} + {% endfor %} + </div> + {% endif %} + {% endwith %} + </div> + </div> + <div class="row"> + <div class="col-12"> + {% block content %} + {% endblock %} + </div> + </div> + </div> + <footer class="bg-dark py-3"> + <div class="container"> + <p class="text-white text-center">Copyright 2023 Ariel Ying Tung Lau @ Cardiff University</p> + <p class="text-white text-center">Reference: Ch, A. (2018). Light Bulb on White Panel. [jpg] Available at: https://www.pexels.com/photo/light-bulb-on-white-panel-1166643/ [Accessed 23 Jan. 2023].</p> + </div> + </footer> +</body> +</html>