Skip to content

Commit

Permalink
Work blog template and first week update
Browse files Browse the repository at this point in the history 
Start Bootstrap template has been updated to create my internship work blog. Also, the information (log) about the first week has been added.
  • Loading branch information
@mariabusto
mariabusto authored May 1, 2024
1 parent 02b50db commit 3904bf1
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 31 deletions.
Binary file added docs/assets/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/urjc-etsii-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 17 additions & 3 deletions docs/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 13, 110, 253;
--bs-primary-rgb: 255, 124, 77;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
Expand Down Expand Up @@ -666,6 +666,19 @@ progress {
max-width: 1320px;
}
}

/*Section created for the style of the footer's images*/
.img-container{
display:grid;
grid-template-columns:2fr 2fr;
margin-left: 400px;
}

.urjc-etsii-img{
margin-top: 45px;
}


.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
Expand Down Expand Up @@ -2946,8 +2959,9 @@ textarea.form-control-lg {
}

.btn-light {
--bs-btn-color: #000;
--bs-btn-bg: #f8f9fa;
margin-top: 80px;
--bs-btn-color: #fff;
--bs-btn-bg: #FF7C4D;
--bs-btn-border-color: #f8f9fa;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #d3d4d5;
Expand Down
75 changes: 47 additions & 28 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,95 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Scrolling Nav - Start Bootstrap Template</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<title>María Busto Work Blog</title>
<link rel="icon" type="image/x-icon" href="assets/logo.png" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container px-4">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
<a class="navbar-brand" href="#page-top">My Work Blog - JdeRobot Internship</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#introduction">Introduction</a></li>
<li class="nav-item"><a class="nav-link" href="#weekly-logs">Weekly Logs</a></li>
<li class="nav-item"><a class="nav-link" href="#links">Links</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header-->
<header class="bg-primary bg-gradient text-white">
<div class="container px-4 text-center">
<h1 class="fw-bolder">Welcome to Scrolling Nav</h1>
<p class="lead">A functional Bootstrap 5 boilerplate for one page scrolling websites</p>
<a class="btn btn-lg btn-light" href="#about">Start scrolling!</a>
<h1 class="fw-bolder">Welcome to my internship work blog!</h1>
<p class="lead">In this blog, I'll be posting about my experience as an intern at JdeRobot.</p>
<!--
<a class="btn btn-lg btn-light" href="#about">Take a look!</a>
-->
</div>
</header>
<!-- About section-->
<section id="about">
<!-- Introduction section-->
<section id="introduction">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2>About this page</h2>
<p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
<ul>
<li>Clickable nav links that smooth scroll to page sections</li>
<li>Responsive behavior when clicking nav links perfect for a one page website</li>
<li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
<li>Minimal custom CSS so you are free to explore your own unique design options</li>
</ul>
<h2>Introduction</h2>
<p class="blog-post-meta">April 30th, 2024 by <a href="https://github.com/mariabusto">María Busto Ramos</a></p>
<p class="lead" align="justify">Hello! I am María Busto Ramos, Video Game Design and Development student at Rey Juan Carlos University.</p>
<p class="lead" align="justify">The objective of this blog is to document my experience as an intern at JdeRobot, describing the different tasks and knowledge learned during each week of internship.</p>
</div>
</div>
</div>
</section>
<!-- Services section-->
<section class="bg-light" id="services">
<!-- Weekly Logs section-->
<section class="bg-light" id="weekly-logs">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2>Services we offer</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<h2>Weekly Logs</h2>
<p class="lead" align="justify">In this section, you can find the list of the different weekly logs in which I describe what I have learned and done during each week of my internship.</p>
<ul class="weekly-log-list">
<li><a href="worklog_1.html">Week 1 (April 22nd - April 26th)</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact section-->
<section id="contact">
<!-- Links section-->
<section id="links">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2>Contact us</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
<h2>Links</h2>
<ul class="links-list">
<li><a href="https://github.com/mariabusto">My GitHub</a></li>
<li><a href="https://github.com/TheRoboticsClub/2024-upe-maria-busto">WorkBlog GitHub Repository</a></li>
</ul>
<div align="center">
<a class="btn btn-lg btn-light" href="#">Back to top</a>
</div>
</div>
</div>
</div>
</section>
<!-- Final Logos section-->
<section class="bg-light" id="logos">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<container class="img-container" align="center">
<img class="jderobot-img" alt="JdeRobot logo" width=150px height=150px src="assets/logo.png"/>
<img class="urjc-etsii-img" alt="URJC and ETSII logo" width=350px height=80px src="assets/urjc-etsii-logo.png"/>
</container>
</div>
</div>
</section>
<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container px-4"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2023</p></div>
<div class="container px-4"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2024</p></div>
<div class="container px-4"><a class="m-0 text-center text-white" href="https://startbootstrap.com/template/scrolling-nav">Template obtained from Start Bootstrap</a></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Expand Down
70 changes: 70 additions & 0 deletions docs/worklog_1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>María Busto Work Blog</title>
<link rel="icon" type="image/x-icon" href="assets/logo.png" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container px-4">
<a class="navbar-brand" href="#page-top">My Work Blog - JdeRobot Internship</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#week">Week 1</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header-->
<header class="bg-primary bg-gradient text-white">
<div class="container px-4 text-center">
<h1 class="fw-bolder">Welcome to my internship work blog!</h1>
<p class="lead">In this blog, I'll be posting about my experience as an intern at JdeRobot.</p>
<!--
<a class="btn btn-lg btn-light" href="#about">Take a look!</a>
-->
</div>
</header>
<!-- Week Post section-->
<section id="week">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2>Week 1 (April 22nd - April 26th)</h2>
<p class="blog-post-meta">May 1st, 2024 by <a href="https://github.com/mariabusto">María Busto Ramos</a></p>
<p class="lead" align="justify">During this first week, I have been getting familiar with Unibotics, reading an article about it, provided by my internship tutor, to understand its purpose and functioning.</p>
<p class="lead" align="justify">I have also begun to learn, through different tutorials, some of the technologies and programs used in Unibotics and necessary to perform the internship, such as Docker and React. Specifically, at the end of this week, I installed the programs required to work with React, thus creating my first test project.</p>
</div>
</div>
</div>
</section>
<!-- Final Logos section-->
<section class="bg-light" id="logos">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<container class="img-container" align="center">
<img class="jderobot-img" alt="JdeRobot logo" width=150px height=150px src="assets/logo.png"/>
<img class="urjc-etsii-img" alt="URJC and ETSII logo" width=350px height=80px src="assets/urjc-etsii-logo.png"/>
</container>
</div>
</div>
</section>
<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container px-4"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2024</p></div>
<div class="container px-4"><a class="m-0 text-center text-white" href="https://startbootstrap.com/template/scrolling-nav">Template obtained from Start Bootstrap</a></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

0 comments on commit 3904bf1

Please sign in to comment.