-
Notifications
You must be signed in to change notification settings - Fork 47
/
Copy pathproject1.html
119 lines (110 loc) · 8.05 KB
/
project1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Review this part and modify it to your liking -->
<meta name="description" content="Sample text for portfolio template meta tag">
<meta name="keywords" content="Sample text for portfolio template meta tag">
<meta name="author" content="Sample text for portfolio template meta tag">
<title>Project1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style-project.css">
<!-- font for the quote -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap" rel="stylesheet">
<!-- font for the body -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
<!-- font for headings -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<!-- navigation bar -->
<nav class="sticky">
<label for="drop" class="toggle" id="main-toggle">
<span class="nav-icon"></span>
</label>
<input type="checkbox" id="drop">
<ul class="main-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about-me.html">About me</a></li>
<li><a href="skill-set.html">Skill-set</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="index.html#contact-me">Contact me</a></li>
</ul>
</nav>
<!-- project name -->
<section class="w-900 padding center">
<h2 class="medium-spacing-halfsize">Project name</h2>
<p class="center italic">Project sub-title if needed</p>
</section>
<!-- about this project -->
<section class="w-900 padding center">
<h3 class="main-title">Your title here</h3>
<section>
<p class="justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste, eos. Nam fuga sunt reiciendis, minus cumque aut. Esse temporibus quod qui sint accusamus. Aspernatur, soluta aliquid. <span class="bold">Obcaecati quas quo odit!</span>. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, unde ea. Aspernatur adipisci dolores quam commodi optio molestias animi atque rem. Iure esse, veniam laudantium deserunt cupiditate ea! Sequi, nisi!</p>
<p class="justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dignissimos sed at saepe <span class="bold">laboriosam molestiae ipsam</span> quas cupiditate perspiciatis velit corporis, distinctio, dolorem adipisci.</p>
</section>
</section>
<section class="w-900 padding">
<h3 class="main-title center">Your title here</h3>
<p class="justify">Card system for anything you might want to showcase. I used it for showcasing my class system.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ipsa exercitationem explicabo, harum inventore ex mollitia dignissimos eos quae quo dolor quod quisquam quis sunt libero reprehenderit repudiandae adipisci. Facilis.</p>
<p class="center">Explore my code on <span class="italic colorful-letter"><a class="link" href="https://github.com/" target="_blank">GitHub </a></span>!</p>
</section>
<section class="wrapper">
<section class="column card">
<p class="bold center">Your title here</p>
<ul class="no-bullet-list no-padding-list-item">
<!-- if you take the span-s out, the fonts won't be that colorful -->
<li><span class="colorful-letter">Lorem</span></li>
<li><span class="colorful-letter">ipsum</span></li>
<li><span class="colorful-letter">dolor</span></li>
<li><span class="colorful-letter">sit amet</span></li>
<li><span class="colorful-letter">consectetur adipisicing</span></li>
<li><span class="colorful-letter">ipsa exercitationem explicabo</span></li>
<li><span class="colorful-letter">mollitia dignissimos</span></li>
<li><span class="colorful-letter">quod quisquam</span></li>
</ul>
</section>
<section class="column card">
<p class="bold center">Your title here</p>
<ul class="no-bullet-list no-padding-list-item">
<li><span class="colorful-letter">Lorem</span></li>
<li><span class="colorful-letter">ipsum</span></li>
<li><span class="colorful-letter">dolor</span></li>
<li><span class="colorful-letter">sit amet</span></li>
<li><span class="colorful-letter">consectetur adipisicing</span></li>
<li><span class="colorful-letter">ipsa exercitationem explicabo</span></li>
<li><span class="colorful-letter">mollitia dignissimos</span></li>
<li><span class="colorful-letter">quod quisquam</span></li>
</ul>
</section>
</section>
<!-- what did i learn -->
<section class="w-900 padding center baby-pink-light">
<h3 class="main-title">Your title here</h3>
<ul class="justify padding-list-10">
<li class="no-padding-list-item"><span class="bold">I used this section to showcase what did i learn from creating this project!</span> </li>
<li class="no-padding-list-item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam nostrum odit, est quis assumenda numquam nesciunt, perspiciatis rerum veniam totam esse odio tenetur a vel iusto voluptas quasi maiores deserunt.</li>
<li class="no-padding-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab, voluptatum officia dolores commodi dolorem necessitatibus sint voluptate quod esse rem? Recusandae dolorem iure inventore dolore delectus debitis sed in. Labore.</li>
<li class="no-padding-list-item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt deserunt debitis, possimus maxime ad repudiandae repellendus dolor animi accusamus voluptatem, nisi molestiae, tempora eum unde exercitationem temporibus magnam minus iste!</li>
<li class="no-padding-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit commodi aliquam modi nemo illo facere minima fuga vel, itaque natus voluptate rerum odit, accusantium eligendi. Alias ad beatae nulla cumque.</li>
<li class="no-padding-list-item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore maxime in unde, ad totam nesciunt atque consectetur ipsum sed quisquam deserunt numquam! Amet iusto eaque aliquid facilis odio facere officia!</li>
<li class="no-padding-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quaerat pariatur, odio corrupti voluptates fugit aut dicta iste totam veritatis commodi, quasi, eius eos doloremque. Tempora maiores eligendi provident repellendus.</li>
</ul>
</section>
<p class="wrapper justify-content"><a href="portfolio.html" class="link-no-scale colorful-letter">Back to portfolio</a></p>
<!-- footer -->
<footer>@iluskaland 2024</footer>
</body>
</html>