Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London10-Bedrije Omuri-HTTML/CSS-Week1 #320

Open
Bedi06 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

London10-Bedrije Omuri-HTTML/CSS-Week1 #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0805000
added the first elements on html
Bedi06 Jan 26, 2023
1830f71
Nav bar +styling
Bedi06 Jan 27, 2023
cac7876
Create about.html
Bedi06 Jan 27, 2023
c6dfa3a
added new structure
Bedi06 Jan 28, 2023
4a98c34
added styling for image back-ground
Bedi06 Jan 28, 2023
b8f8507
added footer and more styling
Bedi06 Feb 19, 2023
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
278 changes: 278 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,281 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
html {
scroll-behavior: smooth;
}

body {
font-family: cursive;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

/* header style */
.home {
height: 800px;
width: auto;
left: 0;
line-height: 20px;
margin-top: 150px;
position: relative;
text-align: center;
top: 50%;
width: 100%;
}

.background-image {
height: 900px;
width: 700px;
max-width: 100%;
object-fit: scale-down;
padding-right: 60px;
display: block;
padding-bottom: 50px;
}

.fa-solid {
font-size: 50px;
color: #333258;
padding-bottom: 30px;
}
.home h1 {
font-family: "Comfortaa-300";
font-size: 27px;
-webkit-text-fill-color: #333258;
text-decoration-color: #8c94cc;
padding-bottom: 10px;
}
.home p {
font-family: "Monserat-500";
font-size: 16px;
-webkit-text-fill-color: #333258;
text-decoration-color: #8c94cc;
}
main {
height: 700px;
width: auto;
display: block;
}
body {
background-color: #f3f3f3;
}
/* NAVBAR STYLING STARTS */

.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: #333258;
height: 100px;
}

.nav-links a {
color: #333258;
}

/* LOGO */

.logo {
float: left;
padding-left: 2%;
padding: 10px 0;
overflow: hidden;
margin-top: -6px;
}

/* NAVBAR MENU */

.menu {
display: flex;
gap: 1em;
font-size: 18px;
}

.menu li:hover {
background-color: #474668;
border-radius: 5px;
transition: 0.3s ease;
}

.menu li {
padding: 5px 14px;
}

/* DROPDOWN MENU */

.services {
position: relative;
}

.dropdown {
background-color: #e9e9f0;
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}

.dropdown li + li {
margin-top: 10px;
}

.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}

.dropdown li:hover {
background-color: #474668;
}

.services:hover .dropdown {
display: block;
}

input[type="checkbox"] {
display: none;
}

/*HAMBURGER MENU*/

.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: #474668;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}

.menu li:hover {
display: inline-block;
background-color: #474668;
transition: 0.3s ease;
}

.menu li + li {
margin-top: 12px;
}

input[type="checkbox"]:checked ~ .menu {
display: block;
}

.hamburger {
display: block;
}

.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}

.dropdown li:hover {
background-color: #474668;
}
}

.about {
height: 400px;
display: grid;
grid-template-rows: 100px 100px;
text-align: right;
line-height: 30px;
padding-top: 100px;
padding-bottom: 50px;
padding-right: 150px;
background-color: #474668;
color: #f3f3f3;
}

.services1 {
display: grid;
grid-template-rows: 200px;
justify-content: space-evenly;
color: black;
background-color: #f3f3f3;
padding-bottom: 100px;
}

.services1 h1 {
text-align: center;
padding-top: 50px;
margin-top: 10px;
}
.services1 article {
line-height: 20px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.services1 article h2 {
padding-bottom: 10px;
}

.article-container article:first-child {
color: rgb(25, 25, 59);
font-style: italic;
}
.footer {
display: grid;
grid-template-areas: "a b c";
justify-content: space-evenly;
height: 300px;
width: 100%;
color: #f3f3f3;
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
}
.footer {
background-color: #474668;
}
.anchor {
display: block;
grid-template-rows: 20px;
color: #f3f3f3;
line-height: 50px;
}

.fa-brands {
color: #f3f3f3;
padding-right: 10px;
}

.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
/*input {
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: groove;
background-color: #eee;
}
*/
.space-between {
padding-right: 10px;
}
Loading