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

💄 Menu solutions #72 #288

Closed
wants to merge 63 commits into from
Closed

💄 Menu solutions #72 #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
04b8f23
:memo: linked the html to the css
SKaranjaN Oct 10, 2023
7cd21e3
:art: nav styling
SKaranjaN Oct 10, 2023
b955ac6
:memo: added the logo and nav section
SKaranjaN Oct 10, 2023
12bd258
added the images
SKaranjaN Oct 10, 2023
bc2d04c
:art: nav styling
SKaranjaN Oct 10, 2023
e55fc2c
:sparkles: added the sliding button
SKaranjaN Oct 10, 2023
ece4b16
:art: added the styling button effect
SKaranjaN Oct 10, 2023
ed3055d
:art: mobile screen media querry on the nav and the button
SKaranjaN Oct 10, 2023
cdc594d
:art: added the background colour
SKaranjaN Oct 10, 2023
1db1942
:art: added the background colour
SKaranjaN Oct 11, 2023
11cd996
:lipstick: repositioned the dropdowntainer
SKaranjaN Oct 11, 2023
6e7a558
:memo: added the comments for the text content in the conversational …
SKaranjaN Oct 11, 2023
525bcde
:lipstick: repositioned the button
SKaranjaN Oct 11, 2023
8998af7
:sparkles: added a the header and the text on the conversational page
SKaranjaN Oct 11, 2023
44d4483
:art: added the font styling for the text
SKaranjaN Oct 11, 2023
c26e07f
:lipstick: added the font from google fonts
SKaranjaN Oct 11, 2023
ac31e7c
:art: adjusted the font weights and positioning of the text
SKaranjaN Oct 11, 2023
8309845
:lipstick: adjusted the contact us button p tag
SKaranjaN Oct 11, 2023
910f73b
:memo: added the div containers for the background shapes
SKaranjaN Oct 11, 2023
d185305
:feat: added the background shapes
SKaranjaN Oct 11, 2023
445081e
:sparkles: added the script tag for the mobile screen side nav
SKaranjaN Oct 11, 2023
3b807c6
:art: repositioned the logo on the mobile screen
SKaranjaN Oct 11, 2023
b952ccb
:art: repositioned the background shapes in the mobile screen
SKaranjaN Oct 11, 2023
6d0debb
:sparkles: created a new div for the News
SKaranjaN Oct 12, 2023
a7c8a07
:memo: added the h1 and h2
SKaranjaN Oct 12, 2023
18ac07a
:memo: added the horizontal line
SKaranjaN Oct 12, 2023
5d38879
:lipstick: repositioned the h2
SKaranjaN Oct 12, 2023
92c1ff3
:art: repositioned the readme div
SKaranjaN Oct 12, 2023
26c4930
:memo: added the links to the readme
SKaranjaN Oct 12, 2023
155290b
:art: resized the font size in mobile screen
SKaranjaN Oct 12, 2023
6fbb669
:art: added the flexbox on the content h2 div
SKaranjaN Oct 12, 2023
4f40e22
:art: repositioned the ptag in mobile screen
SKaranjaN Oct 12, 2023
b76fea1
:art: repositioned the horizontal line in the mobile screen
SKaranjaN Oct 12, 2023
fe5abf2
:art: corrected the margin shorthand
SKaranjaN Oct 12, 2023
1890624
:memo: removed irrelevant files
SKaranjaN Oct 12, 2023
dc1f07a
:art: corrected the margin shorthand
SKaranjaN Oct 12, 2023
3bab42e
:art: final adjustments
SKaranjaN Oct 12, 2023
ed54477
:art: styling
SKaranjaN Oct 13, 2023
2a93c84
:art: resused styles from conversational page
SKaranjaN Oct 13, 2023
09d4fde
:memo: reused styles from conversational page
SKaranjaN Oct 13, 2023
ea3a1c6
:art: added the background color
SKaranjaN Oct 13, 2023
a115576
:art: added the shapes on the desktop view
SKaranjaN Oct 13, 2023
8f2ef97
:memo: emptied index html
SKaranjaN Oct 13, 2023
9ac1a5d
:memo: emptied index html
SKaranjaN Oct 13, 2023
7200f85
:memo: html file linked to css
SKaranjaN Oct 13, 2023
ba13ede
:art: added the background color
SKaranjaN Oct 13, 2023
f541ee4
:memo: added the div for the background
SKaranjaN Oct 13, 2023
4df14eb
:art: added the home page image
SKaranjaN Oct 13, 2023
3e73747
:art: added the font
SKaranjaN Oct 13, 2023
92ac891
:memo: added the texts on the homepage-overview
SKaranjaN Oct 13, 2023
b4174c8
:memo: added the image
SKaranjaN Oct 13, 2023
771dd8d
:art: resized the image
SKaranjaN Oct 13, 2023
808247b
:art: repositioned the image
SKaranjaN Oct 13, 2023
fcc0e85
:art: repositioned the text
SKaranjaN Oct 13, 2023
e714613
:art: created the mobile screen styling
SKaranjaN Oct 13, 2023
c7347c1
:art: created the branch and the html file
SKaranjaN Oct 13, 2023
4d77c18
:art: font included in the css
SKaranjaN Oct 13, 2023
e8889a5
:memo: reused the nav section as previously used in other pages
SKaranjaN Oct 13, 2023
f2462ba
:art: added the css for the nav as previously used in other pages
SKaranjaN Oct 13, 2023
6af247c
:art: added the mobile screen css
SKaranjaN Oct 13, 2023
f0720d0
:art: added the mobile screen css
SKaranjaN Oct 13, 2023
f584d7c
:memo: added the script tag for the side nav
SKaranjaN Oct 13, 2023
3ce7c06
Merge branch 'main' into Menu-Solutions
SKaranjaN Oct 27, 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
175 changes: 175 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,181 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/src/css/style.css" rel="stylesheet">
</head>
<body class="Home-Page">
<div>
<!-- nav section -->

<section class="nav">
<div class="nav-logo">
<a class="nav-logo" href="" >
<img src="/src/images/elewa-logo.png" alt="logo"/>
</a>
</div>
<div class="nav-options">

<!-- nav options and the dropdown on the solutions option -->
<div class="dropdown">
<a class="dropdown" href="">
<p>Solutions</p>
</a>
<div class="dropdown-content">
<div class="group-menu">

<div class="dropdown-detail">
<div class="menu">
<div class="Consultuncy-img"></div>
<div class="Consultuncy-img-2"></div>
<div class="menu-text">
<a href="#">Consultuncy</a><br />
<p>Expert guidance to solve</p> <br />
<p>problems and achieve your</p><br />
<p>goals.</p>
</div>
</div>
</div>
<div class="dropdown-detail">
<div class="menu">
<div class="Content-img"></div>
<div class="Content-img-2"></div>
<div class="Content-img-3"></div>
<div class="menu-text">
<a href="#">Content-Development</a><br />
<p>Crafting effective learning</p><br />
<p>content for your audience.</p>
</div>
</div>
</div>
<div class="dropdown-detail">
<div class="menu">
<div class="Conversational-img"></div>
<div class="Conversational-img-2"></div>
<div class="menu-text">
<a href="#">Conversational Learning</a><br />
<p>Enhancing education</p> <br />
<p>through interactive dialogue.</p>
</div>
</div>
</div>
<div class="dropdown-detail">
<div class="menu">
<div class="Booklets-img"></div>
<div class="menu-text">
<a href="#">Booklets</a><br />
<p>Compact knowledge bound</p><br />
<p>in your hands.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="dropdown" href="" >
<p>About</p>
</a>
<a class="dropdown" href="" >
<p>Blogs</p>
</a>
</div>
<div class="Contact-button">
<button class="Contact-Us-button">
<p>Contact Us</p>
</button>
</div>
</section>
<!-- mobile-screen nav -->
<div class="mobile-nav">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="dropdown">
<a class="dropdown" href="">
<p>Solutions</p>
</a>
<div class="dropdown-content">
<div class="group-menu">

<div class="dropdown-detail">
<div class="menu">
<div class="Consultuncy-img"></div>
<div class="Consultuncy-img-2"></div>
<div class="menu-text">
<a href="#">Consultuncy</a><br />
<p>Expert guidance to solve</p> <br />
<p>problems and achieve your</p><br />
<p>goals.</p>
</div>
</div>
</div>
<div class="dropdown-detail">
<div class="menu">
<div class="Content-img"></div>
<div class="Content-img-2"></div>
<div class="Content-img-3"></div>
<div class="menu-text">
<a href="#">Content-Development</a><br />
<p>Crafting effective learning</p><br />
<p>content for your audience.</p>
</div>
</div>
</div>
<div class="dropdown-detail">
<div class="menu">
<div class="Conversational-img"></div>
<div class="Conversational-img-2"></div>
<div class="menu-text">
<a href="#">Conversational Learning</a><br />
<p>Enhancing education</p> <br />
<p>through interactive dialogue.</p>
</div>
</div>
</div>
<div class="dropdown-detail">
<div class="menu">
<div class="Booklets-img"></div>
<div class="menu-text">
<a href="#">Booklets</a><br />
<p>Compact knowledge bound</p><br />
<p>in your hands.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="dropdown" href="" >
<p>About</p>
</a>
<a class="dropdown" href="" >
<p>Blogs</p>
</a>
<div class="Contact-b">
<button class="Contact-Us-b">
<p>Contact Us</p>
</button>
</div>
</div>
</div>
<!-- mobile screen side nav -->
<div class="mobile">
<div class="mobile-nav-icon">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.height = "100%";
document.getElementById("mySidenav").style.width = "380px";
}

function closeNav() {
document.getElementById("mySidenav").style.height = "0";
}
</script>
</body>
</html>
</head>
<body>
<h1>Welcome</h1>
Expand Down
Loading
Loading