Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added week 4
  • Loading branch information
maa17019 committed Feb 18, 2020
1 parent 0e4f3c9 commit df65cab
Show file tree
Hide file tree
Showing 8 changed files with 165 additions and 160 deletions.
Binary file modified .DS_Store
Binary file not shown.
27 changes: 16 additions & 11 deletions css/responsive.css
Expand Up @@ -71,6 +71,7 @@ body, html {
flex: 1; flex: 1;
padding: 0 10px; padding: 0 10px;
justify-content: flex-end; justify-content: flex-end;
margin-right: 5vw;




} }
Expand Down Expand Up @@ -424,9 +425,7 @@ width: 100%;
} }
@media (max-width: 649px){ @media (max-width: 649px){
.big-logos{ .big-logos{
width: 80%; width: 100%;
margin-left: 10%;
text-align: center;
margin-bottom: 10px; margin-bottom: 10px;


} }
Expand Down Expand Up @@ -456,13 +455,17 @@ width: 100%;
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
margin-left: 10%;


} }
.white p{ .white p{
color: black; color: black;
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 0.8em; font-size: 0.8em;
text-align: left; text-align: left;
width: 90%; width: 90%;
margin-left: 10%;
} }
} }


Expand All @@ -474,7 +477,7 @@ width: 100%;
.container .logo a img { .container .logo a img {
max-width: 100%; max-width: 100%;
max-height: 90px; max-height: 90px;
margin-left: 10vw; margin-left: 9vw;
} }
.container .navbar { .container .navbar {
margin-right: 5vw; margin-right: 5vw;
Expand Down Expand Up @@ -505,6 +508,7 @@ width: 100%;
margin-left: 10vw; margin-left: 10vw;


} }

} }
@media (min-width: 950px){ @media (min-width: 950px){
.container .logo a img { .container .logo a img {
Expand All @@ -530,10 +534,15 @@ width: 100%;
/*footer!*/ /*footer!*/
.big-logos img{ .big-logos img{
width: 85%; width: 85%;
}ano }
.white p{ .white p{
font-size: 0.7em; font-size: 0.7em;
width: 70%; width: 70%;
margin-left: 8vw;
}
.white h5{
margin-left: 8vw;
}




} }
Expand Down Expand Up @@ -577,10 +586,6 @@ width: 100%;
height: 100%; height: 100%;
} }


.column-two{
display: flex;

}
.column-one h2{ .column-one h2{
width: 600px; width: 600px;
} }
Expand All @@ -606,15 +611,15 @@ width: 100%;
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 1em; font-size: 1em;
margin-bottom: 0px; margin-bottom: 0px;
margin-left: 10%; margin-left: 8vw;
margin-top: 20px; margin-top: 20px;
} }
.white p{ .white p{
color: black; color: black;
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 0.8em; font-size: 0.8em;
margin-top: 5px; margin-top: 5px;
margin-left: 10%; margin-left: 8vw;
margin-bottom: 20px; margin-bottom: 20px;
width: 70%; width: 70%;
} }
Expand Down
60 changes: 60 additions & 0 deletions index-one.html
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mahnoor's Simple Website</title>
<link href="css/basic-site.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="image">
<img src="img/head.jpg" alt="header image"/>
<div class="text">Mahnoor Afteb</div>
</div>
</header>
<main>
<nav>
<h2>About Me</h2>
</nav>

<div class="me">
<img src="img/me.jpg" alt="picture of author"/>
</div>
<section class="one">

<p>I’m currently an undergraduate enrolled in the Digital Media and Design program at the <em>University of Connecticut</em>. I was born and raised in Meriden, Connecticut. I have always been an artistic child growing up and throughout high school, I was eager to take every possible art and digital technology course offered to me including digital imaging, web design, video production, ceramics and advanced photography. I would describe my personal style as vibrant, bold and festive. My artistic statement for most of my work pays attention to detail as I am especially inspired by abstract art.</p>

</section>
<hr>
<section class="titles">
<h3>My Interests</h3>
</section>
<section class="two">
<ul>
<li>Photography</li>
<li>Traveling</li>
<li>Volunteering</li>
<li>Baking</li>
<li>Reading</li>
<li>Music</li>
</ul>
</section>
<h3>My Favorite Websites:</h3>
<section class="three">
<ul>
<li><a href="https://www.netflix.com " target="_blank">Netflix</a></li>
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
<li><a href="https://www.theverge.com" target="_blank">The Verge</a></li>
</ul>
</section>


</main>
<footer>
<h4>© Mahnoor Afteb 2020</h4>
</footer>
</body>
</html>
135 changes: 89 additions & 46 deletions index.html 100755 → 100644
Expand Up @@ -3,58 +3,101 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Responsive Practice</title>
<title>Mahnoor's Simple Website</title> <link href="css/responsive.css" type="text/css" rel="stylesheet"/>
<link href="css/basic-site.css" type="text/css" rel="stylesheet"/>
</head> </head>
<body> <body>
<header> <div id="bg">
<div class="image"> <div class="container">
<img src="img/head.jpg" alt="header image"/> <div class="logo">
<div class="text">Mahnoor Afteb</div> <a href="#"><img src="img/logo.jpg" alt="logo"></a>
</div>
<div class="navbar">

<div class="icon-bar" onclick="Show()">
<i></i>
<i></i>
<i></i>
</div> </div>
</header>
<main> <ul id="nav-lists">
<nav> <li class="close"><span onclick="Hide()">×</span></li>
<h2>About Me</h2> <li><a href="#">Features</a></li>
</nav> <li><a href="#">About</a></li>

<li><a href="#">Pricing</a></li>
<div class="me"> <li><a href="#">Reviews</a></li>
<img src="img/me.jpg" alt="picture of author"/> <li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<main>
<div class="centered">

<!--Column 1-->
<div class="column-one">
<div class="big-logo">
<img src="img/big-logo.jpg" alt="big logo"/>
</div>
<h2>MODERN AXURE TEMPLATE<br>
FOR BEAUTIFUL PROTOTYPES</h2>
<hr><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
euismod bibendum laoreet. Proin gravida dolor sit amet lacus
accumsan et viverra justo commodo.</p>
<button class="btn">Download</button>
</div>
<!--Column 2-->
<div class="column-two">
<form action="">
<div id="form-container">
<h3> Try Your <span style="color: orange;">FREE</span> Trial Today </h3>
<input type="text" name="Name" id="" placeholder="Name">
<input type="text" name="Email" id="" placeholder="Email">
<input type="text" name="Password" id="" placeholder="Password">

<button type="submit" name="Get Started">Get Started!</button>
</div>
</form>
</div>

</div>
</div>
</div>
</main>
<div id="footer-container">
<div id="footer-one">
<div class="white">
<h5>Social Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean euismod bibendum laoreet.</p>
</div>
<div class="big-logos">
<img src="img/big-icons.jpg" alt="big logos with white background"/>
</div>
</div>

<div id="footer-two">
<div class="black">
<div class="small-logos">
<img src="img/footer-icons.jpg" alt="small logos with black background"/>
</div> </div>
<section class="one"> <h6>© 2020 Axure Themes</h6>
</div>


<p>I’m currently an undergraduate enrolled in the Digital Media and Design program at the <em>University of Connecticut</em>. I was born and raised in Meriden, Connecticut. I have always been an artistic child growing up and throughout high school, I was eager to take every possible art and digital technology course offered to me including digital imaging, web design, video production, ceramics and advanced photography. I would describe my personal style as vibrant, bold and festive. My artistic statement for most of my work pays attention to detail as I am especially inspired by abstract art.</p> </div>

</section>
<hr>
<section class="titles">
<h3>My Interests</h3>
</section>
<section class="two">
<ul>
<li>Photography</li>
<li>Traveling</li>
<li>Volunteering</li>
<li>Baking</li>
<li>Reading</li>
<li>Music</li>
</ul>
</section>
<h3>My Favorite Websites:</h3>
<section class="three">
<ul>
<li><a href="https://www.netflix.com " target="_blank">Netflix</a></li>
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
<li><a href="https://www.theverge.com" target="_blank">The Verge</a></li>
</ul>
</section>


</div>


</main> <!--JavaScript for navbar-->
<footer> <script>
<h4>© Mahnoor Afteb 2020</h4> var navList = document.getElementById("nav-lists");
</footer> function Show() {
navList.classList.add("_Menus-show");
}

function Hide(){
navList.classList.remove("_Menus-show");
}
</script>
</body> </body>
</html> </html>

0 comments on commit df65cab

Please sign in to comment.