Skip to content
Permalink
Browse files

Responsive CSS Concepts

  • Loading branch information
drm10001 committed Apr 6, 2020
1 parent eb341e1 commit a2bcb80aac98b63a4fbb3893085dca3a397b67c5
Showing with 59 additions and 0 deletions.
  1. +20 −0 index.html
  2. +39 −0 responsive.css
  3. 0 stuff.js
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="responsive.css">
<title>Responsive Design</title>
</head>
<body>
<h1>A Site That Looks Great On Any Screen</h1>
<p>We'll see what we can do</p>
<span class="card">
<h2>This is card one</h2>
</span>
<span class="card">
<h2>This is card two</h2>
</span>

<script src="stuff.js"></script>
</body>
</html>
@@ -0,0 +1,39 @@
* {
box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.card {
display: inline-block;
padding: 10px;
border: 2px solid black;
background-color: lightgray;
height: 100vh;
}

.left-menu {
float: left;
}

.content {
float: right;
}

@media (max-width: 500px) {
.card {
display: block;
width: 100%;
}
}
No changes.

0 comments on commit a2bcb80

Please sign in to comment.
You can’t perform that action at this time.