-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
38 lines (38 loc) · 2.05 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS box model II</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
</head>
<body>
<div class="top-bar">
<nav class="wrapper-nav">
<ul class="navigation">
<li class="link-nav"><a class="word-nav" href="#">home</a></li>
<li class="link-nav"><a class="word-nav" href="#">coding</a></li>
<li class="link-nav"><a class="word-nav" href="#">flex</a></li>
<li class="link-nav"><a class="word-nav" href="#">grid</a></li>
</ul>
</nav>
</div>
<div class="main">
<div class="cta">
<div class="wrapper">
<h1 class="main-title">CSS BOX MODEL II</h1>
<h3 class="sub-title">This is the second exercise for my css practice. Maybe I will try something new here</h3>
<p class="cta-text">
Suspendisse quis tempor erat. Curabitur a nulla magna. In et turpis mauris. Mauris congue congue nunc, eu tristique eros. Fusce at sem sapien. Vivamus pulvinar neque nunc, id suscipit mauris molestie ultricies. Donec consectetur, ex at imperdiet congue, risus felis fermentum orci, nec volutpat velit dolor eu augue.
</p>
</div>
</div>
</div>
<div class="mid">
<div class="wrapper-mid">
<div class="wm-left"><h2 class="title-mid">A title here</h2><p class="mid-text">Suspendisse quis tempor erat. Curabitur a nulla magna. In et turpis mauris. Mauris congue congue nunc, eu tristique eros. Fusce at sem sapien. Vivamus pulvinar neque nunc, id suscipit mauris molestie ultricies..</p></div>
<div class="wm-right"><h2 class="title-mid">Another title</h2><p class="mid-text">Suspendisse quis tempor erat. Curabitur a nulla magna. In et turpis mauris. Mauris congue congue nunc, eu tristique eros. Fusce at sem sapien. Vivamus pulvinar neque nunc, id suscipit mauris molestie ultricies.</p></div>
</div>
</div>
</body>
</html>