-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage.html
112 lines (97 loc) · 5.83 KB
/
homepage.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="OpenStyle/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar justify-between">
<div class="container">
<h1 class="site-title">CodeStyle Designs</h1>
<ul style="display: flex; list-style-type: none;;">
<li class="text-hover-secondary" style="margin-left: 10px;"><a style="text-decoration: none"
href="#work">Our Work</a></li>
<li class="text-hover-secondary" style="margin-left: 10px;"><a style="text-decoration: none"
href="#about">About Us</a></li>
</ul>
</div>
</nav>
<!-- intro -->
<div class="container" style="margin-top: 100px;">
<div class="row gap-1 justify-center">
<div class="col-12-xs col-5-md">
<h2>
<div style="font-size: 3rem;">Learn to Code With</div>
<div class="text-secondary" style="font-size: 3rem;">CodeStyle</div>
</h2>
<p class="text-gray" style="margin-top: 20px; margin-bottom: 30px;">Lorem ipsum dolor sit, amet
consectetur adipisicing elit excepturi.</p>
<a href="#work" class="btn-outlined-secondary text-hover-white text-secondary">View Our Work</a>
</div>
<div class="col-12-xs col-5-md">
<img width="400px" src="/img/woman-web-developer-8184991-6547024.png" alt="">
</div>
</div>
</div>
<!-- about -->
<section id="about" class="bg-secondary-light-9" style="margin-top: 80px; padding-top: 70px; padding-bottom: 70px;">
<div class="container">
<h2 style="margin-bottom: 20px;">About CodeStyle Designs</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus cupiditate libero iste dicta maiores
molestias pariatur voluptas animi sit neque sed, illum facere, distinctio omnis saepe nobis vel quam?
Dicta Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil veritatis, distinctio quisquam
illum deserunt aut nesciunt minima ea similique provident dicta quibusdam laudantium alias rem dolores
</p>
<p style="margin-top: 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, assumenda
dolorem. Sequi perspiciatis minus laboriosam deleniti repellendus nihil modi voluptas. Eius laboriosam
necessitatibus voluptatum labore quibusdam quam eligendi adipisci odit.</p>
</div>
</section>
<!-- work section -->
<section id="work" style="margin-top: 70px;">
<div class="container">
<h2 style="margin-bottom: 30px;">Some of Our Work</h2>
<div class="row gap-2">
<div class="col-12-xs col-6-md col-3-lg">
<div class="card text-purple" style="padding: 10px;border-radius: 5px;">
<h3 class="card-title" style="margin: 10px;">Mario Club</h3>
<p style="margin: 10px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab numquam Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos possimus asperiores quod ab labore. Quisquam, a reiciendis totam at optio itaque repellendus obcaecati commodi, eveniet dolores veritatis quos quibusdam distinctio.</p>
</div>
</div>
<div class="col-12-xs col-6-md col-3-lg">
<div class="card text-error" style="padding: 10px;border-radius: 5px;">
<h3 class="card-title" style="margin: 10px;">CodeStyle Food </h3>
<p style="margin: 10px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab numquam Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, suscipit! Impedit nihil voluptas eos repellat consectetur soluta quibusdam dolore. Dolores, facere rem. Autem, expedita qui consectetur magni nam quibusdam explicabo.</p>
</div>
</div>
<div class="col-12-xs col-6-md col-3-lg">
<div class="card text-primary" style="padding: 10px;border-radius: 5px;">
<h3 class="card-title" style="margin: 10px;">Just Add Marmite</h3>
<p style="margin: 10px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab numquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias sint eius perferendis. Minus numquam eligendi obcaecati, dolore tempora sapiente et, nesciunt rem ex atque assumenda expedita sint, suscipit excepturi quaerat.</p>
</div>
</div>
<div class="col-12-xs col-6-md col-3-lg">
<div class="card text-green" style="padding: 10px;border-radius: 5px;"">
<h3 class="card-title" style="margin: 10px;">CodeStyle Notes</h3>
<p style="margin: 10px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab numquam Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, perferendis? Ipsam nam labore ullam et repudiandae dolores illo odio, aut distinctio cupiditate debitis esse, dolorem id! Maiores quasi fuga earum!</p>
</div>
</div>
</div>
<div class="row justify-center" style="margin-top: 30px;">
<button class="btn-secondary text-white">
<a href="index.html" style="text-decoration: none;">View All</a>
</button>
</div>
</div>
</section>
<!-- footer -->
<footer class="bg-gray-light-7" style="padding-top: 40px; padding-bottom: 40px; margin-top: 80px;">
<div class="row justify-center">
<p>copyright 2024 CodeStyle Designs</p>
</div>
</footer>
</body>
</html>