Scribd
Upload
15 views

Archita1 Websyslabexer

The document is an HTML/CSS code for a responsive website template. It includes the HTML structure and CSS styling. The HTML contains the header, navigation menu, hero section and footer. The CSS includes styling for these elements as well as media queries for responsiveness.

Uploaded by

Tijnara Archita
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

Archita1 Websyslabexer

The document is an HTML/CSS code for a responsive website template. It includes the HTML structure and CSS styling. The HTML contains the header, navigation menu, hero section and footer. The CSS includes styling for these elements as well as media queries for responsiveness.

Uploaded by

Tijnara Archita
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Archita, Aranjit D

BSIT3

WebSys
HTML/CSS
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A Responsive Website</title>
<link rel="stylesheet" href="style.css" />
<script src="../custom-scripts.js" defer></script>
</head>
<body>
<main>

<!-- Header/Navigation Start -->


<header>
<nav class="nav container">
<h1><a href="#">WebSys</a></h1>

<ul class="menu_items">
<img src="" alt="timesicon" id="menu_toggle" />
<li><a href="#" class="nav_link">Home</a></li>
<li><a href="#" class="nav_link">About</a></li>

<li><a href="#" class="nav_link">Contact</a></li>


</ul>
<img src="" alt="timesicon" id="menu_toggle" />
</nav>
</header>
<!-- Header End -->

<!--Start -->
<section class="hero">
<div class="row container">
<div class="column">
<h1>Sample</h1><br />
<h2>sample lang po ito. Maraming Salamat!</h2>
<p></p>
<div class="buttons">
<button class="btn">Read More</button>
<button class="btn">Contact Us</button>
</div>
</div>
<div class="column">
<img src="D:\Docs\websyslabexer1\Power-Wordle.png" alt="sampleimg" class="sample_img" />
</div>
</div>

</section>
<!-- Hero End-->

<!--Footer-->
<footer>
<div class=”footer-content”>
<center><h2>Aranjit Archita</h2>
</div>
</footer>
</main>

<script>
const header = document.querySelector("header");
const menuToggler = document.querySelectorAll("#menu_toggle");

menuToggler.forEach(toggler => {
toggler.addEventListener("click", () => header.classList.toggle("showMenu"));
});
</script>
</body>
</html>

CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
main {
background: #6610f2;
}
.container {
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 60px;
}

.menu_items {
display: flex;
list-style: none;
gap: 20px;
}
a {
color: #fff;
text-decoration: none;
}

/* Hero */
.hero {
position: relative;
min-height: 100vh;
width: 100%;
background-position: 10px 10px, bottom 215px right 10px, left 55% top -1%, left 45% bottom -1px;
background-repeat: no-repeat;
}

.hero .row {
display: flex;
align-items: center;
min-height: 100vh;
height: 100%;
width: 100%;
padding: 0 60px;
gap: 30px;
justify-content: space-between;
}
.hero .row h2,
.hero .row p {
color: #fff;
}
.hero .row h2 {
font-size: 26px;
margin-bottom: 16px;
}
.hero .row h1 {
font-size: 46px;
margin-bottom: 16px;
}
.hero .column {
width: 50%;
}
.buttons {
display: flex;
margin-top: 25px;
gap: 10px;
}
.btn {
padding: 14px 26px;
background: #fff;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:last-child {
border: 2px solid #fff;
background: transparent;
color: #fff;
}
.btn:last-child:hover {
background-color: #fff;
color: #333;
}
.hero_img {
width: 100%;
z-index: 10;
position: relative;
}
#menu_toggle {
display: none;
}

/*footer */
footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100vw;
padding-top: 40px;
color: #fff;
}
.footer-content h3{
font-size: 2.1rem;
font-weight: 500;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h2{
font-size: 2.1rem;
font-weight: 500;
text-transform: capitalize;
line-height: 3rem;
}
/* Reponsive */
@media (width < 860px) {
#menu_toggle {
display: block;
}
.nav {
padding: 0 20px;
background-color: #fff;
}

.menu_items {
position: fixed;
top: 0;
width: 260px;
background-color: #fff;
height: 100%;
left: -100%;
padding: 50px 30px 30px;
flex-direction: column;
transition: all 0.5s ease;
}
.showMenu .menu_items {
left: 0;
}
a {
color: #333;
}
#menu_toggle {
width: 20px;
cursor: pointer;
}
.menu_items #menu_toggle {
position: absolute;
top: 20px;
right: 20px;
}
.hero {
padding-top: 130px;
}
.hero .row {
flex-direction: column;
padding: 0 20px;
justify-content: center;
}
.hero .row .column {
width: 100%;
}
}

@media (width < 600px) {


.hero {
padding-top: 80px;
}
.hero .row h2 {
font-size: 26px;
}
.buttons {
justify-content: center;
}
.btn {
padding: 10px 16px;
}
}

You might also like