-
Notifications
You must be signed in to change notification settings - Fork 0
/
css_frame_stripe.html
66 lines (63 loc) · 2.91 KB
/
css_frame_stripe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Stripe frame example</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" lang="ja" xml:lang="ja" content="">
<meta name="keywords" lang="ja" xml:lang="ja" content="">
<link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" rel="stylesheet">
<style>
body{
padding:0 10%;
margin: 50px auto;
color:#3b3a3b;
background-color: #fff;
}
p{
margin-bottom:10px;
text-align: justify;
text-indent: 1em;
}
.stripe_frame {
width: 95%;
background: repeating-linear-gradient(
-45deg,
#ff776d,
#ff776d 5px,
#fff 5px,
#fff 10px
);
border-radius: 15px;
margin: 15px auto;
padding: 5px 15px 10px;
}
.white_frame {
background-color: #fff;
border-radius: 15px;
margin: 15px auto;
padding: 10px;
}
.line{
border-bottom: #dadada dotted 2px;
}
</style>
</head>
<body>
<h1>Stripe frame example</h1>
<div class="stripe_frame">
<div class="white_frame">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
</div>
</div>
<div class="stripe_frame">
<div class="white_frame">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
</div>
</div>
</body>
</html>