Assignment Two Instructions - (No Bootstrap) I really need to write this code th
ID: 3879912 • Letter: A
Question
Assignment Two Instructions - (No Bootstrap)
I really need to write this code that work with Visual studio code using html and css file. to create the layout attached to the document.
Inside your Responsive-Portfolio folder, find your styles.css file. You will write your media queries at the bottom of styles.css.
Use three @media screen tags, each with one of these max-widths: 980px, 768px and 640px.
You use 980px because you never want any of the content to be cut off. Since the desktop layout is about 960px wide, you want the media queries to kick in before your content gets cut off.
768px is about the width of a tablet and 640px is about the width of a phone in landscape.
Make the layout match the following screenshots:
contact.html: 980px, 768px, 640px
Make the position of the header static (the default positioning) when the screen is 640px wide. The header design takes up a lot of room; you don't want it to stick to the top of a small screen and leave no room for the rest of your site.
Be sure to include the viewport tag in all your HTML files, otherwise your media-queries won't function as expected on mobile devices. (Hint: You won't need to use exact pixels for anything other than the container)
Protip: Use the Chrome extensions Window Resizer and Browser Width to see the browser dimensions in Chrome.
Deploy your new portfolio (now with media queries!) to GitHub Pages.
Your Name About Portfolio Contact Connect with Me Contact Name John Smith Email example@gmail.com Message Submit Copyright 2016 Your NameExplanation / Answer
index.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{background-color:teal;color:white;
padding:10px;}
.container{box-shadow:1px 2px 30px black;
padding:10px;}
h2{color:teal;font-family:georgia;border-bottom:2px solid lightgray;}
input{width:95%;padding:10px;}
textarea{width:97%;height:100px;}
#submit{width:50%;border:0px;background-color:teal;color:white;}
@media screen and (max-width: 980px) {
input {
width:95%;
padding:10px;
}
textarea {
width:95%;
padding:10px;
}
#submit{width:50%;}
}
@media screen and (max-width: 768px) {
input {
width:95%;
padding:10px;
}
textarea {
width:95%;
padding:10px;
}
#submit{width:50%;}
}
@media screen and (max-width: 640px) {
input {
width:95%;
padding:10px;
}
textarea {
width:95%;
padding:10px;
}
#submit{width:50%;}
}
label{font-family:arial;}
</style>
</head>
<body>
<div>
<h1>Venkatesh Mogili</h1>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="container">
<h2>Contact</h2>
<form>
<label>Name</label>
<br/><br/>
<input type="text" placeholder="Enter your name"/>
<br/><br/>
<label>Email</label>
<br/><br/>
<input type="email" placeholder="Enter your email"/>
<br/><br/>
<label>Message</label>
<br/><br/>
<textarea></textarea>
<br/>
<input type="submit" value="Submit" id="submit"/>
</form>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.