Skip to content

Project section2 css #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Davidtouctech wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Project section2 css #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c657c5a
I completed my project for section one of the course
Davidtouctech Sep 9, 2024
65644f4
I completed my project for section 2 of the course
Davidtouctech Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,61 @@
# Capstone Project For AI-enhanced Web3 Frontend Development Course
Welcome to the Capstone Project for the AI-Enhanced Web3 Frontend Development Course at dProgramming University. Follow the instructions below to complete your project submission.

Follow the [course lesson project instructions here](https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/capstone-project-html-build-dapp-website-html-structure-with-ai/) on how to work with this repo to submit your project for approval and certification
Follow the [course lesson project instructions here] https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/capstone-project-html-build-dapp-website-html-structure-with-ai/on how to work with this repo to submit your project for approval and certification

## Lesson 1
Here I was introduced to HTML and how it is used to build the structure of webpages.

## Lesson 2
Here I was made to understand what HTML tags are and what they do for example
### Headings:
h1: Main heading (largest font size)
h2: Subheading (smaller font size)
h3: Sub-subheading (even smaller font size)

### Paragraphs and Text:
p: Paragraph of text
span: Inline text container (for styling or semantics)
br: Line break

### Links:
a: Hyperlink (anchor tag)

### Images:
img: Image element (src attribute specifies image URL)

## Lesson 3:
Here I learnt about HTML elements

## Lesson 4:
Here I learnt about HTML attributes and what they do

## Lesson 5:
I learnt how to start using HTML to crafts simple documents

## Lesson 6:
I learnt how to use HTML to structure tables and forms for webpages and dApps

## Lesson 7:
I learnt how to link HTML pages and how to make use of the Anchor tags and hyperlinks

## Lesson 8:
I learnt how to embed media like images, videos and audio to webpages with the use of img, video and audio tags

## Lesson 9:
Here I learnt new elements of HTML 5

## Lesson 10:
Here I learnt about HTML semantics and best practices like the use of media queries to ensure that the website is responsive

## Lesson 11:
Here I was introduced to HTML development tools and templates and also the use of AI enhancement

## Challenges I Faced
One of the challenges I faced was how to properly structure HTML tags and elements so that items can be easily pointed to for styling with CSS.

## Solution
I solved this problem by constantly practicing and taking advantage of the reference for further study that they author gave us

## My Experience
In all it was an exciting experience and I am grateful to the tutor for putting this together.
61 changes: 61 additions & 0 deletions dpu-frontend-css/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# Capstone Project For AI-enhanced Web3 Frontend Development Course
Welcome to the Capstone Project for the AI-Enhanced Web3 Frontend Development Course at dProgramming University. Follow the instructions below to complete your project submission.

Follow the [course lesson project instructions here] https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/capstone-project-html-build-dapp-website-html-structure-with-ai/on how to work with this repo to submit your project for approval and certification

## Lesson 1
Here I was introduced to HTML and how it is used to build the structure of webpages.

## Lesson 2
Here I was made to understand what HTML tags are and what they do for example
### Headings:
h1: Main heading (largest font size)
h2: Subheading (smaller font size)
h3: Sub-subheading (even smaller font size)

### Paragraphs and Text:
p: Paragraph of text
span: Inline text container (for styling or semantics)
br: Line break

### Links:
a: Hyperlink (anchor tag)

### Images:
img: Image element (src attribute specifies image URL)

## Lesson 3:
Here I learnt about HTML elements

## Lesson 4:
Here I learnt about HTML attributes and what they do

## Lesson 5:
I learnt how to start using HTML to crafts simple documents

## Lesson 6:
I learnt how to use HTML to structure tables and forms for webpages and dApps

## Lesson 7:
I learnt how to link HTML pages and how to make use of the Anchor tags and hyperlinks

## Lesson 8:
I learnt how to embed media like images, videos and audio to webpages with the use of img, video and audio tags

## Lesson 9:
Here I learnt new elements of HTML 5

## Lesson 10:
Here I learnt about HTML semantics and best practices like the use of media queries to ensure that the website is responsive

## Lesson 11:
Here I was introduced to HTML development tools and templates and also the use of AI enhancement

## Challenges I Faced
One of the challenges I faced was how to properly structure HTML tags and elements so that items can be easily pointed to for styling with CSS.

## Solution
I solved this problem by constantly practicing and taking advantage of the reference for further study that they author gave us

## My Experience
In all it was an exciting experience and I am grateful to the tutor for putting this together.
197 changes: 197 additions & 0 deletions dpu-frontend-css/frontend.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Token Minter dApp</title>
<link rel="stylesheet" href="globalstylesheet.css">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body class="font-sans text-gray-800">

<!-- Header Section -->
<header class="navbar navbar-expand-lg navbar-light shadow-sm">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="#">TOUCH TECH TOKEN MINTER DAPP</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mint">Mint Tokens</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
</div>
</header>

<!-- Main Content Section -->
<main class="container py-5">
<!-- Home Section -->
<section id="home" class="mb-5">
<p class="lead">This dApp allows users to mint their own tokens on the blockchain.</p>
</section>

<!-- Mint Section -->
<section id="mint" class="mb-5">
<h2 class="h3 mb-4">Mint Your Token</h2>
<form action="#" class="row g-3">
<div class="col-md-6">
<label for="tokenName" class="form-label">Token Name:</label>
<input type="text" id="tokenName" name="tokenName" placeholder="Enter token" class="form-control">
</div>
<div class="col-md-6">
<label for="amount" class="form-label">Amount:</label>
<input type="number" id="amount" name="amount" placeholder="Enter amount" class="form-control">
</div>
<div class="col-12">
<input type="submit" value="Mint Token" class="btn btn-primary btn-animate">
</div>
</form>
</section>

<!-- About Section -->
<section id="about" class="mb-5">
<h2 class="h3 mb-4">About This dApp</h2>
<p>This dApp is a simple interface to mint custom tokens on the blockchain.</p>
</section>

<!-- Token List Section -->
<section id="minted-tokens" class="mb-5">
<h2 class="h3 mb-4">Minted Tokens</h2>
<table class="table table-striped table-bordered shadow-sm">
<thead class="table-light">
<tr>
<th scope="col">Token Name</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Token A</td>
<td>100</td>
</tr>
<tr>
<td>Token B</td>
<td>200</td>
</tr>
</tbody>
</table>
</section>

<!-- Token Pricing Section -->
<section id="token-pricing" class="mb-5">
<h2 class="h3 mb-4">Set Token Pricing</h2>
<form action="#" class="row g-3">
<div class="col-md-6">
<label for="tokenPrice" class="form-label">Token Price (ETH):</label>
<input type="number" id="tokenPrice" name="tokenPrice" step="0.01" class="form-control">
</div>
<div class="col-12">
<input type="submit" value="Set Price" class="btn btn-success btn-animate">
</div>
</form>
</section>

<!-- Wallet Connection Section -->
<section id="wallet-connection" class="mb-5">
<h2 class="h3 mb-4">Connect Your Wallet</h2>
<button id="connectWalletButton" class="btn btn-warning btn-animate">Connect Wallet</button>
</section>

<!-- Token Gallery Section -->
<section id="token-gallery" class="mb-5">
<h2 class="h3 mb-4">Token Gallery</h2>
<div class="row">
<div class="col-md-3 col-sm-6 token-item text-center mb-4">
<img src="media/images/image1.png" alt="Token 1" class="img-fluid rounded shadow-sm">
<p class="mt-2">Token 1</p>
</div>
<div class="col-md-3 col-sm-6 token-item text-center mb-4">
<img src="media/images/image2.png" alt="Token 2" class="img-fluid rounded shadow-sm">
<p class="mt-2">Token 2</p>
</div>
<!-- Add more tokens as needed -->
</div>
</section>

<!-- Transaction History Section -->
<section id="transaction-history" class="mb-5">
<h2 class="h3 mb-4">Transaction History</h2>
<table class="table table-striped table-bordered shadow-sm">
<thead class="table-light">
<tr>
<th scope="col">Date</th>
<th scope="col">Token Name</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-09-08</td>
<td>Token A</td>
<td>100</td>
<td>Success</td>
</tr>
<!-- Add more transactions as needed -->
</tbody>
</table>
</section>

<!-- FAQ Section -->
<section id="faq" class="mb-5">
<h2 class="h3 mb-4">Frequently Asked Questions</h2>
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h3 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
What is this dApp?
</button>
</h3>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
<div class="accordion-body">
This dApp allows users to mint custom tokens on the blockchain.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How do I connect my wallet?
</button>
</h3>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
<div class="accordion-body">
You can connect your wallet using the "Connect Wallet" button above.
</div>
</div>
</div>
<!-- Add more FAQs as needed -->
</div>
</section>
</main>

<!-- Footer Section -->
<footer class="bg-white shadow-sm py-4 text-center">
<p>Contact us: <a href="mailto:hello@dProgrammingUniversity.com" class="text-primary">hello@dProgrammingUniversity.com</a></p>
<p>For more information, visit
<a href="https://dProgrammingUniversity.com/Discord" target="_blank" title="dPU Discord" class="text-primary">
dProgramming University
</a>.
</p>
</footer>

<!-- Bootstrap 5 JavaScript (Optional, if needed for other features) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions dpu-frontend-css/globalstylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* Background gradient for the body */
body {
background: linear-gradient(to right, #4facfe, #00f2fe);
color: #333;
}
/* Navbar styling */
.navbar {
background-color: white;
}
.navbar .nav-link {
color: #555;
font-weight: 500;
}

.navbar .nav-link:hover {
background-color: #4facfe;
color: white;
padding: 5px;
border-radius: 5px;
}
/* Button animation */
.btn-animate {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.btn-animate:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Token item image hover effect */
.token-item img {
transition: transform 0.3s ease-in-out;
}
.token-item img:hover {
transform: rotate(10deg);
}
Binary file added dpu-frontend-css/media/images/image1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dpu-frontend-css/media/images/image2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading