I have two input tags within my html but it doesn't allow me to input anything within them. I have no idea what it could be the values of the input when you click on them aren't clickable. If you would paste my code into your IDE or whatever you use try to replicate my issue. Nothing is able to input into the values I am not sure if it has to do with some of the css I have implemented or what.
body {
margin: 0;
padding: 0;
}
#box1 {
height: 100vh;
width: 100%;
background-image: url(http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-coffee-cup-glasses-macbook.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#backgroundnav {
/*background-color: #ADD8E6;*/
background-color: #989898;
height: 50px;
margin-top: -15px;
padding: 30px;
}
#content {
height: 600px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: white;
text-decoration: none;
cursor: pointer;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
#content h1 {
font-family: 'Cabin';
font-size: 50px;
font-weight: bold;
margin-top: -10px;
color: black;
}
#content p {
font-size: 20px;
}
img {
text-align: center;
}
#left {
height: 450px;
width: 50%;
background-color: #989898;
float: left;
display: table-cell;
position: relative;
bottom: 130px;
font-size: 30px;
}
#right {
float: right;
height: 450px;
width: 50%;
background-color: #D2B48C;
display: table-cell;
position: relative;
bottom: 130px;
font-family: 'Raleway';
font-size: 30px;
}
#middle {
height: 80%;
}
ol li {
font-size: 40px;
color: white;
}
hr {
width: 115px;
color: #989898;
}
h1 {
font-size: 50px;
color: white;
vertical-align: middle;
font-family: 'Raleway';
text-align: center;
}
#wrap {
position: relative;
top: 250px;
}
#about h1 {
text-align: center;
position: relative;
top: 50px;
font-family: 'Raleway';
color: steelblue;
}
#aboutleft {
padding: 20px;
line-height: 25px;
margin-left: 400px;
margin-right: 400px;
position: relative;
right: 350px;
top: 20px;
font-family: 'Open Sans';
}
#aboutright {
padding: 20px;
line-height: 25px;
margin-left: 400px;
margin-right: 400px;
position: relative;
left: 350px;
bottom: 285px;
font-family: 'Open Sans';
}
#hr1 {
position: relative;
top: 20px;
width: 200px;
}
#projects h1 {
color: black;
}
#projects {
background-color: #99C4D2;
height: 1300px;
}
.align {
position: relative;
left: 129px;
bottom: 50px;
}
figure {
float: left;
width: 500px;
padding-bottom: 10px;
background-color: #EAEAEA;
}
figcaption {
text-align: center;
font-style: italic;
font-family: serif;
}
#projects h1 {
position: relative;
bottom: 70px;
}
#contact {
background-color: steelblue;
height: 700px;
}
form {
padding: 20px;
position: relative;
left: 130px;
top: 110px;
}
label {
font-size: 20px;
font-family: 'Roboto Slab';
width: 50px;
padding: 20px;
}
input {
height: 20px;
width: 200px;
}
fieldset {
background-color: white;
width: 75%;
padding: 25px;
margin-bottom: 15px;
}
legend {
position: relative;
bottom: 20px;
right: 9px;
font-size: 24px;
text-transform: uppercase;
}
h2 {
text-align: center;
font-size: 40px;
}
<body>
<div id="backgroundnav">
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="box1">
<div id="wrap">
<h1>Peter Nguyen</h1>
<hr>
<h1>Web Developer</h1>
</div>
</div>
<div id="color">
<div id="content">
<section id="about">
<h1 id="about">About Me</h1>
<hr id="hr1">
<p id="aboutleft">My names Peter and learning how to code and persuing it in education was one of the best decisions I have made. When I am not at work coding and solving complex web application issues, I am at home learning the latest and greatest frameworks.
One of the best feelings is knowing that you solved an issue. I am extremly easy to get along with and easy to work with which would make me a great addition to any team. Web development is more than just a hobby and career path for me its a
passion and a way for me to get creative and think outside of the box!
</p>
<p id="aboutright">What else do I do besides code? I enjoy barbequing, lifting weights, being outdoors. I am also secretely a nerd so I enjoy playing video games, and reading books. Did I also mention that I enjoy playing ping pong? I was born in California and
lated move out to Arizona as a young kid growing up. As a kid I had a very high interest in computers and always wondered about the person who created every component a computer has. I beilive that is why to this day I am so intrigued by development.
</p>
</section>
</div>
<div id="left">
<h1>Place holder content for future case projects</h1>
<input type="text" id="case1">
<input type="text" id="case1x">
</div>
<div id="right">
<h1>Place holcer content for future case projects</h1>
<input type="number" name="">
</div>
</div>
<div id="projects">
<h1>Projects</h1>
<figure id="link" class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Guessing game created with JavaScript
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay kayak
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay Waterfalls
</figcaption>
</figure>
<figure class="align">
<img src="image.jpg" alt="Golden Gate Bridge" width="500" height="350">
<figcaption>
Halong Bay Cave
</figcaption>
</figure>
</div>
Your problem is differently in css. Open your page in browser then try to inspect input box - you will see that it overlapped by h1 tag. So fix the sizing of h1 -and you will get your input work.
You are making your H1 position relative. In fact, you have a lot of excess relative positioning going on in your CSS. The H1 tag is huge and overlapping most of your page
Related
As i am running the html and css code the list of testimonials are 8 but , when i increased the size of the screen to 950px the list of 8 items start coming out of the background, so please can anyone give me the hint that where the code is wrong
const mobileBtn = document.getElementById('mobile-cta');
nav = document.querySelector('nav');
mobileBtnExit = document.getElementById('mobile-sta');
mobileBtn.addEventListener('click' , () => {
nav.classList.add('mobile-menu');
})
mobileBtnExit.addEventListener('click' , () => {
nav.classList.remove('mobile-menu');
})
:root {
--primary-color: #007af3;
}
body{
background: #F2F2F2;
margin: 0 ;
font-family: 'Poppins';
}
.navbar {
background: white;
padding: 1em;
.logo{
text-decoration: none;
font-weight: bold;
color: black ;
font-size: 1.2em;
span {
color: var(--primary-color);
}
}
nav{
display: none;
}
.container{
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
}
}
a{
color: #444444;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero{
text-align: center;
}
.left-col{
.subhead{
text-transform: uppercase;
font-weight: bold;
color: gray;
letter-spacing: .3em;
}
h1{
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
}
.primary-cta{
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
}
.watch-video-cta{
display: block;
margin-top: 1em;
img {
margin-right: .5em;
}
}
}
.hero-img{
width: 70% ;
margin-top: 3em;
}
section.features-section{
background: #20272e;
color: white;
}
ul.feature-list{
margin: 0;
padding-left: .1em;
display: grid;
grid-template-columns: repeat(auto-fit , minmax(19rem, 1fr));
li{
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before{
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../2021frontend/images/bullet.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.features-section img{
display: none;
}
.testimonials-section{
background: var(--primary-color);
color: white;
li{
width: #006bd6;
text-align: center;
padding: 2em 1em;
width: 75%;
margin: 0 auto 5em auto;
border-radius: 1em;
img{
width: 5em;
height: 5em;
border: 5px solid #006bd6;
border-radius: 50%;
margin-top: -4.5em;
}
}
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
margin-bottom: .5em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border-radius: .3em;
border: 1px solid gray;
box-sizing: border-box;
}
input[type="submit"]{
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 6.7em;
width: unset;
cursor: pointer;
}
iframe{
width: 100%;
height: 300px;
}
nav.mobile-menu{
display: block;
}
nav{
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272e;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li{
a{
color:white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-mobile-closed {
float: right;
margin: .5em;
cursor: pointer;
}
//now here we desinging the pc version of the website
#media only screen and (min-width: 768px){
.mobile-menu, .mobile-menu-closed{
display: none;
}
.navbar .container{
display: grid;
grid-template-columns: 180px auto;
justify-content: unset;
}
.navbar nav{
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
ul{
display: flex;
}
a{
color: black;
font-size: 1em;
padding: .1em 1em;
}
ul.primary-nav{
margin: 0;
}
li.current a{
font-weight: bold;
}
li.go-premium-cta a{
color: var(--primary-color);
border: 3px solid var(--primary-color);
font-weight: bold;
border-radius: 5em;
margin-top: -.2em;
&:hover{
background: var(--primary-color);
color: white;
}
}
}
}
#media only screen and (min-width: 950px) {
.container{
width: 950px;
margin: 0 auto;
}
section{
padding: 10em 4em;
}
.hero .container{
display: flex;
justify-content: space-between;
text-align: left;
.left-col{
margin: 3em 3em 0 5em;
h1 {
font-size: 3em;
width: 90%;
}
}
}
.hero-img{
width: 30%;
margin-right: 8em;
}
.hero-cta{
display: flex;
}
.primary-cta{
margin-right: 1em;
}
ul.features-list{
display: block;
margin-left: 5em;
li{
font-size: 1.4em;
&:before{
width: 30px;
height: 30px;
}
}
}
.features-section{
position: relative;
}
.features-section img{
display:block;
position: absolute;
right: 0;
width: 325px;
bottom: -6em;
height: 250px;
}
.testimonials-section ul{
display: flex;
li {
margin: 0 1em;
flex-basis: 33.333333%;
}
}
.contact-section{
position: relative;
display: flex;
}
.contact-right{
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
iframe{
height: 100%;
}
}
}
//here we done the styling of 1220px and after
#media only screen and (min-width: 1220px){
.features-section{
&:before{
content: '';
position: absolute;
width: 10%;
height: 20em;
background: var(--primary-color);
left: 0;
top: -4em;
}
&:after{
content: '';
position: absolute;
width: 200px;
height: 18em;
background: url('../2021frontend/images/dots.svg') no-repeat;
top: -1em;
left: auto;
}
}
}
<div class="navbar"> <!-- here class is the name given to the div block so that the css identify it for styling it-->
<div class="container">
<a class="logo" href="#">Let's<span>Code</span></a>
<img id="mobile-cta" class="mobile-menu" src="2021frontend/images/menu.svg" alt="Open navigation">
<nav>
<img id="mobile-sta" class="mobile-menu-closed" src="2021frontend/images/exit.svg" alt="Closed navigation">
<ul class="primary-nav">
<li class="home">Home</li>
<li>Events</li>
<li>Registration</li>
</ul>
<ul class="secondary-nav">
<li>GrowYourMoney</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Share with the World & Grow with the World</p>
<h1>We are here to make the Future</h1>
<div class="hero-cta">
Click Here
<a href="#" class="watch-video-cta">
<img src="2021frontend/images/watch.svg" alt="Watch a video">Watch a Video
</a>
</div>
</div>
<img src="2021frontend/images/illustration.svg" class="hero-img" alt="illustration-images">
</div>
</section>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Full Stack Web Development</li>
<li>Full Stack Mobile App Development</li>
<li>Cloud tech</li>
<li>Devops</li>
<li>Web3 Development</li>
<li>Stock Market</li>
</ul>
<img src="2021frontend/images/holding-phone.jpg" alt="Man holding phone">
</div>
</section>
<section class="testimonials-section">
<div class="container">
<ul>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"has a strong hold in full stack web Development, leader of team antidote in sih prefinal round"</blockquote>
<cite>- saksham bansal</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"starting my journey as a full stack developer and interested in web3 domain"</blockquote>
<cite>- sayan halder</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently doing frontend development with bootstrap and loves playing football and cricket"</blockquote>
<cite>- varun sharma</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently learning web Development and see myself in future as a android developer "</blockquote>
<cite>- parth barara</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the tomper of the class and likes chemistry very much"</blockquote>
<cite>- sakshi gupta</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"i dont know what i am doing but my boyfriend loves me very much"</blockquote>
<cite>- nandini gulati</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"same as nandini"</blockquote>
<cite>- kushi suri</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the don of kv, dont even try to fight with me in palam"</blockquote>
<cite>- sribash paul</cite>
</li>
</ul>
</div>
</section>
<br>
<section class="contact-section">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name"> <br>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="#email.com"> <br>
<br>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
<br>
<input type="submit" class="send-message-cta" value="Send Message">
</form>
</div>
<div>
<div class="contact-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28026.467037845872!2d77.08443149999997!3d28.59052415000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b3f9902dce7%3A0xdf51d27e693abbea!2sPalam%2C%20New%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1649777392215!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<img src="2021frontend/images/" alt="">
</section>
By default display: flex; will try and put everything onto one row. Where you have .testimonials-section ul { in your 950px breakpoint add flex-wrap: wrap;
One thing to note, and I may be mistaken here, is that flex-basis doesn't take margins into consideration, so you will find that your testimonials will be 2 per row instead of 3 because of the horizontal margins you've set. You can fix this by change flex-basis: 33.3333% to flex-basis: calc(33.3333% - 2em);
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm struggling with is the media query/responsiveness for my banner image, it won't scale down when I go to tablet or phone screen.
#import url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: rgb(17, 17, 17);
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.4s;
padding: 40px 100px;
z-index: 100000;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header .logo {
position: relative;
font-weight: 400;
color: #fff;
text-decoration: none;
font-size: 3em;
letter-spacing: 2px;
transition: 0.6s;
font-family: 'Barlow', sans-serif;
}
header .logo:hover {
color: rgb(24, 24, 24);
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-size: 23px;
font-family: 'Barlow', sans-serif;
}
header ul li a:hover {
color: rgb(24, 24, 24);
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(images/banner.jpg);
background-size: cover;
opacity: .4;
}
header.sticky .logo, header.sticky ul li a {
color:#000
}
.h1 {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
font-size: 60px;
}
.image1 {
margin-top: 10px;
margin-left: 10px;
border-radius: 19px;
}
/* about me */
.about {
width: 100%;
padding: 78px 0px;
background-color: #191919;
}
.about img {
height: 800px;
width: 520px;
padding-left: 12px;
}
#media (max-device-width: 500px) {
.about img {
padding-right: 20px;
height: 500px;
}
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.about-text h1 {
color: #fff;
font-size: 80px;
text-transform: capitalize;
margin-bottom: 20px
}
.about-text h5 {
color: #fff;
font-size: 25px;
text-transform: capitalize;
margin-bottom: 25px;
letter-spacing: 2px;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background: #f9004d;
color: #fff;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
}
button:hover {
background: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.name {
font-size: 30px;
color: #fcfc;
letter-spacing: 5px;
}
/* footer */
footer {
height: auto;
width: 100vw;
font-family: "poppins";
padding-top: 40px;
color: #fff;
background: rgb(17, 17, 17);
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: #fff;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #000;
}
.footer-bottom {
width: 100%;
padding: 20px 0;
background: #000;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>enDURANCE FIT, Andrea Durance Personal Trainer</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;600;700&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
</head>
<body>
<div>
<header>
enDurancefit
<ul>
<li>Home</li>
<li>About Me</li>
<li>Services</li>
<li>Testimonies</li>
<li>Contact Me</li>
</ul>
</header>
<section class="banner">
</section>
<h1 class="h1">Welcome To enDurance fit <p style ="font-family: Rajdhani">Andrea Durance</p><p>Personal Trainer</p> </h1>
</div>
<!--Section 2: About me-->
<section class="about" id="aboutme">
<div class="main">
<img src="images/profile.jpg">
<div class="about-text">
<h1>About Me</h1>
<h5>Personal Trainer <span style="color: #f9004d;"> & Fitness Instructor</span></h5>
<p>I have 5 years’ experience within the fitness industry, firstly as a level 2 fitness instructor, then a level 3 personal trainer, also teaching various classes along the way, including spin, kettlebells and bootcamps.
My passion for fitness began in my early teens around the age of 13-14.
<p> This is where my aspirations to become a personal trainer began, and not long after that is when my career began. The manager of the gym where I was training at the time recognised my passion and offered me work experience, which led on to an apprenticeship in which I gained my fitness instructing qualification. Leading on from this I completed my level 3 personal training through a different apprenticeship based at another gym.</p>
<p>A funny fact about the name of my company ‘enDurancefit’, is that I first came up with it when I was about 14, and I was dead set that one day I will have a personal training business and I wanted it to be called enDurancefit, and here we are! Moral of the story, if you have a goal, stick at it and don’t lose sight of it no matter the setbacks you may encounter! </p>
<p>Training and exercise not only keeps me physically well, but mentally well also. One of the many reasons I love it, one of my aims is to help my clients keep physically and mentally well with a combination of positive coaching and lifestyle changes.
<p>Training and exercise is more than just the physical results, of course seeing muscle growth/fat loss/weight gain or loss depending on the goal is always something to be proud of. But for most people training becomes their ‘me’ time, time to forget life’s stresses and a time to focus on you, your goals and your own health and wellbeing.
I want to help my clients reach a happy, healthy, and sustainable lifestyle, training to their maximum capabilities and smashing goals set, also whilst enjoying life.</p>
<p>FITTER, HEALTHIER, STRONGER, AND HAPPIER.
enDurancefit <br>
<div class="name" > ANDREA DURANCE </div>
</p>
<button type="button">Contact Me</button>
</div>
</div>
</section>
<section>
<footer class="footer-content">
<div>
<h3>enDurancefit</h3>
<p>Thank you for visiting, dont forget to check out my socials.</p>
<ul class="socials">
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-youtube-square"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p>Copyright ©2021 enDurance fit. designed by <span>Andrew Hinkley</span></p>
</div>
</footer>
</section>
</body>
<!--Scripts-->
<!--Script for nav bar-->
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
</script>
<!--Scrip End-->
</html>
Well done Andrew. The problem is that you've fixed both the height and width for your image. You can try fixing one of them, not both. And also object-fit: cover; helps keeping the aspect ratio.
img {
height: 500px;
width: 100%;
object-fit: cover;
}
or
img {
width: 500px;
height: 100%;
object-fit: cover;
}
Topnav is the navigation bar. I've also included other parts of the website like the about section for my portfolio, so it shows more code than what is required.
I'm trying to make my menu pop out when I click the burger icon button. What is currently happening is that the home, about, and contact button hides, and the burger icon replaces that but the menu isn't popping when I click the burger icon.
function myFunction() {
var x = document.getElementById("homee");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
section {
width: 100%;
height: 90vh;
background-image: url(white.jpeg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.topnav {
background-color: white;
overflow: hidden;
}
.topnav a {
float: left;
color: Black;
text-align: center;
font-family: tahoma;
text-transform: uppercase;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
float: right
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav-right {
float: left;
}
/*RESPONSIVE*/
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
/*RESPONSIVE*/
.llin {
border: 0px;
background-color: transparent;
}
.textcon p:nth-child(1) {
font-family: Calibri;
line-height: 1px;
font-weight: bold;
color: black;
font-size: 120%;
margin-top: -30%;
margin-left: 23%;
}
.textcon p:nth-child(2) {
font-family: Calibri;
padding: 0px;
font-weight: bold;
letter-spacing: 1px;
color: black;
font-size: 300%;
line-height: 1em;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 23%;
}
.textcon p:nth-child(3) {
font-family: sans-serif;
color: black;
font-size: 120%;
margin: 0;
width: 80%;
text-align: left;
line-height: 100%;
margin-left: 23%;
}
.textcon p {
line-height: 2%;
margin-left: 13%;
margin-bottom: 0%;
}
.textcon {
position: absolute;
left: 17%;
top: 42%;
transform: translate(-13%, -42%);
width: 80%;
height: 1%;
}
.textcon button {
width: 50%;
height: 8vh;
border-radius: 10px;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
margin-top: 2%;
margin-left: 30%;
margin-bottom: 3%;
padding-bottom: 0;
}
.downcv {
background-color: #0b0b0b;
color: white;
border: none;
}
<section class="topsec">
<!---Navigator-->
<div class="topnav" id="homee">
Contact
About
Resume
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<div class="topnav-right">
<form action="https://www.linkedin.com/in/ananya-makwana-56989142">
<button type="submit" class="llin"><img src="linkedin.png" width="50" height="50" alt="submit"/></button>
</form>
</div>
</div>
<!---TEXT PART-->
<div class="textcon">
<p>Hello,</p>
<p>I'm Ananya Makwana,</p>
<p>I am a senior senior at University of Wisconsin-Madison majoring in computer science and I'm actively looking for full-time Software Development positions starting May '21.</p>
<form method="get" action="ResumeAnanya.pdf">
<button class="downcv" type="submit">Download Resume</button>
</form>
</div>
<!---Picture-->
<div class="textcon">
<img src="png2.png" class="model" alt="model"></div>
</section>
<!---About-->
<div class="aboutcon" id="about">
<img src="improved.jpg" class="textwrap" alt="Avatar">
<div class="abouttext">
<p>About Me</p>
<p>Hello, my name is Ananya. I am an extremely enthusiastic person with an interest in Software Development. I have taken a broad range of courses as I am always eager to learn more. I love problem solving and I am also a very creative peron who likes
to design during my free time.</p>
</div>
</div>
Try Giving a z-index value to your nav.
z-index will place your nav in front of main body of your content.
I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}
This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.
I am working on a product page exercise. For the product page if a user puts in a correctly formatted e-mail, they get a validation message. If they put in an incorrectly formatted e-mail, they're supposed to get an error message.
The product page's input is connected to something my professor made in Ruby on Rails that automatically validates whether it's properly formatted or not. I've successfully managed to make it so that when a user puts in a correctly formatted e-mail that a validation message comes up, but I've been able to get the same result for the error message.
This is how it's supposed to look when someone puts in an incorrectly formatted e-mail:
This is how it looks when someone puts in an incorrectly formatted e-mail:
This is the error I get in the console.log when I put in an incorrectly formatted e-mail:
Why is my javascript only working for my validation message and not my error message? What am I doing incorrectly? From my understanding I have the error message set up to respond to a failure from the server, why isn't it coming up?
$(document).ready(function() {
$('form').submit(function(event) {
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'https://web2-product-page.herokuapp.com/subscribers',
data : formData,
dataType : 'json'
}).done(function(data) {
console.log(data);
$('.confirmation').fadeIn();
$('.error-message').text("");
$('input[name=email]').val("");
}).fail(function(data) {
console.log(data);
var errorMessage = JSON.parse(data.responseText).email[0];
$('.error-message').text(errorMessage);
$('.confirmation').hide();
});
event.preventDefault();
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
.confirmation {
display: none;
}
.error-message {
display: none;
float: left;
}
#functions {
background-color: #FFFFFF;
display: block;
height: 1080px;
margin: auto;
padding-top: 100px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: lighter;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: lighter;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
}
.hashtag {
color: #00AF78;
font-weight: bold;
}
#hero {
background-color: #62CE9C;
height: 650px;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herocontent {
margin: auto;
width: 900px;
}
#herotext {
float: left;
width: 600px;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
textarea:focus, input:focus {
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
align-items: center;
display: block;
margin: auto;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetone img {
float: left;
padding-top: 10px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweettwo img {
float: left;
padding-top: 5px;
}
#tweettwotext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetthree img {
float: left;
height: 140px;
width: 140px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 400px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container clearfix" id="hero">
<div id="herocontent">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message">Incorrect E-mail Address.</p>
</form>
</div>
<img src="images/phone.png"/>
</div>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message">Incorrect E-mail Address.</p>
</form>
</div>
</body>
</html>
The site is connected to a Ruby On Rails server. The server automatically responds with "Invalid E-mail Address" when an incorrectly formatted e-mail is put in, but not a validation message.
I had incorrectly assumed the server responded with neither a validation or error message, and that I needed to create responses for both, and hide both initially and make it so that the javascript changed depending on the user input. Hence, this process only worked for the validation message, but not the error message. Once I removed "display:none" from the CSS of the .error-message class, the problem was immediately resolved!
$(document).ready(function() {
$('form').submit(function(event) {
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'https://web2-product-page.herokuapp.com/subscribers',
data : formData,
dataType : 'json'
}).done(function(data) {
console.log(data);
$('.confirmation').fadeIn();
$('.error-message').text("");
$('input[name=email]').val("");
}).fail(function(data) {
console.log(data);
var errorMessage = JSON.parse(data.responseText).email[0];
$('.error-message').text(errorMessage);
$('.confirmation').hide();
});
event.preventDefault();
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 532px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.confirmation {
display: none;
height: 0px;
}
#functions {
background-color: #FFFFFF;
display: block;
height: 1080px;
margin: auto;
padding-top: 100px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: lighter;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: lighter;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
margin-bottom: 3px;
}
.hashtag {
color: #00AF78;
font-weight: bold;
}
#hero {
background-color: #62CE9C;
height: 650px;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herocontent {
margin: auto;
width: 900px;
}
#herotext {
float: left;
width: 600px;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
align-items: center;
display: block;
margin: auto;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
textarea:focus, input:focus {
color: #62CE9C;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 35px;
padding-right: 25px;
padding-top: 30px;
width: 620px;
}
#tweetone img {
float: left;
height: 140px;
margin-top: 6px;
width: 140px;
}
#tweetonetext {
float: left;
margin-left: 15px;
margin-top: 8px;
padding-left: 15px;
width: 400px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 35px;
padding-right: 25px;
padding-top: 30px;
width: 620px;
}
#tweettwo img {
float: left;
height: 140px;
margin-top: 6px;
width: 140px;
}
#tweettwotext {
float: left;
margin-left: 15px;
margin-top: 8px;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 35px;
padding-right: 25px;
padding-top: 30px;
width: 620px;
}
#tweetthree img {
float: left;
height: 140px;
margin-top: 6px;
width: 140px;
}
#tweetthreetext {
float: left;
margin-left: 15px;
margin-top: 8px;
padding-left: 15px;
width: 400px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div class="container clearfix" id="hero">
<div id="herocontent">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message"></p>
</form>
</div>
<img src="images/phone.png"/>
</div>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.jpg"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.jpg"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.jpg"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message"></p>
</form>
</div>
</body>
</html>