mirror of
https://gitlab.com/greenleebt/business-website.git
synced 2026-08-17 16:26:16 +00:00
trying with windsurf
This commit is contained in:
Brendan Greenlee
parent
ca79e88c9a
commit
6d9a0ab2ee
7 changed files with 119 additions and 189 deletions
|
|
@ -1,3 +1,5 @@
|
|||
image: alpine:latest
|
||||
|
||||
pages:
|
||||
stage: deploy
|
||||
script:
|
||||
|
|
|
|||
51
index.html
51
index.html
|
|
@ -1,51 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>[Your Name] · [Your Title]</title>
|
||||
<meta name="description" content="[Your Name] is a [Your Title]."/>
|
||||
<meta name="author" content="[Your Name]"/>
|
||||
<meta property="og:title" content="[Your Name]" />
|
||||
<meta property="og:description" content="[Your Title]" />
|
||||
<meta property="og:image" content="og.png" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content" id="content">
|
||||
<div class="p2 sm-p4 mt2 sm-mt4 mb2 sm-mb4">
|
||||
<div class="fade mt3">
|
||||
<a target="_new" href="[Your Linkedin URL]">
|
||||
<img class="photo" src="profile.png" width="64" height="64">
|
||||
</a>
|
||||
</div>
|
||||
<h2 class="mb0 mt4 fade">
|
||||
Hello, I'm [Your Name]
|
||||
<span class="smallcaps">(</span>
|
||||
<a target="_new" href="[Your Linkedin URL]">@[Your Handle]</a>
|
||||
<span class="smallcaps">)</span>
|
||||
</h2>
|
||||
<h2 class="mt0 mb4 fade gray">
|
||||
I'm a [Your Title]
|
||||
</h2>
|
||||
<p class="mb4 fade">
|
||||
I'm a [Your Role] at [Your Company], [Brief company description].
|
||||
</p>
|
||||
<div class="fade">
|
||||
<p class="fade mb4">
|
||||
Your personal statement about what you do and what you're interested in. Add your contact preferences here.
|
||||
</p>
|
||||
</div>
|
||||
<p class="fade mb4">
|
||||
<span class="gray">—</span>
|
||||
[Your Name]
|
||||
<span class="smallcaps>(</span>
|
||||
<a target="_new" href="[Your Linkedin URL]">@[Your Handle]</a>
|
||||
<span class="smallcaps">)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/image.jpg
Normal file
BIN
public/image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
46
public/index.html
Normal file
46
public/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dummy Business</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="home">
|
||||
<h1>Welcome to Dummy Business</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
|
||||
<button>Learn More</button>
|
||||
</section>
|
||||
<section id="about">
|
||||
<h2>About Us</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
|
||||
<img src="image.jpg" alt="Dummy Image">
|
||||
</section>
|
||||
<section id="contact">
|
||||
<h2>Get in Touch</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
|
||||
<form>
|
||||
<input type="text" placeholder="Name">
|
||||
<input type="email" placeholder="Email">
|
||||
<textarea placeholder="Message"></textarea>
|
||||
<button>Send</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2023 Dummy Business</p>
|
||||
</footer>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2
public/script.js
Normal file
2
public/script.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// Add some dummy JavaScript functionality
|
||||
console.log("Dummy Business website loaded!");
|
||||
68
public/style.css
Normal file
68
public/style.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #f7f7f7;
|
||||
padding: 2em;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
137
style.css
137
style.css
|
|
@ -1,137 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
color: #f4f4f4;
|
||||
font-family: "Graphik Web", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Segoe UI", Roboto, Ubuntu, sans-serif;
|
||||
font-weight: 400;
|
||||
font-smooth: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ff310a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #CFEF54
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img.photo {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
.smallcaps {
|
||||
font-variant: small-caps;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.gray{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
height: -moz-available;
|
||||
height: -webkit-fill-available;
|
||||
height: fill-available;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.3s linear;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
body.loaded .preloader {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade {
|
||||
animation: fadeIn 1s ease-in-out both;
|
||||
}
|
||||
|
||||
.fade:nth-child(2) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.fade:nth-child(3) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.fade:nth-child(4) {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.fade:nth-child(5) {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.fade:nth-child(6) {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.fade:nth-child(7) {
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
.fade:nth-child(8) {
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.fade:nth-child(9) {
|
||||
animation-delay: 8s;
|
||||
}
|
||||
|
||||
.fade:nth-child(10) {
|
||||
animation-delay: 9s;
|
||||
}
|
||||
|
||||
.fade:nth-child(11) {
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
.fade:nth-child(12) {
|
||||
animation-delay: 11s;
|
||||
}
|
||||
|
||||
.fade:nth-child(13) {
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 0%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue