Skip to content

Commit 61fba06

Browse files
Sharma572Sharma572
committed
Html Components created
1 parent d685ded commit 61fba06

12 files changed

+277
-320
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5503
3+
}

‎App.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
2+
3+
14
/* Open when someone clicks on the span element */
25
function openNav() {
36
document.getElementById("myNav").style.width = "100%";

‎about-us.html

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,19 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Document</title>
88
<link rel="stylesheet" href="./styles.css">
9+
<script type="module" src="/component/navBar.js" defer></script>
10+
<script type="module" src="/component/courses.js" defer></script>
11+
<script type="module" src="/component/campus.js" defer></script>
12+
<script type="module" src="/component/facility.js" defer></script>
13+
<script type="module" src="/component/footer.js" defer></script>
914
</head>
1015
<body>
1116

1217
<section class="about-header">
13-
<nav class="nav">
14-
<div class="logo"><img src="./Photos/logo.png" alt="Logo"></div>
15-
<div class="nav-links">
16-
<ul class="links">
17-
<li><a href="index.html">Home</a></li>
18-
<li><a href="about-us.html">About us</a></li>
19-
<li><a href="course.html">Course</a></li>
20-
<li><a href="contact-us.html">Contact</a></li>
21-
</ul>
22-
</div>
23-
</nav>
24-
<h1 class="about-h">About Us</h1>
18+
<nav-section></nav-section>
19+
20+
<h1 class="uni-heading">About Us</h1>
21+
2522
</section>
2623

2724
<section>
@@ -42,27 +39,9 @@ <h1 class="main-heading">
4239
</section>
4340

4441
<!-- About us -->
45-
<!-- About us -->
46-
<section class="about">
47-
<h2>About Us</h2>
48-
<p>We're a leading research university with a heart. Founded in the decade that the U.S. Constitution was signed, we're the nation's oldest Catholic and Jesuit university.
49-
We're a community of people who bridge our disparate experiences and identities. Meet the people and places that make Eduford home.</p>
50-
51-
<h2>Contact Me</h2>
52-
<div class="social-icons">
53-
54-
<a href="https://www.linkedin.com/in/raunak-sharma-72202822b"><img class="social-icon" src="./Photos/social-img/icons8-linkedin-2.gif" alt=""></a>
55-
56-
<a href="https://github.com/Sharma572"><img class="social-icon" src="./Photos/social-img/icons8-github.gif" alt=""></a>
57-
58-
<a href="www.facebook.com"><img class="social-icon" src="./Photos/social-img/icons8-facebook-64.png" alt=""></a>
59-
60-
<a href="www.gmail.com"><img class="social-icon" class="social-icon" src="./Photos/social-img/icons8-gmail-48.png"alt=""></a>
42+
<footer-section></footer-section>
43+
44+
6145

62-
<a href="www.instagram.com"><img class="social-icon" src="./Photos/social-img/icons8-instagram.gif"></a>
63-
64-
</div>
65-
<h4 class="rights">All Rigths are Reserved By ❤️ R.K1999</h4>
66-
</section>
6746
</body>
6847
</html>

‎component/campus.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
--------------- Campus Html Component---------------------
3+
*/
4+
5+
class campusSection extends HTMLElement{
6+
connectedCallback(){
7+
this.innerHTML = `
8+
<section class="campus">
9+
<h2>Our Global Campus</h2>
10+
<p>The University of Hartford's main campus is located on Bloomfield Avenue. Surrounded by green space, the main campus is divided into residential and academic buildings connected by a bridge that overlooks the north branch of the Park River, known to us as Hog River.</p>
11+
<!-- campus-Card -->
12+
<div class="campus-card grid-col-3">
13+
<div class="img camcard1">
14+
<img src="./Photos/london.png" alt="nt" >
15+
<div class="layer">
16+
<h3>LONDON</h3>
17+
</div>
18+
</div>
19+
<div class="img camcard2" >
20+
<img src="./Photos/newyork.png" alt="">
21+
<div class="layer">
22+
<h3>NEWYORK</h3>
23+
</div>
24+
</div>
25+
<div class="img camcard3">
26+
<img src="./Photos/washington.png" alt="">
27+
<div class="layer">
28+
<h3>JAPAN</h3>
29+
</div>
30+
</div>
31+
</div>
32+
</section>
33+
`
34+
}
35+
}
36+
customElements.define("campus-section",campusSection);

‎component/courses.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
---------- Courses Html Component -----------------
3+
*/
4+
class courseSection extends HTMLElement{
5+
connectedCallback(){
6+
this.innerHTML = `
7+
<section class="course">
8+
<h2>Courses we offer</h2>
9+
<p>Explore the intersection of technology and society. Learn about environmental justice. Take the famous Problem of God course. Our innovative courses inspire and invite you to help solve some of today's most pressing local, national and global issues.</p>
10+
<!-- course-Card -->
11+
<div class="course-card grid-col-3">
12+
<div class="card">
13+
<h3>Graduate Programs</h3>
14+
<p>Building on our strong roots in leadership, health care and education, Eduford is proud to offer an array of coed graduate programs for women and men who are ready to advance their careers and grow as leaders. The Eduford College Community Psychology Master's program will help you to meet your goals of becoming a Licensed Professional Counselor.</p>
15+
</div>
16+
<div class="card">
17+
<h3>Undergraduate Programs</h3>
18+
<p>For decades, Eduford College has improved the health of our communities, one graduate at a time. The JoAnn McGrath School of Nursing and Health Professions, as one of the largest nursing schools in Wisconsin, offers a wide array of fully accredited nursing programs, guaranteed clinical placements and a technology-rich Center for Clinical Education.</p>
19+
</div>
20+
<div class="card">
21+
<h3>Post graduate Programs</h3>
22+
<p>The Eduford, as one of the largest nursing schools in Wisconsin, offers a wide array of fully accredited nursing programs, guaranteed clinical placements and a technology-rich Center for Clinical Education. The Eduford College Community Psychology Master's program will help you to meet your goals of becoming a Licensed Professional Counselor.</p>
23+
</div>
24+
</div>
25+
</section>
26+
`
27+
}
28+
}
29+
customElements.define("course-section",courseSection)

‎component/facility.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
------------- Facility section-------------------
3+
*/
4+
5+
class facilitySection extends HTMLElement{
6+
connectedCallback(){
7+
this.innerHTML = `
8+
<section class="facility">
9+
<h2>Our Facilities</h2>
10+
<p>We commit to meet the financial need of every admitted undergraduate student. We don't consider your ability to pay when we review your application, and we don't base our decision on whether you can cover the cost. If you're accepted here, you belong here.</p>
11+
<div class="facility-card-container grid-col-3">
12+
<div class="facility-card">
13+
<figure>
14+
<img src="./Photos/library.png">
15+
<figcaption>
16+
<h3>World Class Library</h3>
17+
<p>Pursue research at Eduford's libraries, which include more than 3.5 million holdings. Whether your focus is on a specific discipline, interdisciplinary areas or emerging fields, our libraries offer academic resources, a maker hub, collaborative spaces and more.</p>
18+
</figcaption>
19+
</figure>
20+
21+
</div>
22+
<div class="facility-card ">
23+
<figure>
24+
<img src="./Photos/basketball.png">
25+
<figcaption>
26+
<h3>Largest Play Ground </h3>
27+
<p>The College introduces students to philosophy and theology and challenges them to delve deeply into the arts, humanities, languages, social sciences and sciences.</p>
28+
</figcaption>
29+
</figure>
30+
</div>
31+
32+
33+
<div class="facility-card ">
34+
<figure>
35+
<img src="./Photos/cafeteria.png">
36+
<figcaption>
37+
<h3>Tasty and Healthy Food.</h3>
38+
<p> Whether students pursue studies in Arabic, chemistry, government or one of hundreds of other opportunities, they are part of a rich legacy of academic excellence designed to serve them well in an ever-changing world.</p>
39+
</figcaption>
40+
</figure>
41+
</div>
42+
43+
</div>
44+
</section>
45+
`
46+
}
47+
}
48+
customElements.define("facility-section",facilitySection);

‎component/footer.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
2+
3+
4+
5+
6+
/*
7+
===== Footer =====
8+
*/
9+
10+
class footerSecion extends HTMLElement{
11+
connectedCallback(){
12+
this.innerHTML =`
13+
<section class="contact">
14+
<div class="text-box">
15+
<h1>Enroll For Our Various Online Courses
16+
<br> Anywhere from the World</h1>
17+
<button class="btn"><a class="white"> Visit us to know more</a></button>
18+
</div>
19+
</section>
20+
<section class="about">
21+
<h2>About Us</h2>
22+
<p>We're a leading research university with a heart. Founded in the decade that the U.S. Constitution was signed, we're the nation's oldest Catholic and Jesuit university.
23+
We're a community of people who bridge our disparate experiences and identities. Meet the people and places that make Eduford home.</p>
24+
25+
<h2>Contact Me</h2>
26+
<div class="social-icons">
27+
28+
<a href="https://www.linkedin.com/in/raunak-sharma-72202822b"><img class="social-icon" src="./Photos/social-img/icons8-linkedin-2.gif" alt=""></a>
29+
30+
<a href="https://github.com/Sharma572"><img class="social-icon" src="./Photos/social-img/icons8-github.gif" alt=""></a>
31+
32+
<a href="www.facebook.com"><img class="social-icon" src="./Photos/social-img/icons8-facebook-64.png" alt=""></a>
33+
34+
<a href="www.gmail.com"><img class="social-icon" class="social-icon" src="./Photos/social-img/icons8-gmail-48.png"alt=""></a>
35+
36+
<a href="www.instagram.com"><img class="social-icon" src="./Photos/social-img/icons8-instagram.gif"></a>
37+
38+
</div>
39+
<h4 class="rights">All Rigths are Reserved By ❤️ R.K1999</h4>
40+
</section>
41+
`
42+
}
43+
}
44+
// customElements.define('my-header', MyHeader);
45+
customElements.define("footer-section",footerSecion);
46+

‎component/navBar.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
=========== NavBar ===========
3+
*/
4+
5+
class navSection extends HTMLElement{
6+
connectedCallback(){
7+
this.innerHTML =
8+
`
9+
<nav>
10+
<div class="container-ham">
11+
<div id="brand" class="logo"><img src="./Photos/logo.png" alt="Logo"></div>
12+
<div class="nav-links" id="hide-links">
13+
<ul class="links">
14+
<li><a href="index.html">Home</a></li>
15+
<li><a href="about-us.html">About us</a></li>
16+
<li><a href="course.html">Course</a></li>
17+
<li><a href="contact-us.html">Contact</a></li>
18+
</ul>
19+
</div>
20+
<span id="menu-open" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
21+
</div>
22+
23+
<!-- The overlay -->
24+
25+
<div id="myNav" class="overlay">
26+
27+
<!-- Button to close the overlay navigation -->
28+
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
29+
30+
<!-- Overlay content -->
31+
<div class="overlay-content">
32+
<div class="logo"><img src="./Photos/logo.png" alt="Logo"></div>
33+
<div class="nav-links">
34+
<ul class="links">
35+
<li><a href="index.html">Home</a></li>
36+
<li><a href="about-us.html">About us</a></li>
37+
<li><a href="course.html">Course</a></li>
38+
<li><a href="contact-us.html">Contact</a></li>
39+
</ul>
40+
</div>
41+
</div>
42+
</div>
43+
</nav>
44+
`
45+
}
46+
}
47+
48+
customElements.define("nav-section",navSection);

‎contact-us.html

Lines changed: 13 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,17 @@
99

1010
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
12+
<script type="module" src="/component/navBar.js" defer></script>
13+
<script type="module" src="/component/courses.js" defer></script>
14+
<script type="module" src="/component/facility.js" defer></script>
15+
<script type="module" src="/component/footer.js" defer></script>
1216
</head>
1317
<body>
14-
<section class="about-header">
15-
<nav class="nav">
16-
<div class="logo"><img src="./Photos/logo.png" alt="Logo"></div>
17-
<div class="nav-links">
18-
<ul class="links">
19-
<li><a href="index.html">Home</a></li>
20-
<li><a href="about-us.html">About us</a></li>
21-
<li><a href="course.html">Course</a></li>
22-
<li><a href="contact-us.html">Contact</a></li>
23-
</ul>
24-
</div>
25-
</nav>
26-
<h1 class="about-h">Contact Us</h1>
18+
<section class="contact-us">
19+
20+
<nav-section></nav-section>
21+
22+
<h1 class="uni-heading">Contact Us</h1>
2723
</section>
2824

2925
<!-- Google Address -->
@@ -79,26 +75,9 @@ <h4>Raunak1999@gmail.com</h4>
7975

8076
<!-- About us -->
8177

82-
<section class="about">
83-
<h2>About Us</h2>
84-
<p>We're a leading research university with a heart. Founded in the decade that the U.S. Constitution was signed, we're the nation's oldest Catholic and Jesuit university.
85-
We're a community of people who bridge our disparate experiences and identities. Meet the people and places that make Eduford home.</p>
86-
87-
<h2>Contact Me</h2>
88-
<div class="social-icons">
89-
90-
<a href="https://www.linkedin.com/in/raunak-sharma-72202822b"><img class="social-icon" src="./Photos/social-img/icons8-linkedin-2.gif" alt=""></a>
91-
92-
<a href="https://github.com/Sharma572"><img class="social-icon" src="./Photos/social-img/icons8-github.gif" alt=""></a>
93-
94-
<a href="www.facebook.com"><img class="social-icon" src="./Photos/social-img/icons8-facebook-64.png" alt=""></a>
95-
96-
<a href="www.gmail.com"><img class="social-icon" class="social-icon" src="./Photos/social-img/icons8-gmail-48.png"alt=""></a>
97-
98-
<a href="www.instagram.com"><img class="social-icon" src="./Photos/social-img/icons8-instagram.gif"></a>
99-
100-
</div>
101-
<h4 class="rights">All Rigths are Reserved By ❤️ R.K1999</h4>
102-
</section>
78+
<footer-section></footer-section>
79+
80+
<script src="App.js"></script>
81+
<script type="module" src="/reUsable_component.js"></script>
10382
</body>
10483
</html>

0 commit comments

Comments
 (0)