So I'm doing a coursera asignmentCoursera assignment on a htmlan HTML-cssCSS course. The assignment is to do a simple responsive page, which can be found here.
* {
font-family: "Comic Sans MS", cursive, sans-serif;
box-sizing: border-box;
}
h1{
text-align: center;
}
.sign_fs{
position: relative;
width: 50%;
min-width: fit-content;
padding: 5px 10px 5px 10px;
border: 5px solid black;
float: right;
font-size: 20px;
text-align: center;
margin-top: -2px;
margin-right: -2px;
}
#chicken {
background-color: pink;
}
#beef {
background-color: slateblue;
}
#sushi{
background-color: skyblue;
}
@media (min-width: 992px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_fs {
background-color: grey;
border: 2px solid black;
width: 31.2%;
margin: 1%;
float: left;
}
}
@media(max-width: 992px) and (min-width:768px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_tablet_top {
background-color: grey;
border: 2px solid black;
width: 48%;
margin: 1%;
float: left;
}
.div_tablet_bot {
background-color: grey;
border: 2px solid black;
width: 98%;
margin: 1%;
float: left;
}
#sushi{
width: 20%;
}
}
@media (max-width: 768px) {
section {
margin: 10px;
padding-top: 0px;
}
.div_mobile{
background-color: grey;
border: 2px solid black;
margin: 1%;
margin-top: 20px;
padding: 10px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module 2 solution</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Our Menu</h1>
<section>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="chicken">Chicken</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="beef">Beef</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_bot div_mobile">
<div class="sign_fs" id="sushi">Sushi</div>
<div class="text_fs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</section>
</body>
</html>* {
font-family: "Comic Sans MS", cursive, sans-serif;
box-sizing: border-box;
}
h1{
text-align: center;
}
.sign_fs{
position: relative;
width: 50%;
min-width: fit-content;
padding: 5px 10px 5px 10px;
border: 5px solid black;
float: right;
font-size: 20px;
text-align: center;
margin-top: -2px;
margin-right: -2px;
}
#chicken {
background-color: pink;
}
#beef {
background-color: slateblue;
}
#sushi{
background-color: skyblue;
}
@media (min-width: 992px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_fs {
background-color: grey;
border: 2px solid black;
width: 31.2%;
margin: 1%;
float: left;
}
}
@media(max-width: 992px) and (min-width:768px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_tablet_top {
background-color: grey;
border: 2px solid black;
width: 48%;
margin: 1%;
float: left;
}
.div_tablet_bot {
background-color: grey;
border: 2px solid black;
width: 98%;
margin: 1%;
float: left;
}
#sushi{
width: 20%;
}
}
@media (max-width: 768px) {
section {
margin: 10px;
padding-top: 0px;
}
.div_mobile{
background-color: grey;
border: 2px solid black;
margin: 1%;
margin-top: 20px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module 2 solution</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Our Menu</h1>
<section>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="chicken">Chicken</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="beef">Beef</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_bot div_mobile">
<div class="sign_fs" id="sushi">Sushi</div>
<div class="text_fs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</section>
</body>
</html>* {
font-family: "Comic Sans MS", cursive, sans-serif;
box-sizing: border-box;
}
h1{
text-align: center;
}
.sign_fs{
position: relative;
width: 50%;
min-width: fit-content;
padding: 5px 10px 5px 10px;
border: 5px solid black;
float: right;
font-size: 20px;
text-align: center;
margin-top: -2px;
margin-right: -2px;
}
#chicken {
background-color: pink;
}
#beef {
background-color: slateblue;
}
#sushi{
background-color: skyblue;
}
@media (min-width: 992px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_fs {
background-color: grey;
border: 2px solid black;
width: 31.2%;
margin: 1%;
float: left;
}
}
@media(max-width: 992px) and (min-width:768px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_tablet_top {
background-color: grey;
border: 2px solid black;
width: 48%;
margin: 1%;
float: left;
}
.div_tablet_bot {
background-color: grey;
border: 2px solid black;
width: 98%;
margin: 1%;
float: left;
}
#sushi{
width: 20%;
}
}
@media (max-width: 768px) {
section {
margin: 10px;
padding-top: 0px;
}
.div_mobile{
background-color: grey;
border: 2px solid black;
margin: 1%;
margin-top: 20px;
padding: 10px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module 2 solution</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Our Menu</h1>
<section>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="chicken">Chicken</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="beef">Beef</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_bot div_mobile">
<div class="sign_fs" id="sushi">Sushi</div>
<div class="text_fs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</section>
</body>
</html>Example of responsive webpage
So I'm doing a coursera asignment on a html-css course. The assignment is to do a simple responsive page, which can be found here.
I think I came up with a solution, but I ended up having around 100 lines for the stylesheet, so I suppose that there is some ways to achieve the desired layouts in a more intuitive and easy way. I want a little bit of feedback on what I can improve here.
* {
font-family: "Comic Sans MS", cursive, sans-serif;
box-sizing: border-box;
}
h1{
text-align: center;
}
.sign_fs{
position: relative;
width: 50%;
min-width: fit-content;
padding: 5px 10px 5px 10px;
border: 5px solid black;
float: right;
font-size: 20px;
text-align: center;
margin-top: -2px;
margin-right: -2px;
}
#chicken {
background-color: pink;
}
#beef {
background-color: slateblue;
}
#sushi{
background-color: skyblue;
}
@media (min-width: 992px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_fs {
background-color: grey;
border: 2px solid black;
width: 31.2%;
margin: 1%;
float: left;
}
}
@media(max-width: 992px) and (min-width:768px) {
.text_fs {
font-size: 15px;
clear: both;
margin: 1%;
padding: 1%;
}
.div_tablet_top {
background-color: grey;
border: 2px solid black;
width: 48%;
margin: 1%;
float: left;
}
.div_tablet_bot {
background-color: grey;
border: 2px solid black;
width: 98%;
margin: 1%;
float: left;
}
#sushi{
width: 20%;
}
}
@media (max-width: 768px) {
section {
margin: 10px;
padding-top: 0px;
}
.div_mobile{
background-color: grey;
border: 2px solid black;
margin: 1%;
margin-top: 20px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module 2 solution</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Our Menu</h1>
<section>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="chicken">Chicken</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_top div_mobile">
<div class="sign_fs" id="beef">Beef</div>
<div class="text_fs" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="div_fs div_tablet_bot div_mobile">
<div class="sign_fs" id="sushi">Sushi</div>
<div class="text_fs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</section>
</body>
</html>default