diff --git a/Architecture-Website/style.css b/Architecture-Website/style.css index aa2b925fb..8e11f5036 100644 --- a/Architecture-Website/style.css +++ b/Architecture-Website/style.css @@ -1,200 +1,25 @@ -*{ - margin:0; - padding:0; - -} - -body{ - font-family:Verdana, Geneva, Tahoma, sans-serif; - display:grid; - grid-template-areas: - 'navbar' - 'container1' - 'container2' - 'container3' - 'container4' - 'container5' - 'footer'; - grid-gap:0.5rem; -} -.navbar{ - grid-area:navbar; - height:8vh; - width:100vw; - position:fixed; - top:0; - z-index:1; - background-color:white; +/* Navbar */ +.navbar { + grid-area: navbar; + height: 8vh; + width: 100vw; + position: fixed; + top: 0; + z-index: 1; + background-color: black; /* Set background color to black */ box-shadow: 2px 5px grey; - /* border:1px solid black; */ -} -.container1{ -grid-area:container1; -border-left:1px solid black; -background:url("images/homepage.jpg")no-repeat center center/cover; -height:100vh; -} -.container2{ - grid-area:container2; - height:45vw; - } -.container3{ - grid-area:container3; - height:45vw; - } -.container4{ - grid-area:container4; - height:25vw; - } -.container5{ - grid-area:container5; - background:url("images/map.jpg")no-repeat center center/cover; - height:50vw; -} -.container{ - padding:20px; - width:97.5vw; - margin:10px; - box-sizing:border-box; - /* border:1px solid green; */ -} -.footer{ - grid-area:footer; - height:5vw; - background-color:black; - color:white; - position:relative; - bottom:0; - text-align:center; - padding-top:20px; - /* border:1px solid red; */ } -/**************************************************************************navbar*******************************************************/ -a{ -color:black; -text-decoration:none; - font-size:15px; - padding:20px 35px 20px 30px; - letter-spacing:3px; -} -/********************************************************************************************projects*******************************/ -.heading{ - font-size:25px; - margin-top:25px; - margin-bottom:20px; -} -span{ - position:relative; - top:30px; - color:white; - width:60px; - height:40px; - padding:10px; - background-color:black; -} -.image-collection{ - display:grid; - grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) ); - grid-gap:1rem; - margin-top:40px; +/* Navbar links */ +a { + color: white; /* Set text color to white */ + text-decoration: none; + font-size: 15px; + padding: 20px 35px 20px 30px; + letter-spacing: 3px; } -/***********************************************************************about**************************************************/ -.about-image-card-designation{ - color:grey; - margin-top:10px; - margin-bottom:10px; +a:hover { + color: white; /* Keep hover color white */ + background-color: #333; /* Set hover background color to a slightly darker shade of black */ } - -.about-image-card-button{ - width:350px; - height:5vh; - margin-top:10px; - margin-bottom:10px; - background-color:rgb(156, 151, 151); - border:none; - font-size:18px; - color:white; -} -.image-card-collection{ - display:grid; - grid-template-columns: repeat( auto-fit, minmax(300px,1fr) ); - margin-top:30px; - margin-bottom:30px; -} -.about-img-card{ -width:350px; -height:450px; -} - -/*****************************************************************contact***************************************************************/ -input{ - width:95%; - height:6%; - margin:10px; - padding-left:10px; - padding-right:10px; - color:grey; - font-size:16px; -} -.contact-button{ - background-color:black; - border:none; - margin:10px; - padding:10px; - color:white; - font-size:17px; -} - - -@media only screen and (max-width:1500px){ - body{ - display:grid; - grid-template-areas: - 'navbar' - 'container1' - 'container2' - 'container3' - 'container4' - 'container5' - 'footer'; - grid-gap:0.5rem; - } - .navbar{ - height:8vh; - width:100%; - z-index:1; - } - .invisible-nav-item{ - display:none; - } - .container1{ - height:100vh; - padding-top:200px; - padding-bottom:200px; - } - .container2{ - height:100%; - } - .container3{ - height:100%; - } - .container4{ - height:50vw; - } - .container5{ - height:100vh; - padding-top:200px; - padding-bottom:200px; - } - .container{ - width:97vw; - height:100%; - } - .footer{ - width:97vw; - margin-left:10px - } - -} \ No newline at end of file