codegirl007
/
sponsorahacker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

flatten css classes and move css to own file

master
Stephanie Gredell 1 year ago
parent
d82dd18439
commit
38c20ec99a
2 changed files with 100 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      assets/css/welcome.css
  2. 132
      templates/welcome.html

71
assets/css/welcome.css
Unescape View File

@ -0,0 +1,71 @@
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.welcome {
text-align: center;
margin-bottom: 30px;
}
.welcome-title {
color: #457b9d;
margin-bottom: 10px;
}
.tagline {
font-size: 1.2em;
color: #495057;
}
.section {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
}
.section-title {
color: #457b9d;
margin-bottom: 20px;
text-align: center;
}
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two columns layout */
gap: 20px; /* Space between cards */
}
.card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}
.card-title {
margin: 0 0 10px 0;
color: #495057;
}
.card-content {
font-size: 0.9em;
color: #666;
margin-bottom: 15px;
}
.card-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #a3c1ad;
color: white;
font-size: 1em;
cursor: pointer;
}
.card-button:hover {
background-color: #91a4b1;
}

132
templates/welcome.html
Unescape View File

@ -4,140 +4,66 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" /> <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/css/welcome.css" />
<title>Dashboard</title> <title>Dashboard</title>
<style>
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.welcome {
text-align: center;
margin-bottom: 30px;
}
.welcome h1 {
color: #457b9d;
margin-bottom: 10px;
}
.welcome p {
font-size: 1.2em;
color: #495057;
}
.section {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
}
.section h2 {
color: #457b9d;
margin-bottom: 20px;
text-align: center;
}
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two columns layout */
gap: 20px; /* Space between cards */
}
.card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}
.card h3 {
margin: 0 0 10px 0;
color: #495057;
}
.card p {
font-size: 0.9em;
color: #666;
margin-bottom: 15px;
}
.card button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #a3c1ad;
color: white;
font-size: 1em;
cursor: pointer;
}
.card button:hover {
background-color: #91a4b1;
}
</style>
</head> </head>
<body> <body>
{{template "pageheader" . }} {{template "pageheader" . }}
<div class="dashboard-container"> <div class="dashboard-container">
<div class="dashboard-container"> <div class="dashboard-container">
<div class="welcome"> <div class="welcome">
<h1>Welcome, Codegirl007!</h1> <h1 class="welcome-title">Welcome, Codegirl007!</h1>
<p>Find your path, fund futures, or inspire a community today.</p> <p class="tagline">Find your path, fund futures, or inspire a community today.</p>
</div> </div>
<div class="section learners"> <div class="section learners">
<h2>Build Your Tech Future</h2> <h2 class="section-title">Build Your Tech Future</h2>
<div class="cards"> <div class="cards">
<div class="card"> <div class="card">
<h3>Your Wishlist</h3> <h3 class="card-title">Your Wishlist</h3>
<p>Track your certifications and courses. Update or add goals to keep your community engaged.</p> <p class="card-content">Track your certifications and courses. Update or add goals to keep your community engaged.</p>
<button>Add a Goal</button> <button class="card-button">Add a Goal</button>
</div> </div>
<div class="card"> <div class="card">
<h3>Community Opportunities</h3> <h3 class="card-title">Community Opportunities</h3>
<p>Join upcoming hackathons or community events to grow your skills and network.</p> <p class="card-content">Join upcoming hackathons or community events to grow your skills and network.</p>
<button>View Events</button> <button class="card-button">View Events</button>
</div> </div>
<div class="card"> <div class="card">
<h3>Learning Resources</h3> <h3 class="card-title">Learning Resources</h3>
<p>Access curated tutorials, guides, and practice challenges to enhance your skills.</p> <p class="card-content">Access curated tutorials, guides, and practice challenges to enhance your skills.</p>
<button>Explore Resources</button> <button class="card-button">Explore Resources</button>
</div> </div>
<div class="card"> <div class="card">
<h3>Connect with Mentors</h3> <h3 class="card-title">Connect with Mentors</h3>
<p>Get advice and guidance from experienced professionals to boost your learning journey.</p> <p class="card-content">Get advice and guidance from experienced professionals to boost your learning journey.</p>
<button>Find a Mentor</button> <button class="card-button">Find a Mentor</button>
</div> </div>
</div> </div>
</div> </div>
<div class="section supporters"> <div class="section supporters">
<h2>Help Make Dreams Happen</h2> <h2 class="section-title">Help Make Dreams Happen</h2>
<div class="cards"> <div class="cards">
<div class="card"> <div class="card">
<h3>Fund a Goal</h3> <h3 class="card-title">Fund a Goal</h3>
<p>Choose a learner’s wishlist item and contribute to their education journey.</p> <p class="card-content">Choose a learner’s wishlist item and contribute to their education journey.</p>
<button>Browse Goals</button> <button class="card-button">Browse Goals</button>
</div> </div>
<div class="card"> <div class="card">
<h3>Host or Sponsor a Hackathon</h3> <h3 class="card-title">Host or Sponsor a Hackathon</h3>
<p>Support innovation by organizing or sponsoring a hackathon for the community.</p> <p class="card-content">Support innovation by organizing or sponsoring a hackathon for the community.</p>
<button>Get Involved</button> <button class="card-button">Get Involved</button>
</div> </div>
<div class="card"> <div class="card">
<h3>Support a Streamer</h3> <h3 class="card-title">Support a Streamer</h3>
<p>Boost streamers who are funding education for members of their community.</p> <p class="card-content">Boost streamers who are funding education for members of their community.</p>
<button>View Streamers</button> <button class="card-button">View Streamers</button>
</div> </div>
<div class="card"> <div class="card">
<h3>Track Your Impact</h3> <h3 class="card-title">Track Your Impact</h3>
<p>See the difference your contributions are making through real-time progress updates.</p> <p class="card-content">See the difference your contributions are making through real-time progress updates.</p>
<button>View Impact</button> <button class="card-button">View Impact</button>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save