Skip to content

Changed UI and made it responsive #20

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

Merged
merged 1 commit into from
Oct 14, 2021
Merged

Changed UI and made it responsive #20

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
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</p>
<p class="description mb-2">
Project Description </p>
<p>
<p class="project-links">
&lt;a target="_blank" href="Your project Link" class="link primary-link">Live Demo</a>
&lt;a target="_blank" href="Your Github Repo of the project" class="link secondary-link">View
Source</a>
Expand Down
60 changes: 60 additions & 0 deletions project.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
.primary-link{
transition-duration: 0.2s;

}

.primary-link:hover{
box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24);

}

.secondary-link{
transition-duration: 0.4s;
}
.secondary-link:hover{
background-color: var(--primary-color);
color: white;
}

.section{
margin:1rem 0rem;
background-color: #e0e0e0;
width: 40%;
display: inline-block;
margin-left: 6%;
border-radius: 20px;
height: fit-content;
transition-duration: 0.4s;
/* border-color: var(--primary-color); */
border: 3px solid var(--primary-color);
}
.section:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.project-heading{
text-align: center;
transform: translateY(-10px);
}
.project-links{
width: fit-content;
margin: auto;
}

@media (max-width: 768px){
.section{
display: block;
width: auto;
margin: 15px;
padding: 20px;
padding-bottom: 25px;
}
.project-links a{
padding: 7.5px;
transform: translateX(-200%);
border-radius: 10px;
}
.project-heading{
transform: translateY(12%);
}

}
29 changes: 15 additions & 14 deletions project.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="project.css">
<title>CoderSaty | Projects</title>
</head>

Expand Down Expand Up @@ -39,7 +40,7 @@ <h2 class="project-heading">Simon Game</h2>
<p class="description mb-2">
A simple web app created mainly using jQuery to make a virtual Simon Game.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://codersaty.github.io/Simon-Game/" class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/CoderSaty/Simon-Game" class="link secondary-link">View
Source</a>
Expand All @@ -58,7 +59,7 @@ <h2 class="project-heading">Best Indian Cricket Team 11</h2>
A simple web app created mainly using React.js to tell the best Indian 11 when India has to play all the
matches at the same time.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://bol2n.csb.app/" class="link primary-link">Live Demo</a>
<a target="_blank" href="https://codesandbox.io/s/distracted-rubin-bol2n?file=/src/App.js"
class="link secondary-link">View Source</a>
Expand All @@ -78,7 +79,7 @@ <h2 class="project-heading">Emoji Adder</h2>
A simple web app created mainly using Vanilla javascript to add meaningful emojis to your message to make it
more intresting for the reader to read it.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://codersaty.github.io/EmojiAdder/" class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/CoderSaty/EmojiAdder" class="link secondary-link">View
Source</a>
Expand All @@ -100,7 +101,7 @@ <h2 class="project-heading">Clock Pedia</h2>
online
chats. Enter any clock emoji in the search bar and hit the button to know what does it mean.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://i3r5h.csb.app/" class="link primary-link">Live Demo</a>
<a target="_blank" href="https://codesandbox.io/s/clockpedia-i3r5h?file=/src/App.js"
class="link secondary-link">View Source</a>
Expand All @@ -120,7 +121,7 @@ <h2 class="project-heading">Talk to Minions</h2>
A simple web app developed using Vanilla JS to convert a message in english to gibberish language which is
used by minions.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://codersaty.github.io/BananaTalk/" class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/CoderSaty/BananaTalk" class="link secondary-link">View
Source</a>
Expand All @@ -139,7 +140,7 @@ <h2 class="project-heading">Conflict Resolver</h2>
A simple web app developed using Vanilla JS to act as a virtual toss for two person or team to decide on any
issue.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://codersaty.github.io/conflictResolver/" class="link primary-link">Live
Demo</a>
<a target="_blank" href="https://github.com/CoderSaty/conflictResolver" class="link secondary-link">View
Expand All @@ -158,7 +159,7 @@ <h2 class="project-heading">JavaScript Quiz</h2>
<p class="description mb-2">
A CLI app to test your knowledge of JavaScript. There are two levels. Play the game to see your JS skills.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://replit.com/@codersaty/JSQuiz?embed=1&output=1"
class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/CoderSaty/Lec1QuizJS" class="link secondary-link">View
Expand All @@ -179,7 +180,7 @@ <h2 class="project-heading">Know Me</h2>
A simple CLI app I created to test my friend that how well they know me. Its a fun quiz. If you dont know me
play to find out some intresting things about me.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://replit.com/@codersaty/KnowMe?embed=1&output=1"
class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/CoderSaty/Lec1QuizMe" class="link secondary-link">View
Expand All @@ -200,7 +201,7 @@ <h2 class="project-heading">Hang Man React</h2>
<p class="description mb-2">
Hang Man Game Build Using Modern React concepts like hooks, functional components, use state, use effect hooks.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://laughing-shannon-47ab98.netlify.app/"
class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/naveen701526/hang-man-react" class="link secondary-link">View
Expand All @@ -220,12 +221,12 @@ <h2 class="project-heading">Hulu Clone</h2>
<p class="description mb-2">
Basic Design Clone of Hulu OTT Platform(Fully Static).
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://ap-darknight.github.io/hulu-clone/"
class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/ap-darknight/hulu-clone" class="link secondary-link">View
Source</a>
<a target="_blank" href="https://www.linkedin.com/in/ashutosh-pandey-a258b6195/" class="link primary-link">Created By ap-darknight</a>
<a target="_blank" href="https://www.linkedin.com/in/ashutosh-pandey-a258b6195/" class="link primary-link">Created By</a>
</p>
</section>

Expand All @@ -239,7 +240,7 @@ <h2 class="project-heading">Image Gallery</h2>
<p class="description mb-2">
image gallery to search an integrated random image from Pixabay API
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://images-gallery-api.netlify.app/"
class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/kingkinfajarr/image-gallery" class="link secondary-link">View
Expand All @@ -260,7 +261,7 @@ <h2 class="project-heading">Mini Audio Player</h2>
<p class="description mb-2">
Play/Pause Audio and bookmark Audio points.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://mort-adarsh.github.io/audio/"
class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/mort-adarsh/audio" class="link secondary-link">View
Expand All @@ -278,7 +279,7 @@ <h2 class="project-heading">Weather Application</h2>
<p class="description mb-2">
Get the weather forecast of your location.
</p>
<p>
<p class="project-links">
<a target="_blank" href="https://weathermd.netlify.app/" class="link primary-link">Live Demo</a>
<a target="_blank" href="https://github.com/MohamedDanis/react-weather-app" class="link secondary-link">View
Source</a>
Expand Down