From 9139e414793dbeaf61c0f9e20d5dcf182d552ea8 Mon Sep 17 00:00:00 2001 From: mr-facade <72263836+mr-facade@users.noreply.github.com> Date: Tue, 11 Oct 2022 23:08:17 +0530 Subject: [PATCH] Create style.css --- html template/style.css | 155 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 html template/style.css diff --git a/html template/style.css b/html template/style.css new file mode 100644 index 0000000..39d8831 --- /dev/null +++ b/html template/style.css @@ -0,0 +1,155 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.section-one { + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(https://images.unsplash.com/photo-1515612148533-6247582c12c7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE4MzU4NzQ&ixlib=rb-1.2.1&q=80); + background-size: cover; + background-position: center; + filter: brightness(); + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.container { + text-align: center; + color: white; +} + +h1 { + text-transform: uppercase; + letter-spacing: 5px; + font-size: 4rem; + font-weight: 400; +} + +p { + font-size: 1.15rem; + letter-spacing: 3px; + margin: 20px 0 40px; +} + +.home-button { + color: white; + text-decoration: none; + border: 2px white solid; + padding: 10px 15px; +} + +.home-button:hover, +.home-button:focus { + background: hsl(0, 100%, 100%, .2); + outline: none; +} + +.section-two { + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; +} + +.container-two { + display: flex; + padding: 50px; + gap: 20px; + width: 100%; +} + +.content h1 { + font-size: 2.75rem; +} + +.content h1::after { + content: ''; + display: block; + width: 100%; + height: 5px; + background: #D1A370; +} + +.content p { + font-size: 1.1rem; + letter-spacing: 2px; +} + +.content-image img { + width: 300px; + object-fit: scale-down; +} + +@media (max-width: 700px) { + .section-two { + height: 100%; + } + .container-two { + flex-direction: column; + height: 100%; + } +} + +footer { + width: 100%; + background: #212121; + color: white; + padding: 25px; + text-align: center; +} + +.footer-container { + display: flex; + justify-content: center; +} + +.footer-content { + margin: 0 50px 0; +} + +.footer-content svg { + width: 50px; + fill: white; +} + +.footer-content h6 { + font-size: 1.2rem; + font-weight: lighter; + margin-bottom: 25px; + color: #D1A370; + text-transform: uppercase; + letter-spacing: 2px; +} + +.footer-content ul { + list-style: none; +} + +.footer-content ul li { + margin: 25px 0; +} + +.footer-content ul li a { + text-decoration: none; + color: white; +} + +.footer-content ul li a:hover, +.footer-content ul li a:focus { + color: hsl(32, 51%, 63%, 0.7); +} + +@media (max-width: 600px) { + .footer-container { + flex-direction: column; + } +} + + +