-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.html
140 lines (103 loc) · 8.35 KB
/
post.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<title>Laravel From Scratch Blog</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<link rel="stylesheet" href="output.css">
<body style="font-family: Open Sans, sans-serif">
<section class="px-6 py-8">
<nav class="d-md-flex align-items-center justify-content-between">
<div>
<a href="/">
<img src="./images/logo.svg" alt="Laracast Logo" width="165px" height="16px">
</a>
</div>
<div class="mt-3 mt-lg-0">
<a href="/" class="text-xs text-uppercase font-weight-bold">Home Page</a>
<primary-button></primary-button>
<a href="#" class="ml-3 text-xs btn btn-primary text-uppercase font-weight-semibold">Subscribe For Updates</a>
</div>
</nav>
<main class="container mt-6 mt-lg-20">
<article class="max-w-4xl pt-10 mx-auto row">
<div class="text-center col-lg-4">
<img src="./images/illustration-1.png" alt="" class="rounded">
<p class="mt-4 text-xs text-muted">
Published <time>1 day ago</time>
</p>
<div class="mt-4 text-sm d-flex align-items-center justify-content-center">
<img src="./images/lary-avatar.svg" alt="Lary Avatar">
<div class="ml-3 text-left">
<h5 class="font-weight-bold">Lary Laracore</h5>
<h6>Mascot at Laracast</h6>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="mb-6 -mt-10 d-flex justify-content-between">
<a href="#" class="text-lg duration-300 d-flex align-items-center transition-color text-body hover:text-primary">
<svg
width="22" height="22" viewBox="0 0 22 22"
class="mr-2"
>
<g fill="none" fill-rule="evenodd">
<path stroke="#000" stroke-opacity=".012"
stroke-width=".5"
d="M21 1v20.16H.84V1z">
</path>
<path class="fill-current"
d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
</g>
</svg>
Back to Posts
</a>
<div class="d-flex">
<a href="#"
class="mr-2 btn btn-outline-primary btn-xs text-uppercase font-weight-semibold"
style="font-size: 10px;">Techniques</a>
<a href="#"
class="btn btn-outline-danger btn-xs text-uppercase font-weight-semibold"
style="font-size: 10px;">Updates</a>
</div>
</div>
<h1 class="mb-16 font-weight-bold">This is a big title and it will look great on two or even three lines. MooHoo!</h1>
<div class="text-lg">
<p>Qui cupidatat minim laborum voluptate id ipsum. Nulla reprehenderit amet esse labore eu sunt fugiat occaecat duis sunt proident magna. Aliqua commodo ipsum consectetur ad aliquip ullamco eu Lorem ullamco sit commodo deserunt. Eu pariatur proident eu eu consequat ad incididunt quis fugiat officia.</p>
<p>Et labore duis consectetur occaecat veniam. Ullamco laboris est adipisicing ad sit cillum aute consectetur duis culpa officia est adipisicing culpa. Nisi incididunt sit incididunt velit culpa irure.</p>
<p>Consectetur do adipisicing voluptate nisi anim. Cillum irure laborum commodo sunt elit sint fugiat enim qui. Do laborum duis fugiat fugiat est aute qui ipsum incididunt non.</p>
<h2 class="text-lg font-weight-bold">Sed quia consectetur</h2>
<p>Quis cillum anim do tempor mollit est fugiat cupidatat laborum. Tempor reprehenderit consequat reprehenderit et. Aute magna nisi qui pariatur occaecat. Ex tempor do mollit enim reprehenderit exercitation officia dolor nisi duis tempor. Elit esse irure voluptate sunt tempor.</p>
<p>Eu in aliquip ad commodo esse pariatur aliqua amet quis in. Ad do ex ad anim nulla sunt Lorem quis commodo id reprehenderit id cillum aliquip. Qui officia ex eu velit cillum cupidatat est minim qui nulla. Aute et et minim nostrud proident ea consectetur eiusmod eiusmod labore. Sint sunt pariatur in laboris eiusmod ullamco. Sit et ipsum nostrud amet. Voluptate voluptate in reprehenderit aliqua quis culpa ea minim anim esse officia magna.</p>
<p>Elit aliquip sint ipsum consectetur. Ullamco velit commodo velit cupidatat consectetur magna labore commodo. Pariatur ullamco irure mollit in deserunt excepteur laborum reprehenderit commodo sunt labore. Nisi amet veniam do fugiat culpa do commodo amet mollit ullamco do eiusmod duis anim. Aliquip minim cupidatat enim minim sit do. In laboris dolor sit consequat consequat proident enim in reprehenderit duis irure laborum.</p>
<p>Ad sint voluptate ipsum quis amet in fugiat anim voluptate ea pariatur. Ad commodo sit aliqua mollit commodo mollit enim magna nostrud nulla minim do fugiat. In cillum deserunt irure qui anim eiusmod minim velit ad magna nisi laboris pariatur. Enim adipisicing irure cillum cillum sit dolore pariatur elit do dolor excepteur. Sunt consectetur ad ut pariatur dolore et mollit. Cupidatat laborum non velit consectetur. Eu aliquip minim cillum veniam laborum ipsum id consequat est nulla sunt in.</p>
</div>
</div>
</article>
</main>
<footer class="py-5 mt-5 text-center border rounded bg-light">
<img src="./images/lary-newsletter-icon.png" alt="" class="mx-auto" style="width: 145px">
<h5 class="display-4">Stay in touch with the latest posts</h5>
<p class="text-muted">Promise to keep the inbox clean. No bugs.</p>
<div class="mt-4">
<div class="rounded bg-light d-inline-block">
<form method="POST" action="" class="form-inline">
<div class="p-3 d-flex align-items-center">
<label for="email" class="sr-only">
<img src="./images/mailbox-icon.svg" alt="mailbox letter">
</label>
<input id="email" type="email" placeholder="Your email address"
class="border-0 form-control">
</div>
<button type="submit" class="btn btn-primary text-uppercase font-weight-bold">Subscribe</button>
</form>
</div>
</div>
</footer>
</section>
</body>
<!-- Key Changes:
Navigation: Replaced the Tailwind classes with Bootstrap's utility classes for spacing, alignment, and font weight.
Main Content: Converted the grid structure and text styles to use Bootstrap classes like row, col-lg-, and Bootstrap's font utilities.
Buttons: Replaced Tailwind button styles with Bootstrap’s button classes.
Footer: Converted the form and text alignment to Bootstrap’s form controls and layout classes.
This should now align well with Bootstrap's styling while retaining the original structure and intent of the design. -->