Just another responsive layout

Developer
Ludvig Lindblom
Size
3,660 Kb
Views
68,816
  1. Just another responsive layout Previews
  2. Just another responsive layout HTML Codes
  3. Just another responsive layout CSS Codes

How do I make an just another responsive layout?

What is a just another responsive layout? How do you make a just another responsive layout? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.

Just another responsive layout Previews
IQ Test

Just another responsive layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Just another responsive layout</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,700,600" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="border_wrapper"> <div class="border_container"> <div class="content_block first"> <div class="content"> <h2>Headline</h2> <h3>Nulla vitae elit libero, a pharetra augue</h3> <p>Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p><a href="#">Lorem ipsum</a></p> </div> <div class="content picture"> <img src="//fillmurray.com/g/1078/1078" class="image" /> </div> </div> <div class="content_block second"> <div class="content border_bottom"> <h3>Lorem ipsum dolor</h3> <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <li><a href="#">Consectetur adipisicing elit</a></li> </ul> </div> <div class="content shadow_bottom emergency"> <h3>Lorem ipsum dolor</h3> <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#">Lorem ipsum</a> </div> <div class="content border_bottom"> <h3>Lorem ipsum dolor</h3> <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#">Lorem ipsum dolor</a> </div> <div class="content shadow_bottom psychiatric"> <h3>Lorem ipsum dolor</h3> <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#">Lorem ipsum dolor sit amet</a> </div> </div> <div class="content_block third"> <a href="#" class="button arrow">Lorem ipsum / dolor sit</a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
</body>
</html>

Just another responsive layout - Script Codes CSS Codes

html { height: 100%; font-size: 62.5%;
}
body { min-height: 100%; background-color: #fff; font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-style: normal; color: #222; -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 { display: block; font-weight: 400; font-style: normal; color: #428e02; margin: 0; padding: .2em 0 .225em 0; -ms-word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
h1 { font-size: 36px; font-size: 3.6rem; font-weight: 300; line-height: 1.35; padding-bottom: .565em;
}
h2 { font-size: 24px; font-size: 2.4rem; line-height: 1.3;
}
h3 { font-size: 17px; font-size: 1.7rem; font-weight: 600; line-height: 1.3;
}
img { display: block;
}
img.image { max-width: 100%; height: auto;
}
a { color: #0077be; text-decoration: none;
}
a:focus,
a:hover,
a:active { text-decoration: underline;
}
p { font-size: 16px; font-size: 1.6rem; font-weight: 400; line-height: 1.5; margin: 0; padding: .2em 0 1.2em 0;
}
ul { margin: 0 0 0 0; padding: 0; list-style: none; font-size: 16px; font-size: 1.6rem; line-height: 1.5;
}
.border_wrapper { max-width: 960px; background: #f3f1ed; margin: 0 auto; padding: 12px; border-radius: 14px; position: relative;
}
.border_wrapper:before { position: absolute; top: -27px; left: 60px; display: none; width: 48px; height: 39px; background-image: url('//s18.postimg.org/j9nbdstsl/test.png'); background-repeat: no-repeat; content: "";
}
.backgroundsize .border_wrapper:before { background-image: url('//s2.postimg.org/ucpgxopdx/test_2x.png'); background-size: 48px 39px;
}
.border_container { width: auto; background: #fff; border-radius: 10px; padding: 3px; box-shadow: 0 4px 5px rgba(128,128,128,.15);
}
.content_block.first { background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(243,241,238,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(243,241,238,1) 100%); border-radius: 9px 9px 0 0; border-bottom: 1px solid #c3bbb1; overflow: auto;
}
.boxshadow .content_block.first { border-bottom: 1px solid #fff; box-shadow: 0 1px 0 0 #c3bbb1;
}
.content_block.first .content { width: auto; margin: 0; padding: 15px;
}
.content_block.first .content h2 { font-size: 36px; font-size: 3.6rem; font-weight: 600;
}
.content_block.first .picture .image { border-radius: 60% 5% 70% 15% / 15% 90% 25% 80%;
}
.image { max-width: 100%;
}
.content_block.second { overflow: auto;
}
.content_block.second .content { width: auto; margin: 25px 25px 0 25px; padding: 0;
}
.content_block.second .content.shadow_bottom { margin: 0 0 20px 0; padding: 25px 25px 0 25px; border-bottom: 1px solid #d4cec8; position: relative; overflow: visible;
}
.content_block.second .content.emergency { background-image: url('//s16.postimg.org/g290p9ggx/plus.png'); background-repeat: no-repeat; background-position: 100% 0;
}
.content_block.second .content.emergency h3 { color: #ff5c1c;
}
.content_block.second .content.psychiatric { background-image: url('//s23.postimg.org/r1ajvaf0r/bird.png'); background-repeat: no-repeat; background-position: 0 100%;
}
.content_block.second .content.psychiatric h3 { color: #4e4e4e;
}
.content_block.second .content.shadow_bottom:after { position: absolute; bottom: -10px; right: 0; left: 0; display: block; width: 100%; height: 10px; content: ""; background-image: url('//s12.postimg.org/xh51sqqgd/shadow_bottom.png'); background-repeat: no-repeat; background-position: 50% 0;
}
.content_block.second .content ul { margin-bottom: 1.2em;
}
.content_block.second .content.border_bottom { border-bottom: 3px solid #428e02; box-shadow: 0 1px 0 0 #fff, 0 2px 0 0 #d4cec8;
}
.content_block.third { background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(243,241,238,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(243,241,238,1) 100%); border-radius: 0 0 9px 9px; overflow: auto; text-align: center; padding: 0 15px 35px 15px;
}
.content_block.third .button.arrow { background-color: #428e02; box-shadow: 2px 2px 0 0 #c3bbb1; border-radius: 4px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 2; display: inline-block; padding: 0 10px;
}
@media all and (min-width: 600px) { .generatedcontent body { padding-top: 30px; } .generatedcontent .border_wrapper:before { display: block; } .content_block.first .content { width: 45%; margin: 0; padding: 5% 0 0 5%; float: left; } .content_block.first .content.picture { padding: 2% 1% 2% 0; float: right; } .content_block.second { background-image: url('//s8.postimg.org/ycrntvkwx/image.png'); background-repeat: repeat-y; background-position: 50% 0; } .content_block.second .content { width: 40%; margin: 2.5% 5% 0 5%; padding: 0; float: left; } .content_block.second .content:nth-child(2n+1) { clear: left; } .content_block.second .content.shadow_bottom { margin: 0 0 20px 0; padding: 2.5% 5% 0 5%; } .content_block.third { padding: 25px 0; } .content_block.third .button.arrow { background-color: transparent; background-image: url('//s24.postimg.org/c3nab8as5/button_arrow_background.png'); background-position: 0 0; background-repeat: no-repeat; line-height: 47px; height: 47px; text-overflow: ellipsis; white-space: nowrap; position: relative; border-radius: 0; box-shadow: none; } .content_block.third .button.arrow:before { position: absolute; top: 0; right: -17px; background-image: url('//s23.postimg.org/bd3adk687/button_arrow_point.png'); display: block; width: 18px; height: 47px; content: ""; }
}
Just another responsive layout - Script Codes
Just another responsive layout - Script Codes
Home Page Home
Developer Ludvig Lindblom
Username ludviglindblom
Uploaded July 25, 2022
Rating 3.5
Size 3,660 Kb
Views 68,816
Do you need developer help for Just another responsive layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ludvig Lindblom (ludviglindblom) Script Codes
Name
I Am Left logo as a scalable canvas
Rainy days
Christmas Tree
CSS loading spinners
Disable JavaScript execution from console
Christmas ornaments
CSS optical illusion
Optical illusion - Motion Binding
The Ultimate Flexbox Cheat Sheet
Circle star
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!