Created
October 30, 2022 21:27
-
-
Save RA3NB0W/0fac8f45dbc9df4b87b26b752f4436ed to your computer and use it in GitHub Desktop.
Knotlogy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Knotlogy</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Lato&family=Satisfy&display=swap" rel="stylesheet"> | |
| <link href="../Knotlogy/Resources/CSS/style.css" rel="stylesheet"> | |
| <script src="https://kit.fontawesome.com/d7b2ebd8cd.js" crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <!--Nav Bar--> | |
| <div class="bar"> | |
| <h1 class="logo">Knotlogy</h1> | |
| <ul> | |
| <li><a href="#">Project inspiration<i class="fa-regular fa-lightbulb"></i></a></li> | |
| <li><a href="#">Events</a></li> | |
| <li><a href="#">Contact us</a></li> | |
| </ul> | |
| </div> | |
| <!--JUMBOTRON--> | |
| <div class="jumbotron-container"> | |
| <div> | |
| <p>Knotlogy</p> | |
| </div> | |
| <div class="summary"> | |
| <h2>WE'RE KNOTS!</h2> | |
| <h3>Come join our knotty community that loves Macrame.</h3> | |
| <h3>Meet other creative minds, learn, share your projects.</h3> | |
| </div> | |
| </div> | |
| <!--Photos--> | |
| <div class="photos"> | |
| <img src="./Resources/Images/elena-putina-WogDgYYTIbI-unsplash.jpg" alt="Macrame wall hanging" height="300" width="300"> | |
| <img src="./Resources/Images/rocknwool-7MpaccsE2R4-unsplash.jpg" alt="Macrame project" height="300" width="300"> | |
| <img src="./Resources/Images/rocknwool-Y7Koh_8BgX4-unsplash.jpg" alt="Macrame planter" height="300" width="300"> | |
| </div> | |
| <!--Club Experience--> | |
| <div class="quote"> | |
| <h4>"It was nice to meet others who share my love for Macrame. I learned new sources for cheap, sustainable materials and I was creatively inspired by others that shared their own projects."</h4> | |
| <h5>- Sofia K. -nurse practitioner/knotting since 2018</h5> | |
| </div> | |
| <!--Sign Up--> | |
| <div class="sign-up"> | |
| <form action="" method="get" class="form"> | |
| <div class="form"> | |
| <label for="name">Name: </label> | |
| <input type="text" name="name" id="name" required> | |
| </div> | |
| <div class="form"> | |
| <label for="email">Email: </label> | |
| <input type="email" name="email" id="email" required> | |
| </div> | |
| <div class="form"> | |
| <input type="submit" value="Join Us!"> | |
| </div> | |
| </form> | |
| </div> | |
| <!--Footer--> | |
| <footer> | |
| <h4>©Knotlogy 2022</h4> | |
| <ul> | |
| <li><a href="#"><i class="fa-brands fa-facebook fa-xl"></i></a></li> | |
| <li><a href="#"><i class="fa-brands fa-instagram fa-xl"></i></a></li> | |
| </ul> | |
| </footer> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-family: 'Lato', sans-serif; | |
| } | |
| li { | |
| list-style: none; | |
| text-transform: uppercase; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #000000; | |
| } | |
| a:hover { | |
| cursor: grab; | |
| text-decoration: underline; | |
| } | |
| .logo { | |
| font-family: 'Satisfy', cursive; | |
| margin-left: 1em; | |
| } | |
| .bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: #F0F0F0; | |
| } | |
| .bar ul li { | |
| display: inline; | |
| justify-content: space-evenly; | |
| margin-right: 1em; | |
| } | |
| .jumbotron-container { | |
| background-image: url(../Images/kate-mclean-jZSL_Dt4Fes-unsplash.jpg); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .jumbotron-container p { | |
| font-family: 'Satisfy', cursive; | |
| font-size: 7em; | |
| opacity: .70; | |
| text-align: center; | |
| } | |
| .summary { | |
| display: block; | |
| font-family: 'Lato', sans-serif; | |
| opacity: .70; | |
| padding-left: 2em; | |
| } | |
| .photos { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-around; | |
| align-items: center; | |
| padding: 2em; | |
| } | |
| .photos img { | |
| border-radius: 20px; | |
| margin: 1em; | |
| } | |
| .quote { | |
| text-align: center; | |
| background-color: #F0F0F0; | |
| padding: 2em; | |
| } | |
| .sign-up { | |
| background-image: url(../Images/mel-poole-7UIrTwF2WWo-unsplash.jpg); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 4em; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #F0F0F0; | |
| opacity: .75; | |
| width: 20em; | |
| padding: 2em; | |
| border-radius: 20px; | |
| } | |
| label, input { | |
| display: block; | |
| margin: 1em; | |
| opacity:.80; | |
| } | |
| footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: #F0F0F0; | |
| } | |
| footer h4 { | |
| margin-left: 1em; | |
| } | |
| footer ul li { | |
| display: inline; | |
| margin-left: 1em; | |
| margin-right: 1em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment