html mobile
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Responsive Web Design</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
</div>
<div class="main">
<h2>Design</h2>
<p>This is a responsive image for mobile and small devices</p>
<img src="https://ca.slack-edge.com/TKUEN70GY-U028U5PBP53-14b3f7e82463-512" style="width:100%">
</div>
<div class="right">
<h2>What?</h2>
<p>
Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Responsive design serves all devices with the same code that adjusts for screen size.</p>
</div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This is a project made by yasin </div>
</body>
</html>