-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (70 loc) · 5.03 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheets/reset.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<div class="card-wrapper">
<div class="card-leftside">
<div class="card-1">
<span class="card-1-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales eleifend augue, sit amet sagittis orci eleifend ut. Maecenas ac facilisis urna, at mattis nisi. Vestibulum in tempor sapien.Suspendisse ac bibendum mi. Cras tristique neque
</span>
<!-- </div>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div> -->
</div>
<div class="card-3">
</div>
</div>
<div class="card-rightside">
<div class="card-2">
</div>
<div class="card-4">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
$(function() {
$(".card-1").click(function() {
$('.card-1').toggleClass("big")
})
})
$(function() {
$(".big").click(function() {
$(this).toggleClass(".card-1")
})
})
</script>
<!-- <div class="card bg-light mb-3 drop-shadow">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales eleifend augue, sit amet sagittis orci eleifend ut. Maecenas ac facilisis urna, at mattis nisi. Vestibulum in tempor sapien.Suspendisse ac bibendum mi. Cras tristique neque
in sodales blandit. Cras egestas dui at augue faucibus, et tincidunt nulla imperdiet. Vestibulum quam felis, bibendum vitae nulla sed, fringilla lacinia magna. Vestibulum laoreet, orci ut finibus varius, enim urna maximus nunc, id fringilla
nisi felis ac augue. Donec aliquet leo velit, quis faucibus tellus luctus et. Aliquam vitae mollis odio. Etiam maximus porta urna, tincidunt tempor ex malesuada sollicitudin. Integer erat tellus, pharetra a felis vel, aliquam dapibus magna.
Vestibulum turpis turpis, mattis vitae urna in, feugiat laoreet velit.Nunc nisl mauris, laoreet et tempor et, aliquet at felis. Sed vehicula ex eu odio semper, ac faucibus ipsum laoreet. Nulla malesuada tempus tincidunt. Morbi at nunc quis ex
placerat fringilla at vitae tortor. Pellentesque vehicula felis magna, in feugiat dolor rhoncus vel. Nunc lobortis diam eget nunc dapibus accumsan. Curabitur sed erat laoreet, pellentesque nisl et, iaculis metus.Suspendisse mollis est ligula.
Cras semper ornare nulla, eget eleifend tellus venenatis vitae. Suspendisse eu scelerisque metus. Ut nulla erat, tempor a consequat id, bibendum a augue. In hac habitasse platea dictumst. Ut ornare pharetra ligula, vitae mollis risus imperdiet
convallis. Etiam a blandit lacus. Donec hendrerit tincidunt euismod. Quisque pretium sapien at finibus consectetur. Curabitur fermentum augue non dolor imperdiet tincidunt. Sed at fringilla sapien, eget porttitor nunc.Cras ut auctor est. Curabitur
varius elit nibh, et sodales sapien faucibus nec. In hac habitasse platea dictumst. Maecenas et nulla consequat, ornare dolor nec, gravida metus. Morbi lacinia eget urna ut commodo. Ut sed ultrices nisl. Sed ipsum odio, maximus eget vulputate
eget, commodo vel urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare porta lacus, vitae lobortis erat tincidunt condimentum. Maecenas laoreet erat fermentum nibh tempor, sit amet
eleifend tortor sollicitudin. Donec eu odio ultricies, tincidunt urna id, venenatis urna. Cras blandit convallis nulla eu convallis. Nulla sed dapibus metus, eget scelerisque sem. Nam neque lectus, gravida quis bibendum id, dignissim ornare
justo. Nam molestie laoreet sem, sit amet lacinia tellus. Etiam viverra massa nec nulla ultrices eleifend. Morbi rutrum pretium nisi, non vestibulum orci pharetra id. Quisque ornare semper arcu sit amet maximus. Nunc vehicula magna sed ante
aliquet facilisis. Suspendisse sit amet mi ac ligula viverra commodo. Sed quis vestibulum dui. Nullam aliquam posuere ex, vestibulum faucibus elit volutpat quis. Donec ut mauris sed odio efficitur euismod sed quis arcu. Maecenas efficitur massa
vitae leo euismod pharetra. Aenean id ligula ultrices, egestas mi eget, varius orci.</p>
</div>
</div>
</div>
</div> -->
</body>
</html>