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:
|
pages:
|
||||||
stage: deploy
|
stage: deploy
|
||||||
script:
|
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