I'm fairly new to CSS/HTML however I'm trying to take my Figma Design and write the code for it. I'd need the website to be responsive to different screen-sizes. I have the image to what I believe is the right place, however I can't seem to get my text into the right places, and I don't know how to change button size or color.
I've included my Figma Design and my code.
https://www.figma.com/file/QYUmBdCX7PJYi5V8XV63e3/Shield-Split-Designs?node-id=9%3A55&t=DaKGZA7LVNNQBZbE-1
HTML:
<docType html!>
<html>
<head>
<title>Arriving soon...</title>
<link rel=stylesheet href="Stylesheets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="logo">
<img src="Transparent%20Logo.png">
</div>
<div id="logo-text">
<p1>Split Shield</p1>
</div>
<div id="slogan">
<p>The next generation of internet security is arriving soon...</p>
</div>
<div id="content-button">
<button>Check out our concept</button>
</div>
</body>
</html>
</docType>
CSS:
body {
background-color: #2F2F41;
}
#logo:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
#logo img {
max-width: 31.2%;
vertical-align: middle;
display: inline-block;
margin-left: 8.6%;
}
#logo-text p1 {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 700px;
font-size: 64px;
display: flex;
}
#slogan p {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 400px;
font-size: 32px;
}
#button {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 24px;
text-align: center;
}
#button button {
background-color: #FFCC00;
}
There're many ways you can acheive your target, one of them is using grid, so in this case i'll show you how to go with grid-template, and how to make you're code equal to the figma design.
but you need to read more about the HTML5, and CSS so you can handle more in future,
at least i'll focus on some mistakes you have done,
first, HTML5 declaration is used in this way <!doctype HTML>, the exclamation mark at the first, and there's no closure tag for it, so you just declare the doc type at the first.
second, you need to target your parents / childs correctly at your css code.
anyway, here is an example to go through
body {
background-color: #2F2F41;
}
.grid-container {
display: grid;
grid-template: "a b" auto "a c" auto "a d" auto;
}
#logo {
grid-area: a;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
#logo-text {
grid-area: b;
}
#slogan {
grid-area: c;
}
#content-button {
grid-area: d;
}
#logo img {
max-width: 100%;
vertical-align: middle;
}
#logo-text p1 {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 700px;
font-size: 64px;
display: flex;
}
#slogan p {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 400px;
font-size: 32px;
}
#button {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 24px;
text-align: center;
}
#button {
background-color: #FFCC00;
width:80%;
display:flex;
border-radius:15px;
height:3rem;
justify-content:center;
align-items:center;
}
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="grid-container">
<div id="logo">
<img src="https://i.ibb.co/j5hXXVP/imgbin-macos-virtual-private-network-computer-icons-apple-png.png" alt="imgbin-macos-virtual-private-network-computer-icons-apple-png" border="0">
</div>
<div id="logo-text">
<p1>Split Shield</p1>
</div>
<div id="slogan">
<p>The next generation of internet security is arriving soon...</p>
</div>
<div id="content-button">
<div id="button">Check out our concept</div>
</div>
</div>
</body>
Related
I have a question. I am wondering how can I create a border that increases the width for my button on hover. I tried to create a border but what happened is it created a border on the inside of my button. The image shows what is supposed to happen. I began thinking it had something to with padding but even if that is the case I have no idea how I would go about doing it.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
CSS code:
body {
background-image: url('../assets/home/background-home-desktop.jpg');
background-repeat: no-repeat;
background-size: cover;
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
width:250px;
height:250px;
border-radius: 50%;
border:none;
background-color:white;
font-family: 'Bellefair', serif;
font-size: 2rem;
font-weight: normal;
text-transform: uppercase;
}
.btn:hover {
}
You can use outline:
outline: 40px #25252e solid;
You mean like this??
body {
background-image: url('../assets/home/background-home-desktop.jpg');
background-repeat: no-repeat;
background-size: cover;
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
width:250px;
height:250px;
border-radius: 50%;
border:none;
background-color:white;
font-family: 'Bellefair', serif;
font-size: 2rem;
font-weight: normal;
text-transform: uppercase;
}
.btn:hover {
outline:50px solid gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
I am currently attempting to increase the width of the back-drop filler effect and I am confused on how to do it. The first picture is what I have and the second is what it should look like. I feel it possibly has something to do with increasing the width and height of my nav but when I tried it didn't work out. Could also have something to do with the fact I used absolute with the nav instead of using float but im so copnfused. Thanks.
This is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
This is the CSS code
body {
background-image: url(assets/home/background-home-desktop.jpg);
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
}
Hello i have rewrite your code to make an clean code on my version.
body {
background-color: black;
}
.wrapper_navbar {
display: flex;
flex-direction:row;
align-items: center;
}
.logo_navbar {
display: flex;
}
.img_logo {
width: 60px;
height: 60px;
}
hr {
width: 100%;
display: inline-block;
top: 75px;
}
.hr_line{
display:flex;
flex:auto;
}
.navbar {
display: flex;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
padding: 10px 17px;
justify-content: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
text-decoration: none;
color: #ccc;
}
li a {
display: block;
padding: 8px;
}
.item_nav {
margin: 0 5px;
}
<div class="wrapper_navbar">
<div class="logo_navbar">
<div class="logo">
<img src="https://img1.pngdownload.id/20171220/dxq/google-png-5a3aafee6ff5c8.9595681415137955664586.jpg" class="img_logo" />
</div>
</div>
<div class="hr_line">
<hr />
</div>
<div class="navbar">
<ul>
<li class="item_nav">Item 1</li>
<li class="item_nav">Item 2</li>
<li class="item_nav">Item 3</li>
</ul>
</div>
</div>
https://jsfiddle.net/dimaswahyu/ntg09e5b/86/
Here's a simple explanation. Every picture paints a thousand words...
As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?
body {
background-color: #efefef;
overflow: hidden;
}
.logo h1 {
align-items: center;
color: #262626;
display: flex;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: 50vh;
justify-content: center;
max-width: 100px;
margin: auto;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.
body {
background-color: #efefef;
overflow: hidden;
}
.logo {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #262626;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: fit-content;
width: fit-content;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
</head>
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
I've built this tribute page on Codepen. And I added Bootsrap. And then I cant access to body from css. You can check my code here.
body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
Bootstrap style is overriding your style. Use !important to override bootstrap style. For more details check these usages
html>body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
Alternate Solution:-
Use html > body to increase specificity which will be a good practice
html > body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
I am making a website for myself and I am having trouble with padding. The case I am working on involves showing a basic calculator in what ive done. The eventual goal is to have text show up upon hovering over the image, but for now the text on the image is at the top, when it needs to be in the middle.
Any comments about the code or ways to improve are greatly appreciated, and thank you very much for your help.
Also, after a little bit of research it occured to me to use the display:block, but that has not been working for me.
Thanks, Ian.
CODE:
body {
background-color: #EDEEEF;
}
#header {
width: 100%;
}
#container {
position: relative;
}
#text {
z-index: 100;
position: absolute;
font-size: 20px;
left: 50%;
height: 50px;
width: 15%;
top: 30px;
}
#text,
#text1,
#text2,
#text3 {
background-color: #FFF;
border-radius: 2px;
border: 2px;
font-family: 'Open Sans', sans-serif;
background: none;
color: #A4A4A4;
padding: 0;
}
button {
border-radius: 2px;
border: 2px;
background: none;
padding: 0;
}
button:hover {
color: #FFF;
font: #FFF;
border-radius: 5px;
border: 2px;
cursor: pointer;
}
#text:hover,
#text1:hover,
#text2:hover,
#text3:hover {
color: #EEE;
}
#text1 {
z-index: 100;
position: absolute;
font-size: 20px;
top: 30px;
width: 10%;
height: 50px;
left: 65%;
}
#text2 {
z-index: 100;
position: absolute;
font-size: 20px;
left: 75%;
top: 30px;
height: 50px;
width: 15%;
}
#text3 {
z-index: 100;
position: absolute;
font-size: 20px;
left: 90%;
top: 30px;
height: 50px;
width: 10%;
}
#AbM,
#Contact,
#CM {
font-family: 'EB Garamond', serif;
background-color: #FFF;
}
#PW {
background-color: #EDEEEF;
font-family: 'Open Sans', sans-serif;
#abtbackground-color: #EDEEEF;
}
#ABM {
width: 60%;
font-family: 'Open Sans', sans-serif;
}
#CM {
margin-left: 40%;
font-family: 'Open Sans', sans-serif;
}
#te {
border-bottom: 1px solid #000;
font-family: 'Open Sans', sans-serif;
display: inline;
left: 40%;
width: 40%;
}
#AbT,
#AbM,
#PW,
#Contact {
font-family: 'EB Garamond', serif;
color: #2F2F2F;
}
#ABM,
#PWW,
#te {
font-family: 'Open Sans', sans-serif;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
#ttt {
left: 200px;
padding-left: 200px;
}
#abs,
#aa {
display: inline-block;
}
#content {
display: block;
height: auto;
background-color: #EDEEEF;
}
#content > img {
float: center;
width: 15%;
height: auto;
display: block;
margin: 5px 30px;
}
#c1:hover,
#c2:hover {
-webkit-filter: brightness(50%);
opacity: 100%;
}
#BBB:hover ~ #c1 {
-webkit-filter: brightness(50%);
}
#BBB {
position: absolute;
font-size: 20px;
color: transparent;
top: 1375px;
width: 10%;
height: 50px;
left: 36%;
opacity: 0;
}
#B2 {
color: #FFF;
font-size: 20px;
font-family: 'EB Garamond', serif;
}
#onboard {
width: 15%;
float: center;
display: block;
height: 400px;
background: url(http://oi67.tinypic.com/2w50waa.jpg) 50% 0 no-repeat;
background-size: cover;
}
#onboard:hover {
-webkit-filter: brightness(50%);
}
#AN {
display: block;
font-family: 'EB Garamond', serif;
padding-top: 1000px;
}
#cal1 {
display: inline-block;
opacity: 0;
font-family: 'EB Garamond', serif;
padding-top: 100px;
}
#BAW {
font-size: 20px;
padding-top: 100px;
font-family: 'EB Garamond', serif;
}
<!DOCTYPE html>
<html>
<HEAD>
<title>Ian Winson</title>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="SHORTCUT ICON" HREF="favicon.png"> -->
<!-- ****** faviconit.com favicons ****** -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- ****** faviconit.com favicons ****** -->
</HEAD>
<body>
<header style="overflow:hidden; margin:0">
<div id="container">
<center>
<img src="http://i.imgur.com/p7jCsXM.jpg" width="100%"></img>
</center>
<font color="#2F2F2F" size="5"><button id="text" align="right" onClick="document.getElementById('ABT').scrollIntoView();" > ABOUT THIS WEBSITE</button>
<button id="text1" align="right" onClick="document.getElementById('ABM').scrollIntoView();"> ABOUT ME</button>
<button id="text2" align="right" onClick="document.getElementById('PW').scrollIntoView();">PROGRAMMING WORK</button>
<button id="text3" align="right" onClick="document.getElementById('Contact').scrollIntoView();">CONTACT</button>
</font>
</div>
</header>
<center>
<div id="AbT">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>About This Website</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>This Website was started in Early March 2016, and I intend for it to be my platform to post updates,
recent coding projects, resumes, and more. I am self taught in HTML, so my apologies if there are
any bugs
</p>
<br><br>
</font>
</div>
</div>
</center>
<center>
<div id="AbM" background-colo="pink">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>About Me</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>I'm a sophomore at Jesuit College Preperatory School in Dallas Texas(As of Early 2016).
I have been programming for ~2 years, and mainly know Java. I have made a few apps for android, none of which have been released.
I also have done some work programming for my FTC Robotics team, 9157. I am also a member of FRC team 2848.
</p>
<br><br>
</font>
</div>
</center>
<center>
<div id="PW">
<font color="#2F2F2F" face="Garamond">
<h1>Programming Work</h1>
<div id="PWW">
<font face="Open Sans">
<p>As previously mentioned, I mainly know Java, and this is my first big project in HTML.
I have made Java apps including:<br>
</div>
<div id="content">
<div id="onboard">
<div id="Cal1" <p id="AN">Basic</p><button id="AK"> Learn More</button>
</div>
</div>
<img id = "c2" src="http://oi68.tinypic.com/aax9vo.jpg" alt="" width="20%" />
<div id = "QQQ">
<p id = "Q1" style="padding-top: 150px;">Advanced Calculator</p>
<p id = "Q2"> Learn More</p>
</div>
</div>
</div>
</center>
</font>
<center>
<div id="Contact">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>Contact Me</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>If you are looking to contact me, please do it through the provided links below.<br>
<b>Questions</b><br>
Email: iankwinson#gmail.com<br>
<b>Social Media:</b><br>
Instagram: <a href="https://www.instagram.com/ianwinz/" >#ianwinz</a><br>
Twitter: #ianwinz
</div>
</p>
<br><br>
</font>
</center>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
In your CSS:
#AK {
padding-top: 150px;
}
It seems like the ID you are using for your button is #AK and there is no styling for that in your current CSS code. Try to manipulate the 100px (+/-) to match your needs of where you want it to be.
https://jsfiddle.net/8a0q2o0e/#&togetherjs=CN62LLHwxA
You could try using absolute position on your button place this at the bottom of your css
#onboard{
position: relative; /** Container to make sure position absolute stays in place **/
}
#ak{
position: absolute;
width: 100%;
top: 50%;
left: 0;
}