This question already has answers here:
Text floating in block next to image
(6 answers)
Closed 2 years ago.
I am new to html + css and I can't seem to figure out how you place items horizontally despite reading a couple articles. What I am going for is having two lines of text on the right side of my image. Currently I have everything placed vertically.
Html:
#content {
max-width: 640px;
margin: 0 auto;
padding: 64px 24px;
}
.section {
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section:last-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.img {
width: 200px;
height: 200px;
border-radius: 40px;
margin-bottom: 12px;
}
```
<body>
<div id="content">
<div class="section">
<img src="Images/Logo.png" class="img">
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
<div class="section">
<h6>Projects</h6>
<ul>
<li>
<h3>Placeholder</h3>
<p> Placeholder </p>
</li>
<li>
<h3>Placeholder </h3>
<p> Placeholder </p>
</li>
</ul>
</div>
</div>
</body>
I am not sure if I am sharing everything I need too, Here's the GitHub repo with all the code if you need it.
You can use display: flex; property.
/* ↓ new styling ↓ */
.section-horizontal {
display: flex;
}
.description {
margin-left: 32px;
}
/* your styling */
#content {
max-width: 640px;
margin: 0 auto;
padding: 64px 24px;
}
.section {
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section:last-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.img {
width: 200px;
height: 200px;
border-radius: 40px;
margin-bottom: 12px;
}
<div id="content">
<div class="section section-horizontal"> <!-- class for flexbox -->
<img src="Images/Logo.png" class="img">
<div class="description"> <!-- add this block to align headings vertically -->
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
</div>
<div class="section">
<h6>Projects</h6>
<ul>
<li>
<h3>Placeholder</h3>
<p> Placeholder </p>
</li>
<li>
<h3>Placeholder </h3>
<p> Placeholder </p>
</li>
</ul>
</div>
</div>
try to get in touch with the flex property. It will make things alot more simple :)
html:
<body>
<div id="content">
<div class="section">
<img src="Images/Logo.png" class="img">
<div class="flex">
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
</div>
</div>
</body>
css:
.flex {
display: flex;
}
You can do with flexbox like this
#content {
max-width: 640px;
margin: auto;
padding: 64px 24px;
display:flex;
flex-wrap:wrap;
justify-content: space-evenly;
}
.section {
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section:last-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.img {
width: 200px;
height: 200px;
border-radius: 40px;
margin-bottom: 12px;
}
<body>
<div id="content">
<div class="section">
<img src="Images/Logo.png" class="img">
<h1>Placeholder</h1>
<h2>Placeholder 2</h2>
</div>
<div class="section">
<h6>Projects</h6>
<ul>
<li>
<h3>Placeholder</h3>
<p> Placeholder </p>
</li>
<li>
<h3>Placeholder </h3>
<p> Placeholder </p>
</li>
</ul>
</div>
</div>
</body>
Related
Somewhat like a ebay search page like this
enter image description here
in my code, only the first listed item looks just like the image above, but every picture after floats to the right side of the page, but the text stays on left.
I want it to look like this:
[]-list
[] -list
[] -list
with the code I have, the image in the second div is pushed to the right side. I want all images and text aligned underneath each other to look somewhat like the ebay layout
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<html>
<style>
*, html {
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
color: #000;
font-size: 30px;
font-family: Arial;
}
.clear {
clear: both
}
product_img
{
display:flex;
40px
}
.businessInfo
{
float: left;
margin-left: 12px;
width: 552px;
text-align: left;
}
.businessName
{
float: left;
margin-top: 2px;
text-align: left;
color: #ffffff ;
}
.sitePromotion
{
float: left;
margin-top: 6px;
font-size: 14px;
color: #ffffff ;
}
.baseLocation{
float: left;
font-size: 15px;
background: #ffffff ;
}
.location {
float: left;
font-size: 15px;
color: #ffffff ;
}
.contactInfo {
float: left;
margin-top: 4px;
font-size: 15px;
color: #ffffff ;
}
.connectInfo {
float: left;
margin-top: 10px;
font-size: 15px;
color: #ffffff ;
}
.moreConnectInfo {
float: left;
margin-top: 6px;
font-size: 15px;
color: #ffffff;
}
</style>
</head>
<body>
<body style="background-color:black;">
<h1 style= "color:grey;font-size:50px;">dollas</h1>
<h2 style="color:white; font-size:25px;;">North Jersey</h2>
<hr>
<!-- business 2-->
<div class="product_img">
<img alt="KB's BBQ SMOKEHOUSE - IRVINGTON, NJ 07111 (Menu & Order
Online)" class="n3VNCb"
src="https://menufyproduction.imgix.net/637255010998628698+201756.png?
auto=compress,format&h=1080&w=1920&fit=max" data-noaft="1"
jsname="HiaYvf" jsaction="load:XAeZkd;" style="width: 200px; height:
150px; margin: 0px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">KB's BBQ Smokehouse</div>
<div class="clear"></div>
<div class="location">Location: 1077 Stuyvesant Ave, Irvington, NJ
07111</div>
<div class="clear"></div>
<div class="contactInfo">Phone: (973) 982-6528</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://kbbbqsmokehouse.com/ </div>
<div class="clear"></div>
</div>
<!-- business 3-->
<div class="product_img">
<img data-visualcompletion="media-vc-image" alt="May be an image of 1 person
and text that says 'Ard Bakery Arielitas'" class="ji94ytn4 r9f5tntg d2edcug0
r0294ipz" referrerpolicy="origin-when-cross-origin"
src="https://scontent.fewr1-
5.fna.fbcdn.net/v/t31.18172-
8/26198629_1997772167107826_8453467514730795477_o.jpg?_nc_cat=105&ccb=1-
3&_nc_sid=09cbfe&_nc_ohc=1EVQdCkudYUAX-
_oK4D&_nc_ht=scontent.fewr1-
5.fna&oh=db53b58b37272d072239b01f939d602f&oe=60B6C98F" style="width:
200px; height: 150px; margin-left: -300px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">Arielita's Bakery</div>
<div class="clear"></div>
<div class="location">Location:Montclair, NJ</div>
<div class="clear"></div>
<div class="contactInfo">To order:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
</div>
Check this below snippet. Its just an skeleton. It will help you to build such layout.
.product_wrapper {
}
.product_loop {
display : flex;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.product_image { background : #ccc; flex : 0 0 20%; height: 150px }
.product_content { flex : 1; padding: 10px }
<div class="product_wrapper">
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
</div>
I have a section part on the website where I want four products being displayed in the middle, right and left arrows on both sides of the screen and a title in the middle above the displayed products, I think I have all of the HTML and CSS good but the position isn't working properly, can someone have a look and help me feature it out?img of the sections I am talking about
ps: the background color doesn't feel the space that the items and buttons are in, why does it happens too?
edit: this is a pic of how i wish it would look
HTML:
<section class="one">
<div><span class="title">New products</span></div>
<br>
<button class="left">
<span class="Lmain"></span>
<span class="Lside"></span>
</button>
<div class="items">
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image1.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image2.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image3.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image4.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
</div>
<button class="right">
<span class="Rmain"></span>
<span class="Rside"></span>
</button>
</section>
CSS:
.title {
text-align: center;
position: absolute;
margin: auto;
border: 1px solid goldenrod;
font-size: 40px;
}
.one {
background-color: hotpink;
position: relative;
}
.two {
background-color: rgb(255, 0, 128);
}
/*items appearance*/
.items {
position: relative;
margin: auto;
}
.item {
border: 1px solid rgb(255, 170, 0);
float: left;
position: absolute;
top: 0px;
margin: 0px 8px;
left: 12%;
width: 350px;
height: auto;
}
.itemImg {
width: 100%;
height: auto;
}
/*end of item appearance*/
.right {
right: 0px;
top: 0px;
position: absolute;
}
.left {
left: 0px;
top: 0px;
position: absolute;
}
Utilize flexbox to make this layout easy:
body {
margin: 0;
background: #1a1a1a;
color: #fff;
font-family: sans-serif;
}
h1#title {
padding: 1rem;
text-align: center;
}
main {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#products {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0;
}
.product {
padding: 2rem 1rem;
background: #fff;
color: black;
margin: .5rem;
}
<body>
<h1 id="title">Items</h1>
<main>
<div class="arrow" id="arrow-left">←</div>
<div id="products">
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
</div>
<div class="arrow" id="arrow-right">→</div>
</main>
</body>
Here a list of problem I see:
the .title element is position:absolute, so it doesn't fill any space and other elements will position weirdly. Solution: remove position: absolute
the .title is a <span> element witch is an inline-element who doesn't behave like a block element (<div>, <p>, <h1>, etc.), so the text-align: center doesn't take effect. Solution: remove the span and give the .title class to the parent <div>
the left and right buttons should be wrapped in a <div> with position:relative
Here is a jsfiddle with the fixed code.
I didn't fix the image positioning because i think those will be positioned by js, anyhow it dipends by the images dimensions and is a very weak method. So I strongly suggest using flexbox that is widely supported by browsers.
You can follow the #yerme example or this guide on flexbox.
I'm trying to align 3 items in Flexbox.
To make things easier, here's the current layout
The goal here is to keep the numbers ( 1, 2, 3 etc.. ) on the left, strictly aligned, the texts strictly aligned too ( so that the up arrows are vertically aligned ), and the right icon should go wherever it must go as long as it's in the div.
Here's the code :
.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
display: flex;
justify-content: space-between;
}
The HTML :
<div class="div-container">
<div class="form-div-container">
<div class="small-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="even-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-longer-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="small-text-two">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
</div>
</div>
The thing is the icons are not all of the same width, so they push the middle item. How can I make things the way I want ? Thanks !
You could set the widths of the elements that contain the numbers and icons to a fixed percentage value like below:
.box__icon,
.box__number {
width: 15%;
text-align: center;
}
See a full demo below:
/*IGNORE STYLE RULES FROM HERE......*/
body {
margin: 0;
}
i {
font-style: normal;
}
.box {
color: white;
font-family: sans-serif;
font-size: 2rem;
font-weight: bold;
padding: 30px;
}
.box:nth-child(1) {
background: firebrick;
}
.box:nth-child(2) {
background: darkturquoise;
}
.box:nth-child(3) {
background: chocolate;
}
.box:nth-child(4) {
background: midnightblue;
}
.box__text::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #ffffff transparent;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/*.... TO HERE*/
.box {
align-items: center;
display: flex;
justify-content: space-between;
}
.box__icon,
.box__number {
width: 15%; /*Change this to whatever value you want*/
text-align: center;
}
.box__text {
color: white;
font-family: sans-serif;
text-align: center;
}
<div class="container">
<div class="box">
<div class="box__number">1</div>
<p class="box__text">Small Text</p>
<i class="box__icon">Icon---</i>
</div>
<div class="box">
<div class="box__number">2</div>
<p class="box__text">Longer Text</p>
<i class="box__icon">Icon</i>
</div>
<div class="box">
<div class="box__number">3</div>
<p class="box__text">Even Longer Text</p>
<i class="box__icon">Icon--</i>
</div>
<div class="box">
<div class="box__number">4</div>
<p class="box__text">Longer Longer Longer Text</p>
<i class="box__icon">Icon---</i>
</div>
</div>
I'm trying to create a copy of a website I thought was interesting. However I'm running into some problems trying to highlight the whole row at once, without highlighting others. I've created a table of divs however when I try to select a single row such as with class .row:hover im unable to select anything(hovering mouse should change color). I've tried multiple combination and google searches such as .row:hover column names, however this selects every row not just the one I want. I cant seem to figure out this behavior would appreciate any help.
https://jsfiddle.net/u31h4n5y/
body {
width: 100vw;
margin: 0px;
padding: 0px;
background-color: blue;
overflow: hidden;
}
h1,
h2 {
font-family: sans-serif;
color: white;
text-align: center;
}
#container {
width: 63vw;
margin: auto;
height: auto;
background-color: rgb(123, 108, 160);
}
.row {
height: 125px;
background-color: red;
margin: 0px;
padding: 0px;
}
.one {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
margin: 0px;
}
.two {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
margin: 0px;
}
.three {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
}
.four {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
}
.row:hover {
background-color: red;
}
<h1>WEB
<h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<div class="row">
<div class="one">
<p>Week 1</br> May 7 <br> - <br> May 11 </p>
</div>
<div class="two">
<ul>
<li> Course introduction </li>
<li> Internet Architecture </li>
<li> Introduction to Javascript </li>
</ul>
</div>
<div class="three">
Welcome
Lecture 1
</div>
<div class="four">
<h3> Work Due </h3>
</div>
<div class="row">
<div class="one">
<p> Week 2</p>
</div>
<div class="two">
<ul>
<li> Javascript functions </li>
<li> Built in Global Functions </li>
</ul>
</div>
<div class="three">
Lecture 2
</div>
<div class="four"></div>
</div>
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
<div class="special"></div>
This will definitely work
body {
width: 100vw;
margin: 0px;
padding: 0px;
background-color: blue;
overflow: hidden;
}
h1,
h2 {
font-family: sans-serif;
color: white;
text-align: center;
}
#container {
width: 63vw;
margin: auto;
height: auto;
background-color: rgb(123, 108, 160);
}
.row {
height: 125px;
background-color: red;
margin: 0px;
padding: 0px;
}
.one {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
margin: 0px;
}
.two {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
margin: 0px;
}
.three {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
}
.four {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
}
.row:hover div {
background-color: red;
}
<!DOCTYPE html>
<html>
<h1>WEB</h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<div class="row">
<div class="one">
<p>Week 1<br> May 7 <br> - <br> May 11
<p/>
</div>
<div class="two">
<ul>
<li> Course introduction </li>
<li> Internet Architecture </li>
<li> Introduction to Javascript </li>
</ul>
</div>
<div class="three">
Welcome
Lecture 1
</div>
<div class="four">
<h3> Work Due </h3>
</div>
</div>
<div class="row">
<div class="one">
<p> Week 2</p>
</div>
<div class="two">
<ul>
<li> Javascript functions </li>
<li> Built in Global Functions </li>
</ul>
</div>
<div class="three">
Lecture 2
</div>
<div class="four"></div>
</div>
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
<div class="special"></div>
</html>
In you css part, just change a little bit of your .row:hover to
.row:hover div {
background-color:red;
}
.row:hover as when you hover it, you want to manipulate div tag, so add div tag in .row:hover and do the css part for div tag.
you can also add any another tag/class/ID and then manipulate them in the .row:hover
Simply because the background is not defined on the .row element but its child element, so you need to target the child. You may simply do this;
.row:hover > div{
background-color:red;
}
Full code:
body {
margin: 0px;
padding: 0px;
background-color: blue;
}
h1,
h2 {
font-family: sans-serif;
color: white;
text-align: center;
}
#container {
width: 63vw;
margin: auto;
height: auto;
background-color: rgb(123, 108, 160);
}
.row {
height: 125px;
background-color: red;
margin: 0px;
padding: 0px;
}
.one {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
margin: 0px;
}
.two {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
margin: 0px;
}
.three {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: white;
}
.four {
border: none;
height: 125px;
float: left;
width: 25%;
background-color: green;
}
.row:hover>div {
background-color: red;
}
<h1>WEB</h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<div class="row">
<div class="one">
<p>Week 1<br> May 7 <br> - <br> May 11
<p/>
</div>
<div class="two">
<ul>
<li> Course introduction </li>
<li> Internet Architecture </li>
<li> Introduction to Javascript </li>
</ul>
</div>
<div class="three">
Welcome
Lecture 1
</div>
<div class="four">
<h3> Work Due </h3>
</div>
</div>
<div class="row">
<div class="one">
<p> Week 2</p>
</div>
<div class="two">
<ul>
<li> Javascript functions </li>
<li> Built in Global Functions </li>
</ul>
</div>
<div class="three">
Lecture 2
</div>
<div class="four"></div>
</div>
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
<div class="special"></div>
I want to maintain equal distances between my sections. I've currently set the margin-bottom to 20%, which works great on desktop view and mobile view. But with the tablet the sections collide due to an image growing in size. Here's the code, any help is appreciated:
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
section {
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20%;
height: 100vh;
}
section .box {
padding: 50px;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
margin-bottom: 20px;
font-size: 22px;
line-height: 28px;
color: white;
}
.frame-picture {
position: relative;
border: 2px solid;
border-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0 0 15px 0;
}
<div class="main">
<!-- Home -->
<section id="home" class="home-section">
<div class="">
</div>
</section>
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame-picture">
<img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
<p>I graduated from the University of Waterloo in 2015, with a BSc. in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch</h2>
</div>
</section>
</div>
Use flexbox. Wrap the following flex container around the sections:
.main {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
align-items: space-between;
margin: 40px auto;
padding: 20px;
background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
And add the following ruleset to the section that contains the picture:
flex: 0 1 auto;
I wish you good luck job hunting.
SNIPPET
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
body {
color: #fff;
}
.main {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
align-items: space-between;
margin: 40px auto;
padding: 20px;
background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
section {
width: 100%;
margin: 0 auto;
}
section .box {
padding: 5px 20px;
margin: 20px auto;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
font-size: 22px;
line-height: 28px;
color: white;
}
.frame-picture {
border: 2px solid;
border-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0 0 15px 0;
flex: 0 1 auto;
}
<div class="main">
<!-- Home -->
<section id="home" class="home-section">
<div class="">
</div>
</section>
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame-picture">
<img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
<p>I graduated from the University of Waterloo in 2015, with a BSc. in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch</h2>
</div>
</section>
</div>