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

Vedamruta #8

Closed
wants to merge 2 commits into from
Closed

Vedamruta #8

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
50dd3c7
Responsiveness added to Landing page
Mar 26, 2023
3911621
responsiveness and center alignment of text done git add .
Mar 26, 2023
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
41 changes: 39 additions & 2 deletions enkokilish-react-project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,47 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/index.css">
<script src="https://kit.fontawesome.com/bd4d4ead53.js" crossorigin="anonymous"></script>
<title>እንቆቅልሽ - Enkokilish</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<header>
<!-- <h1>Logo</h1> -->
<div id="extra"><h1>Logo</h1></div>
<input type="checkbox" class="nav-toggle" id="nav-toggle">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span><i class="fa-sharp fa-solid fa-bars" style="background-color: white;"></i></span>
</label>
<div class="icon">
<i class="fa-solid fa-user fa-2xl" style="color: white;"></i>
<span style="color: white;">User</span>
</div>
</header>
<section id="intro">
<main class="firstpage">
<div class="text">
<div class="heading">
<h1 id="head-white">እንቆ</h1>
<h1 id="head-orange">ቅልሽ</h1>
</div>
<hr>
<p class="para">Challenge your mind and test your limits with our interactive IQ and knowledge-testing web app! <br><span id="white">እየተዝናኑ የእውቀትዎን ጥግ ይፈትሹ</span></p>
<button id="get-started">Get Started <span id="black">/ይጀምሩ</span></button>
</div>

<div class="image">
<img src="./src/images/enkokilish-two.png" alt="">
</div>
</main>
</section>
<script type="module" src="enkokilish-react-project/src/main.jsx"></script>
</body>
</html>
226 changes: 222 additions & 4 deletions enkokilish-react-project/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@

#root{
#root {
width: 100%;
height: 100%;
margin: 0;
background-color: #000;

}
*{
*, *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}


Expand Down Expand Up @@ -105,15 +107,15 @@
bottom: 60px;
}
.homepage-title {
font-weight: bold; /* Make the text bold */
font-weight: bold; /* Make the text bold
text-align: center; /* Center the text */
text-transform: uppercase; /* Convert the text to uppercase */
letter-spacing: 0.1em; /* Add a bit of extra space between letters */
}

.enko {
color: white; /* Set the color to white */
text-shadow: 2px 2px 4pxorangered; /* Add an orange shadow */
text-shadow: 2px 2px 4px orangered; /* Add an orange shadow */
animation: glow 1s ease-in-out infinite alternate;
}

Expand Down Expand Up @@ -543,4 +545,220 @@
width: 100%;
margin: 10px 0;
}
}

/* Landing page CSS code begins here */
:root {
--nav-background: rgb(0, 0, 0);
--background: orangered;
}

#intro {
background-color: var(--nav-background);
}

.firstpage {
width: 75%;
display: flex;
flex-direction: column;
margin: 0 auto;
padding-top: 4em;
font-size: 1.2rem;
gap: 2em;
}

.heading {
font-size: 2rem;
/* this is mobile view */
/* 4rem for desktop and 3rem for tablet */
}

#head-orange {
color: var(--background);
}
#head-white, hr, #white {
color: white;
}
p.para {
color: var(--background);
margin: 2em auto;
}

#get-started {
background-color: var(--background);
color: white;
padding: 0.8em 1.5em;
border-radius: 10px;
font-size: 1rem;
}
#black {
color: var(--nav-background);
}

.image {
max-width: 450px;
min-width: 150px;
}
.image img {
width: 100%;
}

.para, #get-started {
text-align: center;
}



/* navbar code begins here */

header {
background: var(--nav-background);
text-align: center;
position: fixed;
width: 100%;
z-index: 999;
padding: 0.5em 0;
}
.icon {
display: none;
}

#extra h1 {
visibility: hidden;
}

nav {
position: absolute;
text-align: right;
top: 100%;
right: 0;
background-color: var(--nav-background);
width: 100%;
/* display: none; */
transform-origin: top;
transform: scale(1, 0);
transition: transform 400ms ease-in-out
}

nav ul {
list-style: none;
}

nav li {
margin-bottom: 1em;
margin-right: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
cursor: pointer;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}

nav a:hover {
background-color: salmon;
}

.nav-toggle {
display: none;
}

.nav-toggle-label {
position: absolute;
top: 0;
right: 0;
margin-right: 1em;
height: 100%;
display: flex;
align-items: center;
}

.nav-toggle:checked ~ nav {
/* display: block; */
transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}


@media(min-width: 641px) and (max-width: 1007px) {
.nav-toggle-label {
display: none;
}

#extra h1 {
color: white;
text-align: left;
}

header {
display: flex;
/* border: 2px solid yellow; */
justify-content: space-between;
align-items: center;
}

nav {
all: unset;
}

nav a {
opacity: 1;
}

nav ul {
margin-right: 1em;
display: flex;
flex-direction: row;
gap: 2em;
/* border: 1px solid red; */
}

nav li {
margin: 0;
}

.firstpage {
flex-direction: row;
gap: 4em;
padding: 25vh 0;
}

.heading {
font-size: 3rem;
}
}

@media(min-width: 1008px) {
#extra, nav, .nav-toggle-label {
display: none;
}

.firstpage {
flex-direction: row;
gap: 4em;
padding: 20vh 0;
}

.heading {
font-size: 4rem;
}

.icon {
position: absolute;
right: 0%;
margin-right: 1em;
display: flex;
flex-direction: column;
gap: 20px;
padding: 1em;
background-color: black;
max-height: 150px;
}
}