I am coding a website for a history class. The background of the site is a map of Europe, and on the map are numbers. The goal of the site is to have these numbers positioned on a specific country, so that when the user hovers over a number, it displays that countries dialect and religion. My problem being that when I open the website on another computer, all of the numbers are off and not positioned on their correct country. Ive tried using percentages to position them to no avail. I'm sure it's an amateur mistake, but I cant seem to find the solution and I need to present the site in school tommorow. If anyone can think of a solution, it would be greatly appreciated! I've posted the code for one of the pages below.
EDITHere is a link to a screenshot of the site, with the 1 being in the correct position, however it shifts when opened on another PC. https://gyazo.com/9b4bc7d51178d45c74130f7ea4b0b9e2
<html>
<head>
<title>Celtic Region</title>
<style>
div {
float: left;
position: relative;
}
body {
margin: 0px;
background-color: ffffcc;
}
.header {
width: 100%;
height: 8%;
font-size: 50px;
font-family: verdana;
background-color: 659DBD;
text-align: center;
text-shadow: 2px 2px 6px black;
padding-bottom: 15px;
color: white;
}
.navbar {
width: 100%;
height: 5%;
display: inline-block;
text-align: center;
background-color: 659DBD;
font-family: verdana;
font-size: 25px;
padding-top: 5px;
box-shadow: 8px 8px 10px gray;
}
.navbar a:link {
text-decoration: none;
padding-left: 15px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
color: white;
border-radius: 10px;
text-shadow: 2px 2px 3px gray;
}
.navbar a:visited {
color: white;
}
.navbar a:hover {
background-color: gray;
visibility: visible;
}
.map {
background: url(BlankMap.png) no-repeat 50% 0;
}
.irishGaelic {
font-family: verdana;
font-size: 30px;
left: 360px;
top: 470px;
position: absolute;
}
.irishGaelic:hover .popupText {
visibility: visible;
}
.popupText {
visibility: hidden;
font-size: 15px;
position: static;
background-color: black;
color: white;
border-radius: 6px;
padding: 5px;
}
.scotsGaelic {
font-family: verdana;
font-size: 30px;
left: 240px;
top: 600px;
position: absolute;
}
.scotsGaelic:hover .popupText {
visibility: visible;
}
.welsh {
font-family: verdana;
font-size: 30px;
top: 610px;
left: 370px;
position: absolute;
}
.welsh:hover .popupText {
visibility: visible;
}
.breton {
font-family: verdana;
font-size: 30px;
left: 350px;
top: 760px;
position: absolute;
}
.breton:hover .popupText {
visibility: visible;
}
</style>
</head>
<body>
<div class="header">
Western Europe Ethno Linguistic Map
</div>
<div class="navbar">
Celtic Region
Germanic Region
Romance Region
</div>
<div class="map">
<img src="BlankMap.png" alt="Western Europe">
<div class="irishGaelic">1
<div class="popupText">
Dialect: Irish-Gaelic<br>
Religion: Catholic
</div>
</div>
<div class="scotsGaelic">2
<div class="popupText">
Dialect: Scots-Gaelic<br>
Religion: Protestant
</div>
</div>
<div class="welsh">3
<div class="popupText">
Dialect: Welsh<br>
Religion: Protestant
</div>
</div>
<div class="breton">4
<div class="popupText">
Dialect: Breton<br>
Religion: Protestant
</div>
</div>
</div>
</body>
Related
I'm new to HTML and CSS. I have a project due on Friday and I don't understand how to make my page look the same in all browsers and resolutions. I will leave my CSS and HTML code, so if anyone is kind enough to help me figure it out I'd really appreciate it. We did some simple designs before but I was trying new things out and I guess what I did looks good on like bigger displays but on smaller ones the elements are just messed up.
body{
font-family: 'Playfair Display';
font-size: 20px;
}
.figure1{
float:right;
clear: both;
padding-bottom: 150px;
padding-left: 450px;
padding-right: 8px;
background-color: #D1C45E;
width: 500px;
height: 600px;
}
.figure2{
float:left;
clear: both;
padding-top: 250px;
padding-bottom: 50px;
padding-right: 450px;
padding-left: 8px;
background-color: #D1C45E;
width: 400px;
height: 400px;
}
.imgMe {
position: absolute;
left: 770px;
top: 65px;
}
.navbar {
overflow: hidden;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: #D1C45E;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #D1C45E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #D1C45E;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1{
display: inline;
float: none;
padding-left: 140px;
font-size: 80px;
font-weight: 700;
line-height: 1.2;
}
h3{
display: block;
float: none;
padding-top: 350px;
padding-left: 340px;
text-transform: uppercase;
color: #d5c455;
font-size: 20px;
}
h2{
display: block;
float: right;
position: relative;
left: 1030px;
bottom: 650px;
text-transform: uppercase;
font-size: 42px;
}
button {
margin: 20px;
outline: none;
}
.custom-btn {
width: 130px;
height: 40px;
padding: 10px 25px;
border: 2px solid #000;
font-family: 'Lato', sans-serif;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
position: relative;
left: 395px;
font-weight: bold;
font-style: italic;
}
.btn-1 {
transition: all 0.3s ease;
}
.btn-1:hover {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
br {
display: inline-block;
content: "";
margin-top: 35%;
}
.pText{
display: block;
float: right;
position: absolute;
left: 930px;
top: 1500px;
line-height: 40px;
}
a{
all: revert;
text-decoration: none;
color: black;
}
html {
scroll-behavior: smooth;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
footer {
text-align: center;
padding: 40px;
background-color: #D1C45E;
color: white;
display: block;
position: absolute;
top: 2100px;
left: 0px;
width: 1823px;
height: 100px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.copyright{
text-align: left;
display: inline;
position: absolute;
bottom: 0px;
left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Janko's homepage </title>
<link href="assets/CSS/project1.css" rel="stylesheet" type="text/css">
<link rel="icon" href="assets/media/home.png">
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">
<img src="assets/media/menu.png" alt="an image of a dropdown menu" height="50" width="50">
</button>
<div class="dropdown-content">
Education
Personal
Résumé
</div>
</div>
</div>
<section>
<figure class="figure1">
<img class="imgMe" src="assets/media/janko-image.png" title="Janko " alt="An image of me" width="950" height="815">
</figure>
<h3> Web designer & developer </h3>
<h1> I'm Janko </h1>
<button class="custom-btn btn-1">About me</button>
</section>
<section>
<br>
<figure class="figure2">
<div id="down">
<h2> About me </h2>
</div>
<p class="pText"> I'm a 19 year old Web developer and designer from Croatia. I specialise in HTML and Java. I'm interested in finding a fullstack developer job. The mission of this site is to showcase my web-developing and designing abilities to my potential employers, my professors and viewers who might take inspiration from my website. Not to mention all the feedback I can get will most definitely help me form my webdesign style in the future.</p>
</figure>
<br>
</section>
<section>
<br>
<footer>
<ul class="socials">
<li><img src="assets/media/instagram.png" alt="instagram icon" height="60" width="60"></li>
<li><img src="assets/media/email.png" alt="mail icon" height="60" width="60"></li>
<li><img src="assets/media/facebook.png" alt="facebook icon" height="55" width="60"></li>
</ul>
<p class="copyright"> Copyright © Janko 2022</p>
</footer>
</section>
</body>
</html>
I am trying to set up the footer, but I'm unable to remove the lines under the text. I also would like to change the color of the text. I tried using text decoration:none under .footer ul, but that was unsuccessful.
h2 {
text-align: center;
font-family: "Courier New";
color: beige;
font-size: 50px;
font-weight: 200;
text-shadow: -2px -2px black;
margin-bottom: -50px;
position: relative;
}
.head-link {
text-decoration: none;
color: aliceblue;
}
.head-link:hover {
margin: 20px auto 20px;
position: relative;
color: darkgoldenrod;
}
header {
background-image: url(https://i.imgur.com/xD3POCF.jpg);
position: absolute;
background-position: center;
max-width: 2000px;
width: 100%;
height: 100%;
top: 0;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
bottom: 40px;
}
.header-image {
background-size: cover;
}
.dropbtn {
background-color: transparent;
color: darkblue;
padding: 10px;
cursor: pointer;
font-family: monospace;
top: 0;
font-size: 15px;
width: 120px;
height: 50px;
border-color: black;
border-style: double;
align-content: center;
text-align: center;
margin-top: -10px;
}
.dropdown {
display: inline-block;
position: relative;
margin-left: 15px;
}
.dropdown-content {
padding: 12px;
position: absolute;
font-family: monospace;
background-color: transparent;
z-index: 1;
display: none;
min-width: 10px;
text-align: left;
left: 0;
}
.dropbtn:hover {
color: white;
}
.dropdown-content a {
color: #04116f;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 13px;
}
.dropdown-content a:hover {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
text-decoration: underline;
}
.sidebar {
display: block;
position: relative;
top: -650px;
bottom: 0px;
left: -30px;
width: 120px;
padding: 10px;
background: transparent;
z-index: 0;
}
.sidebar ul {
cursor: pointer;
list-style: none;
color: white;
line-height: 2;
}
body {
margin: 0px;
top: 0;
width: 100%;
max-height: 10%;
background-image: url(http://i.imgur.com/yiMoYpV.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 20px 50px center;
background-attachment: fixed;
}
.content {
display: block;
margin-right: 0px;
padding: 0px;
margin-bottom: 700px;
position: relative;
max-width: 1500px;
max-height: 500px;
}
p {
display: block;
padding: 40px;
position: relative;
max-width: 500px;
max-height: 500px;
width: 100%;
left: 50%;
height: 200px;
top: 120px;
font-family: monospace;
font-size: 15px;
line-height: 2;
margin-bottom: -70px;
color: goldenrod;
text-align: left;
}
.footer {
margin: 100px 0 0 0;
display: flex;
flex-flow: row;
justify-content: center;
padding-bottom: 2px;
align-content: space-between;
background: transparent;
overflow: hidden;
}
.footer ul {
text-align: center;
list-style: none;
display: inline-flex;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<header>
<h2 style="bottom: -130px">
<a href="#" class=h ead-link> A B E L</a>
</h2>
<div class="dropdown" style="float;right">
<button class="dropbtn">Menu</button>
<div class="dropdown-content" style="right;0">
About
Portfolio
Contact
</div>
</div>
<div class="title"></div>
<title>A B E L </title>
</header>
<body>
<div id="hl-content" class="content"></div>
<p>
<span style="color:navajowhite">
<b>Hello, Welcome to my website.</b>
</span>
<BR></BR>
My name is Abel, a senior college student currently residing in the Bay Area. This portfolio will give you a good background about me including my specialties, expertise and even hobbies. As you can probably tell from the background pictures, I like traveling
and taking photos!
</p>
<p>This is my first ever website that I created using HTML and CSS, and it's a pleasure to finally be able to share it with you. I am happy to receive any feedback, recommendations or opportunities from you, so don't hesitate to contact me.</p>
<div class="footer">
<ul>
<li> About</li>
<li>Portfolio</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
As you can see text decoration and color doesn't work.
How can I fix this?
.footer > ul > li > a {
color: white;
text-decoration: none;
}
Try this.
You need to style the links in your footer explicitly.
.footer ul a {
text-decoration:none;
}
You need to add this css :
.footer ul li a {
text-decoration:none;
}
I've tried my best, this might help as per your requirement(underline and color):
add this in your code,
.footer ul li a {
text-decoration: none;
color: tan;
padding: 5px;
}
.footer ul li a:hover {
text-decoration: underline;
}
appreciate if it is useful enough.
I tried researching this question on this site, but everything wasn't related to my particular site. Pretty much I have a background image on my home page, and the background is "fixed" and "covered". I am not sure if that's the reason why it is not working. I want the "View Works" button in the center of the computer. Please help!
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Kasia's Website </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<a href="works.html">
<input class="butt" type="button" value="VIEW WORKS" />
</a>
</div>
<div id="page">
<div id="sidebar">
<div>
<a href="index.html"><img id="logo"
src="http://i66.tinypic.com/xnf4us.png" /></a>
</div>
<div>
<ul class="sb">
<li> Home </li>
<li> About </li>
<li> Works </li>
<li> Contact </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div>
</body>
</html>
CSS
#charset "UTF-8";
body {
background-image: url(http://i66.tinypic.com/ww1d7n.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-family: "Helvetica Neue";
}
#sidebar {
background: #05E2D4;
background-color: rgba(5, 226, 212, 0.7);
width: 220px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul.sb {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
padding: 200px;
display: block;
width: 180px;
padding: 30px;
text-transform: uppercase;
font-weight: 105;
letter-spacing: 2.5px;
line-height: 30%;
margin-left: 20px;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
position: absolute;
margin: 20px;
top: 0px;
right: -60px;
cursor: pointer;
}
#sidebar-btn span {
height: 2px;
background: #000000;
margin-bottom: 5px;
display: block;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: none;
}
a:hover {
color: #ffcd03;
}
a:active {
color: #ffcd03;
}
#logo {
margin: 20px 50px 20px 50px;
}
#page {
max-width: 800px;
min-width: 600px;
}
#Kasiaport {
width: 500px;
margin: 50px 200px 50px 200px;
}
aside {
width: 30%;
background-color: white;
padding: 40px 40px 20px 40px;
margin: auto;
}
p.work {
color: white;
font-size: 9px;
text-transform: uppercase;
border-style: solid;
border-color: white;
margin-left: auto;
margin-right: auto;
width: 70px;
padding: 15px 30px 15px 30px;
display: block;
}
.butt {
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: transparent;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 10px 20px;
border: solid #FFFFFF 2px;
text-decoration: none;
font-weight: 200;
letter-spacing: 1.5px;
font-family: "Helvetica Neue";
text-align: center;
margin-left: 45%;
margin-top: 32%;
position: absolute;
}
.butt:hover {
border-color: #ffcd03;
background-color: none;
color: #ffcd03;
text-decoration: none;
}
http://codepen.io/kasiariele/pen/MaLdWv/
In order to see the error visually, you may need to go in full screen mode (http://codepen.io/kasiariele/full/MaLdWv/) or make the screen smaller so you can see it scroll.
Thank you.
Don't use margin to "center" your elements as you did.
You can add this code and the button will be centered both horizontally and vertically without having to adjust your old code:
.butt {
margin: 0; /* reset your old margin */
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Check browser support for transforms and any extra prefixes needed (-ms for ie9).
I'm trying to build a page that has a lightbox - but I don't want any javascript on it.
I found a tutorial on how to do this, but when I started to add it, I noticed that everytime I click on the link, it scrolls down ever so slightly, hiding the top border of the page.
How can I stop this? Because it ruins the look of the site
HTML
<div id="container">
<div id="header-row">
<div class="logo span4">
<h1>Title <span>.</span></h1>
</div>
</div>
<div id="content">
<p></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-form">
<div class="box">
<h3>About</h3>
<p>
</p>
x
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
CSS
html, body {
background: #f8f8f8 url(../img/pattern.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #e75967;}
strong { font-weight: 700; }
a:hover { text-decoration: none; }
::-moz-selection { background: #e75967; color: #fff; text-shadow: none; }
::selection { background: #e75967; color: #fff; text-shadow: none; }
.logo h1 {
margin-top: 7px;
padding-left: 50px;
font-family: 'Lobster', cursive;
font-size: 38px;
font-weight: 400;
color: #555;
}
.logo h1 span { color: #e75967; }
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Here is a JSFiddle
Sorry for all the code - but it wont let me post it without it
x
using #close in a link like this makes your browser jump to that ID
Haven't pinpointed exactly on which elements it makes a difference, but you can simply add this your your CSS:
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
And it won't jump any more.
I need a some help with positioning a static Google Maps map.
There are two problems:
Having the static map on the same level/line as the writing, the writing on the left and the map on the right
Keeping the footer on the bottom of the page
CodePen DEMO
HTML:
<div class="wrapper">
<ul class="nav">
<li class="home">Home
</li>
<li class="location">Location
</li>
<li class="itinerary">Itinerary
</li>
<li class="photos">Howard & Mary
</li>
</ul>
</div>
<h1>Location</h1>
<p class="grid">USS NORTH CAROLINA
<br/>Address: 1 Battleship Rd NE, Wilmington, NC 28401, United States Telephone: + 1 910-251-5797 wesbite: www.battleshipnc.com/
</p>
<div class="map">
<p class="static_map">
<img src="http://maps.googleapis.com/maps/api/staticmap?parameters?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&size=400x300&sensor=false&markers=1+Battleship+Rd,+Wilmington,+North+Carolina+28401" alt+ "1 Battleship Rd, Wilmington, North Carolina 28401"/>
</p>
</div>
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src="https: //maps.googleapis.com/maps/api/js?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&sensor=false"></script>
<footer class="main-footer">
<h1 class="tri">All donations & proceeds will go towards Dare 2 Tri</h1>
</footer>
CSS:
body {
background-image: url("http://i.istockimg.com/file_thumbview_approve/1985611/2/stock-photo-1985611-uss-north-carolina.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1 {
text-align: center;
color: #0051c2;
font-size: 80px;
}
.grid {
color: #0051c2;
font-size: 40px;
width: 45%;
margin-left: 10px;
}
.map {
margin-right: 10px;
float: right;
}
.wrapper {
position: relative;
top: 10px;
height: 175px;
width: 1100px;
background-color: black;
opacity: 0.8;
margin: auto;
border-radius: 10px;
z-index: 0;
}
.main-footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: black;
opacity: 0.8;
text-align: center;
}
.tri {
color: white;
font-size: 16px;
}
ul.nav {
display: inline;
color: white;
text-decoration: none;
text-align: center;
padding: 8px 15px;
border-radius: 5px;
text-align: auto;
}
ul.nav li {
float: left;
margin-left: 50px;
}
ul.nav li.home {
padding: 35px 15px;
margin: 20px;
top: 15px;
font-weight: 100;
height: 55px;
width: 130px;
font-size: 40px;
}
ul.nav li.home:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li.location {
padding: 35px 15px;
margin: 20px;
font-weight: 100;
top: 15px;
height: 55px;
width: 180px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.location:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li.itinerary {
padding: 35px 15px;
margin: 20px;
font-weight: 100;
height: 55px;
width: 200px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.itinerary:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li.photos {
padding: 35px 15px;
margin: 20px;
margin-left: 20px;
border: 0;
font-weight: 120;
height: 55px;
width: 250px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.photos:hover {
background-color: #0051c2;
border-radius: 8px;
}
ul.nav li a {
color: #faf3bc;
display: block;
text-decoration: none;
}
First Issue: Aligning address with map
Make your 'grid' p into a div and add float:left to your .grid CSS.
Example: http://codepen.io/anon/pen/kwJcE
Second Issue: Sticky Footer
Duplicate question, see here: Make footer stick to bottom of page correctly
Direct link: "A CSS Sticky Footer that just works"
Bonus Third Issue: Terrible Design
I would never tell anyone they are learning 'wrong' but check out grid systems/frameworks, especially responsive grid systems. It will help you build faster with a better aesthetic.