This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
-mobile design -desktop preview
- Solution URL: Solution URL
- Live Site URL: Live site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox -The font family I imported
I learnt how to use more css properties and html elements. I also learnt how to design a drop down menu using CSS.
.dropdown{
position: relative;
float: right;
display: inline;
align-self: center;
}
.menu {
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right: 0;
text-align: center;
padding: 20px 20px 30px;
font-size: 16px;
}
.dropdown-content a {
color: hsl(210, 4%, 67%);
padding: 12px 18px;
text-decoration: none;
display: block;
font-family: 'Barlow', sans-serif;
}
.dropdown:hover .dropdown-content {
display: block;
}
.menus:hover{
fill: #6FCFFF;
}
#contact-menu{
background-color: hsl(51, 100%, 49%);
font-family: 'Fraunces', serif;
text-transform: uppercase;
color: hsl(212, 27%, 19%);
border-radius: 30px;
font-size: 12px;
margin-top: 15px;
}
nav{
display: none;
}
-
I'm still interested in learning more CSS properties in order to add more styles to my work.
-
Adding tailwindcss to my work in future works will be great. So I will also develop my skills in that area as well
w3Schools. This site enhanced my CSS and HTML understanding CSS tricks
- LinkedIn - Daniel Samuel
- Frontend Mentor - @DeCaptainDan
- Twitter - @DanSam24372807
- I want to thank my mentor in SideHustle internship who showed me this site frontendmentor. He has really supported me in learning HTML and CSS.
- I aslo want to thank frontend mentor for this opportunity
- Thanks to w3Schools for helping me improve my knowledge on HTML and CSS