index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mental Health Welfare</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" media="screen and (max-width:935px)" href="phone.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<body>
<section id="navBar">
<div class="logo">
<img src="img/family image.jpg" alt="Life is great">
</div>
<div class="list">
<ul>
<li><a href="">Home</a> </li>
<li><a href="">About</a> </li>
<li><a href="">Nature</a> </li>
<li><a href="">Settings</a></li>
</ul>
</div>
</section>
<section id="home">
<h1 class="h-primary">WELCOME TO MENTAL-HEALTH PAGE</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta obcaecati,
repellendus neque consectetur libero illum repudiandae maiores ratione unde, earum
veniam delectus deserunt nam soluta. Atque optio labore illo minima perferendis autem
consequuntur voluptatem, rerum soluta necessitatibus, exercitationem facilis
reprehenderit ipsam quia amet eaque unde sit!
</p>
<button><a href="https://en.wikipedia.org/wiki/Six-factor_Model_of_Psychological_Well-being">CLICK
HERE</a></button>
</section>
<section id="about">
<div class="box">
<img src="./img/stress.jpg" alt="Stress Img">
<h2 class="h-secondary center">Stress</h2>
<p class="center fontMed"> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Porro quae cupiditate,necessitatibus doloribus, enim totam a nemo
voluptatem deserunt molestiae? blanditiis reprehenderit at alias quis saepe nihil
in dolore enim eveniet provident iure esse exercitationem sequi non recusandae
suscipit? </p>
</div>
<div class="box">
<img src="./img/tension.jpg" alt="Stress Img">
<h2 class="h-secondary center">Tension</h2>
<p class="center fontMed"> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Porro quae cupiditate,necessitatibus doloribus, enim totam a nemo
voluptatem deserunt molestiae? blanditiis reprehenderit at alias quis saepe nihil
in dolore enim eveniet provident iure esse exercitationem sequi non recusandae
suscipit? </p>
</div>
<div class="box">
<img src="./img/thinking.jpg" alt="Stress Img">
<h2 class="h-secondary center">Thinking</h2>
<p class="center fontMed"> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Porro quae cupiditate,necessitatibus doloribus, enim totam a nemo
voluptatem deserunt molestiae? blanditiis reprehenderit at alias quis saepe nihil
in dolore enim eveniet provident iure esse exercitationem sequi non recusandae
suscipit?</p>
</div>
</section>
<section id="nature">
<h1 class="h-primary center">Nature</h1>
<div id="natureImage">
<div class="card">
<h2 class="h-secondary center">Night</h1>
<img src="./img/background image.jpg" alt="no-image">
</div>
<div class="card">
<h2 class="h-secondary center">Dawn</h1>
<img src="./img/balance.jpg" alt="no-image">
</div>
<div class="card">
<h2 class="h-secondary center">Sunny</h1>
<img src="./img/family image.jpg" alt="no-image">
</div>
<div class="card">
<h2 class="h-secondary center">Rainy</h1>
<img src="./img/greenery.jpg" alt="no-image">
</div>
</div>
</section>
<section id="form">
<h1 class="h-primary center1">Fill this form</h1>
<form action="backend.php">
<div class="formGroup">
<label for="Name">Name:</label>
<input type="text" id="myName" placeholder="Enter Your Name" ;>
</div>
<div class="formGroup">
<label for="email">Email:</label>
<input type="myEmail" id="myEmail" placeholder="Enter Your Email" ;>
</div>
<div class="formGroup">
<label for="phone">Phone No:</label>
<input type="text" id="myPhone" placeholder="Enter Your Phone No." ;>
</div>
<div class="formGroup">
<textarea name="myInfo" cols="200" rows="10" placeholder="Write about yourself:"></textarea>
</div>
</form>
</section>
</body>
</html>
Comments
Post a Comment