Skip to content
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

Jump to bottom

WIP Improve CSS by setting hierarchies #21

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

WIP Improve CSS by setting hierarchies #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 30 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ <h1>Coding Group</h1>

<main>
<!-- About-->
<article id="about">
<section id="about">
<div class="container">
<h2>About</h2>
<h1>About</h1>

<p>
Programming is a vital skill to have as a geoscientist. As we delve
Expand Down Expand Up @@ -109,10 +109,10 @@ <h2>About</h2>
</p>

<div class="row align-items-center">
<div class="col-lg col-padding">
<div class="col-lg">
<img src="images/members.jpg" style="width: 100%" />
</div>
<div class="col-lg quote col-padding">
<div class="col-lg quote">
<p>
"Monday, 6am here, 9am over there, and 7pm on the other side of
the globe. The cup of coffee is ready, also the mate and the
Expand All @@ -126,12 +126,12 @@ <h2>About</h2>
</div>
</div>
</div>
</article>
</section>

<!-- Our courses -->
<article style="background-color: #f3e4ff" id="courses">
<section style="background-color: #f3e4ff" id="courses">
<div class="container">
<h2>Our Courses</h2>
<h1>Our Courses</h1>

<p>
Group members provide <b>different programming courses</b> useful
Expand All @@ -140,15 +140,14 @@ <h2>Our Courses</h2>
<b>extra material</b>.
</p>
<div class="row text-center justify-content-around">
<div class="col-lg-5 col-md-6 col-padding">
<div class="card box">
<div class="col-lg-5 col-md-6 course">
<div class="card">
<div class="card-body">
<a
class=""
href="https://github.com/GeoLatinas/Intro-to-python"
>
<h3><i class="fab fa-python"></i></h3>
<h3>Intro to Python</h3>
<h2><i class="fab fa-python"></i><br />Intro to Python</h2>
<p class="card-text">
Getting started with Python, installation, exploration of
libraries for data analysis and visualization.
Expand All @@ -157,15 +156,17 @@ <h3>Intro to Python</h3>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 col-padding">
<div class="card box">
<div class="col-lg-5 col-md-6 course">
<div class="card">
<div class="card-body">
<a
class=""
href="https://sainosmichelle.github.io/elements.html"
>
<h3><i class="fas fa-project-diagram"></i></h3>
<h3>Intro to Data Science</h3>
<h2>
<i class="fas fa-project-diagram"></i><br />Intro to Data
Science
</h2>
<p class="card-text">
Introduction to data science to solve challenges in the
areas of earth science, environmental science, etc using
Expand All @@ -177,16 +178,16 @@ <h3>Intro to Data Science</h3>
</div>
</div>
</div>
</article>
</section>

<!-- Getting stated section -->
<article style="background-color: white" id="started">
<section style="background-color: white" id="started">
<div class="container">
<h2>Getting Started</h2>
<h1>Getting Started</h1>

<div class="row align-items-between align-items-top">
<div class="col-md col-padding">
<h3>Setup your System</h3>
<div class="col-md">
<h2>Setup your System</h2>
<p>
In order to start doing our courses you need to
<b>install a Python distribution</b>. We recommend using
Expand All @@ -201,8 +202,8 @@ <h3>Setup your System</h3>
>.
</p>
</div>
<div class="col-md col-padding">
<h3>New to Python?</h3>
<div class="col-md">
<h2>New to Python?</h2>
<p>
If you don’t have much experience with Python,
<b>don’t worry!</b>. A great place to start learning Python for
Expand Down Expand Up @@ -237,12 +238,12 @@ <h3>New to Python?</h3>
</div>
</div>
</div>
</article>
</section>

<!-- Achievement -->
<article style="background-color: #f3e4ff" id="achievements">
<section style="background-color: #f3e4ff" id="achievements">
<div class="container">
<h2>Achievements</h2>
<h1>Achievements</h1>

<p>
The <b>GeoLatinas Coding Group</b> has participated in different
Expand Down Expand Up @@ -306,16 +307,16 @@ <h2>Achievements</h2>
</div>
</div>
</div>
</article>
</section>

<!-- Upcoming events section -->
<article style="background-color: white" id="events">
<section style="background-color: white" id="events">
<div class="container">
<h2>Upcoming Events</h2>
<h1>Upcoming Events</h1>

<p>Coming soon...</p>
</div>
</article>
</section>
</main>

<footer>
Expand Down
88 changes: 46 additions & 42 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,37 +13,46 @@ body {
}

h1,
h1 a,
h2,
h3 {
h2 a,
h3,
h3 a {
color: #31292f;
text-align: center;
font-weight: 700;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
padding: 0px;
}

article {
padding: 120px 0px 120px 0px;
h1,
h1 a {
font-weight: 700;
font-size: 38pt;
padding-top: 100px;
padding-bottom: 40px;
line-height: 1.2em;
}

article h2,
article h2 a {
color: #31292f;
text-align: center;
font-weight: 700;
font-size: 35pt;
h2,
h2 a {
font-weight: 600;
font-size: 25pt;
padding-top: 40px;
padding-bottom: 30px;
line-height: 1.2em;
}

article h3,
article h3 a {
color: #31292f;
text-align: center;
font-weight: 700;
font-size: 22pt;
h3,
h3 a {
font-weight: 500;
font-size: 20pt;
padding-top: 20px;
padding-bottom: 10px;
line-height: 1.2em;
}

section {
padding-bottom: 100px;
}

a {
Expand All @@ -64,11 +73,7 @@ p {
line-height: 1.8;
margin: 0px;
padding: 0px;
}

.fas,
.fab {
color: #574e55;
margin-bottom: 1.5em;
}

ul {
Expand All @@ -80,18 +85,6 @@ li {
margin-bottom: 1em;
}

.col-padding {
padding-bottom: 20px;
padding-top: 20px;
}

/* Reduce size of headers on very small screens */
@media (max-width: 575.98px) {
article h2 {
font-size: 24pt;
}
}

/* ----------------- */
/* Header and navbar */
/* ----------------- */
Expand Down Expand Up @@ -132,11 +125,12 @@ nav a:hover {

.cover h1 {
color: #ffffff;
font-size: 3.8em;
font-size: 45pt;
font-weight: bold;
border: none;
margin-top: 20px;
margin-bottom: 20px;
padding: 0px;
line-height: 1em;
}

Expand Down Expand Up @@ -203,7 +197,6 @@ nav a:hover {
/* Sections */
/* -------- */

/* About section style */
.quote {
max-width: 760px;
margin: 0 auto;
Expand All @@ -223,14 +216,18 @@ nav a:hover {
}

/* Our courses section style */
.box {
.course {
padding-bottom: 30px;
}

.course .card {
border: 5px solid white;
background-color: #f3e4ff;
height: 100%;
}

h3 i {
font-size: 1.8em;
.course i {
font-size: 1.6em;
}

/* Achievement section style */
Expand All @@ -241,6 +238,13 @@ h3 i {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Reduce size of headers on very small screens */
@media (max-width: 575.98px) {
h1 {
font-size: 33px;
}
}

/* ------ */
/* Footer */
/* ------ */
Expand Down