I'm building homepage for a website for my first web dev module at uni and i'm running into an issue. Below my navigation bar and above the main content section there is a whitespace for some reason. I'm using CSS grid so maybe it's due to a mistake there somewhere but not sure.
Basically I only want 1 column and 3 rows in the grid: Header - where my nav bar will go, a main-content section where a few headlines will go and a footer. But I seem to have a 4th section in between. Initially I had this whitespace below my footer and then I changed the positioning settings to 'stick' the footer to the bottom (not really knowing what I was doing) and now I think the whitespace has been pushed up or something. I want the 'main-content' section to start at the bottom border of the header and end at the top border of the footer and add a background image to it. Thanks in advance for the assistance!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint"
content="width=device-width, initial scale=1">
<link
href="https://fonts.googleapis.com/css2?family=Orbitron:wght#500&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght#700&display=swap"
rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet"
type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span
style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
& Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span
style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science
student based in Sheffield,
England.</h2>
</div>
<div class="tagline">
<h1>This Is <span
style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span
style="color: white;">K
</span></h1>
<p>Welcome to my resume site.
My name is Uwais
Kushi-Mohammed, I am a
first year computer
science student at
Sheffield Hallam
University. If you want to
hire me for a project get
in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span
style="color: white;">Links
</span></h1>
<nav>
<ul>
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</div>
<div
class="footer-section-contact">
<h1>Contact<span
style="color: white;">
Me</span></h1>
<br />
<form class="contact-form"
action="results.html"
method="GET">
<div>
<input
class="contact-input"
type="text"
id="first-name"
placeholder="First Name...">
</div>
<div>
<input
class="contact-input"
type="text"
id="last-name"
placeholder="Last Name...">
</div>
<div>
<input
class="contact-input"
type="email"
id="email"
placeholder="Email Address...">
</div>
<div>
<textarea
class="message-input"
id="message"
placeholder="Message..."></textarea>
</div>
<button
class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © |
Designed by Uwais
Kushi-Mohammed. All Rights
Reserved.
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"header"
"main-content"
"footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center ;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li , .nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content{
grid-area: main-content;
background-color: black;
}
.greeting h1{
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2{
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content{
height: 300px ;
display: flex;
}
.footer .footer-content .footer-section-about, .footer-section-links, .footer-section-contact{
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color:#2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li, .footer-section-links a{
font-family: 'Anonymous Pro', monospace;
color:#dbdbdb;
text-decoration: none;
list-style-type: none;
margin:3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px ;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input{
border: 0;
background-color: #c7c3c3;
width: 240px;
margin:3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button{
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color:#c7c3c3;
}
::placeholder{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color:#787672 ;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
Combined as a snippet:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header" "main-content" "footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li,
.nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content {
grid-area: main-content;
background-color: black;
}
.greeting h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2 {
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content {
height: 300px;
display: flex;
}
.footer .footer-content .footer-section-about,
.footer-section-links,
.footer-section-contact {
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li,
.footer-section-links a {
font-family: 'Anonymous Pro', monospace;
color: #dbdbdb;
text-decoration: none;
list-style-type: none;
margin: 3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input {
border: 0;
background-color: #c7c3c3;
width: 240px;
margin: 3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button {
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color: #c7c3c3;
}
::placeholder {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color: #787672;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial scale=1">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght#700&display=swap" rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet" type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
& Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science student based in Sheffield, England.
</h2>
</div>
<div class="tagline">
<h1>This Is <span style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span style="color: white;">K
</span></h1>
<p>Welcome to my resume site. My name is Uwais Kushi-Mohammed, I am a first year computer science student at Sheffield Hallam University. If you want to hire me for a project get in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span style="color: white;">Links
</span></h1>
<nav>
<ul>
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</div>
<div class="footer-section-contact">
<h1>Contact<span style="color: white;">
Me</span></h1>
<br />
<form class="contact-form" action="results.html" method="GET">
<div>
<input class="contact-input" type="text" id="first-name" placeholder="First Name...">
</div>
<div>
<input class="contact-input" type="text" id="last-name" placeholder="Last Name...">
</div>
<div>
<input class="contact-input" type="email" id="email" placeholder="Email Address...">
</div>
<div>
<textarea class="message-input" id="message" placeholder="Message..."></textarea>
</div>
<button class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © | Designed by Uwais Kushi-Mohammed. All Rights Reserved.
</div>
</div>
</div>
</body>
</html>
It seems that the grid template is causing this issue.
commenting out line 13 or just deleting that line all together should fix it
Your .grid css should look like this when you're done:
.grid {
display: grid;
grid-template-columns: 1fr;
/* grid-template-rows: 1fr 1fr 1fr; */
grid-template-areas:
"header"
"main-content"
"footer";
}
or you can just delete the grid template rows line all together. Let me know if this helps! Good luck!
Related
So I am trying to make it look like this
However, it currently looks like this
As, you can see the top section with the logo and register have their own section. I want it to stay on top of the background image. I do not want to use position: absolute; or position : fixed; since i want it to say in its own section. I have also tried using a negative margin and it does not work. Any help is appreciated.
.top-firstsection {
display: flex;
}
.logo-header {
height: 80px;
}
.nav-list {
margin-left: auto;
list-style: none;
display: flex;
}
.leftandright {
display: flex;
justify-content: space-between;
}
.login {
font-family: Helvetica;
font-size: 13px;
color: #000000;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
cursor: pointer;
}
.register {
font-family: Helvetica;
font-size: 13px;
color: #0972D7;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
}
.first-left {
padding-top: 220px;
padding-left: 171px;
}
.first-left h1 {
font-family: Poppins-Regular;
font-size: 40px;
color: #000000;
letter-spacing: 0;
line-height: 50px;
}
.sectionOne-textbox {
border: 1px solid #EBEBEB;
border-radius: 4px;
font-family: Helvetica;
font-size: 14px;
color: #000000;
letter-spacing: 1.05px;
line-height: 52px;
width: 80%;
}
.sectionOne-button {
background: #1F8FFB;
border-radius: 4px;
border: 1px solid;
padding: 16px 25px;
font-family: Helvetica;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 1.3px;
text-align: center;
margin-top: 24px;
}
<section class="first-section">
<div class="top-firstsection">
<img src="logo.svg" alt="logo" class="logo-header">
<ul class="nav-list flex">
<li>
LOGIN
</li>
<li>
REGISTER
</li>
</ul>
</div>
<div class="leftandright">
<div class="first-left">
<h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
<input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
<button class="sectionOne-button">GET STARTED NOW!</button>
</div>
<div class="first-right">
<img src="firstsectionbackground.png" alt="main graphic" class="main-graphic">
</div>
</div>
</section>
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
I am trying to align everything up, making the sections align and so forth. But I can't seem to get each section to line up.
Here is the link: https://codepen.io/pmurtagh4/pen/GXNzrJ
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-right: 30%;
margin-left: 10%;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 120%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800px;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600px;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section <footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Setting margin: auto, removing display: block and setting width to 100% instead of 120% makes it look quite okay. Is this what you were looking for?
https://codepen.io/anon/pen/PdmKWQ
The main issue you are having is because of .sign-up-form width styling. It is currently set to 120%, which is making the content weird. Remove it or change it to 100%.
Second issue I found is related to font-weight. The value of it is never in px. Review doc for more info.
Third issue remove the default margin on the page.
Updated code snippet -
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 50%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin: 5%;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 100%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
P.S. A lot of your tags don't have a closing tag. You should fix them as well.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
I coded in main.css and I checked in the browser it was perfectly fine. I created another file named responsive.css the logo hasn't moved at all and the rest like images, wrapper too the same when I resized the browser. I have moved responsive above main link. But it still the same.
#charset "utf-8";
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Vidaloka|Philosopher);
* {
box-sizing : border-box;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
.sectionPage {
width: 100%;
height: 100vh;
}
/* ==========================================================================
BACKGROUND
========================================================================== */
#home,
#skills,
#contact {
background-color: #000000;
background-image: url(http://www.transparenttextures.com/patterns/subtle-dots.png);
}
#about,
#work,
#services {
background-color: #fcfcfc;
background-image: url(http://www.transparenttextures.com/patterns/skulls.png);
}
/* ==========================================================================
FOR TITLE OF ALL SECTION PAGE
========================================================================== */
h1 {
text-align: center;
font-size: 30px;
font-family: 'Vidaloka', serif;
}
/* ==========================================================================
HOME
========================================================================== */
p {
font-family: 'Philosopher', sans-serif;
}
#home > img {
text-align: center;
margin-top: 5em;
margin-left: 44.5%;
}
#home > h1 {
color: #ffffff;
margin-top: 2em;
margin-bottom: 2em;
font-size: 2em;
}
#home > a {
font-size: 16px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #ffffff;
border-radius: 25px;
background-color: #1199C3;
padding: 10px;
text-align: center;
margin-left: 45%;
}
#home > a:hover {
color: #000000;
background-color: #0B637E;
}
/* ==========================================================================
ABOUT
========================================================================== */
#about > h1 {
color: #1199C3;
top: 8%;
position: relative;
}
.wrapper > img {
background-size: cover;
background-repeat: no-repeat;
border: 5px;
border-radius: 50%;
border-color: #ffffff;
border-style: solid;
width: 120px;
height: 140px;
margin-top: 1%;
margin-bottom: 0;
}
.wrapper {
margin: 10px auto;
text-align: center;
background-color: #1199C3;
padding-bottom: 0.1%;
padding-top: 2%;
width: 25%;
border-radius: 3%;
position: relative;
top: 6%;
}
.wrapper > p {
font-size: 20px;
color: #ffffff;
}
#about > p {
text-align: center;
font-size:18px;
margin-left: 2em;
margin-right: 2em;
position: relative;
top: 5%;
}
#about > a {
font-size: 16px;
background-color: #1199C3;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
padding: 1%;
margin-left: 41%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#about > a:hover {
color: #1199C3;
background-color: #0B637E;
}
#about > a {
position: absolute;
top: 198%;
left: 0em;
}
/* ==========================================================================
SKILLS
========================================================================== */
#skills > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#skills > p {
text-align: center;
color: #ffffff;
font-size: 28px;
line-height: 0%;
padding: 5%;
}
.gallery > img, {
text-align: center;
margin-top: 3em;
margin-right: 0;
}
.gallery > li {
display: inline;
list-style: none;
}
.gallery {
left: 28%;
position: relative;
}
.software > img {
text-align: center;
margin-top: 3em;
margin-right: 0;
}
.software > li {
display: inline;
list-style: none;
}
.software {
left: 33%;
position: relative;
}
/* ==========================================================================
WORK
========================================================================== */
#work > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#work > p{
text-align: center;
font-size:18px;
padding-top: 5%;
margin-left: 2em;
margin-right: 2em;
}
#work > a {
background-color: #1199C3;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
padding: 1%;
margin-left: 40%;
margin-top: 6em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#work > a:hover {
color: #1199C3;
background-color: #0B637E;
}
.tweet, .msg {
text-decoration: none;
color: #1199C3;
}
/* ==========================================================================
SERVICES
========================================================================== */
#services > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#services > img {
text-align: center;
padding-top: 3%;
padding-left: 2%;
padding-right: 2%;
margin-left: 15%;
width: 70%;
height: auto;
}
#services > p{
text-align: center;
font-size:18px;
padding-top: 2%;
margin-left: 2em;
margin-right: 2em;
}
/* ==========================================================================
CONTACT
========================================================================== */
#contact > h1{
color: #1199C3;
font-size:2.5em;
padding-top: 3%;
position: relative;;
top: 3%;
}
#contact > p {
text-align: center;
font-size:18px;
padding: 1%;
color: #ffffff;
line-height: 2px;
}
.container{
width: 50%;
height: 50%;
padding: 2%;
margin-top: 1em;
margin-left: 25%;
background-color: #0B637E;
border-radius: 5px;
}
#name, #email, #bio{
border-radius: 5px;
border-style: solid;
border-color: #1199C3;
width: 100%;
padding: 2%;
margin-top: 1em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#bio {
height: 140px;
}
#name, #email, #bio {
font-size: 14px;
color: #000000;
}
#button {
position: relative;
top:5px;
border-radius: 3px;
border-color: #1199C3;
border-style: solid;
background-color: #FFFFFF;
color: #000000;
padding: 5px;
float: right;
}
#contact > ul {
margin-left: 25%;
}
#contact > ul > li {
list-style: none;
display: inline-block;
margin-left: 5%;
}
#contact > ul > li > a {
color: #ffffff;
text-decoration: none;
}
#contact > ul > li > a:hover {
color: #1199C3;
}
/* ==========================================================================
FOOTER
========================================================================== */
footer {
background-color: #1199C3;
position: relative;
bottom: 0%;
}
footer > ul {
padding-left: 8%;
padding-top: 1%;
margin-left: 27%;
}
footer > ul > li {
list-style: none;
display: inline-block;
padding-left: 1%;
padding-top: 1%;
font-size: 12px;
text-align: center;
}
footer > ul > li > a {
text-decoration: none;
color: #ffffff;
margin-left: 0;
}
footer > ul > li > a:hover {
color: #000000;
}
footer > p {
color: #ffffff;
text-align:center;
padding-bottom: 2%;
position: relative;
bottom: 8%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alzira Barretto</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/responsivemobilemenu.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="http://fonts.googleapis.com/css?family=Vidaloka|Philosopher" rel="stylesheet" type="text/css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/responsivemobilemenu.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Vidaloka::latin', 'Philosopher' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<!-- MAIN MENU-->
<body>
<div class="rmm">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>MY SKILLS</li>
<li>MY WORK</li>
<li>SERVICES</li>
<li>CONTACT ME</li>
<li>BLOG</li>
</ul>
</div>
<div id="wrapper">
<div class="sectionPage" id="home">
<img src="img/ab-logo.svg" alt="ab logo">
<h1>DESIGN & CODE</h1>
<a class="welcome" href="#about">WELCOME</a>
</div>
<!-- ABOUT ME -->
<div class="sectionPage" id="about">
<h1>A LITTLE NOTE ABOUT ME</h1>
<div class="wrapper">
<img src="img/alzira.jpg" alt="">
<p><strong>ALZIRA BARRETTO<br>MUMBAI, INDIA<br>FRONT-END DEVELOPER<br></strong></p>
</div>
<p>I was raised in Mumbai, India. Ever since I was a child I learnt
from my dad how to draw. What attract me the most is an amazing colors and
shapes. From the basic foundations, I've studied a lot about Graphic
Designing and joined in 3 years of fine arts. When comes to
web designing, I've learnt some of the courses in Treehouse since
2014. I'm keen to learn more about new languages. I have build
one website of my own and still in processing. I work hard to complete my project. I couldnt resist my finger from coding.</p>
<p>Apart from web designing, I love to draw, stitching, craft (DIY),
and obvious love to travel and explore new places.</p>
<p>Thanks for stopping by!!!</p>
DOWNLOAD MY CV
</div>
<!-- MY SKILLS -->
<div class="sectionPage" id="skills">
<h1>MY SKILLS</h1>
<p>CODE I USE</p>
<ul class="gallery">
<li><img src="img/HTML.svg" alt="html" width="100" height="100"></li>
<li><img src="img/CSS.svg" alt="css" width="100" height="100"></li>
<li><img src="img/JSCRIPT.svg" alt="js" width="100" height="100"></li>
</ul>
<p>SOFTWARE I USE</p>
<ul class="software">
<li><img src="img/photoshop.svg" alt="ps" width="100" height="100"></li>
<li><img src="img/Illustrator.svg" alt="ai" width="100" height="100"></li>
</ul>
</div>
<!-- MY WORK -->
<div class="sectionPage" id="work">
<h1>MY WORK</h1>
<p> It's just the beginning to build my portfolio and not just a professional one but to enhance my skills and gain more knowledges. I really do love my job and do what I love. I'm still learning new languages like Ruby, Drupal, Php, Javascript and of course Android apps. I would be appreciate if you really love my work and hire me to working with you. Please don't hesitate to <a class="msg" href="#contact">contact me</a> or tweet me <a class="tweet" href="http://www.twitter.com/#Albardesign">#Albardesign</a></p>
<p>I have a creative mind and I'd love to post it to show off my work. I am working on complete study cases.</p>
<a class="portfolio" href="https://www.behance.net/Alzira25">CHECK MY PORTFOLIO</a>
</div>
<!-- SERVICES -->
<div class="sectionPage" id="services">
<h1>SERVICES</h1>
<img src="img/devices.svg" alt="devices" width="500px" height="500px">
<p>As new technology increase, we build the website in Responsive style. Range from the biggest size of the Computer to the Tablet and goes to the smallest size of mobile devices. Mobile devices is the most popular used by people. We transform the website into the rich look.</p>
<p><strong><font size="+2" color="#1199C3">BUILD. REDESIGN. LAUNCH</font></strong></p>
<p><font size="+4" color="#1199C3"><em>VOILA!</em></font></p>
</div>
<!-- CONTACT -->
<div class="sectionPage" id="contact">
<h1>CONTACT ME</h1>
<p>Love to hear from you</p>
<p>Please feel free to drop the messages</p>
<div class="container">
<form id="form" action="send_form.php" method="post">
<input type="text" id="name" name="user_name" placeholder="Your Name"/>
<input type="email" id="email" name="user_email" placeholder="Your Email"/>
<textarea id="bio" name="user_message" placeholder="Write the message"></textarea>
<button id="button" type="submit">SEND</button>
</form>
</div>
<ul>
<li><img src="img/twitter.svg" alt="tweet" width="40" height="40">FOLLOW ME</li>
<li><img src="img/mail.svg" alt="mail" width="40" height="40">MAIL ME</li>
</ul>
<!-- FOOTER -->
<footer>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
<li>BLOGS</li>
</ul>
<p>ALZIRA BARRETTO|2015</p>
</footer>
</div>
</body>
</html>