Skip to content

Commit

Permalink
Project 2 DONE
Browse files Browse the repository at this point in the history
  • Loading branch information
DeepikaSR4 committed Jun 9, 2024
1 parent 81f819c commit 6a864ae
Show file tree
Hide file tree
Showing 4 changed files with 251 additions and 12 deletions.
12 changes: 6 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Odin Project</title>
<link href="style.css" rel="stylesheet"
</head>
<body>
<h1 style="text-align: center;">The Odin Project</h1>
<h4 style="text-align:center;">Projects done by me</h4>
<h1 style="text-align: center;">Web Development Journey with Odin Project</h1>

<h4>Foundations Path</h4>
<ol>
<a href="./odin-recipes/index.html"><li>Odin Recipes</li></a>
<a href="./landing-page/index.html"><li>Landing Page</li></a>
</ol>
<div id="projects">
<a href="./odin-recipes/index.html"><button>Odin Recipes</button></a>
<a href="./landing-page/index.html"><button>Landing Page</button></a>
</div>
</body>
</html>
55 changes: 49 additions & 6 deletions landing-page/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,62 @@
</head>
<body>
<section id="section1">
<div id="nav"></div>
<div id="landingpagecontent"></div>
<div id="nav">
<h7 id="leftnav">Header Logo</h7>
<div id="groupnav">
<h7 class="groupnav">headerlink one</h7>
<h7 class="groupnav">headerlink two</h7>
<h7 class="groupnav">headerlink three</h7>
</div>
</div>
<div id="herosection">
<div id="content">
<h3>This website is awesome</h3>
<p>This website has some awesome subtext that goes under the main title. It's a smaller font and color is lower in contrast.</p>
<button>Sign up</button>
</div>
<img src="data:image/png;base64,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" alt="the odin project">
</div>
</section>
<section id="section2">
<h4></h4>
<div id="somerandominfoboxes"></div>
<div> <h4>Some Random Information.</h4> </div>
<div id="somerandominfoboxes">
<div class="item">
<img class="box" src="https://ioflood.com/blog/wp-content/uploads/2023/10/java_logo_dice_random-300x300.jpg.webp">
<p>this is some subtext under an illustation or image</p>
</div>
<div class="item">
<img class="box" src="https://ioflood.com/blog/wp-content/uploads/2023/10/java_logo_dice_random-300x300.jpg.webp">
<p>this is some subtext under an illustation or image</p>
</div>
<div class="item">
<img class="box" src="https://ioflood.com/blog/wp-content/uploads/2023/10/java_logo_dice_random-300x300.jpg.webp">
<p>this is some subtext under an illustation or image</p>
</div>
<div class="item">
<img class="box" src="https://ioflood.com/blog/wp-content/uploads/2023/10/java_logo_dice_random-300x300.jpg.webp">
<p>this is some subtext under an illustation or image</p>
</div>
</div>
</section>
<section id="section3">
<div id="quote"></div>
<div id="quote">
<p id="quotecontent">This is an inspiring quote,or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who knows? All I know is that is looks nice</p>
<p id="author">- Thor, God of Thunder</p>
</div>
</section>
<section id="section4">
<div id="calltoaction"></div>
<div id="calltoaction">
<div id="ctacontent">
<h3>Call to action! It's time!</h3>
<p>Sign up for our product by clicking that button over here</p>
</div>
<div id="ctabutton">
<button id="ctabuttonsignup">Sign up</button>
</div>
</div>
</section>

<footer>
<p>Copyright &copy; The Odin Project 2021</p>
</footer>
Expand Down
166 changes: 166 additions & 0 deletions landing-page/style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,169 @@
*{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
padding: 0;

}
#section1{
color: white;
height: 500px;
background-color: #1f2937;
}
#nav{
display: flex;
justify-content: space-between;
padding: 120px;
padding-top: 8px;
padding-bottom: 12px;

}
#leftnav{
align-self: center;
font-size: 24px;
font-weight: 700;
}
#groupnav{
display:flex;
flex-direction: row;
font-size: 18px;
}
.groupnav{
margin: 15px;
}
#herosection{
display: flex;
justify-content: space-between;
justify-self: center;
align-items: center;
padding: 100px;
}
#content{
flex-basis:50%;
}
#content h3{
font-size: 48px;
}
#content p{
font-size:18px;
color:#e5e7eb;
margin-right: 20px;
margin-bottom: 10px;
}
img{
flex-basis: 1/2;
width: 500px;
height: 200px;
}
button{
width: 120px;
height: 32px;
padding-bottom:3px;
padding-left: 24px;
padding-right: 24px;
border-radius: 8px;
background-color:#3882f6;
border:none;
font-weight: 500;
color:#e5e7eb;
font-size: 18px;
}
#section2{
background-color: white;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

#section2 h4{
font-weight: bolder;
color: #1f2937;
font-size: 36px;
text-align: center;
padding-top: 40px;

}
#somerandominfoboxes{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin-top: 40px;
margin-bottom: 90px;

}
.item{
display: flex;
flex-direction: column;
width: 200px;
justify-content: center;
align-items: center;
text-align: center;
}
.box{
width: 175px;
height: 175px;
border-color: #3882f6;
border-radius: 8px;


}

.item p{
font-size: 12px;
width: 175px;
}

#section3{
background-color: #E5E7EB;

height:400px;
padding-left:256px;
padding-right:256px;
}
#quote{
display: flex;
flex-direction: column;
}

#quotecontent{
margin-top: 96px;
font-size: 36px;
font-style: italic;
color: #1f2937;
font-weight: lighter;
}
#author{
text-align: right;
font-size:24px;
font-weight: bold;
}

#section4{
height: 300px;
}

#calltoaction{
margin: 150px;
background-color: #3882f6;
color: white;
height: 150px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
border-radius: 8px;
}

#ctabuttonsignup{
border-style: solid;
}

footer{
background-color: #1f2937;
padding: 30px;
color: white;
text-align: center;
}
30 changes: 30 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
*{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#projects{
display: flex;
flex:1;
justify-content: start;
align-items: center;
margin-left: 48px;
}
h4{
margin-top: 48px;
margin-bottom: 48px;
margin-left: 48px;
text-decoration: underline;
}
#projects button{
margin: 20px;
background-color: #007BFF;
color: white;
border-radius: 14px;
padding: 30px;
border-color: white;
font-size: large;
font-weight: bold;
}

button:hover{
background-color: black;
}

0 comments on commit 6a864ae

Please sign in to comment.