Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file added .DS_Store
Binary file not shown.
77 changes: 77 additions & 0 deletions aboutus.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><b>ABOUT US</b></title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div ><b>MEET THE TEAM</b> </div>
</header>
<div class="about-us">
<h1 style="color: #CFC493;"><b>Overview :</b></h1>
<p>Meet our Group11 team! We're the folks behind the scenes of Assignment3's Weblookand Feel. Our group is made up of friendly and hardworking people who build the parts of the website that help you order what you want, share your thoughts, and find out all about our special dining spots. We put everything together like a puzzle, so you can easily click, read, and enjoy without any fuss. We're excited to show you what we've made, just for you!</p>
</div>


<div class="team-members">
<div class="team-member">
<img src="img/pradeepsample.jpg" alt="Pradeep">
<h2 >Pradeep Chand Potturi</h2>
<h4>pradeepchand@usf.edu | MS in BAIS</h4>

<p> <b>"</b>Meet Pradeep, our CSS expert. He made our dining website look stylish and fun to use. Pradeep pays close attention to how things look and work. He's made sure everything on our site looks good and works well. Thanks to him, browsing our website is easy and enjoyable.<b>"</b></p>
</div>
<div class="team-member">
<img src="img/priyanka.jpg" alt="Priyaanka Reddy Boothukuri">
<h2 >Priyaanka Reddy Boothukuri</h2>
<h4>priyaankareddy@usf.edu | MS in BAIS</h4>
<p> <b>"</b>Say hello to Priyaanka, our creative thinker. She came up with the idea for our dining website and knows HTML well. Her smart ideas and good coding skills gave our site its unique look and feel. Thanks to her, our website is easy to use and fun to explore.<b>"</b></p>
</div>
<div class="team-member">
<img src="img/MANVITHA.jpg" alt="Manvitha">
<h2 >Manvitha Nagandla</h2>
<h4>manvithanagandla@usf.edu | MS in BAIS</h4>
<p> <b>"</b>Meet Manvitha, our website builder. She designed the main structure of our website using HTML. Manvitha's work is the base that holds everything together. Thanks to her, our website is clear and easy to use, making it simple for you to find what you need.<b>"</b> </p>
</div>
<div class="team-member">
<img src="img/jayanthuppara.png" alt="Jayanth">
<h2 >Jayanth Uppara</h2>
<h4>jayanthuppara@usf.edu | MS in BAIS</h4>
<p> <b>"</b>Here's Jayanth, our writer for the About Us page. He wrote the words that tell our story and mission. Jayanth's writing makes you feel welcome and helps you understand what our team is all about. Thanks to him, you can get to know us better and feel a part of our team.<b>"</b> </p>
</div>

</div>
<div class="github-link">
<a href="https://github.com/PriyaankaReddyB/Assignment_LookAndFeel" target="_blank">
<img src="img/github-icon.png" alt="GitHub" width="100" height="100">
<p style="color: #f9f9f9;">Visit our GitHub repository</p>
</a>
</div>
<footer>

<div class="footer">
<div class="footer-contact">
<h3>Distributed Information Systems</h3>
<p>ISM6225.001S24</p>
<p>Assignment 3 - Weblook and Feel</p>
</div>
<div class="footer-social">
<a href="https://www.instagram.com/" target="_blank" title="Instagram">IG</a>
<a href="https://www.linkedin.com/" target="_blank" title="LinkedIn">IN</a>
</div>
<div class="footer-legal">
<a href="#" title="Privacy Policy">Privacy Policy</a>
<a href="#" title="Terms of Use">Terms of Use</a>
</div>
</div>

<p>Thank you for getting to know our team! Feel free to <a href="#">contact us</a> for any inquiries or collaborations.</p>
</footer>
</body>
</html>
Binary file added css/.DS_Store
Binary file not shown.
1 change: 1 addition & 0 deletions css/aboutus.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

120 changes: 86 additions & 34 deletions css/main.css
Original file line number Diff line number Diff line change
@@ -1,47 +1,99 @@
/**
Sample css code
*/
/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body,
html {
height: 100%;
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}

/*Set background image*/
.container {
background-image: url('https://doc-10-ao-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/r085o9ungppbiokopob2sfbekae4uqbb/1537920000000/14802840322886517493/*/110cT8sl-pOiHGgj9yToPkAqAzrr-RNfb');
height: 100%;
background-position: center;
background-size: cover;
body {
font-family: "Roboto", sans-serif;
background: url('../img/usfdining.jpg');
background-size: cover;
backdrop-filter: blur(10px);
height: 100vh;
}

/* Position text in the middle */
.middle {
position: absolute;
color: beige;
top: 70%;
left: 39%;
text-align: center;
font-size: 25px;
.header-content {
display: flex;
}

/*Set circle in unordered list*/
.middle ul {
list-style-type: circle;
.logo {
width: 200px;
margin: 100px auto 50px;
}

/*Set text inside li tag to left*/
.middle ul li {
text-align: left !important;
nav ul {
list-style: none;
text-align: center;
}

/*Set text color for a tag inside middle class and ul>li element*/
.middle ul li a {
color: beige;
nav a {
background-color: #f0f0f0;
}

/*Change text color and decoration for a tags inside middle class and ul>li element*/
.middle ul li a:hover {
color: red;
text-decoration: none;
section#restaurants ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

section#restaurants ul li {
margin: 50px;
text-align: center;
list-style: none;
}

section#restaurants ul li img {
width: 250px;
height: 250px;
border-radius: 20px;
}

.restaurant-logo-container {
position: relative;
display: inline-block;
color: #fff;
}

.restaurant-logo-container .info-on-hover {
top: 50%;
transform: translate(-50%, -50%);
color: black;
}

.restaurant-logo-container:hover .info-on-hover {
display: block;
}

.button {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
}

.button:hover {
background-color: transparent;
color: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.info-on-hover {
display: none;
position: absolute;
left: 50%;
width:100%;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
text-align: center;
padding: 20px 0;
position: fixed;
width: 100%;
bottom: 0;
background-color: rgba(255, 255, 255, 0.6);
}
Loading