Skip to content

Changes to the index page #5

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
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Changes to the index page #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
150a064
skills box UI updates
HardikShah563 Nov 7, 2022
73fefef
Merge branch 'main' of github.com:HardikShah563/CodeMap-1
HardikShah563 Nov 7, 2022
f72a59f
new changes to skills box
HardikShah563 Nov 7, 2022
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
Binary file added img/dark_earth.gif
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 img/only-black.jpg
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.
60 changes: 39 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
</div>
</nav>
<section class="home" id="home">
<img src="./img/dark_earth.gif" alt="">
<h2 class="title">Welcome to Codemap!</h2>
<p class="subtitle">Your ultimate guide to coding journey!</p>
<p class="para">This is an open source project created by the team, during the Hacktober fest. We look
Expand All @@ -48,57 +49,66 @@ <h2 class="title">Welcome to Codemap!</h2>
<div class="roadmap-flex-box">
<a class="skill" href="./pages/frontend/frontend.html" target="_blank">
<div>
<h1 class="skill-header">Frontend</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<h1 class="skill-header"><i class="fa-solid fa-map-location-dot"></i> Frontend</h1>
<p class="skill-para">Step by step guide to becoming a frontend developer</p>
<div class="new"><p>New</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">Backend</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<h1 class="skill-header"><i class="fa-solid fa-map-location-dot"></i> Backend</h1>
<p class="skill-para">Step by step guide to becoming a backend developer</p>
<div class="new"><p>New</p></div>
</div>

</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">DevOps</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<h1 class="skill-header">Android</h1>
<p class="skill-para">A step by step guide to becoming an Android App Developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">Android</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<h1 class="skill-header">DevOps</h1>
<p class="skill-para">A step by step guide on starting with your DevOps career</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">DBA</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a Data Base Administrator</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">Blockchain</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Discover the best CodeMap to start with Blockchain Developement</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">QA</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">Software Architect</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

Expand All @@ -115,56 +125,64 @@ <h1 class="skill-header">Software Architect</h1>
<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">HTML</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="new"><p>New</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">CSS</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="new"><p>New</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">JavaScript</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="new"><p>New</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">React</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">c/c++</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">Java</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">Python</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

<a class="skill" href="#" target="_blank">
<div>
<h1 class="skill-header">Go</h1>
<p class="skill-para">Step by step guide to becoming a front-end developer in 2022</p>
<p class="skill-para">Step by step guide to becoming a front-end developer</p>
<div class="coming-soon"><p>Coming Soon</p></div>
</div>
</a>

Expand Down
46 changes: 44 additions & 2 deletions style/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@ html {
/* <============= Home Section CSS =============> */
.home {
margin: 20px;
background-color: transparent;
}

.home img {
width: 200px;
margin: auto auto;
}

.roadmap {
Expand All @@ -107,9 +113,10 @@ html {
}

.skill {
display: block;
width: 300px;
overflow: hidden;
margin: 10px;
padding: 20px;
border: 2px solid var(--light-black);
border-radius: 8px;
}
Expand All @@ -122,10 +129,45 @@ html {
color: var(--secondary-color);
font-size: 22px;
font-weight: 800;
padding: 20px 0 0 20px;
}

.skill-header i {
margin: 0px 5px;
color: var(--off-white);
}

.skill-para {
font-size: 13px;
padding: 0 0 0 20px;
margin-bottom: 10px;
margin-right: 10px;
}

.new {
display: flex;
justify-content: right;
}

.new p {
display: inline-block;
padding: 0 5px;
font-size: 14px;
background-color: var(--green);
border-radius: 2px;
}

.coming-soon {
display: flex;
justify-content: right;
}

.coming-soon p {
display: inline-block;
padding: 0 5px;
font-size: 14px;
background-color: var(--secondary-color);
border-radius: 2px;
}

/* <============= Open Source Section CSS =============> */
Expand Down Expand Up @@ -273,7 +315,7 @@ footer p i {
}
}

@media (max-width: 450px) {
@media (max-width: 420px) {
.home-title {
font-size: 22px;
}
Expand Down